/* ---- fonts.css ---- */
/* =====================================================================
   Self-hosted webfonts (SIL Open Font License 1.1).
   Previously loaded from fonts.googleapis.com, which added a
   render-blocking cross-origin stylesheet plus a second origin for the
   font files. Serving them from our own domain removes both, and stops
   every visitor's browser contacting Google.
   Latin and Latin-Extended subsets only — the site is English.
   ===================================================================== */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400-normal-latin-ext.a28eb6d3.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400-normal-latin.c9407645.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-500-normal-latin-ext.a28eb6d3.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-500-normal-latin.c9407645.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-500-normal-latin-ext.9a1b37b1.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-500-normal-latin.615a7673.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/playfair-display-400-italic-latin-ext.ac9c3bcc.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/playfair-display-400-italic-latin.ce3932af.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/playfair-display-400-normal-latin-ext.14a61a78.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/playfair-display-400-normal-latin.57edb864.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ---- studio.css ---- */
/* =====================================================================
   LYT Consultancy — studio build
   Written in the house style of bearplex.com / hamadpervaiz.com:
   near-black canvas, left-aligned serif display, mono section markers,
   a single pale-steel accent, split hero, stats on vertical rules.
   Shares behaviour hooks with assets/js/main.js.
   ===================================================================== */

:root{
  --bg:#0A0B0C;
  --bg-2:#0F1113;
  --bg-3:#15181B;
  --line:#212529;
  --line-2:#2C3238;

  --fg:#FFFFFF;
  --text:#9AA3AB;
  --text-2:#78828B;

  --accent:#8FB8CC;
  --accent-2:#B9D4E2;
  --accent-dim:rgba(143,184,204,.16);
  --on-accent:#08121A;      /* text sitting on an accent fill */

  --fg-mid:#B4BCC3;         /* list copy, a step down from --fg */
  --client:#767E86;         /* marquee names — 4.8:1, was #6E767E at 4.3:1 */
  --client-hover:#8A939B;
  --input-line:#5A646E;
  --placeholder:#757F87;
  --error:#C4645C;
  --scrim:rgba(0,0,0,.62);
  --shadow-strong:rgba(0,0,0,.4);
  --bg-rgb:10,11,12;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238FB8CC' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");

  --shell:1280px;
  --gut:clamp(20px,4.4vw,52px);
  --nav-h:78px;
  --sec:clamp(72px,9vw,132px);
  --r:2px;
  --ez:cubic-bezier(.22,.78,.3,1);

  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%;height:auto;display:block}
svg{display:block}
a{color:inherit}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
address{font-style:normal}
::selection{background:var(--accent);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.shell{width:min(100% - var(--gut)*2,var(--shell));margin-inline:auto}
.skip{
  position:absolute;left:14px;top:-80px;z-index:300;background:var(--accent);color:var(--bg);
  padding:11px 18px;font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:top .18s var(--ez);
}
.skip:focus{top:10px}

/* =====================================================================
   Type
   ===================================================================== */
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;color:var(--fg);letter-spacing:-.01em;line-height:1.16}
.d1{font-size:clamp(34px,4.4vw,60px);line-height:1.1;letter-spacing:-.015em}
.d2{font-size:clamp(28px,3.4vw,46px);line-height:1.14;letter-spacing:-.012em}
.d3{font-size:clamp(21px,1.7vw,27px);line-height:1.26}
.d4{font-family:var(--sans);font-size:16.5px;font-weight:500;line-height:1.4;letter-spacing:-.005em;color:var(--fg)}
.lede{font-size:clamp(15.5px,1vw,17px);line-height:1.72;color:var(--text);max-width:62ch}
.small{font-size:14.5px;line-height:1.66;color:var(--text)}

/* the signature marker: rule + // 01 — LABEL */
.marker{
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
}
.marker::before{content:"";width:38px;height:1px;background:var(--accent);flex:none}
.micro{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--text-2);
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:50px;padding:0 26px;border-radius:999px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;line-height:1;
  text-decoration:none;white-space:nowrap;border:1px solid transparent;cursor:pointer;
  transition:background-color .22s var(--ez),border-color .22s var(--ez),color .22s var(--ez);
}
.btn i{font-style:normal;font-size:13px;transition:transform .22s var(--ez)}
.btn:hover i{transform:translate(2px,-2px)}
.btn--primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn--block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.arrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);text-decoration:none;
}
.arrow i{font-style:normal;transition:transform .22s var(--ez)}
.arrow:hover i{transform:translate(2px,-2px)}

/* =====================================================================
   Header
   ===================================================================== */
.site-header{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  /* solid from the start — the hero image sits BELOW the bar, never behind it */
  background:var(--bg);border-bottom:1px solid var(--line);
  transition:border-color .3s var(--ez),box-shadow .3s var(--ez);
}
.site-header.is-stuck{box-shadow:0 1px 0 var(--line-2),0 10px 30px var(--shadow-strong)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(100% - var(--gut)*2,var(--shell));margin-inline:auto}
.brand{display:flex;align-items:center;gap:14px;flex:none;text-decoration:none}
.brand img{height:34px;width:auto}
.brand__rule{width:1px;height:26px;background:var(--line-2)}
.brand__txt{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-2)}
@media (max-width:600px){.brand__rule,.brand__txt{display:none}}

.nav{display:flex;align-items:center;gap:30px}
.nav__list{display:flex;align-items:center;gap:6px}
.nav__link{
  display:block;padding:9px 13px;text-decoration:none;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-2);
  transition:color .2s var(--ez);
}
.nav__link:hover{color:var(--fg)}
.nav__link.is-active{color:var(--accent)}
.nav-toggle{
  display:none;width:44px;height:44px;flex:none;padding:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:transparent;border:1px solid var(--line-2);border-radius:999px;
}
.nav-toggle__bar{display:block;width:16px;height:1px;background:var(--fg);transition:transform .26s var(--ez),opacity .2s}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-scrim{position:fixed;inset:0;z-index:98;background:var(--scrim);opacity:0;transition:opacity .3s var(--ez)}
.nav-scrim.is-open{opacity:1}
@media (max-width:1040px){
  .nav-toggle{display:flex}
  .nav{
    position:fixed;inset:0 0 0 auto;z-index:99;width:min(330px,86vw);
    flex-direction:column;align-items:stretch;gap:0;
    padding:calc(var(--nav-h) + 24px) 26px 32px;
    background:var(--bg-2);border-left:1px solid var(--line);
    transform:translateX(100%);transition:transform .34s var(--ez);overflow-y:auto;
  }
  .nav.is-open{transform:none}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__link{padding:16px 2px;font-size:12px;border-bottom:1px solid var(--line)}
  .nav__cta{margin-top:24px}
  .nav__cta .btn{width:100%}
}

/* =====================================================================
   Hero — split, photography right
   ===================================================================== */
.hero{position:relative;padding-top:var(--nav-h);border-bottom:1px solid var(--line)}
.hero__grid{display:grid;gap:0;align-items:stretch}
@media (min-width:1040px){.hero__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}}
.hero__body{
  padding:clamp(56px,7vw,104px) 0;
  padding-right:clamp(0px,4vw,72px);
  display:flex;flex-direction:column;justify-content:center;
}
.hero__title{margin-top:26px;max-width:15ch}
.hero__title em{font-style:italic;color:var(--accent)}
.hero__name{margin-top:26px;font-family:var(--sans);font-size:16px;font-weight:500;color:var(--fg)}
.hero__lead{margin-top:12px;max-width:50ch}
.hero__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.hero__media{position:relative;min-height:340px;overflow:hidden}
@media (max-width:1039px){.hero__media{min-height:auto;aspect-ratio:16/11}}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:1039px){.hero__media img{position:static}}
.hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(var(--bg-rgb),.22) 34%,transparent 62%),
             linear-gradient(0deg,var(--bg) 0%,transparent 30%);
}
.hero__cap{
  position:absolute;left:0;bottom:22px;z-index:2;
  padding-left:22px;border-left:1px solid var(--accent);
}

/* =====================================================================
   Stats band — vertical rules, serif numerals
   ===================================================================== */
.stats{display:grid;grid-template-columns:repeat(2,1fr);border-bottom:1px solid var(--line)}
@media (min-width:860px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:clamp(30px,3.6vw,46px) clamp(18px,2.4vw,34px);text-align:center}
.stat + .stat{border-left:1px solid var(--line)}
@media (max-width:859px){
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
}
.stat__n{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,3.4vw,46px);line-height:1;color:var(--accent);
}
.stat__l{display:block;margin-top:14px}

/* =====================================================================
   Client strip
   ===================================================================== */
.clients{padding:clamp(30px,3.4vw,44px) 0;border-bottom:1px solid var(--line);overflow:hidden}
.clients__cap{text-align:center;margin-bottom:24px}
.clients__vp{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.clients__track{display:flex;width:max-content;animation:studio-slide 38s linear infinite}
.clients:hover .clients__track{animation-play-state:paused}
@keyframes studio-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.clients__set{display:flex;align-items:center;flex:none;gap:clamp(34px,5vw,74px);padding-right:clamp(34px,5vw,74px)}
.clients__set li{
  font-family:var(--serif);font-size:clamp(17px,1.5vw,23px);font-weight:400;
  color:var(--client);white-space:nowrap;transition:color .3s var(--ez);
}
.clients:hover .clients__set li{color:var(--client-hover)}

/* =====================================================================
   Sections
   ===================================================================== */
.sec{padding:var(--sec) 0;border-bottom:1px solid var(--line)}
.sec--alt{background:var(--bg-2)}
.sec__head{display:grid;gap:clamp(24px,3.4vw,56px);margin-bottom:clamp(38px,4vw,58px)}
@media (min-width:960px){.sec__head{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:start}}
.sec__title{margin-top:22px}
.sec__aside{display:grid;gap:20px;align-content:start}
@media (min-width:960px){.sec__aside{padding-top:8px}}

.pullquote{
  margin:8px 0 0;padding:6px 0 6px 24px;border-left:1px solid var(--accent);
  font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.5vw,22px);
  line-height:1.44;color:var(--fg);
}
.pullquote footer{margin-top:12px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);font-style:normal}

/* --- editorial rows --- */
.rows{border-top:1px solid var(--line)}
.row{
  display:grid;gap:8px 34px;align-items:baseline;grid-template-columns:auto 1fr;
  padding:clamp(24px,2.8vw,34px) 0;border-bottom:1px solid var(--line);
  transition:padding-left .34s var(--ez);
}
@media (min-width:960px){
  .row{grid-template-columns:64px minmax(0,.86fr) minmax(0,1.14fr)}
  .row:hover{padding-left:14px}
}
.row__n{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;color:var(--text-2);transition:color .3s var(--ez)}
.row__t{font-family:var(--serif);font-size:clamp(20px,1.9vw,28px);font-weight:400;line-height:1.2;color:var(--fg);transition:color .3s var(--ez)}
.row__d{grid-column:1/-1;max-width:56ch;font-size:15px;line-height:1.66}
@media (min-width:960px){.row__d{grid-column:3;max-width:none}}
.row:hover .row__t{color:var(--accent)}
.row:hover .row__n{color:var(--accent)}

/* --- divisions --- */
.divs{display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:960px){.divs{grid-template-columns:repeat(2,1fr)}}
.dv{padding:clamp(30px,3.4vw,46px) 0;border-bottom:1px solid var(--line)}
@media (min-width:960px){
  .dv:first-child{padding-right:clamp(30px,3.6vw,58px);border-right:1px solid var(--line)}
  .dv:last-child{padding-left:clamp(30px,3.6vw,58px)}
}
.dv__tag{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.dv__new{
  padding:4px 10px;border:1px solid var(--accent);border-radius:999px;
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);
}
.dv__text{margin:16px 0 0;max-width:44ch;font-size:15px;line-height:1.68}
.dv__list{margin:26px 0 22px;border-top:1px solid var(--line)}
.dv__list li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;color:var(--fg-mid);
}
.dv__list li::before{content:"";width:4px;height:4px;background:var(--accent);border-radius:50%}
.dv__serve{font-size:13.5px;line-height:1.62;color:var(--text-2)}
.dv__serve b{display:block;margin-bottom:6px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}

/* --- process --- */
.steps{display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:1040px){.steps{grid-template-columns:repeat(5,1fr)}}
.step{padding:clamp(26px,2.8vw,34px) 0;border-bottom:1px solid var(--line)}
@media (min-width:1040px){
  .step{padding:clamp(26px,2.8vw,34px) 24px clamp(20px,2.4vw,28px) 0;border-bottom:0}
  .step + .step{padding-left:24px;border-left:1px solid var(--line)}
}
.step__n{display:block;font-family:var(--serif);font-size:30px;line-height:1;color:var(--accent);margin-bottom:16px}
.step .d4{margin-bottom:9px}
.step p{font-size:14px;line-height:1.64}

/* --- hub --- */
.hub{display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:1040px){.hub{grid-template-columns:repeat(5,1fr)}}
.hub__n{padding:clamp(24px,2.6vw,32px) 0;border-bottom:1px solid var(--line)}
@media (min-width:1040px){
  .hub__n{padding:clamp(24px,2.6vw,32px) 22px clamp(18px,2.2vw,26px) 0;border-bottom:0}
  .hub__n + .hub__n{padding-left:22px;border-left:1px solid var(--line)}
}
.hub__n > span{display:block;margin-bottom:14px}
.hub__n p{font-size:14px;line-height:1.62}
.hub__n--core{background:var(--accent-dim)}
@media (min-width:1040px){.hub__n--core{padding-left:22px;padding-right:22px}}
.hub__n--core .micro{color:var(--accent)}

/* --- sectors / value --- */
.grid3{display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:700px){.grid3{grid-template-columns:repeat(2,1fr);column-gap:clamp(28px,3.4vw,56px)}}
@media (min-width:1080px){.grid3{grid-template-columns:repeat(3,1fr)}}
.grid4{display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:700px){.grid4{grid-template-columns:repeat(2,1fr);column-gap:clamp(28px,3.4vw,52px)}}
@media (min-width:1080px){.grid4{grid-template-columns:repeat(4,1fr)}}
.cell{padding:clamp(24px,2.6vw,32px) 0;border-bottom:1px solid var(--line)}
.cell > span{display:block;margin-bottom:14px}
.cell .d4{margin-bottom:9px}
.cell p{font-size:14px;line-height:1.64}

/* --- horizon --- */
.horizon{
  margin-top:clamp(28px,3.2vw,44px);padding:clamp(28px,3.2vw,42px);
  background:var(--bg-3);border:1px solid var(--line);
}
.horizon .micro + p{margin-top:14px;max-width:66ch;font-size:15px;line-height:1.7}

/* --- pitch --- */
.pitch{
  display:grid;gap:clamp(28px,3.4vw,56px);align-items:center;
  padding:clamp(34px,4.4vw,64px);background:var(--bg-3);border:1px solid var(--line-2);
}
@media (min-width:960px){.pitch{grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr)}}
.pitch .d2{margin:20px 0 16px}
.pitch p{max-width:52ch;font-size:15px;line-height:1.7}
.pitch__act{display:flex;flex-wrap:wrap;gap:12px}

/* =====================================================================
   Contact
   ===================================================================== */
.contact{display:grid;gap:clamp(34px,4.4vw,64px);align-items:start}
@media (min-width:960px){.contact{grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr)}}
.cinfo{border-top:1px solid var(--line)}
.cinfo li{padding:20px 0;border-bottom:1px solid var(--line)}
.cinfo > li > span{display:block;margin-bottom:8px}
.cinfo p,.cinfo address{font-size:15.5px;line-height:1.6;color:var(--fg)}
.cinfo a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line-2);transition:color .2s var(--ez),border-color .2s var(--ez)}
.cinfo a:hover{color:var(--accent);border-color:var(--accent)}

.form{display:grid;gap:22px}
.form__submit{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:6px}
.form__submit .btn{flex:none}
.form__row{display:grid;gap:22px}
@media (min-width:620px){.form__row{grid-template-columns:repeat(2,1fr)}}
.field{display:grid;gap:9px;min-width:0}
.field__label{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.req{color:var(--accent)}
.field__input{
  width:100%;min-height:50px;padding:14px 0;
  /* an underline at --line-2 was only 2.5:1 against the canvas — you could not
     see where to type. Lifted to a visible edge plus a faint field fill. */
  background:rgba(255,255,255,.028);color:var(--fg);
  border:0;border-bottom:1px solid var(--input-line);border-radius:0;
  font-size:15.5px;padding-left:14px;padding-right:14px;
  transition:border-color .2s var(--ez),background-color .2s var(--ez);
}
.field__input--area{resize:vertical;min-height:110px;line-height:1.62}
.field__input--select{
  appearance:none;cursor:pointer;padding-right:38px;
  background-image:var(--chevron);
  background-repeat:no-repeat;background-position:right 12px center;background-size:17px;
}
.field__input option{background:var(--bg-2);color:var(--fg)}
.field__input::placeholder{color:var(--placeholder)}
.field__input:focus{outline:2px solid var(--accent);outline-offset:2px;
  border-bottom-color:var(--accent);background:rgba(143,184,204,.06)}
.field.is-invalid .field__input{border-bottom-color:var(--error)}
.field__error{font-size:13px;color:var(--error)}
.field__error:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__status{font-size:14.5px;line-height:1.6}
.form__status:empty{display:none}
.form__status.is-ok{color:var(--accent)}
.form__status.is-err{color:var(--error)}
.form__note{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.form__note a{color:var(--accent)}

/* =====================================================================
   Footer
   ===================================================================== */
.footer{background:var(--bg);padding:clamp(56px,6vw,84px) 0 0}
.footer__inner{display:grid;gap:38px;padding-bottom:clamp(38px,4.4vw,56px)}
@media (min-width:700px){.footer__inner{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.footer__inner{grid-template-columns:1.6fr 1fr 1fr 1.15fr}}
.footer__logo{height:40px;width:auto;margin-bottom:22px}
.footer__blurb{font-size:14.5px;line-height:1.7;max-width:34ch}
.footer__heading{margin-bottom:18px}
.footer__links{display:grid;gap:12px}
.footer__links a{font-size:14.5px;color:var(--text);text-decoration:none;transition:color .2s var(--ez)}
.footer__links a:hover{color:var(--accent)}
.footer address{font-size:14.5px;line-height:1.8}
.footer address a{color:var(--text);text-decoration:none;transition:color .2s var(--ez)}
.footer address a:hover{color:var(--accent)}
.footer__bar{
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  padding:24px 0;border-top:1px solid var(--line);
}

/* =====================================================================
   Motion
   ===================================================================== */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .85s var(--ez),transform .85s var(--ez)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal[data-reveal-delay="1"]{transition-delay:.08s}
.js .reveal[data-reveal-delay="2"]{transition-delay:.16s}
.js .reveal[data-reveal-delay="3"]{transition-delay:.24s}
.js .reveal[data-reveal-delay="4"]{transition-delay:.32s}
.js .reveal[data-reveal-delay="5"]{transition-delay:.40s}

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

@media print{
  body{background:#fff;color:#000}
  .site-header,.nav,.nav-toggle,.nav-scrim,.clients,.hero__act,.pitch__act{display:none !important}
  .sec,.sec--alt,.pitch,.horizon,.footer,.hub__n--core{background:#fff !important;border-color:#ccc !important}
  h1,h2,h3,h4,.row__t,.cinfo p,.cinfo address{color:#000 !important}
  .js .reveal{opacity:1 !important;transform:none !important}
}

/* ---- bio.css ---- */
/* =====================================================================
   LYT Consultancy — biotech add-on
   Loads AFTER studio.css. Adds only what the biotech repositioning needs;
   all colour, type and structure still come from studio.css.
   ===================================================================== */

/* four focus areas as a 2x2 editorial block */
.areas{display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:860px){.areas{grid-template-columns:repeat(2,1fr)}}
.area{padding:clamp(30px,3.4vw,44px) 0;border-bottom:1px solid var(--line)}
@media (min-width:860px){
  .area:nth-child(odd){padding-right:clamp(30px,3.6vw,58px);border-right:1px solid var(--line)}
  .area:nth-child(even){padding-left:clamp(30px,3.6vw,58px)}
}
.area__no{display:block;margin-bottom:16px}
.area h3{margin-bottom:14px}
.area p{font-size:15px;line-height:1.7;max-width:46ch}
.area__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.area__tags li{
  padding:5px 12px;border:1px solid var(--line-2);border-radius:999px;
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);
  transition:border-color .3s var(--ez),color .3s var(--ez);
}
.area:hover .area__tags li{border-color:var(--accent);color:var(--accent)}

/* the AI band — one lifted panel, no new colour */
.ai{
  display:grid;gap:clamp(26px,3.2vw,52px);
  padding:clamp(32px,4vw,58px);background:var(--bg-3);border:1px solid var(--line-2);
}
@media (min-width:900px){.ai{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.ai h3{margin-bottom:16px}
.ai p{font-size:15px;line-height:1.72;max-width:52ch}
.ai__list{margin-top:6px;border-top:1px solid var(--line)}
.ai__list li{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.ai__list b{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;color:var(--accent)}
.ai__list p{font-size:14.5px;line-height:1.62;color:var(--text)}
.ai__list strong{color:var(--fg);font-weight:500}

/* a plain keyword index — real crawlable text, not a meta tag */
.index{margin-top:clamp(26px,3vw,42px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--line)}
.index__list{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.index__list li{
  font-size:13.5px;line-height:1.5;color:var(--text-2);
}
.index__list li::after{content:"·";margin-left:10px;color:var(--line-2)}
.index__list li:last-child::after{content:""}

/* =====================================================================
   05 — flow direction
   Five equal columns read as a list, not a sequence. A chevron on each
   divider says which way the loop runs.
   ===================================================================== */
@media (min-width:1040px){
  .hub__n{position:relative}
  .hub__n + .hub__n::before{
    content:"";position:absolute;left:-5px;top:30px;width:8px;height:8px;
    border-top:1px solid var(--accent);border-right:1px solid var(--accent);
    transform:rotate(45deg);background:var(--bg);
  }
  .sec--alt .hub__n + .hub__n::before{background:var(--bg-2)}
  .hub__n--core{box-shadow:inset 0 0 0 1px rgba(143,184,204,.18)}
}

/* =====================================================================
   07 — keyword index, grouped
   A flat wall of terms reads as keyword stuffing. Clustering them under
   labels keeps every term crawlable but makes it informative to a human.
   ===================================================================== */
.index__groups{display:grid;gap:26px 40px;margin-top:22px}
@media (min-width:760px){.index__groups{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1120px){.index__groups{grid-template-columns:repeat(4,1fr)}}
.index__g h4{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  margin-bottom:12px;
}
.index__g p{font-size:13.5px;line-height:1.75;color:var(--text-2)}

/* ---- pages.css ---- */
/* =====================================================================
   LYT Consultancy — inner pages
   Additive layer on top of studio.css + bio.css. Defines only what the
   landing page never needed: page headers, breadcrumbs, long-form prose,
   linked cards and page-to-page navigation. No token is redefined here.
   bio.html links this file too, so the `.more` band and the tablet rules at
   the end of this file do affect it; its copy and desktop layout are unchanged.
   ===================================================================== */

/* ---------- Active nav state ---------- */
.nav__link[aria-current="page"]{color:var(--fg)}
.nav__link[aria-current="page"]::after{
  content:"";display:block;height:1px;margin-top:5px;background:var(--accent);
}

/* The nav CTA was 248x50 — 64% of the 78px header and wider than all five nav
   links combined. Sized to sit level with them instead. Hero and pitch buttons
   keep the 50px .btn height; those are primary page actions. */
.nav__cta .btn{
  height:34px;padding:0 16px;
  font-size:10px;letter-spacing:.12em;gap:8px;
}

/* The nav CTA doubles as the Contact link; on that page it marks itself
   rather than silently pointing at the page you are already on. */
.nav__cta .btn[aria-current="page"]{
  color:var(--on-accent);background:var(--accent);border-color:var(--accent);
}
.nav__cta .btn[aria-current="page"]:hover{background:var(--accent-2);border-color:var(--accent-2)}

/* ---------- Page header ---------- */
.phero{
  padding-top:var(--nav-h);
  border-bottom:1px solid var(--line);
  background:var(--bg-2);
}
.phero__inner{padding:clamp(40px,5.4vw,78px) 0 clamp(34px,4.4vw,62px)}

/* Marker and breadcrumb share one row — stacked, they read as two near-identical
   mono lines. Marker names the page; the trail only points back up. */
.phero__top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px 32px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:clamp(26px,3.2vw,44px);
  border-bottom:1px solid var(--line);
}
.phero__top .marker{flex:0 1 auto;min-width:0}

.phero__grid{display:grid;gap:clamp(24px,3.4vw,56px)}
@media (min-width:960px){
  .phero__grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:end}
}
.phero__title{margin:0}
.phero__lead{margin:0}
.phero__lead + .phero__lead{margin-top:16px}

/* breadcrumbs */
.crumbs-nav{flex:0 0 auto}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0;padding:0;list-style:none}
.crumbs li{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);
}
.crumbs li + li::before{content:"/";margin:0 10px;color:var(--line-2)}
.crumbs a{text-decoration:none;color:var(--text-2);transition:color .2s var(--ez)}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current="page"]{color:var(--fg)}

/* key-facts strip under the header */
/* NB: the cells are <div> wrappers inside a <dl> (dt/dd pairs must be wrapped
   to be grid items). Selectors here must target `> div`, not `li`. */
.facts{
  display:grid;gap:0;align-items:start;
  margin:clamp(30px,3.4vw,46px) 0 0;padding:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
@media (min-width:520px){.facts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.facts{grid-template-columns:repeat(4,1fr)}}

.facts > div{padding:20px 0}

/* single column: rows separated by a rule */
@media (max-width:519px){
  .facts > div + div{border-top:1px solid var(--line)}
}
/* two columns: a gutter and a divider between the pair, a rule under row one */
@media (min-width:520px) and (max-width:1039px){
  .facts > div{padding-right:clamp(20px,2.4vw,30px)}
  .facts > div:nth-child(even){
    padding-left:clamp(20px,2.4vw,30px);padding-right:0;
    border-left:1px solid var(--line);
  }
  .facts > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
/* four columns: gutter either side of each divider */
@media (min-width:1040px){
  .facts > div{padding-right:clamp(22px,2.2vw,34px)}
  .facts > div + div{
    padding-left:clamp(22px,2.2vw,34px);
    border-left:1px solid var(--line);
  }
  .facts > div:last-child{padding-right:0}
}
.facts dt{margin-bottom:9px}
.facts dd{
  margin:0;font-family:var(--sans);font-size:15px;font-weight:500;
  line-height:1.5;color:var(--fg);letter-spacing:-.005em;
}

/* ---------- Long-form prose ---------- */
.prose{max-width:70ch}
.prose > * + *{margin-top:20px}
.prose p{font-size:15.5px;line-height:1.78;color:var(--text);margin:0}
.prose h3{
  font-family:var(--serif);font-size:clamp(20px,1.6vw,25px);font-weight:400;
  line-height:1.28;color:var(--fg);margin:0;
}
.prose h3:not(:first-child){margin-top:clamp(34px,3.4vw,48px)}
.prose h4{
  font-family:var(--sans);font-size:16px;font-weight:500;
  line-height:1.4;color:var(--fg);margin:0;letter-spacing:-.005em;
}
/* Headings hug the copy they introduce; paragraphs breathe apart from each
   other. Without this a run of h4 + p reads as one undifferentiated block. */
.prose h4:not(:first-child){margin-top:clamp(26px,2.6vw,36px)}
.prose h3 + p, .prose h3 + ul,
.prose h4 + p, .prose h4 + ul{margin-top:12px}
.prose p + p{margin-top:22px}
.prose strong{color:var(--fg-mid);font-weight:500}
.prose ul{margin:0;padding:0;list-style:none}
.prose ul li{
  position:relative;padding-left:24px;font-size:15px;line-height:1.72;color:var(--text);
}
.prose ul li + li{margin-top:11px}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:8px;height:1px;background:var(--accent);
}
.prose a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-dim)}
.prose a:hover{border-bottom-color:var(--accent)}

/* two-column body: sticky sub-nav / notes beside the prose */
.split{display:grid;gap:clamp(28px,4vw,64px)}
@media (min-width:960px){
  .split{grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);align-items:start}
  .split__aside{position:sticky;top:calc(var(--nav-h) + 28px)}
}
.split__aside h2{
  font-family:var(--serif);font-size:clamp(21px,1.7vw,27px);font-weight:400;
  line-height:1.26;color:var(--fg);margin:16px 0 0;
}
.split__aside p{margin:14px 0 0;font-size:14.5px;line-height:1.68}
/* the figure fills the sticky column, which was empty below the note */
.split__fig{margin:clamp(28px,3.2vw,42px) 0 0;max-width:290px}
.split__fig img{width:100%;height:auto;opacity:.92}
@media (max-width:959px){.split__fig{max-width:190px}}

/* ---------- Linked cards ---------- */
.deck{
  display:grid;gap:0;margin:0;padding:0;list-style:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
@media (min-width:820px){.deck{grid-template-columns:repeat(2,1fr);column-gap:clamp(28px,3.4vw,56px)}}
.deck__i{border-bottom:1px solid var(--line)}
/* the container closes the block; the last row must not double the rule */
.deck__i:last-child{border-bottom:0}
@media (min-width:820px){.deck__i:nth-last-child(-n+2){border-bottom:0}}
.card{
  display:block;text-decoration:none;color:inherit;
  padding:clamp(26px,3vw,38px) 0;
  transition:padding-left .34s var(--ez);
}
@media (min-width:820px){.card:hover{padding-left:14px}}
.card{position:relative}
.card__fig{
  position:absolute;top:clamp(20px,2.4vw,30px);right:0;
  width:clamp(64px,7vw,92px);height:auto;opacity:.42;pointer-events:none;
  transition:opacity .3s var(--ez),transform .4s var(--ez);
}
.card:hover .card__fig{opacity:.78;transform:translateY(-3px)}
.card__no{display:block;margin-bottom:14px}
.card__t{
  font-family:var(--serif);font-size:clamp(21px,1.7vw,27px);font-weight:400;
  line-height:1.26;color:var(--fg);margin:0 0 12px;
  transition:color .24s var(--ez);
}
.card:hover .card__t{color:var(--accent-2)}
.card p{margin:0;font-size:14.5px;line-height:1.7;color:var(--text);max-width:52ch}
.card__go{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
}
.card__go i{font-style:normal;transition:transform .28s var(--ez)}
.card:hover .card__go i{transform:translate(3px,-3px)}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chips li{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);
  border:1px solid var(--line-2);padding:7px 11px;border-radius:var(--r);
}

/* ---------- Q&A ---------- */
.qa{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.qa li{
  display:grid;gap:10px clamp(28px,3.4vw,56px);
  padding:clamp(22px,2.6vw,30px) 0;border-bottom:1px solid var(--line);
}
/* same column split as studio.css .row, so the rule spans content on both sides */
@media (min-width:960px){
  .qa li{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:baseline}
}
.qa h3{
  font-family:var(--sans);font-size:16px;font-weight:500;line-height:1.42;
  color:var(--fg);margin:0;letter-spacing:-.005em;
}
.qa p{margin:0;font-size:14.5px;line-height:1.72;color:var(--text);max-width:62ch}

/* The band closes itself with its own rules and needs far less air than a
   content section — .sec's 130px padding left it floating, and .sec's bottom
   border drew a second rule directly under the band's own. */
.sec--nav{padding:clamp(30px,3.4vw,46px) 0;border-bottom:0}

/* ---------- Page-to-page navigation ----------
   Two filled blocks. Drawn as hairline cells the space between previous and
   next read as a gap; as surfaces it belongs to the controls. */
.pagenav{
  display:grid;gap:clamp(14px,1.6vw,20px);
  margin:0;padding:0;list-style:none;
}
@media (min-width:620px){.pagenav{grid-template-columns:repeat(2,1fr)}}
.pagenav li{min-width:0;display:flex}
.pagenav a{
  display:flex;align-items:center;gap:18px;width:100%;
  padding:clamp(22px,2.4vw,30px) clamp(20px,2.2vw,28px);
  text-decoration:none;color:inherit;
  background:var(--bg-3);border:1px solid var(--line-2);
  transition:border-color .24s var(--ez),box-shadow .24s var(--ez);
}
.pagenav a:hover{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-dim)}
.pagenav__next a{flex-direction:row-reverse;text-align:right}
.pagenav__ar{
  flex:none;font-style:normal;font-size:19px;line-height:1;
  color:var(--accent);transition:transform .3s var(--ez);
}
.pagenav__prev a:hover .pagenav__ar{transform:translateX(-5px)}
.pagenav__next a:hover .pagenav__ar{transform:translateX(5px)}
.pagenav__txt{min-width:0;flex:1 1 auto}
.pagenav__txt .micro{display:block;margin-bottom:8px}
.pagenav b{
  display:block;font-family:var(--serif);font-size:clamp(18px,1.3vw,21px);
  font-weight:400;line-height:1.3;color:var(--fg);
  transition:color .24s var(--ez);
}
.pagenav a:hover b{color:var(--accent-2)}

/* ---------- Section-level "read the full page" link ----------
   A full-width band, not an inline scrap: this is the only route from the
   home page into the inner pages and needs to read as a control. */
.more{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-top:clamp(32px,3.6vw,48px);
  padding:clamp(18px,2vw,24px) 0;
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  text-decoration:none;
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  transition:color .24s var(--ez),border-color .24s var(--ez);
}
.more:hover{color:var(--accent-2);border-top-color:var(--accent);border-bottom-color:var(--accent)}
.more i{font-style:normal;font-size:16px;line-height:1;transition:transform .3s var(--ez)}
.more:hover i{transform:translate(4px,-4px)}


/* ---------- Tablet layout for shared components ----------
   Between 620px and 1039px .hub and .cinfo collapse to one column. Their rules
   then run the full width past text filling barely a third of it — the same
   unfinished look the page header and the Q&A rows had. Give them the
   label-left / detail-right split studio.css already uses for .row.
   These rules also reach bio.html, which links this stylesheet. */
@media (min-width:520px) and (max-width:1039px){
  .hub__n{
    display:grid;
    grid-template-columns:46px minmax(0,.8fr) minmax(0,1.2fr);
    gap:2px clamp(20px,3vw,40px);
    align-items:baseline;
  }
  .hub__n > span{margin-bottom:0}
  .hub__n p{margin:0}

  .cinfo li{
    display:grid;
    grid-template-columns:minmax(0,.5fr) minmax(0,1fr);
    gap:2px clamp(20px,3vw,40px);
    align-items:baseline;
  }
  .cinfo > li > span{margin-bottom:0}
}


/* ---------- Step grids sized to their content ----------
   studio.css fixes .steps at five columns (the support programme has five
   stages). Any page with fewer left an empty trailing track with the rule
   running across it. --n comes from the generator; bio.html sets none and
   keeps the five-column default. */
@media (min-width:1040px){
  .steps{grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}
}


/* ---------- "How we engage" as a flow rail ----------
   Five equal cells on hairline dividers read as a table, and the chevrons that
   sat on those dividers read as stray glyphs. A rail with one marker per stage
   says sequence instead. LYT is the filled marker rather than the only tinted
   cell. Overrides studio.css (.hub dividers) and bio.css (the chevrons), both
   of which load before this file, so equal-specificity selectors win on order.
   bio.html links this stylesheet, so its "How we engage" section changes too. */
.hub{border-top:1px solid var(--line-2)}
.hub__n{position:relative}

@media (min-width:1040px){
  /* dividers off; the rail carries the structure */
  .hub__n{padding:34px 22px 8px 0;border-left:0}
  .hub__n + .hub__n{padding-left:22px;border-left:0}
  .hub__n--core{padding-left:22px;padding-right:22px;background:none;box-shadow:none}

  /* the marker replaces the chevron. bio.css targets `.hub__n + .hub__n::before`
     at (0,2,1), so the reset has to match that specificity, not just `.hub__n`. */
  .hub__n::before,
  .hub__n + .hub__n::before{
    content:"";position:absolute;top:-5px;left:0;
    width:9px;height:9px;border:0;border-radius:50%;transform:none;
    background:var(--bg);box-shadow:inset 0 0 0 1px var(--accent);
  }
  .hub__n + .hub__n::before{left:22px}
  .sec--alt .hub__n::before,
  .sec--alt .hub__n + .hub__n::before{background:var(--bg-2)}

  /* Must outrank BOTH the `+` reset (0,2,1) and the .sec--alt variant (0,3,1),
     otherwise the core marker loses its accent inside an alt section. */
  .hub__n.hub__n--core::before,
  .sec--alt .hub__n.hub__n--core::before{
    background:var(--accent);box-shadow:0 0 0 4px var(--accent-dim);
  }
  .hub__n--core .d4{color:var(--accent-2)}
}

/* ---------- Touch target sizes ----------
   These links were all display:inline with no padding, so the tappable area was
   the text itself — 14–20px tall, under the 24px WCAG 2.5.8 minimum. Padding
   enlarges the target; the matching negative margin keeps the layout identical,
   so nothing moves on screen. Links sitting inline inside a sentence are exempt
   and are left alone. */
/* The links inherited the body's 1.68 line-height plus a 12px gap: 36px per row
   for 14.5px text, a 2.5x ratio that read as far too airy. Tightened to 29px
   (2.0x, the normal range for a footer list) while the padded row keeps the tap
   target at 29px — above the 24px WCAG minimum. */
.footer__links{gap:0}
.footer__links a{display:block;line-height:1.45;padding:4px 0}

.footer address a{display:inline-block;padding:4px 0;margin-block:-4px}

.crumbs a{display:inline-block;padding:6px 0;margin-block:-6px}

/* .cinfo used border-bottom as its underline, which would have been pushed away
   from the text by padding — so the underline moves to text-decoration. */
.cinfo a{
  display:inline-block;padding:5px 0;margin-block:-5px;
  border-bottom:0;
  text-decoration:underline;
  text-decoration-color:var(--line-2);
  text-underline-offset:4px;
}
.cinfo a:hover{color:var(--accent);text-decoration-color:var(--accent)}

.form__note a{display:inline-block;padding:6px 0;margin-block:-6px}


/* ---------- Heading outline fixes ----------
   Screen-reader users navigate by heading level, so an h1 -> h3 or h2 -> h4
   jump loses a rung. These keep the visual design identical while making the
   outline continuous. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* prose sub-headings are h3 now, styled as the h4 they replaced */
.prose h3.prose__sub{
  font-family:var(--sans);font-size:16px;font-weight:500;
  line-height:1.4;color:var(--fg);margin:0;letter-spacing:-.005em;
}
.prose h3.prose__sub:not(:first-child){margin-top:clamp(26px,2.6vw,36px)}
.prose h3.prose__sub + p,
.prose h3.prose__sub + ul{margin-top:12px}

/* the keyword index likewise — bio.css styles .index__g h4, this matches it */
.index__g h3{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  margin-bottom:12px;
}


/* ---------- Form fallback ----------
   Shown only after a submit when no endpoint is configured, so the visitor can
   recover the enquiry they typed even if no mail client opened. */
.form__fallback{
  margin-top:16px;padding:18px;
  border:1px solid var(--line-2);background:var(--bg-3);
  display:grid;gap:12px;justify-items:start;
}
.form__fallback[hidden]{display:none}
.form__fallback-addr{margin:0;font-size:14px;color:var(--text)}
.form__fallback-addr a{
  display:inline-block;padding:5px 0;margin-block:-5px;
  color:var(--accent);text-decoration:underline;
  text-decoration-color:var(--accent-dim);text-underline-offset:4px;
}
.form__fallback-addr a:hover{text-decoration-color:var(--accent)}
.form__fallback-text{
  width:100%;resize:vertical;
  font-family:var(--mono);font-size:12.5px;line-height:1.65;
  color:var(--fg-mid);background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r);padding:12px;
}
.form__fallback-text:focus{outline:2px solid var(--accent);outline-offset:2px}