/* Metric-matched fallback for Space Mono.
   Measured in Chrome: Space Mono's advance width is 111.3% of Consolas, so mono text
   reflowed when the webfont swapped in — the article byline went from one line to two
   and pushed the body down 26px (CLS 0.096). Scaling the fallback removes the reflow
   without blocking render. Every mono element here sets an explicit unitless
   line-height, so size-adjust changes width only. Verified on Windows/Consolas;
   platforms without Consolas fall through to the stack below, unchanged. */
@font-face{font-family:'Space Mono Fallback';src:local('Consolas');size-adjust:111.3%}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
/* <picture> is a format switch only; it must never introduce a box of its own. */
picture{display:contents}
:root{
  --ink:#101214;
  --ink-soft:#3f454b;
  --paper:#f4f1e9;
  --paper-deep:#ebe6da;
  --surface:#fffdf8;
  --line:rgba(16,18,20,.16);
  --line-strong:rgba(16,18,20,.34);
  --accent:#b73a2f;
  --focus:#0b63ce;
  --display:'Playfair Display',Georgia,serif;
  --sans:'Outfit','Segoe UI',sans-serif;
  --mono:'Space Mono','Space Mono Fallback','SFMono-Regular',Consolas,monospace;
  --page:clamp(1rem,3vw,3rem);
  --measure:72rem;
  --ease:cubic-bezier(.22,1,.36,1);
}
html{scroll-behavior:smooth;scroll-padding-top:6.5rem;background:var(--paper)}
body{min-width:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration-thickness:.08em;text-underline-offset:.22em}
button{color:inherit}
::selection{background:#f2c94c;color:#101214}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;z-index:3000;left:1rem;top:1rem;transform:translateY(-180%);background:var(--ink);color:#fff;padding:.8rem 1rem;border-radius:.25rem;text-decoration:none;transition:transform .2s ease}
.skip-link:focus{transform:translateY(0)}
.container{width:min(calc(100% - (var(--page) * 2)),var(--measure));margin-inline:auto}
.section{padding:clamp(5rem,10vw,9rem) 0}
.eyebrow{display:flex;align-items:center;gap:.75rem;font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.eyebrow::before{content:'';width:1.8rem;height:1px;background:currentColor}
.section-heading{max-width:13ch;margin-top:1.4rem;font-family:var(--display);font-size:clamp(2.7rem,6.8vw,6.4rem);font-weight:500;line-height:.95;letter-spacing:-.045em}
.section-intro{max-width:43rem;margin-top:1.5rem;color:var(--ink-soft);font-size:clamp(1rem,1.4vw,1.2rem)}
.text-link{display:inline-flex;align-items:center;gap:.45rem;font-weight:650;text-decoration-thickness:1px}
.text-link::after{content:'↗';font-size:.9em;transition:transform .25s ease}
.text-link:hover::after{transform:translate(.15rem,-.15rem)}
.button{display:inline-flex;min-height:3rem;align-items:center;justify-content:center;gap:.55rem;padding:.78rem 1.25rem;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font-size:.76rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.button:hover{transform:translateY(-2px)}
.button--solid{background:var(--ink);color:#fff}
.button--solid:hover{background:#2b2f33}
.button--light{border-color:rgba(255,255,255,.65);color:#fff}
.button--light.button--solid{background:#fff;color:#101214;border-color:#fff}
.button:disabled,.button[aria-disabled='true']{opacity:.56;cursor:wait;transform:none}

/* Header */
.site-header{position:sticky;z-index:1000;top:0;border-bottom:1px solid transparent;background:rgba(244,241,233,.96);transition:border-color .25s ease,box-shadow .25s ease}
.site-header.is-scrolled{border-color:var(--line);box-shadow:0 8px 30px rgba(16,18,20,.05)}
.header-inner{width:min(calc(100% - (var(--page) * 2)),82rem);min-height:5.25rem;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--display);font-weight:600;font-size:1.08rem;text-decoration:none;white-space:nowrap}
.brand-mark{display:grid;width:2rem;height:2rem;place-items:center;border:1px solid var(--line-strong);border-radius:50%;font-family:var(--sans);font-size:.68rem;font-weight:800;letter-spacing:-.04em}
.desktop-nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.7rem)}
.desktop-nav a{position:relative;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.desktop-nav a:not(.button)::after{content:'';position:absolute;right:0;bottom:-.45rem;left:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .25s ease}
.desktop-nav a:hover::after,.desktop-nav a[aria-current='location']::after{transform:scaleX(1);transform-origin:left}
.desktop-nav .button{min-height:2.65rem;padding:.6rem 1rem}
.menu-toggle{display:none;width:3rem;height:3rem;place-items:center;border:1px solid var(--line-strong);border-radius:50%;background:transparent;cursor:pointer}
.menu-icon,.menu-icon::before,.menu-icon::after{display:block;width:1.15rem;height:1px;background:currentColor;transition:transform .25s ease,opacity .25s ease}
.menu-icon{position:relative}
.menu-icon::before,.menu-icon::after{content:'';position:absolute;left:0}
.menu-icon::before{top:-.35rem}.menu-icon::after{top:.35rem}
.menu-toggle[aria-expanded='true'] .menu-icon{background:transparent}
.menu-toggle[aria-expanded='true'] .menu-icon::before{top:0;transform:rotate(45deg)}
.menu-toggle[aria-expanded='true'] .menu-icon::after{top:0;transform:rotate(-45deg)}
.mobile-menu{position:fixed;z-index:950;inset:5.25rem 0 0;background:var(--ink);color:#fff;padding:clamp(2rem,8vw,5rem) var(--page);overflow:auto}
.mobile-menu-inner{min-height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:3rem}
.mobile-menu nav{display:grid;gap:.2rem}
.mobile-menu nav a{padding:.45rem 0;border-bottom:1px solid rgba(255,255,255,.16);font-family:var(--display);font-size:clamp(2.2rem,10vw,4rem);line-height:1.12;text-decoration:none}
.mobile-menu-meta{display:flex;flex-wrap:wrap;gap:1rem 2rem;color:rgba(255,255,255,.72);font-size:.9rem}


/* Opening section: shared alignment, readable type, and a portrait in its own column. */
:root{--header-height:5.5rem;--hero-paper:#f4f4ef;--hero-width:90rem;--hero-gutter:clamp(1.25rem,4.5vw,5.5rem)}
html{scroll-padding-top:calc(var(--header-height) + 1rem)}
.site-header{
  position:sticky;
  z-index:1000;
  top:0;
  border-bottom:1px solid rgba(10,10,10,.12);
  background:#f4f4ef;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.site-header.is-scrolled{background:rgba(244,244,239,.97);border-color:var(--line);box-shadow:none}
.header-inner,.site-header.is-scrolled .header-inner{
  width:min(calc(100% - var(--hero-gutter) * 2),var(--hero-width));
  min-height:calc(var(--header-height) - 1px);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:2rem;
  margin-inline:auto;
}
.brand{justify-self:start;gap:.8rem;font-family:var(--sans);text-decoration:none}
.brand-mark{
  position:relative;
  width:2.65rem;
  height:2.65rem;
  flex-shrink:0;
  border:0;
  border-radius:.35rem;
  background:var(--ink);
  color:var(--hero-paper);
  font-size:.72rem;
  transform:rotate(-6deg);
  transition:transform .25s ease;
}
.brand-mark::after{content:'';position:absolute;top:-.14rem;right:-.14rem;width:.55rem;height:.55rem;border:2px solid var(--hero-paper);border-radius:50%;background:var(--accent)}
.brand:hover .brand-mark{transform:rotate(0)}
.brand-name{display:block;font-size:.94rem;font-weight:600;letter-spacing:-.025em;line-height:1.35}
.brand-role{display:block;margin-top:.18rem;color:var(--ink-soft);font-size:.65rem;font-weight:400;letter-spacing:0}
.desktop-nav{justify-self:center;gap:.3rem}
.desktop-nav a{padding:.65rem .8rem;border-radius:999px;font-size:.84rem;font-weight:500;letter-spacing:0;text-transform:none;transition:background-color .2s ease}
.desktop-nav a:hover,.desktop-nav a[aria-current='location']{background:rgba(10,10,10,.055)}
.desktop-nav a:not(.button)::after{display:none}
.header-cta{justify-self:end;min-height:3rem;gap:1rem;padding:.35rem .4rem .35rem 1.15rem;font-size:.72rem;font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap}
.header-cta-icon{display:grid;width:2.2rem;height:2.2rem;place-items:center;border-radius:50%;background:var(--ink);color:var(--accent);font-size:1rem;transition:transform .25s ease}
.header-cta:hover .header-cta-icon{transform:rotate(45deg)}
.menu-toggle{justify-self:end;width:auto;min-width:3rem;gap:.7rem;padding:.65rem .9rem;border-color:var(--line);border-radius:999px}
.menu-label::before{content:'Menu';font-size:.75rem;font-weight:500}
.menu-toggle[aria-expanded='true'] .menu-label::before{content:'Close'}
.mobile-menu{inset:var(--header-height) 0 0;background:var(--hero-paper);color:var(--ink)}
.mobile-menu nav a{border-color:var(--line);font-family:var(--sans);font-weight:500;letter-spacing:-.05em}
.mobile-menu-meta{color:var(--ink-soft)}

/* One editorial system for the homepage. Existing header/menu primitives are retained above. */
:root{--ink:#151713;--ink-soft:#62675b;--paper:#f4f4ef;--surface:#e8e9e1;--accent:#d8ff33;--line:#d6d9cd;--header-height:4.75rem;--page:clamp(1.25rem,4.5vw,4.5rem);--hero-gutter:var(--page);--measure:82rem;--hero-width:var(--measure);--feedback:180ms;--change:240ms;--entrance:420ms;--ease:cubic-bezier(.22,1,.36,1)}
html{scrollbar-gutter:stable;scroll-padding-top:calc(var(--header-height) + 1rem);background:var(--paper)}
body{background:var(--paper);color:var(--ink);overflow-x:clip}
body.media-open{overflow:hidden}
.site-header,.site-header.is-scrolled{background:var(--paper);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.header-inner{gap:1.5rem}.header-cta{min-height:2.8rem}.brand{min-height:44px}.desktop-nav a{display:inline-flex;align-items:center;min-height:44px}.brand-role{color:var(--ink-soft)}
.button{min-height:3rem;border-radius:999px;padding:.7rem 1.2rem;gap:1.5rem;font-size:.86rem;font-weight:500;letter-spacing:0;text-transform:none;transition:background var(--feedback),color var(--feedback),border-color var(--feedback)}
.button:hover{transform:none;background:#e4e7da}.button--solid{background:var(--accent);border-color:var(--accent);color:var(--ink)}.button--solid:hover{background:#cbea3c;border-color:#cbea3c}
.button span,.work-actions a span,.collection-links a span,.film-play span{transition:transform var(--feedback) var(--ease)}
.button:hover span,.work-actions a:hover span,.collection-links a:hover span,.film-play:hover span{transform:translate(2px,-2px)}
.text-link{gap:.75rem;min-height:44px;align-items:center;font-size:.87rem;font-weight:500}.text-link::after{display:none}
.eyebrow{font-family:var(--mono);font-size:.63rem;line-height:1.5;font-weight:400;letter-spacing:.08em;text-transform:uppercase}.eyebrow::before{display:none}
.section{padding-block:clamp(3.5rem,6vw,6rem)}
.section-heading-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2rem;align-items:end;margin-bottom:2.5rem}
.section-heading-row h2,.about-copy h2,.contact-copy h2{margin-top:.9rem;font-size:clamp(2rem,3.7vw,3.5rem);line-height:1.08;font-weight:500;letter-spacing:-.05em}
.section-heading-row>p,.section-heading-row>div>p:not(.eyebrow){max-width:30rem;color:var(--ink-soft);font-size:1rem;line-height:1.7}
.section-heading-row .text-link{margin-top:.8rem}

/* Hero: a clear introduction, a real portrait, then straight into the work. */
.hero{padding-block:2.75rem 2.5rem}
.hero-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:'title portrait' 'copy portrait' 'actions portrait';column-gap:clamp(3rem,8vw,9rem);align-items:center}
.hero-title-group{grid-area:title;align-self:end}.hero-copy{grid-area:copy;max-width:31rem;margin-top:1.25rem;color:var(--ink-soft);font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.65}
.hero-role{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.2rem;width:fit-content;min-height:44px;margin-bottom:1.3rem;text-decoration:none}
.hero-role-title{font-size:.83rem}.hero-role-title strong{font-weight:600}.hero-role-proof{display:flex;gap:.4rem;font-family:var(--mono);font-size:.58rem;text-decoration:underline;text-underline-offset:.25em}
.hero h1{font-family:var(--sans);font-weight:600;font-size:clamp(3.5rem,6.35vw,5.7rem);letter-spacing:-.065em;line-height:.97}
.hero h1 em{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-.075em;background:linear-gradient(transparent 88%,var(--accent) 88%,var(--accent) 96%,transparent 96%)}
.hero-actions{grid-area:actions;display:flex;align-items:center;flex-wrap:wrap;gap:1.75rem;margin-top:1.5rem;align-self:start}
.hero-portrait{grid-area:portrait;width:min(100%,20rem);justify-self:center;align-self:center;margin:0}
.hero-portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1);border-radius:2px}
.hero-portrait figcaption{margin-top:.75rem;font-size:.8rem;font-weight:500}.hero-portrait figcaption span{display:block;margin-top:.2rem;font-size:.66rem;color:var(--ink-soft);font-weight:400}

/* Selected work — a quiet gallery, with artwork at the centre. */
#work{padding-block:clamp(3rem,6vw,6rem) clamp(4rem,8vw,8rem)}
#work>.container{border-top:1px solid var(--line);padding-top:clamp(2rem,4vw,4rem)}
#work .section-heading-row{grid-template-columns:1.3fr 1fr;align-items:end;margin-bottom:2.5rem;gap:2rem}
#work .eyebrow{font-size:.75rem;letter-spacing:.08em}
#work h2{font-family:var(--display);font-weight:400;font-size:clamp(3rem,6.5vw,6rem);letter-spacing:-.055em;line-height:1.08;margin-top:1rem}
#work .work-title-dot{color:var(--ink)}
#work .section-heading-row>p{max-width:25rem;justify-self:end;font-size:1rem;line-height:1.7}
#work .work-toolbar{margin-bottom:2rem}
#work .work-filters{display:flex;flex-wrap:wrap;gap:.5rem;padding-block:1rem;border-block:1px solid var(--line)}
#work .work-filters button{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;min-height:48px;padding:.7rem 1.35rem;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--ink-soft);font-size:1rem;cursor:pointer;transition:background .2s,color .2s}
#work .work-filters button:hover{background:#e5e6df;color:var(--ink)}
#work .work-filters button[aria-pressed='true']{background:var(--ink);color:var(--paper)}
#work .filter-label{font-weight:500}
#work .filter-count{font-family:var(--mono);font-size:.75rem;opacity:.7;background:transparent;color:inherit;padding:0}
#work .work-toolbar-detail{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.3rem 1rem;padding-top:.9rem}
#work-status{font-size:.875rem;color:var(--ink-soft)}
#work .work-collection-link{display:inline-flex;align-items:center;gap:.8rem;min-height:44px;font-size:.875rem;text-decoration:none}
#work .work-collection-link:hover{text-decoration:underline}
.anchor-alias{display:block;scroll-margin-top:calc(var(--header-height) + 1rem)}
/* --work-track is 60% of the old two-up track ((100% - 2rem) / 2), so every frame is 40% smaller.
   space-between spreads the freed width into the column gaps and keeps the grid flush with the section. */
/* A single row for every category. Three cards sit in view at the old 60% size; the rest
   are reached by scrolling sideways, so no filter ever wraps onto a second row. */
#work .work-grid{
  --work-track:calc(30% - 1.34rem);
  display:grid;
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:var(--work-track);
  justify-content:start;
  align-items:start;
  gap:2rem;
  min-height:14rem;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  padding-bottom:1.1rem;
  overflow-anchor:none;
}
#work .work-grid:focus-visible{outline:3px solid #0b63ce;outline-offset:6px}
#work .work-grid::-webkit-scrollbar{height:6px}
#work .work-grid::-webkit-scrollbar-track{background:var(--surface);border-radius:999px}
#work .work-grid::-webkit-scrollbar-thumb{background:#b9bfae;border-radius:999px}
#work .work-grid::-webkit-scrollbar-thumb:hover{background:var(--ink-soft)}
#work .work-grid{scrollbar-width:thin;scrollbar-color:#b9bfae var(--surface)}
#work .work-card{scroll-snap-align:start}
/* Cards in view: three on a desktop, two on a tablet, one and a bit on a phone so the
   next card is visibly waiting. */
@media(max-width:1100px){#work .work-grid{--work-track:calc(50% - 1rem);gap:1.5rem}}
@media(max-width:640px){#work .work-grid{--work-track:78%;gap:1.25rem}}
@media(prefers-reduced-motion:reduce){#work .work-grid{scroll-behavior:auto}}
#work .work-card{position:relative;min-width:0;display:grid;grid-template-areas:'media' 'caption';scroll-margin-top:calc(var(--header-height) + 1rem)}
#work .work-media{grid-area:media;position:relative;aspect-ratio:4/3;border:1px solid rgba(21,23,19,.08);border-radius:14px;background:#e4e5df;overflow:hidden;isolation:isolate}
#work .work-image-link{position:relative;display:block;width:100%;height:100%;padding:clamp(.75rem,1.8vw,1.7rem)}
#work .work-image-link img{width:100%;height:100%;object-fit:contain;transition:transform .55s var(--ease),opacity .3s;transform:none}
#work .work-card--website .work-image-link{padding:clamp(.6rem,1.5vw,1.35rem)}
#work .work-card--website .work-image-link img{filter:drop-shadow(0 16px 18px rgba(0,0,0,.13))}
#world-nafume .work-media{background:#e7e0d9}
#world-xavik-labs .work-media{background:#dfe3e6}
#world-padma-shree-travels .work-media{background:#e6e5df}
#world-pankhuri .work-media{background:#dce4dd}
#work .work-card--design .work-media{aspect-ratio:1;background:#e8e9e2}
#work .work-card--film .work-media{aspect-ratio:1;background:#20241f}
#work .work-card--film .work-image-link{padding:.9rem}
#work .work-card:hover .work-image-link>img,#work .work-card:focus-within .work-image-link>img{transform:scale(1.025)}
#work .work-image-link .work-secondary{position:absolute;inset:0;width:100%;height:100%;padding:inherit;opacity:0;pointer-events:none}
#work .is-previewing .work-image-link>img:first-child{opacity:0}
#work .is-previewing .work-image-link .work-secondary{opacity:1}
#work .preview-toggle{position:absolute;z-index:2;top:.5rem;right:.5rem;display:flex;align-items:center;gap:.6rem;min-height:44px;padding:.5rem .85rem;border:1px solid rgba(21,23,19,.12);border-radius:999px;background:var(--paper);font-size:.75rem;cursor:pointer}
#work .preview-toggle:hover{background:white}
#work .work-caption{grid-area:caption;padding:1rem .1rem 0}
#work .work-discipline{font-family:var(--sans);font-size:.875rem;line-height:1.5;color:var(--ink-soft)}
#work .work-caption h3{margin-top:.35rem;font-size:clamp(1.65rem,2.6vw,2.3rem);font-weight:500;line-height:1.2;letter-spacing:-.04em}
#work .work-summary{max-width:34rem;margin-top:.55rem;color:var(--ink-soft);font-size:1rem;line-height:1.65}
#work .work-actions{display:flex;flex-wrap:wrap;gap:.2rem 1.25rem;margin-top:.6rem}
#work .work-actions a{display:inline-flex;align-items:center;gap:.65rem;min-height:44px;border-bottom:1px solid var(--line);font-size:.875rem;text-decoration:none}
#work .work-actions a:hover{border-color:var(--ink)}
#work .collection-links{display:flex;flex-wrap:wrap;gap:.4rem 2rem;margin-top:3.5rem;padding-top:1.2rem;border-top:1px solid var(--line);scroll-margin-top:calc(var(--header-height) + 1rem)}
#work .collection-links a{display:inline-flex;align-items:center;gap:1rem;min-height:44px;font-size:.875rem;text-decoration:none}
#work .collection-links a:hover{text-decoration:underline}
@media(max-width:760px){
 #work .section-heading-row{grid-template-columns:1fr;gap:1rem;margin-bottom:1.8rem}
 #work .section-heading-row>p{justify-self:start}
 /* rail track sizes live with the rail rules */
 #work .work-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
 #work .work-filters button{justify-content:space-between;padding:.7rem 1rem;font-size:.9375rem}
 #work .work-image-link,#work .work-card--website .work-image-link{padding:.85rem}
 #work .work-caption{padding-top:.9rem}
 #work .collection-links{gap:.25rem 1.5rem;margin-top:2.5rem}
}
@media(max-width:520px){
 /* rail track sizes live with the rail rules */
 #work .work-media{width:100%}
 #work .work-image-link,#work .work-card--website .work-image-link{padding:.7rem}
 #work .work-card{grid-template-areas:'media' 'preview' 'caption'}
 #work .preview-toggle{grid-area:preview;position:static;justify-self:start;margin-top:.6rem}
}

/* Films use posters only. The video is requested after a deliberate play action. */
.films-section{background:#191d19;color:#f4f4ef}.films-section .eyebrow{color:#b9c4af}.films-section .section-heading-row>div>p:not(.eyebrow){color:#b9c4af}
.film-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:2rem 2.5rem}
.film-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:center;gap:1.25rem;min-width:0}
.film-feature{grid-row:span 2;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:2rem}
.film-poster{position:relative;display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;background:#0c100d}
.film-poster img{width:100%;height:100%;object-fit:contain;transition:transform var(--change)}.film-feature .film-poster{aspect-ratio:9/16}
.film-poster:hover img,.film-poster:focus-visible img{transform:scale(1.02)}
.play-mark{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:3.25rem;height:3.25rem;border:1px solid #fff;border-radius:50%;background:#f4f4ef;color:#151713;font-size:.9rem;transform:translate(-50%,-50%);pointer-events:none}
.film-card h3{margin-top:.65rem;font-size:1.3rem;line-height:1.2;font-weight:500;letter-spacing:-.03em}.film-feature h3{font-size:clamp(1.6rem,2.5vw,2.3rem)}
.film-card>div>p:not(.eyebrow){margin-top:.8rem;color:#b9c4af;font-size:.84rem;line-height:1.7}.film-card .eyebrow{font-size:.54rem}
.film-play{display:inline-flex;align-items:center;gap:1rem;min-height:44px;margin-top:.75rem;font-size:.8rem;color:#d8ff33}
.film-note{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:2rem;border-top:1px solid #394135;padding-top:1rem;font-size:.72rem;color:#b9c4af}.film-note a{display:inline-flex;gap:.5rem;align-items:center;min-height:44px;color:#f4f4ef}

/* Four concise service rows, with real work in view on every device. */
.service-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(8rem,.45fr);align-items:center;gap:2.5rem;padding-block:1.75rem;border-top:1px solid var(--line)}
.service-row-title{display:flex;gap:1.25rem;align-items:baseline}.service-row-title>span{font-family:var(--mono);font-size:.6rem;color:var(--ink-soft)}
.service-row h3{font-size:clamp(1.2rem,2vw,1.7rem);line-height:1.2;letter-spacing:-.035em;font-weight:500}.service-row-copy p{color:var(--ink-soft);font-size:.88rem;line-height:1.7}
.service-row-copy>div{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;margin-top:.6rem}.service-row-copy a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-size:.75rem}
.service-preview{display:block;text-decoration:none}.service-preview img{width:100%;height:7rem;object-fit:contain;background:#e9ebe3;transition:transform var(--change)}.service-row:hover .service-preview img,.service-row:focus-within .service-preview img{transform:scale(1.025)}
.service-preview>span{display:flex;justify-content:space-between;align-items:center;min-height:44px;font-size:.68rem}.all-services{margin-top:1.5rem}

/* Credibility stays personal and compact. */
.about-section{background:#e8ebdf}.about-layout{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.3fr);align-items:center;gap:clamp(2rem,7vw,7rem)}
.about-portrait{max-width:21rem}.about-portrait img{width:100%;height:auto;aspect-ratio:4/4.5;object-fit:cover;filter:grayscale(1)}.about-portrait figcaption{margin-top:.65rem;font-size:.7rem;color:var(--ink-soft)}
.about-copy>p:not(.eyebrow){margin-top:1.3rem;color:#535c49;font-size:1rem;line-height:1.75}.about-links{display:flex;gap:2rem;flex-wrap:wrap;margin-top:1rem}.about-links a{display:inline-flex;align-items:center;gap:.75rem;min-height:44px;font-size:.8rem}
.experience-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:3.5rem;padding-block:1.75rem;border-block:1px solid #c7cfbb}.experience-strip strong{display:block;font-size:clamp(2rem,3.6vw,3rem);font-weight:500;letter-spacing:-.06em}.experience-strip span{font-size:.74rem;color:#626b56}
.past-work{display:grid;grid-template-columns:1fr 3fr;gap:1.5rem;margin-top:1.75rem}.past-work ul{display:flex;flex-wrap:wrap;gap:.7rem 1.8rem;padding:0;list-style:none;font-size:.88rem}
.notes-section{padding-block:2.5rem;border-bottom:1px solid var(--line)}.notes-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:2rem}.notes-layout h2{margin-top:.6rem;font-size:1.35rem;font-weight:500;letter-spacing:-.03em}.notes-layout>div:last-child{display:flex;flex-direction:column}.notes-layout a{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:44px;font-size:.83rem;text-decoration:none}.notes-layout a:hover{text-decoration:underline}

/* Enquiry: the existing mail draft workflow, with fewer distractions. */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(2rem,7vw,7rem)}.contact-copy h2{font-size:clamp(2.5rem,4.6vw,4.2rem)}.contact-copy>p:not(.eyebrow){max-width:29rem;margin-top:1.4rem;color:var(--ink-soft);line-height:1.7}
.contact-direct{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1rem;margin-top:1.5rem}.contact-direct>a{display:inline-flex;gap:.6rem;align-items:center;min-height:44px;font-size:.83rem;overflow-wrap:anywhere}.contact-direct>a:last-child{flex-basis:100%}.copy-email{min-height:44px;padding:.5rem .75rem;border:1px solid var(--line);background:transparent;border-radius:2px;font-size:.7rem;cursor:pointer}.copy-status{flex-basis:100%;font-size:.73rem;min-height:1.5em}.contact-copy .contact-small{font-size:.8rem}
.contact-form{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1.2rem;align-content:start}.field{min-width:0}.field--wide,.contact-form-footer{grid-column:1/-1}.field label,.project-type-options legend{display:block;margin-bottom:.55rem;font-size:.78rem;font-weight:500}.field input,.field select,.field textarea{display:block;width:100%;min-height:48px;border:1px solid #cbd0c1;border-radius:2px;background:#fafbf5;color:var(--ink);padding:.8rem;font-size:.9rem}.field textarea{resize:vertical;min-height:140px}.field-note{margin-top:.5rem;color:var(--ink-soft);font-size:.72rem}.field label .field-note{font-weight:400;margin-left:.4rem}.field-error{color:#a82d21;font-size:.75rem;margin-top:.45rem}.field [aria-invalid='true']{border-color:#a82d21}.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.project-type-options{min-width:0;margin:0;padding:0;border:0}.project-type-options>div{display:flex;flex-wrap:wrap;gap:.4rem}.project-type-options button{min-height:44px;padding:.5rem .8rem;border:1px solid #cbd0c1;border-radius:2px;background:transparent;font-size:.73rem;cursor:pointer;transition:background var(--feedback),border-color var(--feedback)}.project-type-options button[aria-pressed='true']{background:#e0ebbd;border-color:#6f8248}.project-type-options button:hover{border-color:#6f8248}
.contact-form-footer{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.form-status{max-width:19rem;font-size:.74rem;color:var(--ink-soft)}.contact-form-footer .button{background:var(--ink);border-color:var(--ink);color:var(--paper);flex-shrink:0}.contact-form-footer .button:hover{background:#343b2d}
.site-footer{padding-block:2rem;border-top:1px solid var(--line)}.footer-inner{width:min(calc(100% - var(--page)*2),var(--measure));margin-inline:auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem 3rem}.footer-brand{font-size:.95rem;font-weight:600}.footer-note{margin-top:.4rem;color:var(--ink-soft);font-size:.67rem}.footer-links{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;max-width:39rem}.footer-links a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;font-size:.7rem;text-decoration:none}.footer-links a:hover{text-decoration:underline}

/* Native dialog supplies focus trapping, Escape, and background inertness. */
.media-dialog{width:min(68rem,calc(100vw - 2rem));max-width:none;max-height:calc(100svh - 2rem);margin:auto;padding:1.25rem;border:1px solid #434c39;border-radius:3px;background:#f4f4ef;color:var(--ink);overflow:auto}.media-dialog::backdrop{background:rgba(12,16,12,.86)}
.dialog-header{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin-bottom:1rem}.dialog-header h2{font-size:1.3rem;font-weight:500;letter-spacing:-.025em;margin-top:.25rem}.dialog-header button{display:flex;gap:1rem;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:.5rem .75rem;border:1px solid #b9c2ac;background:transparent;cursor:pointer;font-size:.78rem}
.dialog-stage{display:flex;align-items:center;justify-content:center;min-height:12rem;background:#121712}.dialog-stage img,.dialog-stage video{display:block;width:100%;height: min(65svh,42rem);object-fit:contain}.dialog-stage video{max-width:100%}
.dialog-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;margin-top:1rem}.dialog-footer>p{flex-basis:100%;color:var(--ink-soft);font-size:.8rem}.gallery-controls{display:flex;align-items:center;gap:.75rem;font-size:.75rem}.gallery-controls button{width:44px;height:44px;border:1px solid #b9c2ac;background:transparent;cursor:pointer}.gallery-controls button:disabled{opacity:.35;cursor:default}.dialog-footer>a{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;font-size:.8rem}#media-error{color:#a82d21;margin-top:.75rem;font-size:.85rem}

@media (min-width:961px) and (max-height:800px){.hero{padding-block:1.5rem}.hero h1{font-size:clamp(3.5rem,5.7vw,4.7rem)}.hero-portrait{width:16rem}.hero-role{margin-bottom:.8rem}.hero-copy{margin-top:1rem}.hero-actions{margin-top:1.15rem}.selected-work{padding-top:1.8rem}}
@media (max-width:1100px){.service-row{gap:1.5rem}.film-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1.5rem}.film-card{gap:1rem}.film-feature{gap:1.5rem}.contact-form-footer{align-items:flex-start;flex-direction:column}}
@media (max-width:960px){.header-inner,.site-header.is-scrolled .header-inner{grid-template-columns:minmax(0,1fr) auto}.desktop-nav,.header-cta{display:none}.menu-toggle{display:flex;align-items:center;justify-content:center}.hero-layout{column-gap:2rem}.hero h1{font-size:4rem}.hero-portrait{width:16rem}.section-heading-row{grid-template-columns:1.3fr 1fr}.work-grid{gap:2rem 1.25rem}.film-grid{grid-template-columns:1fr 1fr}.film-feature{grid-column:1/-1;grid-row:auto;grid-template-columns:.65fr 1fr}.film-feature .film-poster{max-height:26rem;width:100%}.film-feature .film-poster img{object-fit:contain}.service-row{grid-template-columns:1.1fr 1.1fr .5fr;gap:1rem}.service-row-title{gap:.6rem}.service-row-copy>div{gap:0 .75rem}.about-layout{gap:2.5rem}.past-work{grid-template-columns:1fr}.contact-grid{gap:2rem}.footer-links{max-width:30rem}}
@media (max-width:640px){:root{--header-height:4.5rem;--page:1.25rem}.brand{gap:.65rem}.brand-name{font-size:.88rem}.brand-mark{width:2.4rem;height:2.4rem}.brand-role{font-size:.58rem}.menu-label{display:none}.menu-toggle{width:44px;height:44px;padding:0}.hero{padding-block:1.4rem 1.75rem}.hero-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr);grid-template-areas:'title title' 'copy portrait' 'actions actions';column-gap:1.25rem;row-gap:1.4rem}.hero-role{margin-bottom:1.15rem;gap:.3rem .8rem}.hero-role-title{font-size:.76rem}.hero-role-proof{font-size:.53rem}.hero h1{font-size:clamp(2.7rem,12.8vw,4rem);line-height:.99}.hero-copy{font-size:.91rem;line-height:1.65;margin:0;align-self:center}.hero-portrait{width:100%;margin:0;align-self:center}.hero-portrait figcaption{font-size:.61rem;line-height:1.4}.hero-portrait figcaption span{display:none}.hero-actions{margin:0;gap:1.5rem}.hero-actions .button{font-size:.8rem;padding:.75rem 1rem}.hero-actions .text-link{font-size:.8rem}.section{padding-block:3rem}.selected-work{padding-top:1.25rem}.selected-work>.container{padding-top:1.6rem}.section-heading-row{grid-template-columns:1fr;gap:1rem;margin-bottom:1.5rem}.section-heading-row h2{font-size:2rem}.section-heading-row>p,.section-heading-row>div>p:not(.eyebrow){font-size:.9rem;max-width:32rem}.work-grid{grid-template-columns:1fr;gap:2rem}.work-card.is-featured h3{font-size:1.75rem}.work-card.is-featured .work-summary{font-size:.88rem}.work-caption h3{font-size:1.5rem}.work-more{margin-top:2rem}.collection-links{column-gap:1.25rem}.collection-links a{font-size:.75rem}.film-grid{grid-template-columns:1fr;gap:1.75rem}.film-feature{grid-column:auto;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:1.2rem}.film-card{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}.film-feature h3{font-size:1.55rem}.film-card>div>p:not(.eyebrow){font-size:.78rem}.film-card .eyebrow{font-size:.5rem}.film-feature .film-poster{max-height:none}.film-note{gap:.15rem}.service-row{grid-template-columns:minmax(0,1fr) 6.5rem;gap:1rem;padding-block:1.4rem}.service-row-title{grid-column:1/-1}.service-row h3{font-size:1.4rem}.service-row-copy p{font-size:.82rem}.service-preview img{height:6rem}.service-row-copy a{font-size:.7rem}.service-preview>span{font-size:.6rem}.about-layout{grid-template-columns:1fr;gap:1.75rem}.about-portrait{width:65%;max-width:15rem}.about-copy h2{font-size:2rem}.about-copy>p:not(.eyebrow){font-size:.91rem}.experience-strip{grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2rem}.experience-strip strong{font-size:2.5rem}.past-work ul{gap:.65rem 1.3rem;font-size:.8rem}.notes-layout{grid-template-columns:1fr;gap:1rem}.notes-layout a{font-size:.79rem}.contact-grid{grid-template-columns:1fr;gap:2rem}.contact-copy h2{font-size:2.7rem}.contact-copy>p:not(.eyebrow){font-size:.92rem}.contact-form{gap:1.2rem .9rem}.contact-form-footer{flex-direction:column-reverse;gap:.9rem}.contact-form-footer .button{width:100%}.form-status{max-width:none}.footer-links{max-width:none}.media-dialog{width:calc(100vw - 1rem);padding:.8rem;max-height:calc(100svh - 1rem)}.dialog-header{gap:.8rem}.dialog-header h2{font-size:1.1rem}.dialog-stage img,.dialog-stage video{height:60svh}.dialog-header button{font-size:.7rem;gap:.5rem}}
@media(prefers-reduced-motion:no-preference){@keyframes portfolio-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.hero-title-group{animation:portfolio-enter var(--entrance) var(--ease) both}.hero-copy,.hero-actions{animation:portfolio-enter var(--entrance) 40ms var(--ease) both}.hero-portrait{animation:portfolio-enter var(--entrance) 70ms var(--ease) both}.mobile-menu:not([hidden]){animation:portfolio-enter var(--change) var(--ease) both}.media-dialog[open]{animation:portfolio-enter var(--change) var(--ease) both}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.work-image-link img,.film-poster img,.service-preview img{transform:none!important}}
@media(forced-colors:active){.work-filters button[aria-pressed='true'],.project-type-options button[aria-pressed='true']{outline:2px solid Highlight}.hero h1 em{background:none}.play-mark{border:2px solid ButtonText}}
@media print{.site-header,.site-footer,.hero-actions,.work-toolbar,.work-more,.preview-toggle,.contact-section,.media-dialog{display:none!important}.section{padding-block:2rem}#work .work-grid,.work-grid{display:block;overflow:visible}.work-card{break-inside:avoid;margin-bottom:2rem}.work-card[hidden]{display:block!important}.hero h1{font-size:3rem}}
html:not(.js) .menu-toggle{display:none}
@media(max-width:960px){html:not(.js){--header-height:8rem}html:not(.js) .header-inner,html:not(.js) .site-header.is-scrolled .header-inner{display:flex;flex-wrap:wrap;gap:.25rem;padding-block:.65rem}html:not(.js) .desktop-nav{display:flex;flex-basis:100%;flex-wrap:wrap;gap:.2rem;justify-content:space-between}}

/* Engagements: what a buyer needs to decide, in the homepage's own language. */
.engage-section>.container{border-top:1px solid var(--line);padding-top:clamp(2rem,4vw,4rem)}
.engage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.2vw,2rem);align-items:start}
.engage-card{display:flex;flex-direction:column;min-width:0;padding:clamp(1.25rem,2vw,1.75rem);border:1px solid var(--line);border-radius:.5rem;background:var(--surface)}
.engage-num{font-family:var(--mono);font-size:.65rem;letter-spacing:.09em;color:var(--ink-soft)}
.engage-card h3{margin-top:.7rem;font-size:1.25rem;font-weight:500;line-height:1.25;letter-spacing:-.02em}
.engage-for{margin-top:.7rem;font-size:.9rem;line-height:1.6;color:var(--ink-soft)}
.engage-for b{color:var(--ink);font-weight:500}
.engage-problem{margin-top:.7rem;font-size:.9rem;line-height:1.65;color:var(--ink-soft)}
.engage-detail{margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid var(--line);display:grid;gap:.65rem}
.engage-detail dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.engage-detail dd{margin:.25rem 0 0;font-size:.875rem;line-height:1.6}
.engage-proof{margin-top:auto;padding-top:1.1rem;font-size:.8rem;color:var(--ink-soft)}
.engage-proof a{text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--line)}
.engage-proof a:hover{text-decoration-color:currentColor}

.engage-process,.engage-facts,.engage-faq{margin-top:clamp(2.5rem,4vw,3.5rem);padding-top:clamp(1.5rem,3vw,2.25rem);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:start}
.engage-process-head h3,.engage-facts-head h3,.engage-faq-head h3{margin-top:.8rem;font-size:clamp(1.3rem,1.8vw,1.7rem);font-weight:500;line-height:1.2;letter-spacing:-.03em}
.engage-steps{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;counter-reset:step}
/* Three grid items (::before, h4, p) in two columns: the paragraph must be told to sit
   under the heading, or it drops into the narrow number column and wraps one word per line. */
.engage-steps li{counter-increment:step;display:grid;grid-template-columns:2.25rem minmax(0,1fr);column-gap:1rem;row-gap:.35rem;align-items:baseline}
.engage-steps li::before{content:counter(step,decimal-leading-zero);grid-column:1;font-family:var(--mono);font-size:.7rem;color:var(--ink-soft)}
.engage-steps h4{grid-column:2;font-size:1rem;font-weight:500;line-height:1.3}
.engage-steps p{grid-column:2;max-width:52ch;color:var(--ink-soft);font-size:.9rem;line-height:1.65}
.engage-fact-list{display:grid;gap:0;margin:0}
.engage-fact-list>div{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:1rem;padding-block:.85rem;border-top:1px solid var(--line)}
.engage-fact-list>div:first-child{border-top:0;padding-top:0}
.engage-fact-list dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding-top:.2rem}
.engage-fact-list dd{margin:0;font-size:.9rem;line-height:1.6}
.engage-fact-list dd a{text-decoration:underline;text-underline-offset:.2em}
.engage-faq-list details{border-top:1px solid var(--line)}
.engage-faq-list details:first-child{border-top:0}
.engage-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.25rem;padding-block:.9rem;cursor:pointer;font-weight:500;font-size:.95rem;list-style:none}
.engage-faq-list summary::-webkit-details-marker{display:none}
.engage-faq-list summary::after{content:'+';font-family:var(--mono);color:var(--ink-soft)}
.engage-faq-list details[open] summary::after{content:'–'}
.engage-faq-list details p{padding:0 2rem 1.2rem 0;max-width:58ch;color:var(--ink-soft);font-size:.9rem;line-height:1.7}

@media(max-width:1000px){
  .engage-grid{grid-template-columns:minmax(0,1fr)}
  .engage-process,.engage-facts,.engage-faq{grid-template-columns:minmax(0,1fr);gap:1.25rem}
}
@media(max-width:560px){
  .engage-fact-list>div{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .engage-steps li{grid-template-columns:1.75rem minmax(0,1fr);gap:.75rem}
}