/* ============================================================
   DEPOPAS — depopas.com
   Two modes: .home (amber signature screen) and .sheet (white editorial)
   Plain CSS. No build step, no framework, no JavaScript.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{font-family:"Helvena";src:url("/assets/fonts/Helvena-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Helvena";src:url("/assets/fonts/Helvena-Semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Helvena";src:url("/assets/fonts/Helvena-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Bespoke Serif";src:url("/assets/fonts/BespokeSerif-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --amber:#F7A400;
  --ink:#002027;
  --mist:#E2F0E3;
  --ink-85:rgba(0,32,39,.85);
  --ink-62:rgba(0,32,39,.62);
  --ink-55:rgba(0,32,39,.55);
  --ink-45:rgba(0,32,39,.45);
  --ink-30:rgba(0,32,39,.3);

  --pad:48px;      /* side padding */
  --top:36px;      /* header top padding */
  --mark-h:66px;

  --sans:"Helvena",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:"Bespoke Serif",Georgia,"Times New Roman",serif;
  --text:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--text);font-weight:500;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,p{margin:0}
a{color:inherit;text-decoration:none}
svg{display:block}
img{max-width:100%}
a:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- Page transitions ----------
   The header is a fixed constant on every page (same pixels everywhere), so
   only the CONTENT moves: out in .35s, a short beat, in over .5s. On the home
   page the amber field itself fades up from white on arrival from another
   page of the site (arrivals from outside get the splash instead), and fades
   back to white on leaving. The script at the end of each page adds
   html.leaving and navigates after 400ms. */
@keyframes content-in{from{opacity:0}}
@keyframes content-out{to{opacity:0}}
@keyframes field-in{from{background-color:#fff}}
@keyframes field-out{to{background-color:#fff}}
.sheet .plate,.sheet .foot,.sheet .foot__rule,.sheet .sheet__wordmark,
html.splash-off .lockup{animation:content-in .5s ease-out .1s backwards}
html.splash-off .hero{animation:field-in .5s ease-out backwards}
html.leaving .plate,html.leaving .foot,html.leaving .foot__rule,html.leaving .sheet__wordmark,
html.leaving .lockup{animation:content-out .35s ease-in forwards}
html.leaving .hero{animation:field-out .35s ease-in forwards}
@media (prefers-reduced-motion:reduce){
  .sheet .plate,.sheet .foot,.sheet .foot__rule,.sheet .sheet__wordmark,.lockup,.hero{animation:none!important}
}

/* ---------- Shared chrome ---------- */
.masthead{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:var(--top) var(--pad) 0;flex:none;
}
.mark{width:54px;height:var(--mark-h);flex:none}
.mark svg{width:100%;height:100%}
.nav{display:flex;gap:32px;padding-top:2px}
.nav a{
  font-family:var(--sans);font-weight:600;font-size:14px;line-height:1.05;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
}
.nav a{transition:color .2s ease,opacity .2s ease}
.sheet .nav a:hover,.sheet .nav a:active{color:var(--amber)}
.home .nav a{transition:opacity .2s ease}   /* colour eases with the field, not on its own clock */
.home .nav a:hover,.home .nav a:active{opacity:.55}

.wordmark{width:100%}
.wordmark svg{width:100%;height:auto}

/* ============================================================
   HOME — amber signature screen
   100svh is the SMALL viewport (mobile toolbars showing), so the screen is
   never taller than what the phone actually displays: nothing to scroll,
   and the header can never load out of view.
   ============================================================ */
body.home{background:var(--mist);color:var(--ink)}
.hero{
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  background:var(--field,var(--mist));color:var(--ink-live,var(--ink));
  transition:background-color 2.2s ease-in-out,color 2.2s ease-in-out;
}
@media (prefers-reduced-motion:reduce){.hero{transition:none}}
.hero__void{flex:1 1 auto;min-height:0}

.lockup{flex:none}
.lockup__row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  padding:0 var(--pad);
}
.kicker{font-family:var(--serif);font-size:30px;line-height:1.15;letter-spacing:-.07em;width:240px}
.lede{font-family:var(--serif);font-size:30px;line-height:1.2;letter-spacing:-.07em;text-align:right;width:445px}
.nb{white-space:nowrap}
.lockup__wordmark{padding:30px var(--pad) 56px}
.tagline{display:none}

/* ---------- Splash (home only) ----------
   Default state: a plain dark field, nothing in it (that is what a cold
   launch shows until it reloads). .is-warm plays the sequence: mark fades in
   on the dark field, the field crossfades to amber while the mark turns ink,
   then the whole thing dissolves into the page. ~3.6s. */
.splash{
  position:fixed;inset:0;z-index:1000;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.splash__mark{width:68px;color:var(--mist);opacity:0}
.splash__mark svg{width:100%;height:auto}
html.splash-play .splash{animation:splash-field 2.6s ease forwards}
html.splash-play .splash__mark{animation:splash-mark 2.6s ease forwards}
html.splash-off .splash{display:none}
@keyframes splash-field{
  0%,20%{background:#002027;opacity:1;visibility:visible}
  62%,76%{background:#E2F0E3;opacity:1;visibility:visible}
  100%{background:#E2F0E3;opacity:0;visibility:hidden}
}
@keyframes splash-mark{
  0%{opacity:0;color:#E2F0E3}
  17%,30%{opacity:1;color:#E2F0E3}
  62%,70%{opacity:1;color:#002027}
  88%,100%{opacity:0;color:#002027}
}
@media (prefers-reduced-motion:reduce){
  html.splash-play .splash,html.splash-play .splash__mark{animation-duration:.5s}
}

/* ============================================================
   SHEET — white editorial pages (Services, Contact)
   ============================================================ */
body.sheet{background:#fff;color:var(--ink)}
.sheet__inner{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.plate{flex:1 1 auto;padding:0 var(--pad);display:flex;flex-direction:column;justify-content:flex-end}
.plate::after{content:"";display:block;height:56px;flex:none}

/* H1 and the section eyebrow share a bottom edge. min-height locks the
   rule position so Services and Contact never shift against each other. */
.head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  margin-top:88px;min-height:192px;flex:none;
}
.statement{font-family:var(--serif);font-weight:400;font-size:56px;line-height:1.14;letter-spacing:-.015em}
.statement--wide{max-width:780px}
.statement--narrow{max-width:740px}

.eyebrow{
  font-family:var(--text);font-weight:600;font-size:12px;line-height:16px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-55);
  text-align:right;flex:none;
}
.standfirst{
  font-family:var(--text);font-weight:500;font-size:17px;line-height:28px;
  letter-spacing:-.01em;color:var(--ink-85);max-width:550px;
  margin-top:52px;min-height:56px;flex:none;
}
.rule{border:0;height:1px;background:var(--ink);margin:40px 0 0;flex:none}

.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding-top:41px;flex:none}
.col__head{display:flex;align-items:baseline;gap:10px}
.col__num{font-family:var(--serif);font-size:26px;line-height:1;color:var(--ink-30)}
.col__label,.col__solo{
  font-family:var(--text);font-weight:600;font-size:12px;line-height:16px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-55);
}
.col__lead{font-family:var(--text);font-weight:500;font-size:17px;line-height:28px;letter-spacing:-.01em;color:var(--ink);margin-top:14px}
.col__body{font-family:var(--text);font-weight:500;font-size:17px;line-height:29px;letter-spacing:-.01em;color:var(--ink-62);margin-top:6px}
.col__link{
  font-family:var(--text);font-weight:500;font-size:17px;line-height:28px;
  letter-spacing:-.01em;color:var(--ink);display:block;width:max-content;
}
.col__link--first{margin-top:14px}
.col__link{transition:color .2s ease}
.col__link:hover{color:var(--amber)}

.foot{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:0 var(--pad) 28px;flex:none;
}
.foot span,.foot a{
  font-family:var(--sans);font-weight:500;font-size:11px;line-height:1.4;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);
}
.foot a{transition:color .2s ease}
.foot a:hover{color:var(--amber)}
.foot__rule{display:none}
.sheet__wordmark{display:none}

/* ============================================================
   Tablet
   ============================================================ */
@media (max-width:1199px){
  :root{--pad:40px}
  .statement{font-size:44px}
  .statement--wide,.statement--narrow{max-width:620px}
  .head{margin-top:96px;min-height:150px}
  .lede{width:min(445px,52%)}
  .kicker{width:min(240px,34%)}
  .cols{grid-template-columns:repeat(2,1fr);gap:40px 40px;row-gap:44px}
}

/* ============================================================
   Phone
   ============================================================ */
@media (max-width:809px){
  :root{--pad:20px;--top:24px;--mark-h:46px}
  .mark{width:38px}
  .nav{gap:18px}

  /* Home — NO viewport units on phones. iOS resolves 100svh/100vh to the
     toolbar-hidden height when a page is opened from another app, which makes
     the document taller than the screen and loads it scrolled with the nav
     off the top. A fixed spacer instead: the page is shorter than any phone
     screen, so it cannot scroll, so the nav cannot move. */
  /* The whole screen is one fixed box: header at the top, lockup at the
     bottom, spacer between. The document itself is empty, so there is
     nothing for the browser to drag — the nav cannot scroll off. The canvas
     behind it is ink so a cold launch (solid dark splash) is uniform even
     while Chrome for iOS has the box mis-placed. */
  body.home{background:var(--ink)}
  .hero{
    position:fixed;inset:0;min-height:0;background:var(--field,var(--mist));
    display:flex;flex-direction:column;overflow:auto;overscroll-behavior:none;
  }
  .hero__void{display:block;flex:1 1 auto;min-height:0}
  .lockup{position:static}
  .sheet__inner{min-height:0}
  .lockup__row{display:block;padding:0 var(--pad)}
  .kicker{display:none}
  .lede{text-align:left;width:100%;font-size:23px;line-height:1.24}
  .lockup__wordmark{padding:16px var(--pad) 0}
  .tagline{
    display:block;padding:24px var(--pad) 36px;
    font-family:var(--sans);font-weight:600;font-size:13px;line-height:1.3;
    letter-spacing:.14em;text-transform:uppercase;
  }

  /* Sheet — eyebrow moves above the headline */
  .head{
    display:flex;flex-direction:column-reverse;align-items:stretch;
    margin-top:81px;min-height:0;gap:40px;
  }
  .statement{font-size:30px;line-height:1.14;max-width:none}
  .eyebrow{text-align:left}
  .standfirst{font-size:19px;line-height:29px;max-width:none;margin-top:55px;min-height:0}
  .cols{grid-template-columns:1fr;gap:38px;padding-bottom:56px}
  .plate{justify-content:flex-start}
  .plate::after{display:none}
  .col__num{font-size:22px}
  .foot{flex-direction:column;align-items:flex-start;gap:8px;padding-top:29px;padding-bottom:25px}
  .foot__rule{display:block;border:0;height:1px;background:var(--ink);margin:0 var(--pad)}
  .sheet__wordmark{display:block;padding:0 15px 20px;color:var(--ink)}
}


/* Editorial interior. Existing homepage rules and assets remain above. */
:root{--muted:#607177;--hairline:#c7d0d2}
.sheet{font-weight:400}
.sheet__inner{min-height:100svh}
.nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
.nav{gap:28px}.nav a{font-size:12px;letter-spacing:.13em}
.menu-toggle{display:none}
.skip-link{position:fixed;left:24px;top:-100px;padding:10px;background:white;color:var(--ink);z-index:2000}.skip-link:focus{top:10px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.page{padding:0 var(--pad);margin-top:auto;padding-top:48px;padding-bottom:32px}
.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:28px}
.page-heading .eyebrow{text-align:left;margin:0 0 20px;color:var(--muted);font-size:10px;letter-spacing:.15em}
.page h1{font-family:var(--serif);font-weight:400;font-size:clamp(42px,4.2vw,68px);line-height:1.06;letter-spacing:-.025em;margin:0}
.byline{font-family:var(--serif);font-size:17px;line-height:1.45;color:var(--muted);text-align:right}
h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;margin:0}
.page h2{font-size:clamp(23px,2vw,30px);line-height:1.14;margin:0 0 18px;max-width:24ch}
.page p{font-size:15px;line-height:1.6;letter-spacing:-.012em;margin:0 0 14px;color:#334c52}
.page p.eyebrow,.page p.section-number{font-size:10px;line-height:1.4;font-family:var(--text);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.page .standfirst{max-width:760px;font-size:17px;line-height:1.5;margin:0 0 28px;min-height:0;color:#334c52}
.belief-columns,.service-grid,.about-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;border-top:1px solid var(--ink);padding-top:26px}
.belief-columns section+section,.service-grid>section+section,.service-grid>aside,.about-grid>section+section,.experience{border-left:1px solid var(--hairline);padding-left:32px}
.page-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--hairline);margin-top:24px;padding-top:17px;gap:24px;font-size:12px;line-height:1.4}
.page-bottom a,.text-link{font-weight:500}.page-bottom a:hover,.text-link:hover{text-decoration:underline;text-underline-offset:4px}
.small-note{color:var(--muted);font-size:11px}
.page p.service-detail{font-size:11px;font-weight:500;color:var(--ink);margin:18px 0 0}
.service-grid{grid-template-columns:1fr 1fr .85fr}
.page p.section-number{margin:0 0 18px}
.about-grid{grid-template-columns:1.1fr 1.1fr .7fr}
.credential{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0 0 24px}
.credential img{object-fit:contain;object-position:left center;max-width:150px;max-height:48px;width:auto;filter:grayscale(1);opacity:.85}
.credential span{font-size:10px;line-height:1.4;color:var(--muted)}
.contact-page .page{padding-bottom:65px}.contact-page h1{font-size:clamp(48px,5vw,76px)}
.contact-page .page-heading{margin-bottom:42px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);padding-top:30px;gap:40px;margin-top:42px}.contact-email{font-family:var(--serif);font-size:clamp(24px,2.5vw,38px);letter-spacing:-.02em}.text-link{display:block;font-size:15px;margin:0 0 12px}
.foot{padding-bottom:24px}.foot span,.foot a{color:#607177;font-size:9px;letter-spacing:.1em}.preview-label{opacity:.8}
.archive-page .page{max-width:none;width:100%;align-self:stretch}
.archive-page .page-heading{margin-bottom:24px}
.archive-list{border-top:1px solid var(--ink)}
.archive-row{display:grid;grid-template-columns:170px 1fr 24px;gap:24px;align-items:center;padding:16px 0;border-bottom:1px solid var(--hairline)}
.archive-row .eyebrow{text-align:left;font-size:9px;color:var(--muted)}
.archive-title{display:block;font-family:var(--serif);font-size:clamp(21px,1.9vw,28px);letter-spacing:-.015em;line-height:1.15}
.archive-description{display:block;font-size:12px;color:var(--muted);line-height:1.45;margin-top:5px}
.archive-arrow{font-size:18px;transition:transform .2s}.archive-row:hover .archive-arrow{transform:translate(3px,-3px)}.archive-row:hover .archive-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.pager{display:flex;gap:20px;align-items:center;font-size:11px;font-weight:500}.pager button{padding:7px 0}.pager button:disabled{opacity:.3;cursor:default}.pager output{font-variant-numeric:tabular-nums;font-size:10px;color:var(--muted)}
.archive-note{font-size:10px!important;line-height:1.5!important;max-width:600px;margin:0!important;color:var(--muted)!important}
.article-page .page{margin:32px auto 0;max-width:1400px;width:100%;flex:1;display:flex;flex-direction:column;min-height:0;padding-top:0;padding-bottom:24px}
.reader-head{padding-bottom:20px;border-bottom:1px solid var(--ink);margin-bottom:22px}
.reader-head .eyebrow{font-size:9px!important;text-align:left;line-height:1.5;margin:14px 0 12px!important}
.reader-head h1{font-size:clamp(30px,3.2vw,48px);line-height:1.08;max-width:1100px;margin-bottom:12px}
.back{font-size:11px;font-weight:500;display:inline-block}
.page .article-meta{font-size:10px;line-height:1.5;margin:0;color:var(--muted)}
.article-meta a{text-decoration:underline;text-underline-offset:3px}
.reader-window{min-height:0;flex:1;overflow:hidden}
.article-body{column-count:2;column-gap:56px;column-fill:auto;height:100%;orphans:3;widows:3;transition:transform .18s ease}
.page .article-body p,.page .article-body li{font-size:15px;line-height:1.62;color:#243f46;letter-spacing:-.012em}
.page .article-body h2{font-size:27px;line-height:1.17;margin:22px 0 12px;break-after:avoid;max-width:none}
.page .article-body h3{font-size:21px;line-height:1.2;margin:20px 0 10px;break-after:avoid}
.page .article-body h2:first-child{margin-top:0}
.article-body a{text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.article-body img{max-height:240px;max-width:100%;object-fit:contain;break-inside:avoid}
.article-body figure{margin:12px 0;break-inside:avoid}.article-body figcaption{font-size:11px;color:var(--muted);line-height:1.45}
.article-body ul,.article-body ol{padding-left:22px;margin:0 0 18px}.article-body li{margin-bottom:8px}
.article-body blockquote{margin:16px 0;padding-left:18px;border-left:1px solid var(--ink)}
.article-body table{width:100%;font-size:12px;border-collapse:collapse;break-inside:avoid}.article-body td,.article-body th{border:1px solid var(--hairline);padding:6px;overflow-wrap:anywhere}
.article-body pre{white-space:pre-wrap;font-size:12px}.article-body hr{border:0;border-top:1px solid var(--hairline);margin:24px 0}
.article-page .page-bottom{margin-top:20px;flex:none}
.work-page .reader-head h1{font-size:48px}.work-page .article-body{column-count:1}.work-item{break-before:column;break-inside:avoid;display:grid;grid-template-columns:1fr 1fr;gap:32px;height:100%;align-items:start}.work-item:first-child{break-before:auto}.work-item img{max-height:100%!important;width:100%;height:100%;object-fit:contain!important;object-position:top}.work-item .work-role{font-size:12px!important}.work-item .section-number{font-size:10px!important}.work-item h2{margin-top:0!important}.work-item a{font-size:12px}
@media(min-width:1000px) and (min-height:650px){
 .sheet__inner{height:100svh;min-height:0}.sheet .page{flex:0 1 auto}.sheet .foot{margin-top:0}.sheet .masthead{margin-bottom:auto}
 .article-page .page{flex:1}.article-page .masthead{margin-bottom:0}
 .archive-row[hidden]{display:none}
}
@media(min-width:1000px) and (max-height:850px){
 .sheet{--pad:40px;--top:26px;--mark-h:54px}.sheet .mark{width:45px}.page{padding-top:26px;padding-bottom:20px}.page-heading{margin-bottom:20px}.page .page-heading .eyebrow{margin-bottom:14px}.page h1{font-size:48px}.page h2{font-size:24px;margin-bottom:14px}.page p{font-size:14px;line-height:1.53;margin-bottom:12px}.belief-columns,.service-grid,.about-grid{gap:30px;padding-top:21px}.belief-columns section+section,.service-grid>section+section,.service-grid>aside,.about-grid>section+section,.experience{padding-left:25px}.page .standfirst{font-size:15px;margin-bottom:22px}.page p.section-number{margin-bottom:14px}.page-bottom{margin-top:18px;padding-top:13px}.foot{padding-bottom:20px}.credential{margin-bottom:18px}.credential img{max-height:40px}.archive-row{padding:13px 0}.archive-title{font-size:23px}.article-page .page{margin-top:24px}.reader-head{margin-bottom:18px;padding-bottom:16px}.reader-head h1{font-size:36px}.page .article-body p,.page .article-body li{font-size:14px;line-height:1.6}
}
@media(min-width:1000px) and (max-height:720px){
 .page h1{font-size:41px}.page-heading{margin-bottom:18px}.page h2{font-size:22px}.page p{font-size:13px;line-height:1.5}.page .standfirst{font-size:14px}.page{padding-top:22px;padding-bottom:18px}.page-bottom{margin-top:14px;padding-top:10px}.archive-description{font-size:11px}.archive-row{padding:10px 0}.archive-title{font-size:21px}
}
@media(max-width:999px),(max-height:649px){
 .sheet__inner{min-height:100svh;height:auto}.page{margin-top:40px;padding-top:0}.belief-columns,.service-grid,.about-grid{grid-template-columns:1fr 1fr}.belief-columns section:last-child,.client-fit,.experience{grid-column:1/-1;border-left:0!important;padding-left:0!important;border-top:1px solid var(--hairline);padding-top:24px}.experience{display:flex;gap:32px;flex-wrap:wrap}.experience>p{width:100%}.article-body{columns:auto;height:auto;transform:none!important}.reader-window{overflow:visible}.article-page .page{display:block;margin-top:50px}.article-page .pager{display:none}.article-body img{max-height:none}.archive-row[hidden]{display:grid}.archive-page .pager{display:none}.foot{margin-top:auto;padding-top:25px}.work-item{display:block;height:auto;break-before:auto;margin-bottom:60px}.work-item img{margin-top:20px;max-height:none!important}
}
@media(max-width:809px){
 .nav{gap:16px}.nav a{font-size:10px}.home .nav{padding-top:4px}.home .lockup__row .lede{letter-spacing:-.04em}.home h1{margin:0}
 .page{margin-top:58px;padding-bottom:30px}.page-heading{gap:20px;margin-bottom:28px}.page h1{font-size:40px;line-height:1.08}.page .page-heading .eyebrow{margin-bottom:23px}.byline{display:none}.page h2{font-size:27px}.page p{font-size:16px;line-height:1.65}.belief-columns,.service-grid,.about-grid{grid-template-columns:1fr;gap:28px;padding-top:28px}.belief-columns section+section,.service-grid>section+section,.service-grid>aside,.about-grid>section+section,.experience{border-left:0;padding-left:0;border-top:1px solid var(--hairline);padding-top:28px}.page .standfirst{font-size:17px;margin-bottom:30px}.desktop-break{display:none}.page-bottom{align-items:flex-start;font-size:12px;gap:24px}.page-bottom .small-note{display:none}.experience{gap:24px}.credential img{max-width:135px}.foot{flex-direction:row;align-items:center;padding-top:20px;border-top:1px solid var(--hairline);margin:0 var(--pad);padding-left:0;padding-right:0}.footer-city{display:none}.foot span,.foot a{font-size:8px}.contact-page .page{padding-bottom:65px}.contact-page h1{font-size:42px}.contact-grid{grid-template-columns:1fr;gap:24px}.contact-email{font-size:29px}.archive-row{grid-template-columns:1fr 20px;gap:8px;padding:21px 0}.archive-row>.eyebrow{grid-column:1/-1}.archive-title{font-size:25px}.archive-description{font-size:13px;line-height:1.5}.archive-page .page-bottom{display:block}.reader-head h1{font-size:34px}.article-page .page{margin-top:55px}.page .article-body p,.page .article-body li{font-size:17px;line-height:1.7}.reader-head .eyebrow{margin-top:25px!important}.reader-head{margin-bottom:30px;padding-bottom:24px}.page .article-body h2{font-size:29px}.page .article-meta{font-size:11px}.work-page .reader-head h1{font-size:40px}
}
@media(max-width:540px){
 .menu-toggle{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:5px 0;z-index:101}
 .nav{display:none;position:absolute;top:84px;right:20px;left:20px;background:var(--mist);color:var(--ink);padding:24px;z-index:100;box-shadow:0 4px 20px #0020270d;flex-direction:column;gap:22px}.nav.is-open{display:flex}.nav a{font-size:14px}.home .nav{padding:24px}.home .masthead{position:relative}.experience{display:grid;grid-template-columns:1fr 1fr}.experience>p{grid-column:1/-1}.credential{margin:0}.contact-email{font-size:27px}
}
@media(prefers-reduced-motion:reduce){.article-body{transition:none}}

.beliefs-page .page-bottom{justify-content:flex-end}
@media(min-width:1000px) and (min-height:650px){.work-item{grid-template-rows:minmax(0,1fr)}.work-item img{height:var(--reader-height);max-height:var(--reader-height)!important;min-height:0}.archive-list{min-height:380px}}

@media(min-width:1500px) and (min-height:851px){.page p{font-size:clamp(15px,1.05vw,18px)}}
@media(min-width:1000px) and (max-width:1199px) and (min-height:650px){
 .sheet{--pad:32px}.page{padding-top:20px;padding-bottom:18px}.page h1{font-size:42px}.page h2{font-size:22px}.page p{font-size:13px;line-height:1.5}.page .standfirst{font-size:14px}.belief-columns,.service-grid,.about-grid{gap:24px;padding-top:20px}.belief-columns section+section,.service-grid>section+section,.service-grid>aside,.about-grid>section+section,.experience{padding-left:20px}.page-heading{margin-bottom:18px}.page-bottom{margin-top:15px}
}

/* Editorial finish: one ink, a clear rule hierarchy, optical type spacing. */
:root{--body-ink:#203d43;--muted:#496168;--hairline:rgba(0,32,39,.24);--cta-field:#e2f0e3;--cta-ink:#002027}
.sheet{font-weight:450;font-kerning:normal;font-variant-ligatures:common-ligatures}
.nav{align-items:center;gap:27px;padding-top:0;margin-top:-9px}
.nav a{font-size:11px;letter-spacing:.12em;padding:10px 0}
.nav a.contact-cta{display:inline-flex;align-items:center;gap:16px;padding:13px 17px;background:var(--cta-field);color:var(--cta-ink);border:1px solid transparent;transition:background-color 1.4s ease,color 1.4s ease,border-color .2s;text-decoration:none}
.nav .contact-cta span{font-family:var(--text);font-size:16px;line-height:.75;font-weight:450;letter-spacing:0}
.nav a.contact-cta:hover{border-color:currentColor;opacity:1}
.nav a.contact-cta[aria-current=page]{border-color:currentColor}
.sheet .nav a:not(.contact-cta):hover{color:var(--ink);text-decoration:underline;text-underline-offset:7px}
.home .nav a.contact-cta{background:var(--ink-live,var(--ink));color:var(--field,var(--mist));transition:background-color 1.4s ease,color 1.4s ease}
.page h1{letter-spacing:-.06em;text-wrap:balance}
.page h2,.archive-title{letter-spacing:-.045em;text-wrap:balance}
.page h3{letter-spacing:-.035em;text-wrap:balance}
.page p,.archive-description,.page li{text-wrap:pretty}
.page p,.page .standfirst,.page .article-body p,.page .article-body li{color:var(--body-ink);font-weight:450;letter-spacing:-.018em}
.page .byline{flex:none;white-space:nowrap;font-family:var(--serif);font-size:17px;font-weight:400;line-height:1.3;letter-spacing:-.035em;color:var(--body-ink);margin:0 0 6px}
.page p.eyebrow,.page p.section-number,.archive-row .eyebrow{color:var(--ink);font-family:var(--sans);font-weight:600;letter-spacing:.14em}
.page-heading .eyebrow{color:var(--ink)}
.page .standfirst{font-weight:500;line-height:1.55}
.belief-columns,.service-grid,.about-grid,.contact-grid,.archive-list,.reader-head{border-top-width:1.5px}
.reader-head{border-top:0;border-bottom-width:1.5px}
.page-bottom{border-top:1px solid var(--ink);font-size:12px}
.page-bottom a{font-weight:550}
.page p.section-number{font-size:10px;margin-bottom:17px}
.belief-columns h2{max-width:25ch;min-height:2.28em}
.page p.service-detail{border-top:1px solid var(--hairline);padding-top:12px;font-size:10px;line-height:1.5;font-weight:550}
.credential img{opacity:1}.credential span{color:var(--muted);font-weight:500}
.contact-intro span{display:block}
.contact-email{letter-spacing:-.055em;white-space:nowrap}
.contact-email:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
.contact-page .page-heading{margin-bottom:32px}
.foot span,.foot a{color:var(--muted);font-weight:550;letter-spacing:.08em}
.foot a{color:var(--ink)}
.archive-description{color:var(--muted);font-weight:450}
.archive-row{grid-template-columns:165px 1fr 24px;padding:19px 0}
.archive-row .eyebrow{font-size:9px;line-height:1.65;max-width:145px}
.archive-row:last-child{border-bottom:0}
.archive-page .archive-list{min-height:372px}
.archive-page .page-bottom{margin-top:0}
.archive-page .archive-title{font-size:clamp(23px,2vw,31px)}
.archive-note{max-width:530px}
.work-index .archive-description{max-width:65ch}
.work-index .archive-row{min-height:93px}
.project-page .page{display:flex;flex-direction:column;flex:1;min-height:0;padding-top:46px;padding-bottom:28px;margin-top:0}
.project-page .masthead{margin-bottom:0}
.project-heading{border-bottom:1.5px solid var(--ink);padding-bottom:25px;margin-bottom:25px}
.project-heading h1{font-size:clamp(36px,3.5vw,54px);max-width:28ch}
.project-heading .back{white-space:nowrap;margin-bottom:6px}
.project-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;flex:1;min-height:0}
.project-copy{max-width:500px}
.page .project-description{font-size:clamp(16px,1.2vw,19px);line-height:1.6;margin-bottom:28px}
.role-block{border-top:1px solid var(--hairline);padding-top:16px;margin-top:24px}
.page .role-block p:not(.section-number),.page p.project-credit{font-size:12px;line-height:1.6}
.page .role-block p.section-number{margin-bottom:8px}
.project-source{display:inline-block;font-size:12px;font-weight:550;border-bottom:1px solid;padding:4px 0;margin-top:5px}
.project-credit a{text-decoration:underline;text-underline-offset:3px}
.project-visual{margin:0;min-height:0;height:100%;display:flex;align-items:flex-start;justify-content:center;background:#f5f6f3}
.project-visual img{width:100%;height:100%;object-fit:contain;object-position:top center;min-height:0}
.project-note{padding:35px;border-left:1px solid var(--hairline);display:flex;flex-direction:column;justify-content:center}
.page .project-note>p:last-child{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.7vw,42px);letter-spacing:-.045em;line-height:1.15;max-width:22ch;text-wrap:balance;color:var(--ink)}
.project-count{font-size:10px;font-variant-numeric:tabular-nums;color:var(--muted)}
@media(min-width:1000px) and (max-height:850px){
 .nav{gap:23px}.page p.section-number{margin-bottom:12px}.belief-columns h2{font-size:24px}.belief-columns{gap:28px}.page .byline{font-size:16px}.page p.service-detail{margin-top:13px;padding-top:10px}.archive-row{padding:14px 0}.archive-page .archive-title{font-size:24px}.archive-page .archive-list{min-height:340px}.work-index .archive-row{min-height:85px}.project-page .page{padding-top:26px;padding-bottom:20px}.project-heading{padding-bottom:18px;margin-bottom:20px}.project-heading h1{font-size:40px}.project-grid{gap:38px}.page .project-description{font-size:15px;line-height:1.55;margin-bottom:20px}.role-block{margin-top:16px;padding-top:13px}.project-note{padding:25px}
}
@media(min-width:1000px) and (max-height:720px){
 .belief-columns h2{font-size:22px}.page p.section-number{margin-bottom:10px}.archive-page .archive-list{min-height:304px}.work-index .archive-row{min-height:76px}.archive-page .archive-title{font-size:22px}.project-heading h1{font-size:36px}.project-page .page{padding-top:18px}.page .project-description{font-size:14px}.page p.project-credit{font-size:11px}
}
@media(min-width:1000px) and (max-width:1199px){.nav{gap:18px}.nav a{font-size:10px}.nav a.contact-cta{padding:12px 14px}.belief-columns h2{font-size:22px}.page p.section-number{font-size:9px}.project-grid{gap:28px}.page .project-description{font-size:14px}}
@media(max-width:999px),(max-height:649px){
 .project-page .page{display:block;margin-top:45px;padding-top:0}.project-grid{display:block}.project-copy{max-width:680px}.project-visual{height:auto;margin-top:30px}.project-visual img{height:auto;max-height:700px}.project-note{margin-top:28px;min-height:220px}.project-page .page-bottom{margin-top:30px}.archive-list{min-height:0!important}.project-heading h1{max-width:28ch}.belief-columns h2{min-height:0}
}
@media(max-width:809px){
 .nav{gap:14px}.nav a{font-size:9px}.nav a.contact-cta{gap:10px;padding:10px 12px}.nav{margin-top:-5px}.page .byline{display:none}.page .section-number{font-size:10px}.page h1{letter-spacing:-.052em}.page h2{letter-spacing:-.04em}.archive-row{grid-template-columns:1fr 20px;padding:20px 0}.archive-row .eyebrow{max-width:none;font-size:9px}.archive-page .archive-title{font-size:26px}.project-heading{display:block}.project-heading .back{display:inline-block;margin-top:18px}.project-heading h1{font-size:38px}.page .project-description{font-size:17px}.page .role-block p:not(.section-number),.page p.project-credit{font-size:13px}.contact-intro span+span{margin-top:10px}.contact-email{font-size:clamp(25px,5.7vw,38px)}
}
@media(max-width:680px){
 .menu-toggle{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:5px 0;z-index:101}.nav{display:none;position:absolute;top:84px;right:20px;left:20px;background:var(--mist);color:var(--ink);padding:24px;z-index:100;flex-direction:column;align-items:stretch;gap:8px;margin-top:0;box-shadow:0 4px 20px #0020270d}.nav.is-open{display:flex}.nav a{font-size:13px;padding:10px 0}.nav a.contact-cta{justify-content:space-between;margin-top:10px;padding:15px}.home .nav{padding:24px}.home .masthead{position:relative}.project-page .page-bottom{gap:8px;font-size:11px}.project-note{padding:25px 0 25px 25px}
}
@media(prefers-reduced-motion:reduce){.nav a.contact-cta{transition:none!important}}
@media(min-width:810px){.service-grid>section{display:flex;flex-direction:column}.service-grid h2{min-height:2.28em}.page .service-grid p.service-detail{margin-top:auto}.service-grid>section>p:nth-last-child(2){margin-bottom:18px}}
.project-image-link{display:block;position:relative;width:100%;height:100%;min-height:0}
.project-image-link>span{position:absolute;right:10px;bottom:10px;background:white;color:var(--ink);padding:9px 12px;font-family:var(--sans);font-size:10px;letter-spacing:.06em;border:1px solid var(--hairline)}
.project-image-link:hover>span{background:var(--ink);color:white}
@media(max-width:360px){.archive-page .archive-title{font-size:23px}}
@media(min-width:1000px) and (min-height:650px){.article-body{column-rule:1px solid var(--hairline)}}
@media(max-width:360px){.project-heading h1{font-size:34px}}

/* September refinement: print-like ink, steady masthead, natural reading. */
html{scrollbar-gutter:stable}
.sheet{--ink:#111c20;--body-ink:#202a2e;--muted:#465054;--hairline:rgba(17,28,32,.42)}
/* Home and Contact share a colour field; their links bookend the white pages.
   All colours use the existing session clock, so navigation never resets them. */
.sheet .masthead .mark,html.menu-open .sheet .masthead .mark{background:var(--field,#E2F0E3);color:var(--ink-live,#002027)}
body.contact-page{
 --ink:var(--ink-live,#002027);
 --body-ink:var(--ink-live,#002027);
 --muted:var(--ink-live,#002027);
 --hairline:currentColor;
 background:var(--field,#E2F0E3);color:var(--ink);
}
.contact-page .foot span,.contact-page .foot a{color:var(--ink)}
@media(min-width:681px){
 .contact-page .nav a.contact-cta{background:var(--ink-live,#002027);color:var(--field,#E2F0E3)}
}
.page p.service-detail{border-top:0;padding-top:9px}
.nav a.contact-cta,.home .nav a.contact-cta{border:0;transition:none}
.nav a.contact-cta:hover,.nav a.contact-cta[aria-current=page]{border:0}
.nav a.contact-cta:hover span{transform:translate(2px,-2px)}
.nav a.contact-cta span{transition:transform .2s ease}
.nav a.contact-cta:focus:not(:focus-visible){outline:none}
.nav a.contact-cta:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.hero{transition:none}
.sheet .foot,html.splash-off .lockup,html.splash-off .hero{animation:none}
.masthead{view-transition-name:masthead;position:relative;z-index:10}
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.28s;animation-timing-function:ease-in-out}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:ease-in-out}
::view-transition-group(masthead){animation:none}
::view-transition-old(masthead){display:none}
::view-transition-new(masthead){animation:none;mix-blend-mode:normal}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 .nav a.contact-cta span{transition:none}
}
/* The same geometry on home and every interior, including short laptops. */
@media(min-width:1000px) and (max-height:850px){
 :root,.home,.sheet{--pad:40px;--top:26px;--mark-h:54px}
 .home .mark,.sheet .mark{width:45px}
}
@media(min-width:1000px) and (max-width:1199px) and (min-height:650px){
 :root,.home,.sheet{--pad:32px}
}
.experience{display:block}
.logo-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 23px;align-items:center;margin-top:26px}
.credential{margin:0;min-width:0;height:44px;display:flex;justify-content:center}
.credential img{display:block;width:100%;max-width:150px;height:42px;max-height:42px;object-fit:contain;object-position:left center;filter:grayscale(1) contrast(2);mix-blend-mode:multiply;opacity:1}
.credential--unc img{max-width:150px;height:44px;max-height:44px}
.credential--liminal img,.credential--brand-ai img{filter:brightness(0);opacity:.92}
.credential--brand-ai img{max-width:108px}
/* Long-form articles: left-aligned prose in a centred, ruled reading column. */
.article-page .sheet__inner{height:auto;min-height:100svh}
.article-page .masthead{margin-bottom:0}
.article-page .page{display:block;flex:none;max-width:none;margin:54px 0 0;padding-top:0;padding-bottom:36px}
.reader-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding-bottom:27px;margin-bottom:42px}
.reader-title{min-width:0;max-width:1050px}
.reader-head .eyebrow{margin:0 0 20px!important;font-size:10px!important}
.reader-head h1{font-size:clamp(36px,3.5vw,56px);line-height:1.08;max-width:30ch;text-wrap:balance;margin-bottom:18px}
.reader-head>.back{flex:none;white-space:nowrap;margin-bottom:2px}
.page .article-meta{font-size:11px;line-height:1.6;max-width:85ch}
.reader-window{overflow:visible;max-width:820px;margin:0 auto;min-height:0;border-inline:1px solid var(--hairline);padding:4px 48px 24px}
.article-body{columns:auto;column-rule:0;height:auto;transform:none;transition:none}
.page .article-body p,.page .article-body li{font-size:17px;line-height:1.75;font-weight:420;letter-spacing:-.014em}
.page .article-body p{margin-bottom:22px}
.page .article-body h2{font-size:32px;line-height:1.16;margin:42px 0 20px;text-wrap:pretty}
.page .article-body h3{font-size:25px;line-height:1.2;margin:32px 0 16px}
.article-body img{display:block;max-height:none;width:auto;height:auto;margin:26px auto}
.article-body figure{margin:28px 0}
.article-body strong{font-weight:650}
.article-body blockquote{margin:30px 0;padding-left:24px}
.article-page .page-bottom{max-width:820px;margin:40px auto 0;padding-top:18px}
.article-page .foot{margin-top:15px}
@media(min-width:1000px) and (max-width:1199px){
 .logo-grid{gap:20px 17px}.credential img{height:32px}.credential--unc img{height:42px}
}
@media(max-width:999px),(max-height:649px){
 .logo-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:690px;gap:28px 36px}
 .credential--unc,.credential--brand-ai{grid-column:auto}
}
@media(max-width:809px){
 .home .nav{padding-top:0}
 .article-page .page{margin-top:50px;padding-bottom:32px}
 .reader-head{gap:24px;flex-wrap:wrap;margin-bottom:28px;padding-bottom:24px}
 .reader-head h1{font-size:38px}
 .reader-head>.back{margin-left:auto}
 .reader-window{padding:0 20px 12px;max-width:720px}
 .page .article-body p,.page .article-body li{font-size:16px;line-height:1.75}
 .page .article-body h2{font-size:28px}
 .logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:400px;gap:28px 30px;margin-top:22px}
 .credential{height:44px}.credential img{height:36px}.credential--unc img{height:44px}
}
@media(max-width:400px){
 .reader-head h1{font-size:34px}.reader-window{padding-inline:15px}
}
@media(max-width:809px){
 .project-heading .back{display:block;width:max-content;margin-left:auto}
}

/* Detail headings stay with the reader on both articles and projects. */
.article-page .reader-head,.project-page .project-heading{
 position:sticky;top:0;z-index:8;background:#fff;
 padding-top:26px;margin-top:-26px;
}
.article-page .article-body :is(h2,h3){scroll-margin-top:260px}
.nav-caption,.nav-colophon{display:none}
/* A consistent mount around every work sample, independent of its aspect ratio. */
.project-visual{position:relative;padding:clamp(22px,2.4vw,38px);padding-bottom:52px;align-items:center;background:#f1f2ee}
.project-image-link{position:static;display:flex;align-items:center;justify-content:center}
.project-visual img{object-position:center;display:block}
.project-image-link>span{right:16px;bottom:13px;border:0;background:transparent;padding:5px 0;font-size:9px}
.project-image-link:hover>span{color:var(--ink);background:transparent;text-decoration:underline;text-underline-offset:4px}
.project-visual--collection{padding:24px}
.project-media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:20px 18px;width:100%;height:100%;min-height:0}
.media-sample{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:9px;min-height:0;min-width:0}
.media-sample img{width:100%;height:100%;object-fit:contain;min-height:0}
.media-sample>span{display:flex;justify-content:space-between;gap:4px;font-family:var(--sans);font-size:8px;letter-spacing:.02em}
.media-sample:hover>span{text-decoration:underline;text-underline-offset:3px}
@media(max-width:999px),(max-height:649px){
 .project-visual{padding:24px 24px 50px}
 .project-image-link{height:auto}
 .project-visual img{max-height:650px;object-fit:contain}
 .project-visual--collection{padding:24px}
 .project-media-grid{height:580px}
}
@media(max-width:680px){
 /* Mobile navigation is a full page of contents, never a floating card. */
 html.menu-open,html.menu-open body{overflow:hidden}
 html.menu-open .hero{overflow:hidden}
 html.menu-open .masthead{color:#111c20;z-index:30}
 html.menu-open .masthead .mark{position:relative;z-index:102;color:#111c20}
 html.menu-open .menu-toggle{position:relative;z-index:102;color:#111c20}
 .menu-toggle{min-height:44px;min-width:64px;text-align:right;padding:0;letter-spacing:.1em}
 .nav,.home .nav{
  position:fixed;inset:0;margin:0;padding:112px var(--pad) 24px;
  height:100dvh;overflow-y:auto;overscroll-behavior:contain;
  background:#fafaf7;color:#111c20;box-shadow:none;
  flex-direction:column;align-items:stretch;gap:0;counter-reset:contents;
 }
 .nav.is-open{display:flex}
 .nav-caption{display:block;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;padding-bottom:15px;border-bottom:1px solid #111c20;margin-bottom:0}
 .nav a,.nav a.contact-cta,.home .nav a.contact-cta{
  position:relative;display:flex;align-items:baseline;justify-content:flex-start;
  gap:18px;flex:none;margin:0;padding:13px 0 14px;border:0;border-bottom:1px solid #111c2033;
  background:transparent;color:#111c20;font-family:var(--serif);font-weight:400;
  font-size:34px;line-height:1.12;letter-spacing:-.04em;text-transform:none;text-decoration:none;
 }
 .nav a::before{counter-increment:contents;content:counter(contents,decimal-leading-zero);font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:.07em;width:19px;flex:none}
 .nav a::after{content:'↗';margin-left:auto;font-family:var(--text);font-size:20px;font-weight:400;letter-spacing:0}
 .nav a[aria-current=page]{text-decoration:none}
 .nav a[aria-current=page]::after{content:'●';font-size:8px;align-self:center}
 .nav a.contact-cta span{display:none}
 .nav a.contact-cta:hover,.nav a.contact-cta[aria-current=page]{border-bottom:1px solid #111c2033}
 .nav-colophon{display:flex;justify-content:space-between;gap:20px;margin-top:auto;padding-top:28px;font-family:var(--sans);font-size:9px;letter-spacing:.06em;text-transform:uppercase}
 .nav-colophon span{color:#465054}
 .nav.is-open{animation:contents-in .2s ease-out}
 .article-page .reader-head,.project-page .project-heading{gap:12px;padding-top:18px;padding-bottom:18px;margin-top:-18px}
 .project-page .project-heading .eyebrow{font-size:9px;margin-bottom:12px}
 .project-page .project-heading h1{font-size:28px;line-height:1.12}
 .project-page .project-heading>.back{font-size:11px;margin-top:12px;margin-bottom:0}
 .article-page .reader-head .eyebrow{font-size:9px!important;margin-bottom:12px!important}
 .article-page .reader-head h1{font-size:28px;line-height:1.12;margin-bottom:12px}
 .article-page .reader-head .article-meta{font-size:10px;line-height:1.5;margin-bottom:0}
 .article-page .reader-head>.back{font-size:11px;margin-bottom:0}
 .article-page .article-body :is(h2,h3){scroll-margin-top:300px}
 .project-visual{padding:20px 20px 46px}
 .project-visual--collection{padding:20px}
 .project-media-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));height:740px;gap:22px 16px}
 .media-sample>span{font-size:8px;flex-wrap:wrap}
}
@media(max-width:680px) and (max-height:650px){
 .nav,.home .nav{padding-top:94px}
 .nav-caption{padding-bottom:10px}
 .nav a,.nav a.contact-cta,.home .nav a.contact-cta{font-size:29px;padding-block:10px}
 .nav-colophon{padding-top:18px}
}
@keyframes contents-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.nav.is-open{animation:none}}

/* Approved positioning: balance the complete thought at every screen size. */
.home .lockup__row .lede{text-wrap:balance}
.service-scope{display:grid;grid-template-columns:145px 1fr;gap:24px;margin-top:20px;padding-top:16px;border-top:1px solid var(--hairline)}
.services-page .scope-label{font-family:var(--sans);font-size:9px;font-weight:600;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;margin:2px 0 0}
.service-scope ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 18px;list-style:none;margin:0;padding:0;color:var(--body-ink);font-size:12px;line-height:1.5}
.services-page .standfirst{max-width:880px}
.services-page .standfirst{text-wrap:balance}
.services-page .retainer-note{font-weight:550}
@media(min-width:1000px) and (min-height:650px){
 .services-page .page{padding-top:14px;padding-bottom:14px}
 .services-page .page-heading{margin-bottom:18px}
 .services-page .service-grid{grid-template-columns:1.4fr 1fr .9fr;gap:28px;padding-top:20px}
 .services-page .service-grid h2{max-width:none;min-height:2.28em}
 .services-page .service-grid p:last-child{margin-bottom:0}
 .services-page .page-bottom{margin-top:16px;padding-top:12px}
}
@media(max-width:809px){
 .services-page h1{font-size:clamp(32px,9.5vw,40px)}
 .service-scope{grid-template-columns:1fr;gap:16px;margin-top:28px;padding-top:24px}
 .service-scope ul{grid-template-columns:repeat(2,minmax(0,1fr));font-size:13px;gap:12px 18px}
 .services-page .page-bottom{flex-wrap:wrap}
}
@media(min-width:1000px) and (min-height:650px) and (max-height:850px){
 .services-page .page{padding-top:12px;padding-bottom:10px}
 .services-page .page-heading{margin-bottom:12px}
 .services-page .standfirst{margin-bottom:16px}
 .services-page .service-grid{padding-top:16px}
 .services-page .service-grid p:not(.section-number){font-size:13px;line-height:1.5;margin-bottom:10px}
 .services-page .service-grid p:last-child{margin-bottom:0}
 .services-page .service-grid h2{margin-bottom:12px}
 .services-page .service-grid .section-number{margin-bottom:10px}
 .services-page .service-scope{margin-top:14px}
 .services-page .page-bottom{margin-top:12px;padding-top:10px}
}
@media(min-width:1000px) and (max-width:1199px) and (min-height:650px) and (max-height:850px){
 .services-page .page{padding-top:8px;padding-bottom:8px}
 .services-page .page-heading{margin-bottom:10px}
 .services-page .standfirst{margin-bottom:12px}
 .services-page .service-scope{margin-top:9px}
 .services-page .page-bottom{margin-top:9px}
}
@media(min-width:1000px) and (min-height:650px){
 .belief-columns{grid-template-columns:1fr 1.35fr .9fr}
 .belief-columns h2{max-width:none}
 .beliefs-page .page{padding-top:14px;padding-bottom:14px}
 .beliefs-page .page-heading{margin-bottom:18px}
 .beliefs-page .page-bottom{margin-top:14px;padding-top:10px}
}

/* Services: leadership, specific deliverables, and a distinct engagement note. */
.service-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;margin-bottom:22px}
.services-page .service-intro .standfirst{max-width:800px;margin:0;text-wrap:balance}
.services-page .service-intro .standfirst>span{display:block}
.service-engagement{flex:none;display:flex;flex-direction:column;gap:8px;padding-top:3px;min-width:185px}
.service-engagement .section-number{font-family:var(--sans);font-size:9px;line-height:1.4;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.service-engagement>span:last-child{font-size:13px;line-height:1.5;color:var(--body-ink)}
@media(min-width:1000px) and (min-height:650px){
 .services-page .service-grid{grid-template-columns:1.3fr 1.15fr .85fr}
 .services-page .service-grid h2{min-height:2.28em}
}
@media(min-width:1000px){
 .services-page .service-grid p:not(.section-number),.beliefs-page .belief-columns p:not(.section-number){font-size:14px;line-height:1.5;margin-bottom:12px}
 .services-page .service-grid p:last-child,.beliefs-page .belief-columns p:last-child{margin-bottom:0}
}
@media(min-width:1000px) and (max-width:1199px){
 .services-page .page{padding-bottom:0}
 .services-page .service-grid{gap:22px}
 .services-page .service-grid>section+section,.services-page .service-grid>aside{padding-left:20px}
 .services-page .service-grid p:not(.section-number){line-height:1.45;margin-bottom:10px}
 .services-page .service-grid p:last-child{margin-bottom:0}
 .services-page .service-intro{margin-bottom:16px}
 .services-page .service-scope{padding-top:12px}
 .services-page .service-scope ul{row-gap:4px}
}
@media(min-width:1000px) and (max-height:850px){
 .service-intro{margin-bottom:22px}
 .services-page .service-intro .standfirst{max-width:720px}
}
@media(max-width:999px){
 .service-intro{gap:24px}
 .service-engagement{min-width:160px}
}
@media(max-width:809px){
 .service-intro{display:block;margin-bottom:28px}
 .service-engagement{margin-top:24px;gap:5px}
}
/* About: two quiet, opposing rows of professional associations. */
.about-grid>*{min-width:0}
.about-page h1{font-size:clamp(36px,3.65vw,60px)}
.experience-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.experience-heading .section-number{max-width:none}
.logo-motion-toggle{font-size:10px;color:var(--muted);padding:5px 0;text-decoration:underline;text-underline-offset:3px}
.logo-lane{overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);margin-top:32px}
.logo-track{display:flex;width:max-content;animation:logo-drift 42s linear infinite;will-change:transform}
.logo-lane--2 .logo-track{animation-direction:reverse;animation-duration:38s}
.logo-sequence{display:flex;align-items:center;gap:36px;padding-right:36px;flex-shrink:0}
.logo-item{display:flex;align-items:center;justify-content:center;width:170px;height:72px;flex-shrink:0}
.logo-item--unc{width:200px}
.logo-item--demand-curve{width:190px}
.logo-item img{display:block;width:100%;height:48px;object-fit:contain;filter:brightness(0)}
.logo-item--unc img{height:60px}
.logo-item--brand-ai{width:160px}
.logo-marquee.is-paused .logo-track{animation-play-state:paused}
@keyframes logo-drift{to{transform:translateX(-50%)}}
@media(min-width:1000px) and (min-height:650px){
 .about-page .about-grid{grid-template-columns:1fr 1.12fr 1fr;gap:28px}
 .about-page .page{padding-top:20px;padding-bottom:20px}
 .about-page .page-heading{margin-bottom:24px}
 .about-page .about-grid>section+section,.about-page .experience{padding-left:26px}
}
@media(min-width:1000px) and (max-height:850px){
 .about-page h1{font-size:42px}
 .about-page .page{padding-top:14px;padding-bottom:14px}
 .about-page .page-heading{margin-bottom:18px}
 .about-page .logo-item{width:150px;height:64px}
 .about-page .logo-item--unc{width:180px}
 .about-page .logo-item--demand-curve{width:180px}
 .logo-lane{margin-top:24px}
}
@media(max-width:999px),(max-height:649px){
 .logo-marquee{max-width:100%;width:100%}
 .logo-lane{margin-top:24px}
}
@media(max-width:809px){
 .about-page h1{font-size:clamp(31px,8.2vw,40px)}
 .about-page h1 br{display:none}
 .logo-item{width:150px;height:64px}
 .logo-item--unc,.logo-item--demand-curve{width:180px}
 .logo-item--brand-ai{width:140px}
 .logo-lane:last-child{margin-bottom:16px}
}
@media(prefers-reduced-motion:reduce){
 .logo-motion-toggle{display:none}
 .logo-lane{overflow:visible;mask-image:none;-webkit-mask-image:none}
 .logo-track{animation:none;transform:none;width:100%;will-change:auto}
 .logo-sequence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0;width:100%}
 .logo-sequence[aria-hidden=true]{display:none}
 .logo-marquee .logo-item{width:100%;height:60px}
 .logo-item img,.logo-item--unc img{height:42px}
}


/* Final editorial rhythm: shared margins, type, and room around wayfinding. */
.sheet{--section-tail:28px;--footer-gap:40px}
.sheet:is(.beliefs-page,.services-page,.about-page,.archive-page) .page{padding-bottom:var(--footer-gap)}
.sheet:is(.beliefs-page,.services-page,.about-page) .page-bottom{margin-top:var(--section-tail);padding-top:18px}
.archive-page .page-bottom{padding-top:18px}
.belief-columns>section>p:last-child,.about-grid>section>p:last-child{margin-bottom:0}
.services-page .service-intro .standfirst{max-width:780px;text-wrap:pretty}
.services-page .service-grid h2{max-width:none}
/* A ruled index separates the assessment scope from the engagement story. */
.services-page .service-scope{display:block;margin-top:32px;padding-top:24px;border-top:1px solid var(--hairline)}
.services-page .service-scope .scope-label{margin:0 0 14px}
.services-page .service-scope ul{gap:12px 28px}
/* Keep the two moving rows together, centred in their own column. */
.about-page .logo-marquee{display:flex;flex-direction:column}
.about-page .experience-heading{width:100%;flex:none}
.about-page .logo-lanes{width:100%;max-width:400px;align-self:center;margin-block:auto;padding-block:24px}
.about-page .logo-lane{margin-top:0}
.about-page .logo-lane+.logo-lane{margin-top:18px}
.about-page .logo-item{width:126px;height:48px}
.about-page .logo-item--unc{width:148px}
.about-page .logo-item--demand-curve{width:146px}
.about-page .logo-item--brand-ai{width:118px}
.about-page .logo-item img{height:34px}
.about-page .logo-item--unc img{height:44px}
.about-page .logo-sequence{gap:28px;padding-right:28px}
.contact-page h1{max-width:17ch;text-wrap:balance}
.contact-page .contact-intro{max-width:51ch;text-wrap:pretty}
@media(min-width:1000px){
 .about-page .about-grid>section>p{font-size:14px;line-height:1.5;margin-bottom:12px}
 .about-page .about-grid>section>p:last-child{margin-bottom:0}
}
@media(min-width:1000px) and (min-height:851px){
 .sheet{--section-tail:32px;--footer-gap:44px}
 .services-page .service-grid{padding-top:26px}
 .services-page .service-intro{margin-bottom:28px}
}
@media(max-width:999px),(max-height:649px){
 .about-page .logo-lanes{max-width:520px;padding-block:28px 12px}
}
@media(max-width:809px){
 .sheet{--section-tail:32px;--footer-gap:36px}
 .services-page .service-scope ul{gap:14px 22px}
 .services-page .service-intro .standfirst>span{display:inline}
 .services-page .service-grid h2{min-height:0}
 .about-page .logo-lanes{max-width:420px}
 .contact-page h1{max-width:16ch;font-size:clamp(38px,10.5vw,48px)}
 .contact-page .contact-intro{max-width:35ch}
}
@media(prefers-reduced-motion:reduce){
 .about-page .logo-marquee .logo-item{width:100%;height:48px}
 .about-page .logo-sequence{gap:18px;padding:0}
}

@media(min-width:1000px) and (max-height:850px){
 .services-page .service-scope{display:grid;grid-template-columns:130px 1fr;gap:24px}
 .services-page .service-scope .scope-label{margin:2px 0 0}
 .services-page .service-scope ul{gap:10px 24px}
}

@media(min-width:1000px) and (max-height:850px){
 .sheet{--section-tail:24px;--footer-gap:32px}
 .services-page .page{padding-top:8px}
}

/* Outer horizontal rules frame the page; internal dividers use the hairline. */
.sheet:is(.beliefs-page,.services-page,.about-page) .page-bottom{border-top-width:1.5px}
.contact-page .contact-intro>span{display:block;margin-top:0}
@media(max-width:809px){
 .contact-page .contact-intro>span{display:inline}
}

/* Keep paragraph rhythm and the assessment boundary generous at every height. */
.services-page .service-grid p:not(.section-number){margin-bottom:16px}
.services-page .service-grid p:last-child{margin-bottom:0}

/* Mobile page orientation and consistent collection navigation. */
.masthead-location{display:none}
.home .home-foot{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex:none;margin:0 var(--pad);padding:20px 0 max(24px,env(safe-area-inset-bottom));border-top:1px solid currentColor;gap:12px}
.home .home-foot span,.home .home-foot a{color:inherit}
@media(min-width:681px){
 .home .lockup__wordmark{padding-block:30px}
 .home .home-foot{border-top:0;padding-top:0}
}
.article-meta .article-credit,.article-meta .article-origin{display:block}
.article-meta .article-origin{margin-top:4px;width:fit-content}
.archive-description{color:var(--body-ink);text-wrap:pretty}
.archive-page .archive-title{text-wrap:pretty}
.work-index .archive-description{max-width:none}
.archive-controls{display:flex;justify-content:flex-end;padding:16px 0 18px}
.archive-page .page-bottom{align-items:center}
.archive-page .page-bottom>a{flex:none}
@media(max-width:999px),(max-height:649px){
 .archive-controls{display:none}
}
@media(max-width:680px){
 .sheet .sheet__inner{min-height:100dvh;height:auto}
 .contact-page .foot{margin-top:auto;padding-bottom:max(24px,env(safe-area-inset-bottom))}
 .sheet .masthead{position:sticky;top:-18px;z-index:20;height:88px;padding:24px var(--pad) 14px;align-items:center;margin-bottom:0}
 /* The first 18px scroll out of view; center within the remaining 70px. */
 .sheet .masthead.is-scrolled{background:#fff;border-bottom:1px solid #111c2026;padding-top:32px}
 .sheet .masthead .mark{transform-origin:left center;transition:transform .2s ease}
 .sheet .masthead.is-scrolled .mark{transform:scale(.76)}
 .masthead-location{display:block;position:absolute;left:50%;transform:translate(-50%,4px);font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .2s ease,transform .2s ease;pointer-events:none}
 .is-scrolled .masthead-location{opacity:1;transform:translate(-50%,0)}
 .contact-page .masthead.is-scrolled{background:var(--field);border-bottom-color:currentColor}
 html.menu-open .masthead-location{opacity:0}
 html.menu-open .sheet .masthead{position:fixed;inset:0 0 auto;height:88px;padding:0 var(--pad);border-bottom:0}
 html.menu-open .sheet .masthead .mark{transform:none}
 .article-page .reader-head,.project-page .project-heading{top:70px}
 .article-page .article-body :is(h2,h3){scroll-margin-top:370px}
 .home .hero{position:relative;inset:auto;min-height:100dvh;overflow:visible}
 .home .hero__void{min-height:80px}
 .home .tagline{padding-bottom:28px}
 .home .home-foot{display:flex;margin:0 var(--pad);padding:20px 0 max(24px,env(safe-area-inset-bottom));border-top:1px solid currentColor;gap:12px}
 .home-foot span,.home-foot a{color:inherit;font-size:8px}
 .archive-page .page-bottom{display:flex;justify-content:space-between;align-items:flex-start}
 .archive-page .page-bottom .archive-note{max-width:60%;font-size:10px}
 .archive-row>.archive-arrow{align-self:start;margin-top:6px}
}
@media(prefers-reduced-motion:reduce){
 .sheet .masthead .mark,.masthead-location{transition:none}
}

@media(max-width:680px){
 .archive-title-prefix{display:block}
}

/* The assessment index and About logos share a measured, unhurried pace. */
@keyframes shared-marquee-drift{to{transform:translateX(var(--marquee-shift,-50%))}}
.logo-track,.logo-lane--2 .logo-track,.scope-track{animation:shared-marquee-drift var(--marquee-duration,42s) linear infinite;will-change:transform}
.logo-lane--2 .logo-track{animation-direction:reverse}
.services-page .service-scope{display:grid;grid-template-columns:120px minmax(0,1fr) auto;align-items:center;gap:24px;margin-top:32px;padding-block:20px;border-top:1px solid var(--hairline)}
.services-page .service-scope .scope-label{margin:0}
.scope-lane{min-width:0;overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.scope-track{display:flex;width:max-content}
.services-page .service-scope .scope-sequence{display:flex;align-items:center;flex:none;gap:40px;padding-right:40px;margin:0;list-style:none;font-size:12px;line-height:1.5}
.scope-sequence li{flex:none;white-space:nowrap}
.scope-motion-toggle{font-size:10px;color:var(--muted);padding:10px 0 10px 8px;text-decoration:underline;text-underline-offset:3px;min-height:36px;min-width:64px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.scope-motion-toggle[aria-pressed=true]{color:var(--body-ink);text-decoration-thickness:2px}
.logo-marquee.is-paused .logo-track{animation-play-state:paused}
.services-page .service-scope+.page-bottom{margin-top:0}
@media(max-width:809px){
 .services-page .service-scope{grid-template-columns:1fr auto;gap:12px 20px;padding-block:18px 24px}
 .scope-lane{grid-column:1/-1;grid-row:2}
 .scope-motion-toggle{grid-column:2;grid-row:1;min-height:44px;padding-block:12px}
 .services-page .service-scope .scope-sequence{font-size:14px;gap:32px;padding-right:32px}
}
@media(prefers-reduced-motion:reduce){
 .logo-track,.logo-lane--2 .logo-track,.scope-track{animation:none;transform:none;will-change:auto}
 .scope-motion-toggle{display:none}
 .scope-lane{overflow:visible;mask-image:none;-webkit-mask-image:none}
 .scope-track{width:100%}
 .services-page .service-scope .scope-sequence{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:12px 24px;padding:0}
 .scope-sequence li{white-space:normal}
 .services-page .service-scope .scope-sequence[aria-hidden=true]{display:none}
}
@media(prefers-reduced-motion:reduce) and (max-width:809px){
 .services-page .service-scope .scope-sequence{grid-template-columns:repeat(2,minmax(0,1fr));font-size:13px}
}

/* Collections share one bounded reading window; only the entries scroll. */
body.archive-page{height:100dvh;overflow:hidden}
.archive-page .sheet__inner{height:100dvh;min-height:0;overflow:hidden}
.archive-page .masthead{margin-bottom:0;flex:none}
.sheet.archive-page .page{display:flex;flex-direction:column;justify-content:flex-end;flex:1;min-height:0;margin:0;padding-top:24px;padding-bottom:28px}
.archive-page .page-heading{flex:none;margin-bottom:24px}
.archive-page .archive-window{flex:0 1 clamp(405px,48dvh,540px);min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;border-block:2px solid var(--ink);scrollbar-width:thin;scrollbar-color:#111c2070 transparent;scrollbar-gutter:stable;position:relative}
.archive-page .archive-list{border:0;min-height:0!important}
.archive-page .archive-row{grid-template-columns:165px minmax(0,1fr) 24px;column-gap:28px;padding:12px 16px 12px 0;min-height:0;box-sizing:border-box}
.archive-row>span:nth-child(2){min-width:0}
.archive-page .archive-title{white-space:normal;overflow-wrap:break-word;text-wrap:pretty}
.archive-page .archive-description{white-space:normal;text-wrap:pretty}
.archive-page .archive-arrow{justify-self:end;align-self:center;margin:0}
.archive-page .page-bottom{flex:none;border:0;margin-top:0;padding-top:18px}
.archive-page .foot{flex:none;margin-top:0;padding-top:0}
@media(min-width:1000px) and (min-height:650px){
 .archive-page .archive-row{height:var(--archive-row-height,96px)}
 .archive-page .archive-title{font-size:clamp(22px,1.8vw,29px);line-height:1.15}
 .archive-page .archive-description{font-size:12px;line-height:1.4;margin-top:4px}
}
@media(max-width:999px),(max-height:649px){
 .archive-page .archive-window{flex:1 1 0}
 .sheet.archive-page .page{justify-content:flex-start;padding-top:28px;padding-bottom:24px}
 .archive-page .archive-row{grid-template-columns:minmax(0,1fr) 20px;column-gap:24px;row-gap:10px;padding:22px 12px 22px 0;height:auto}
 .archive-page .archive-row>.eyebrow{grid-column:1;max-width:none;font-size:9px;line-height:1.5}
 .archive-page .archive-row>span:nth-child(2){grid-column:1;grid-row:2}
 .archive-page .archive-arrow{grid-column:2;grid-row:2;align-self:start;margin-top:4px}
 .archive-page .archive-title{font-size:clamp(22px,5.6vw,28px);line-height:1.14;letter-spacing:-.025em}
 .archive-page .archive-description{font-size:13px;line-height:1.5;margin-top:8px}
 .archive-page .page-bottom{gap:20px}
}
@media(max-width:680px){
 .sheet.archive-page .masthead,.sheet.archive-page .masthead.is-scrolled{top:0;height:70px;padding:0 var(--pad);border-bottom:1px solid transparent}
 .sheet.archive-page .masthead.is-scrolled{border-bottom-color:#111c2026}
 .sheet.archive-page .masthead .mark{transform:scale(.76)}
 html.menu-open .sheet.archive-page .masthead{height:88px}
 html.menu-open .sheet.archive-page .masthead .mark{transform:none}
 .sheet.archive-page .page{padding-top:16px;padding-bottom:18px}
 .archive-page .page-heading{margin-bottom:18px}
 .archive-page .page .page-heading .eyebrow{margin-bottom:12px}
 .archive-page .page h1{font-size:clamp(28px,8.7vw,34px);line-height:1.08}
 .archive-page .page-bottom{padding-top:14px;display:flex;flex-wrap:wrap;gap:10px}
 .archive-page .page-bottom .archive-note{max-width:none;width:100%;font-size:9px!important;line-height:1.4!important}
 .archive-page .page-bottom>a{margin-left:auto;font-size:11px}
 .archive-page .foot{padding-block:14px 18px}
}
@media(max-height:550px){
 .archive-page .page .page-heading .eyebrow{display:none}
 .archive-page .page-heading{margin-bottom:12px}
 .archive-page .page h1{font-size:28px}
 .archive-page .page-bottom .archive-note{display:none}
 .sheet.archive-page .page{padding-top:8px;padding-bottom:10px}
 .archive-page .foot{padding-block:8px}
}

@media(min-width:1000px) and (min-height:650px) and (max-height:700px){
 .archive-page .archive-row{padding-block:6px}
 .archive-page .archive-title{font-size:20px}
 .archive-page .archive-description{font-size:11px}
}

/* Draw the email arrow consistently, without platform emoji substitution. */
.contact-email-arrow{display:inline-block;width:1em;height:1em;margin-left:.12em;vertical-align:-.06em}