/* Fenori design system: light, Apple-grade */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, label:focus-visible, summary:focus-visible { outline: 2px solid #0E6B48; outline-offset: 3px; }
section[id] { scroll-margin-top: 104px; }
body { margin: 0; background: #FAFAFA; color: #121214; font-family: Inter, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a, button { transition: color .25s ease, background-color .25s ease, border-color .25s ease, opacity .25s ease, transform .12s cubic-bezier(.23,1,.32,1); }
nav.main a.cta:active, section.closing a.btn:active, .morelink:active { transform: scale(.97); }
a { color: #121214; }
::selection { background: #0E6B48; color: #ffffff; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 72px); }

/* Scroll-triggered reveal (site.js adds .rv, then .on when in view) */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.rv.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* The bar floats: the outer element only reserves space and holds the
   sticky position, while the inner row is the capsule that hovers over
   the page. It reads as floating through the hairline and the blur, not
   a shadow. */
header.site { position: sticky; top: 0; z-index: 20; padding: 12px clamp(14px, 3vw, 40px); background: transparent; border: 0; transition: padding .4s cubic-bezier(.16,1,.3,1); }
/* Once the page moves, the capsule draws in and firms up. Padding grows by
   exactly what the capsule loses, so the reserved height never changes and
   nothing below it shifts. */
header.site.scrolled { padding-top: 16px; padding-bottom: 16px; }
header.site.scrolled .wrap { height: 52px; background: rgba(255,255,255,.9); border-color: rgba(18,18,20,.18); }
header.site.scrolled.over-dark .wrap { background: rgba(18,18,20,.9); border-color: rgba(250,250,250,.2); }
body.dark header.site.scrolled .wrap { background: rgba(18,18,20,.9); border-color: rgba(250,250,250,.2); }
header.site .wrap { position: relative; max-width: 1240px; padding: 0 10px 0 clamp(18px, 2vw, 26px); background: rgba(255,255,255,.78); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border: 1px solid rgba(18,18,20,.14); border-radius: 999px; transition: background-color .35s ease, border-color .35s ease; }
header.site.over-dark .wrap { background: rgba(18,18,20,.82); border-color: rgba(250,250,250,.16); }
header.site.over-dark .brand svg path { fill: #FAFAFA; }
header.site.over-dark .brand-name { color: #FAFAFA; }
header.site.over-dark .brand-name small { color: #7A7A83; }
header.site.over-dark nav.main a { color: #A1A1AA; }
header.site.over-dark nav.main a:hover, header.site.over-dark nav.main a.here { color: #FAFAFA; }
header.site.over-dark nav.main a.cta { background: #FFFFFF; color: #121214; }
header.site.over-dark label.navbtn { color: #FAFAFA; }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 18px; transition: height .4s cubic-bezier(.16,1,.3,1), background-color .35s ease, border-color .35s ease; }
/* Declared after the transitions above so it actually wins on source order. */
@media (prefers-reduced-motion: reduce) { header.site, header.site .wrap { transition: none; } }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand svg { height: 30px; width: auto; }
.brand-name { font: 600 14px/1.25 'Inter Tight', Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #121214; }
.brand-name small { display: block; font-weight: 500; font-size: 8px; letter-spacing: .3em; color: #6E6E76; }
nav.main { position: relative; display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); }
nav.main a { position: relative; z-index: 1; font: 500 13px/1 Inter, sans-serif; letter-spacing: 0; color: #52525B; text-decoration: none; }
nav.main a:hover, nav.main a.here { color: #121214; }
/* A single indicator tracks the section you are in and follows the pointer,
   so the bar reads as one instrument rather than five separate links. */
.navind { position: absolute; left: 0; top: 50%; width: 0; height: 30px; margin-top: -15px; border-radius: 999px; background: rgba(18,18,20,.065); opacity: 0; pointer-events: none; z-index: 0; transition: transform .42s cubic-bezier(.16,1,.3,1), width .42s cubic-bezier(.16,1,.3,1), opacity .28s ease; }
.navind.on { opacity: 1; }
header.site.over-dark .navind, body.dark .navind { background: rgba(250,250,250,.12); }
/* A hairline separates reading from acting. */
@media (min-width: 901px) {
  nav.main a.cta::before { content: ''; position: absolute; left: calc(-1 * clamp(7px, 1.1vw, 17px)); top: 50%; width: 1px; height: 18px; margin-top: -9px; background: rgba(18,18,20,.16); }
  header.site.over-dark nav.main a.cta::before, body.dark nav.main a.cta::before { background: rgba(250,250,250,.18); }
}
@media (prefers-reduced-motion: reduce) { .navind { transition: none; } }
@media (max-width: 900px) {
  nav.main a.here:not(.cta)::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #0E6B48; margin-right: 8px; vertical-align: 2px; }
  body.dark nav.main a.here:not(.cta)::before { background: #4FB98A; }
}
nav.main a.cta { background: #121214; border: 0; border-radius: 999px; color: #FFFFFF; padding: 10px 18px; font-weight: 500; }
nav.main a.cta:hover { background: #0E6B48; color: #FFFFFF; }
/* Reading progress: a hairline under the header tracks position in the page. */
/* Sits just under the capsule and spans exactly its width, so it reads as
   the bar's own scale rather than a stray line on the page. */
.readline { position: absolute; left: 12px; right: 12px; bottom: -7px; height: 2px; pointer-events: none; }
.readline b { display: block; height: 100%; width: 100%; border-radius: 999px; background: #0E6B48; transform: scaleX(0); transform-origin: 0 50%; }
header.site.over-dark .readline b, body.dark .readline b { background: #4FB98A; }
.navtoggle { display: none; }
label.navbtn { display: none; font: 500 11px/1 Inter, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #121214; cursor: pointer; }
@media (max-width: 900px) {
  label.navbtn { display: block; padding: 17px 24px 17px 20px; margin: -17px -24px -17px -20px; }
  nav.main a:not(.cta) { display: none; }
  nav.main a.cta { display: none; }
  /* Full-screen menu: the section names at display scale, the pill last. */
  /* The panel hangs off the capsule as a second floating card. Absolute,
     not fixed: the capsule's backdrop-filter makes it the containing
     block for fixed descendants, which would misplace the panel. */
  /* Opaque, not translucent: a blurred panel nested inside the capsule's
     own backdrop-filter lets page text bleed through and read as noise. */
  .navtoggle:checked ~ nav.main { position: absolute; top: calc(100% + 10px); left: 0; right: 0; max-height: calc(100dvh - 120px); display: flex; flex-direction: column; align-items: stretch; background: #FFFFFF; border: 1px solid rgba(18,18,20,.14); border-radius: 24px; padding: 10px clamp(20px, 5vw, 28px) 22px; overflow-y: auto; }
  .navtoggle:checked ~ nav.main a:not(.cta) { display: block; padding: 15px 0; font: 600 clamp(24px, 6.5vw, 34px)/1.2 'Inter Tight', Inter, sans-serif; letter-spacing: -.024em; color: #121214; border-top: 1px solid rgba(18,18,20,.12); }
  .navtoggle:checked ~ nav.main a:not(.cta):first-of-type { border-top: 0; }
  .navtoggle:checked ~ nav.main a.here:not(.cta)::before { width: 7px; height: 7px; margin-right: 14px; vertical-align: 6px; }
  .navtoggle:checked ~ nav.main a.cta { display: inline-block; align-self: flex-start; margin-top: 20px; padding: 14px 26px; font-size: 15px; }
  .navtoggle:checked ~ label.navbtn { font-size: 0; letter-spacing: 0; }
  .navtoggle:checked ~ label.navbtn::after { content: 'Close'; font: 500 11px/1 Inter, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
  body:has(.navtoggle:checked) { overflow: hidden; }
  @media (prefers-reduced-motion: no-preference) {
    .navtoggle:checked ~ nav.main a { animation: nav-in .55s cubic-bezier(.16,1,.3,1) both; }
    .navtoggle:checked ~ nav.main a:nth-child(4) { animation-delay: .05s; }
    .navtoggle:checked ~ nav.main a:nth-child(5) { animation-delay: .1s; }
    .navtoggle:checked ~ nav.main a:nth-child(6) { animation-delay: .15s; }
    .navtoggle:checked ~ nav.main a:nth-child(7) { animation-delay: .2s; }
    .navtoggle:checked ~ nav.main a:nth-child(8) { animation-delay: .25s; }
  }
}
@keyframes nav-in { from { opacity: 0; transform: translateY(10px); } }

/* Page hero */
.phero { position: relative; overflow: hidden; }
.phero .wrap { position: relative; padding-top: clamp(72px, 9vh, 120px); padding-bottom: clamp(48px, 6vh, 80px); }
.kicker { display: block; font: 600 12px/1.5 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #6E6E76; margin-bottom: 22px; }
h1 { margin: 0; font: 600 clamp(38px, 4.6vw, 72px)/1.03 'Inter Tight', Inter, sans-serif; letter-spacing: -.028em; max-width: 16ch; text-wrap: balance; }
.phero .sub { margin: 22px 0 0; font: 400 clamp(16px, 1.4vw, 19px)/1.6 Inter, sans-serif; color: #52525B; max-width: 60ch; text-wrap: pretty; }

/* Full-screen statement */
section.moment { border-top: 1px solid rgba(18,18,20,.12); }
section.moment .wrap { min-height: 66vh; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(72px, 11vh, 150px); padding-bottom: clamp(72px, 11vh, 150px); }
.statement { margin: 0; font: 600 clamp(30px, 3.9vw, 60px)/1.07 'Inter Tight', Inter, sans-serif; letter-spacing: -.027em; max-width: 22ch; text-wrap: balance; color: #121214; }
.statement-sub { margin: 26px 0 0; font: 400 clamp(15px, 1.2vw, 18px)/1.7 Inter, sans-serif; color: #52525B; max-width: 48ch; text-wrap: pretty; }

/* Quiet section */
section.quiet { border-top: 1px solid rgba(18,18,20,.12); }
section.quiet .wrap { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); }
.qlabel { display: block; font: 600 12px/1.5 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #6E6E76; margin-bottom: 22px; }
h2 { margin: 0; font: 600 clamp(28px, 3.2vw, 48px)/1.1 'Inter Tight', Inter, sans-serif; letter-spacing: -.024em; max-width: 22ch; text-wrap: balance; }
section.quiet p.body { margin: 20px 0 0; font: 400 clamp(15px, 1.1vw, 17px)/1.75 Inter, sans-serif; color: #52525B; max-width: 54ch; text-wrap: pretty; }
section.quiet p.body strong { color: #121214; font-weight: 500; }

/* Row list */
ul.rows { list-style: none; margin: 40px 0 0; padding: 0; max-width: 820px; }
ul.rows > li { border-top: 1px solid rgba(18,18,20,.12); padding: 20px 0; display: grid; grid-template-columns: minmax(150px, 240px) 1fr; gap: 20px; }
ul.rows > li:last-child { border-bottom: 1px solid rgba(18,18,20,.12); }
ul.rows .rt { font: 600 clamp(15px, 1.4vw, 18px)/1.4 Inter, sans-serif; letter-spacing: -.01em; color: #121214; }
ul.rows .rd { font: 400 15px/1.65 Inter, sans-serif; color: #6E6E76; max-width: 52ch; }
ul.rows.pidx .rt { display: flex; align-items: baseline; gap: 14px; }
ul.rows.pidx .rt a { text-decoration: none; color: #121214; }
ul.rows.pidx .rt a:hover { color: #0E6B48; }
.pid { font: 500 12px/1.6 'IBM Plex Mono', monospace; letter-spacing: .08em; color: #6E6E76; }

/* Rows whose description is empty (e.g. research index) span the full width */
ul.rows.pidx > li:has(.rd:empty) { grid-template-columns: 1fr; }
ul.rows.pidx .rd:empty { display: none; }

/* Two-column term lists */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(28px, 4vw, 64px); margin-top: 40px; max-width: 900px; }
.cols h3 { margin: 0 0 8px; font: 600 12px/1.6 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #6E6E76; }
.cols ul { list-style: none; margin: 0; padding: 0; }
.cols li { border-top: 1px solid rgba(18,18,20,.12); padding: 14px 0; font: 400 15px/1.65 Inter, sans-serif; color: #52525B; }
.cols li:last-child { border-bottom: 1px solid rgba(18,18,20,.12); }

/* Control table */
table.control { border-collapse: collapse; width: 100%; max-width: 860px; margin-top: 40px; }
table.control th { text-align: left; font: 500 9px/1.7 'IBM Plex Mono', monospace; letter-spacing: .2em; text-transform: uppercase; color: #6E6E76; padding: 0 18px 12px 0; border-bottom: 1px solid #121214; }
table.control td { vertical-align: top; padding: 16px 18px 16px 0; border-bottom: 1px solid rgba(18,18,20,.12); font: 400 15px/1.6 Inter, sans-serif; color: #52525B; }
table.control td:first-child { font-weight: 600; color: #121214; white-space: nowrap; }
table.control td:last-child { white-space: nowrap; color: #121214; }

/* Prose (letters, legal) */
.prose { max-width: 680px; }
.prose p { margin: 0 0 1.2em; font: 400 clamp(15px, 1.15vw, 17px)/1.8 Inter, sans-serif; color: #3F3F46; text-wrap: pretty; }
.prose.serif p { font-family: Newsreader, Georgia, serif; }
.prose h2 { margin: 2.4em 0 .6em; font: 600 clamp(17px, 1.5vw, 21px)/1.3 Inter, sans-serif; letter-spacing: -.012em; }
.prose ul { margin: 0 0 1.2em; padding-left: 1.2em; }
.prose li { margin: 0 0 .4em; font: 400 15px/1.7 Inter, sans-serif; color: #3F3F46; }
.prose a { color: #0E6B48; }
.prose .sig { margin-top: 2.2em; font: 400 clamp(16px, 1.4vw, 19px)/1.5 Newsreader, Georgia, serif; color: #121214; }
.prose .sig span { display: block; font: 500 9px/2 'IBM Plex Mono', monospace; letter-spacing: .18em; text-transform: uppercase; color: #6E6E76; }
.effective { margin: 18px 0 0; font: 400 10px/1.7 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #6E6E76; }

/* Contact rows */
ul.contact { list-style: none; margin: 40px 0 0; padding: 0; max-width: 680px; }
ul.contact li { border-top: 1px solid rgba(18,18,20,.12); padding: 18px 0; display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 20px; align-items: baseline; }
ul.contact li:last-child { border-bottom: 1px solid rgba(18,18,20,.12); }
ul.contact .cl { font: 600 12px/1.7 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #6E6E76; }
ul.contact .cv, ul.contact .cv a { font: 400 clamp(15px, 1.2vw, 17px)/1.6 Inter, sans-serif; color: #121214; text-decoration: none; }
ul.contact .cv a:hover { color: #0E6B48; }

.morelink { display: inline-block; margin-top: 38px; font: 500 10px/1 Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #52525B; border-bottom: 1px solid rgba(18,18,20,.22); padding-bottom: 5px; text-decoration: none; }
.morelink:hover { color: #0E6B48; border-color: #0E6B48; }


/* Full-bleed photographic interlude: graded to sit in the monochrome system */
figure.interlude { position: relative; margin: 0; background: #121214; overflow: clip; }
figure.interlude img { display: block; width: 100%; height: min(92vh, 940px); object-fit: cover; filter: saturate(.45) contrast(1.06) brightness(.84); }
figure.interlude figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px clamp(22px, 5vw, 72px); font: 400 13px/1.6 Inter, sans-serif; letter-spacing: 0; color: rgba(255,255,255,.8); text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 2px 10px rgba(0,0,0,.45); }

/* Closing band: black feature tile */
section.closing { position: relative; overflow: hidden; background: #121214; }
section.closing .wrap { position: relative; padding-top: clamp(80px, 10vw, 150px); padding-bottom: clamp(80px, 10vw, 150px); }
section.closing .statement { color: #FAFAFA; font: 600 clamp(26px, 3vw, 44px)/1.14 'Inter Tight', Inter, sans-serif; letter-spacing: -.022em; max-width: 24ch; }
section.closing p.sub { margin: 26px 0 0; font: 400 clamp(15px, 1.2vw, 18px)/1.6 Inter, sans-serif; color: #A1A1AA; max-width: 44ch; }
section.closing a.btn { display: inline-block; margin-top: 38px; background: #FFFFFF; color: #121214; padding: 16px 32px; border-radius: 999px; font: 500 15px/1 Inter, sans-serif; letter-spacing: 0; text-decoration: none; }
section.closing a.btn:hover { background: #FFFFFF; color: #0E6B48; }

/* Footer */
footer.site { border-top: 1px solid rgba(18,18,20,.12); background: #F4F4F5; padding: 0; }
.fcol h4 { margin: 0 0 14px; font: 600 12px/1.5 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #6E6E76; }
.ftop { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(22px, 3vw, 48px); padding-top: 64px; padding-bottom: 48px; }
@media (max-width: 1010px) { .ftop { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fcol a { display: block; font: 400 13px/2.1 Inter, sans-serif; color: #52525B; text-decoration: none; }
.fcol a:hover { color: #121214; }
.fcol p { margin: 0 0 12px; font: 400 13px/1.7 Inter, sans-serif; color: #52525B; }
.fbrand .brand { margin-bottom: 16px; }
.fbrand p { max-width: 30ch; color: #6E6E76; }
.fbottom { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; border-top: 1px solid rgba(18,18,20,.12); padding-top: 18px; padding-bottom: 36px; font: 400 12.5px/1.7 Inter, sans-serif; letter-spacing: 0; text-transform: none; color: #6E6E76; }
.fbottom a { color: #6E6E76; text-decoration: none; }
.fbottom a:hover { color: #121214; }

@media (max-width: 860px) {
  .ftop { grid-template-columns: 1fr 1fr; }
  .fmark { font-size: clamp(52px, 16vw, 110px) !important; }
  ul.rows > li, ul.contact li { grid-template-columns: 1fr; gap: 6px; }
  table.control { display: block; overflow-x: auto; }
  table.control td:first-child, table.control td:last-child { white-space: normal; }
}

/* Statement bands that carry no sub-copy shrink to their content */
section.moment.brief .wrap { min-height: 0; }

/* Hero headline masked word entrance (site.js splits and reveals) */
.phero h1 .hw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.phero h1 .hw span { display: inline-block; transform: translateY(115%); transition: transform .9s cubic-bezier(.16,1,.3,1); }
.phero h1.in .hw span { transform: none; }

/* Generic explanatory sequence framework (site.js drives phases via data-th) */
.seq { border-top: 1px solid rgba(18,18,20,.12); }
.seq .pin > .wrap { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(72px, 11vh, 150px); padding-bottom: clamp(72px, 11vh, 150px); }
.seq .stage { display: none; }
.seq.dark { background: #121214; border-top: 0; }
.seq.dark .statement { color: #FAFAFA; }
.seq.scrolly { border-top: 0; }
.seq.scrolly .pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.seq.scrolly .pin > .wrap { position: absolute; inset: 0; min-height: 0; padding-top: 0; padding-bottom: 0; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: none; }
.seq.scrolly .pin > .wrap > * { max-width: 1200px; margin-left: auto; margin-right: auto; width: calc(100% - 2 * clamp(22px, 5vw, 72px)); }
.seq.scrolly .stage { display: block; position: absolute; inset: 0; pointer-events: none; }
.seq.scrolly .stage > svg { position: absolute; inset: 8% 6%; width: 88%; height: 84%; }
.seq.scrolly .stage li, .seq.scrolly .stage .mega { position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%); list-style: none; }

/* Industry sequence: seed object, environment elements, forming relationships.
   Drawn as an anchored engineering figure: framed stage, boxed nodes, solid spokes. */
.iseq.scrolly { height: 340vh; }
.iseq .mega { font: 600 clamp(14px, 1.3vw, 18px)/1 Inter, sans-serif; letter-spacing: .01em; color: #121214; background: #FAFAFA; border: 1px solid #FAFAFA; border-radius: 999px; padding: 16px 26px; opacity: 0; transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.iseq.scrolly .stage .mega { transform: translate(-50%, -50%) scale(.97); --x: 50%; --y: 44%; }
.iseq.scrolly[data-phase="0"] .mega, .iseq.scrolly[data-phase="1"] .mega { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.iseq.scrolly[data-phase="2"] .mega { opacity: 0; }
.iseq .ents li { font: 500 clamp(11px, .95vw, 13px)/1 Inter, sans-serif; letter-spacing: .02em; color: rgba(250,250,250,.8); background: #121214; border: 1px solid rgba(250,250,250,.22); border-radius: 999px; padding: 12px 18px; opacity: 0; transition: opacity .6s ease, color .6s ease, border-color .6s ease; white-space: nowrap; }
.iseq.scrolly[data-phase="0"] .ents li { opacity: .55; }
.iseq.scrolly[data-phase="1"] .ents li { opacity: 1; color: rgba(250,250,250,.95); border-color: rgba(250,250,250,.4); }
.iseq.scrolly[data-phase="2"] .ents li { opacity: .2; }
.iseq .ents li:nth-child(2) { transition-delay: 60ms; } .iseq .ents li:nth-child(3) { transition-delay: 120ms; }
.iseq .ents li:nth-child(4) { transition-delay: 180ms; } .iseq .ents li:nth-child(5) { transition-delay: 240ms; }
.iseq .ents li:nth-child(6) { transition-delay: 300ms; } .iseq .ents li:nth-child(7) { transition-delay: 360ms; }
.iseq .ents li:nth-child(8) { transition-delay: 420ms; } .iseq .ents li:nth-child(9) { transition-delay: 480ms; }
.iseq .net line { stroke: rgba(250,250,250,.22); opacity: 0; transition: opacity .8s ease; vector-effect: non-scaling-stroke; stroke-width: 1px; }
.iseq.scrolly[data-phase="1"] .net line { opacity: 1; }
.iseq.scrolly[data-phase="2"] .net line { opacity: .15; }
.iseq .net line:nth-child(2) { transition-delay: 80ms; } .iseq .net line:nth-child(3) { transition-delay: 160ms; }
.iseq .net line:nth-child(4) { transition-delay: 240ms; } .iseq .net line:nth-child(5) { transition-delay: 320ms; }
.iseq .net line:nth-child(6) { transition-delay: 400ms; } .iseq .net line:nth-child(7) { transition-delay: 480ms; }
.iseq .net line:nth-child(8) { transition-delay: 560ms; } .iseq .net line:nth-child(9) { transition-delay: 640ms; }
/* Reduced motion skips the scrolly engine entirely, so the phase rules above
   never fire. Show the connections statically rather than an empty stage. */
@media (prefers-reduced-motion: reduce) {
  .iseq .net line { opacity: 1; transition: none; transition-delay: 0s; }
}
.iseq .fin { transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.iseq.scrolly .fin { opacity: 0; transform: translateY(16px); }
.iseq.scrolly[data-phase="2"] .fin { opacity: 1; transform: none; }
.iseq .fin-sub { margin: 22px 0 0; font: 400 clamp(15px, 1.3vw, 18px)/1.6 Inter, sans-serif; color: rgba(250,250,250,.6); }
.iseq.scrolly .stage > svg { inset: 0; width: 100%; height: 100%; }

/* Institutional wordmark close */
.fmark { display: block; margin: 28px 0 0; font: 650 clamp(80px, 12vw, 180px)/0.94 'Inter Tight', Inter, sans-serif; letter-spacing: -.045em; color: #121214; }
.floc { display: block; margin: 10px 0 34px; font: 400 13px/1.8 Inter, sans-serif; letter-spacing: 0; text-transform: none; color: #6E6E76; }

/* In-page section navigation */
.subnav { display: flex; flex-wrap: wrap; gap: 8px 26px; border-top: 1px solid rgba(18,18,20,.12); border-bottom: 1px solid rgba(18,18,20,.12); }
.subnav .wrap { display: flex; flex-wrap: wrap; gap: 8px 26px; padding-top: 16px; padding-bottom: 16px; }
.subnav a { font: 500 13px/1.5 Inter, sans-serif; letter-spacing: 0; color: #6E6E76; text-decoration: none; }
.subnav a:hover { color: #121214; }

/* Domain map: the subjects of an environment */
.domain { list-style: none; margin: 44px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; max-width: 980px; }
.domain li { font: 500 13.5px/1 Inter, sans-serif; letter-spacing: .01em; color: #3F3F46; border: 1px solid rgba(18,18,20,.16); padding: 13px 20px; border-radius: 999px; background: #FFFFFF; }
.domain li.hub { background: #121214; color: #FAFAFA; border-color: #121214; }

/* Where technology breaks down: substantial two-column prose grid */
.probgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(36px, 4vw, 64px) clamp(32px, 4vw, 72px); margin-top: 52px; max-width: 1100px; }
.probgrid h3 { margin: 0 0 12px; font: 600 clamp(17px, 1.5vw, 21px)/1.3 'Inter Tight', Inter, sans-serif; letter-spacing: -.016em; color: #121214; }
.probgrid p { margin: 0; font: 400 15px/1.75 Inter, sans-serif; color: #52525B; text-wrap: pretty; }

/* Operating areas accordion */
.acc { max-width: 860px; margin-top: 44px; }
.acc details { border: 1px solid rgba(18,18,20,.12); border-radius: 16px; background: #FFFFFF; padding: 0 24px; margin-bottom: 10px; }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 22px 0; font: 600 clamp(16px, 1.5vw, 20px)/1.4 'Inter Tight', Inter, sans-serif; letter-spacing: -.014em; color: #121214; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font: 400 16px/1 'IBM Plex Mono', monospace; color: #6E6E76; }
.acc details[open] summary::after { content: "\2212"; }
.acc .ac-body { padding: 0 0 24px; }
.acc .ac-body p { margin: 0 0 14px; font: 400 15px/1.7 Inter, sans-serif; color: #52525B; max-width: 58ch; }
.acc .ac-terms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.acc .ac-terms li { font: 500 12.5px/1 Inter, sans-serif; letter-spacing: .01em; color: #52525B; border: 1px solid rgba(18,18,20,.14); padding: 9px 15px; border-radius: 999px; }

/* Example system: before state and resulting architecture */
.exsys { display: grid; grid-template-columns: minmax(280px, 5fr) minmax(300px, 7fr); gap: clamp(36px, 5vw, 88px); margin-top: 52px; max-width: 1100px; }
@media (max-width: 860px) { .exsys { grid-template-columns: 1fr; } }
.exsys h3 { margin: 0 0 18px; font: 600 12px/1.6 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #6E6E76; }
.exsys ul.before { list-style: none; margin: 0; padding: 0; }
.exsys ul.before li { border-top: 1px solid rgba(18,18,20,.12); padding: 13px 0; display: grid; grid-template-columns: minmax(110px, 150px) 1fr; gap: 16px; font: 400 14px/1.6 Inter, sans-serif; color: #52525B; }
.exsys ul.before li:last-child { border-bottom: 1px solid rgba(18,18,20,.12); }
.exsys ul.before .sys { font: 600 11.5px/1.8 Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #6E6E76; }
.exsys ol.stack { list-style: none; margin: 0; padding: 0; }
.exsys ol.stack li { position: relative; border: 1px solid rgba(18,18,20,.12); border-radius: 16px; background: #FFFFFF; padding: 17px 22px; margin: 0 0 26px; font: 500 14px/1.5 Inter, sans-serif; color: #121214; }
.exsys ol.stack li span { display: block; font: 400 13px/1.55 Inter, sans-serif; color: #6E6E76; margin-top: 3px; }
.exsys ol.stack li:not(:last-child)::after { content: "\2193"; position: absolute; left: 22px; bottom: -22px; font: 400 13px/1 'IBM Plex Mono', monospace; color: #6E6E76; }
.exsys ol.stack li.human { background: #121214; color: #FAFAFA; border-color: #121214; }
.exsys ol.stack li.human span { color: rgba(250,250,250,.65); }

/* ============ EVIDENCE MODE: dark pages (Work, Technology, Builds) ============ */
body.dark { background: #121214; color: #FAFAFA; }
body.dark a { color: #FAFAFA; }
body.dark ::selection { background: #FAFAFA; color: #121214; }
body.dark header.site { background: transparent; }
body.dark header.site .wrap { background: rgba(18,18,20,.72); border-color: rgba(250,250,250,.16); }
body.dark a:focus-visible, body.dark button:focus-visible, body.dark input:focus-visible, body.dark textarea:focus-visible, body.dark label:focus-visible, body.dark summary:focus-visible { outline-color: #4FB98A; }
body.dark .brand svg path { fill: #FAFAFA; }
body.dark .brand-name { color: #FAFAFA; }
body.dark .brand-name small { color: #7A7A83; }
body.dark nav.main a { color: #A1A1AA; }
body.dark nav.main a:hover, body.dark nav.main a.here { color: #FAFAFA; }
body.dark nav.main a.cta { background: #FFFFFF; color: #121214; }
body.dark nav.main a.cta:hover { background: #4FB98A; color: #121214; }
body.dark label.navbtn { color: #FAFAFA; }
body.dark .navtoggle:checked ~ nav.main { background: #1A1A1E; border-color: rgba(250,250,250,.16); }
@media (max-width: 900px) {
  body.dark .navtoggle:checked ~ nav.main a:not(.cta) { color: #FAFAFA; border-top-color: rgba(250,250,250,.12); }
}
body.dark h1, body.dark h2, body.dark .statement { color: #FAFAFA; }
body.dark .phero .sub, body.dark section.quiet p.body, body.dark .statement-sub { color: #A1A1AA; }
body.dark section.quiet p.body strong { color: #FAFAFA; }
body.dark .kicker, body.dark .qlabel { color: #8B8B93; }
body.dark section.quiet, body.dark section.moment { border-top-color: rgba(250,250,250,.12); }
body.dark .subnav { border-color: rgba(250,250,250,.12); }
body.dark .subnav a { color: #A1A1AA; }
body.dark .subnav a:hover { color: #FAFAFA; }
body.dark ul.rows > li, body.dark ul.rows > li:last-child, body.dark .cols li, body.dark ul.contact li { border-color: rgba(250,250,250,.12); }
body.dark ul.rows .rt, body.dark ul.rows.pidx .rt a, body.dark ul.contact .cv, body.dark ul.contact .cv a { color: #FAFAFA; }
body.dark ul.rows.pidx .rt a:hover { color: #4FB98A; }
body.dark ul.rows .rd, body.dark .cols li { color: #A1A1AA; }
body.dark .pid, body.dark .cols h3, body.dark ul.contact .cl { color: #8B8B93; }
body.dark table.control th { color: #8b8d85; border-bottom-color: rgba(250,250,250,.4); }
body.dark table.control td { color: #A1A1AA; border-bottom-color: rgba(250,250,250,.12); }
body.dark table.control td:first-child, body.dark table.control td:last-child { color: #FAFAFA; }
body.dark .domain li { background: #1A1A1E; border-color: rgba(250,250,250,.16); color: #D4D4D8; }
body.dark .domain li.hub { background: #FAFAFA; border-color: #FAFAFA; color: #121214; }
body.dark .probgrid h3 { color: #FAFAFA; }
body.dark .probgrid p { color: #A1A1AA; }
body.dark .acc details, body.dark .acc details:last-child { background: #1A1A1E; border-color: rgba(250,250,250,.12); }
body.dark .acc summary { color: #FAFAFA; }
body.dark .acc summary::after { color: #7A7A83; }
body.dark .acc .ac-body p { color: #A1A1AA; }
body.dark .acc .ac-terms li { color: #A1A1AA; border-color: rgba(250,250,250,.18); }
body.dark .exsys h3 { color: #7A7A83; }
body.dark .exsys ul.before li { color: #A1A1AA; border-color: rgba(250,250,250,.12); }
body.dark .exsys ul.before .sys { color: #7A7A83; }
body.dark .exsys ol.stack li { background: #1A1A1E; border-color: rgba(250,250,250,.2); color: #FAFAFA; }
body.dark .exsys ol.stack li span { color: #A1A1AA; }
body.dark .exsys ol.stack li.human { background: #FAFAFA; border-color: #FAFAFA; color: #121214; }
body.dark .exsys ol.stack li.human span { color: #52525B; }
body.dark .exsys ol.stack li:not(:last-child)::after { color: #7A7A83; }
body.dark .morelink { color: #A1A1AA; border-color: rgba(250,250,250,.3); }
body.dark .morelink:hover { color: #FAFAFA; border-color: #FAFAFA; }
body.dark .prose p, body.dark .prose li { color: #C9C9CE; }
body.dark .prose a { color: #4FB98A; }
body.dark section.closing { border-top: 1px solid rgba(250,250,250,.12); }
body.dark figure.interlude figcaption { color: rgba(250,250,250,.85); }
body.dark footer.site { background: #0C0C0E; border-top-color: rgba(250,250,250,.12); }
body.dark .fcol h4 { color: #7A7A83; }
body.dark .fcol a, body.dark .fcol p { color: #A1A1AA; }
body.dark .fcol a:hover { color: #FAFAFA; }
body.dark .fmark { color: #FAFAFA; }
body.dark .floc, body.dark .fbottom, body.dark .fbottom a { color: #7A7A83; }
body.dark .fbottom { border-top-color: rgba(250,250,250,.12); }
body.dark .fbottom a:hover { color: #FAFAFA; }
body.dark .foffices { border-top-color: rgba(250,250,250,.12); }
body.dark .foff h5 { color: #7A7A83; }
body.dark .foff p { color: #A1A1AA; }
body.dark .foff a { color: #FAFAFA; }
body.dark .foff a:hover { color: #4FB98A; }
/* builds index cards on dark */
body.dark .cards li { border-color: rgba(250,250,250,.12) !important; }
body.dark .cards .ct { color: #FAFAFA !important; }
body.dark .cards .ctag, body.dark .cards .cs { color: #A1A1AA !important; }
body.dark .cards .cn { color: #7A7A83 !important; }
body.dark .cards .cl { color: #A1A1AA !important; border-color: rgba(250,250,250,.3) !important; }
body.dark .cards a:hover .ct { color: #4FB98A !important; }

body.dark .cards .cmeta { color: #7A7A83 !important; }

/* Below the sequence breakpoint the industry figure renders as a static panel
   instead of a full-black band holding only a headline. */
@media (max-width: 899px) {
  .iseq .pin > .wrap { min-height: 0; padding-top: 56px; padding-bottom: 72px; }
  .iseq .stage { display: block; position: relative; border: 1px solid rgba(250,250,250,.14); border-radius: 16px; margin: 64px clamp(24px, 5vw, 72px) 0; padding: 20px 16px 16px; }
  .iseq .stage::after { content: none; }
  .iseq .stage .net { display: none; }
  .iseq .stage .ents { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .iseq .stage .ents li, .iseq .stage .mega { position: static; transform: none; }
  .iseq .ents li { opacity: 1; white-space: normal; }
  .iseq .stage .mega { display: inline-block; opacity: 1; margin-top: 8px; }
}

/* Micro-interaction: index rows nudge on hover (fine pointers only) */
@media (hover: hover) and (pointer: fine) {
  ul.rows.pidx .rt a { display: inline-block; transition: transform .2s cubic-bezier(.23,1,.32,1), color .2s ease; }
  ul.rows.pidx li:hover .rt a { transform: translateX(4px); }
}

/* ============ v24 components: photography-led, cold-luxury ============ */
.btn-pill { display: inline-block; background: #121214; color: #FFFFFF; padding: 16px 32px; border-radius: 999px; font: 500 15px/1 Inter, sans-serif; letter-spacing: 0; text-decoration: none; border: 0; cursor: pointer; }
.btn-pill:hover { background: #0E6B48; color: #FFFFFF; }
.btn-pill:active { transform: scale(.97); }
.tlink { display: inline-flex; align-items: center; gap: 6px; font: 500 15px/1.3 Inter, sans-serif; color: #0E6B48; text-decoration: none; }
.tlink:hover { color: #121214; }

/* Full-bleed photo band with statement */
/* clip, not hidden: a hidden overflow makes the element a scroll container,
   which becomes the view() timeline root and ends the photo settle instantly */
.band { position: relative; overflow: clip; background: #121214; }
.band img { display: block; width: 100%; height: min(88vh, 860px); object-fit: cover; filter: saturate(.5) contrast(1.05) brightness(.72); }
.band .bcopy { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 0 clamp(48px, 7vh, 88px); background: linear-gradient(transparent, rgba(10,10,12,.42)); }
.band .bcopy h2 { color: #FFFFFF; font-size: clamp(24px, 2.7vw, 42px); max-width: 30ch; }
.band .bcopy p { margin: 14px 0 0; font: 400 clamp(15px, 1.2vw, 18px)/1.6 Inter, sans-serif; color: rgba(255,255,255,.82); max-width: 46ch; }
.band .bcopy .tlink { margin-top: 22px; color: #FFFFFF; }
.band .bcopy .tlink:hover { color: rgba(255,255,255,.7); }

/* Industry tile grid (bento) */
.indgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
.tile-i { position: relative; display: block; overflow: hidden; border-radius: 16px; background: #18181C; text-decoration: none; aspect-ratio: 4 / 3.4; }
.tile-i.wide { grid-column: span 2; aspect-ratio: auto; }
.tile-i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.55) contrast(1.05) brightness(.78); transition: transform .8s cubic-bezier(.16,1,.3,1); }
.tile-i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(185deg, transparent 46%, rgba(8,8,10,.62)); }
.tile-i .tin { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1; }
.tile-i .tname { display: block; font: 600 clamp(19px, 1.7vw, 24px)/1.15 'Inter Tight', Inter, sans-serif; letter-spacing: -.015em; color: #FFFFFF; }
.tile-i .tsub { display: block; margin-top: 6px; font: 400 13.5px/1.5 Inter, sans-serif; color: rgba(255,255,255,.75); max-width: 40ch; }
.tile-i .tgo { position: absolute; top: 18px; right: 20px; z-index: 1; font: 400 16px/1 Inter, sans-serif; color: rgba(255,255,255,.85); opacity: 0; transform: translateX(-4px); transition: opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.tile-i.dark-tile { background: #121214; }
.tile-i.dark-tile::after { content: none; }
.tile-i.dark-tile .tin { top: 24px; bottom: auto; }
.tile-i.dark-tile .tfoot { position: absolute; left: 24px; bottom: 22px; font: 400 13.5px/1.5 Inter, sans-serif; color: rgba(255,255,255,.55); }
@media (hover: hover) and (pointer: fine) {
  .tile-i:hover img { transform: scale(1.04); }
  .tile-i:hover .tgo { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .indgrid { grid-template-columns: 1fr; }
  .tile-i.wide { grid-column: auto; aspect-ratio: 3 / 2; }
  .tile-i { aspect-ratio: 3 / 2; }
}

/* Industry page photo band (under hero) */
.ihero { margin: 0; overflow: clip; }
.ihero .wrap { padding-bottom: clamp(40px, 5vh, 64px); }
.ihero img { display: block; width: 100%; height: clamp(320px, 56vh, 620px); object-fit: cover; border-radius: 16px; filter: saturate(.55) contrast(1.05) brightness(.85); }

/* Challenge intake (shared component; markup on each page, chat.js drives it) */
.intake { max-width: 800px; margin: 44px 0 0; background: #FFFFFF; border: 1px solid rgba(18,18,20,.1); border-radius: 16px; box-shadow: 0 1px 2px rgba(18,18,20,.04); }
.iq { margin: 0; padding: 28px 28px 0; font: 600 clamp(17px, 1.5vw, 20px)/1.4 'Inter Tight', Inter, sans-serif; letter-spacing: -.012em; color: #121214; }
.doc { display: none; margin: 0; max-height: 48vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(18,18,20,.22) transparent; border-bottom: 1px solid rgba(18,18,20,.1); padding: 24px 28px; }
.doc.open { display: block; }
.doc.open + .iq { display: none; }
.doc p { margin: 0 0 12px; font: 400 15px/1.7 Inter, sans-serif; color: #121214; max-width: 64ch; }

/* Visitor turns: quoted with a single hairline, no label */
.doc .you-turn { margin: 30px 0 20px; padding: 2px 0 2px 18px; border-left: 1px solid rgba(18,18,20,.28); }
.doc .you-turn:first-child { margin-top: 0; }
.doc .you-turn p { margin: 0; font: 400 15px/1.65 Inter, sans-serif; color: #52525B; }

/* Fenori turns open with a mono state line: Reading, then Responding while
   the reply streams, settling as the speaker key once it is complete. */
.doc .turn { margin: 0 0 6px; }
.doc .tstat { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 500 12px/1 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #6E6E76; }
.doc .tdot { width: 5px; height: 5px; border-radius: 50%; background: #0E6B48; flex-shrink: 0; transition: opacity .5s ease; }
.doc .tstat.live .tdot { animation: intake-live 1.6s ease-in-out infinite; }
.doc .tstat:not(.live) .tdot { opacity: 0; }
.doc .tword { transition: opacity .16s ease, transform .5s cubic-bezier(.23,1,.32,1); }
.doc .tword.swap { opacity: 0; }
.doc .tstat:not(.live) .tword { transform: translateX(-15px); }

/* Clarifying points: an unnumbered list separated by hairlines */
.doc .qs { margin: 0 0 16px; max-width: 60ch; }
.doc .qi { margin: 0; padding: 9px 0; font: 400 14.5px/1.55 Inter, sans-serif; color: #121214; }
.doc .qi:first-child { padding-top: 2px; }
.doc .qi + .qi { border-top: 1px solid rgba(18,18,20,.08); }

/* Closing assessment: one ruled, weighted verdict */
.doc .verdict { margin: 20px 0 4px; padding-top: 16px; border-top: 1px solid rgba(18,18,20,.14); max-width: 60ch; }
.doc .verdict .vk { display: block; margin: 0 0 8px; font: 600 11px/1 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #6E6E76; }
.doc .verdict p { margin: 0; font: 500 16px/1.55 Inter, sans-serif; color: #121214; }

/* Quiet small-caps label kept for older reply formats (never numbered) */
.doc h5.sk { margin: 22px 0 10px; font: 600 11px/1.6 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #6E6E76; }
.doc h5.sk:first-child { margin-top: 0; }

.doc .turn, .doc .you-turn { animation: intake-rise .5s cubic-bezier(.23,1,.32,1) both; }
@keyframes intake-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes intake-live { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
.doc .turn.streaming .tbody > p:last-child::after,
.doc .turn.streaming .tbody > .qs:last-child .qi:last-child::after,
.doc .turn.streaming .tbody > .verdict:last-child p::after,
.doc .turn.streaming .tbody > h5.sk:last-child::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -.15em; background: #121214; animation: intake-caret 1s steps(1) infinite; }
@keyframes intake-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .doc .turn, .doc .you-turn, .doc .tstat.live .tdot { animation: none; }
  .doc .tword, .doc .tdot { transition: none; }
  .doc .turn.streaming .tbody *::after, .doc .turn.streaming .tbody > p:last-child::after { animation: none; }
}
form.ask { position: relative; display: block; }
form.ask textarea { display: block; width: 100%; border: 0; background: transparent; resize: none; padding: 16px 28px 8px; font: 400 16px/1.6 Inter, sans-serif; color: #121214; min-height: 96px; max-height: 220px; outline: none; }
form.ask textarea::placeholder { color: #A1A1AA; }
.abar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 6px 16px 16px 28px; }
.assist { margin: 0; font: 400 13px/1.5 Inter, sans-serif; color: #6E6E76; }
form.ask button { border: 0; background: #121214; color: #FFFFFF; cursor: pointer; padding: 12px 24px; border-radius: 999px; font: 500 14px/1 Inter, sans-serif; flex-shrink: 0; }
form.ask button:hover { background: #0E6B48; }
form.ask button:active { transform: scale(.97); }
form.ask button:disabled { background: rgba(18,18,20,.14); color: #6E6E76; cursor: default; }
.ghost { position: absolute; left: 29px; top: 17px; right: 29px; font: 400 16px/1.6 Inter, sans-serif; color: #A1A1AA; pointer-events: none; transition: opacity .8s ease; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ghost.off { opacity: 0; }
.contlink { display: none; margin: 16px 0 0; background: none; border: 0; padding: 0; font: 500 15px/1.3 Inter, sans-serif; color: #0E6B48; cursor: pointer; }
.contlink.show { display: block; }
.contlink:hover { color: #121214; }
.continue { display: none; max-width: 800px; margin: 14px 0 0; border: 1px solid rgba(18,18,20,.1); background: #FFFFFF; border-radius: 16px; padding: clamp(22px, 2.8vw, 32px); }
.continue.open { display: block; }
.continue .lead-line { margin: 0; font: 400 clamp(15px, 1.3vw, 17px)/1.6 Inter, sans-serif; color: #121214; max-width: 52ch; }
.continue a.go, .continue button.go { display: inline-block; margin-top: 18px; background: #121214; color: #FFFFFF; border: 0; cursor: pointer; padding: 14px 28px; border-radius: 999px; font: 500 14px/1 Inter, sans-serif; text-decoration: none; }
.continue button.go:hover, .continue a.go:hover { background: #0E6B48; }
.continue form { display: none; margin-top: 20px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.continue form.open { display: grid; }
.continue .f { display: flex; flex-direction: column; gap: 6px; }
.continue .f label { font: 500 12px/1.4 Inter, sans-serif; letter-spacing: .02em; color: #6E6E76; }
.continue input, .continue select { border: 1px solid rgba(18,18,20,.16); background: #FFFFFF; padding: 13px 16px; font: 400 15px/1.4 Inter, sans-serif; color: #121214; outline: none; border-radius: 10px; appearance: none; -webkit-appearance: none; width: 100%; }
.continue select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23121214' stroke-width='1'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.continue input::placeholder { color: #A1A1AA; }
.continue input:focus, .continue select:focus { border-color: #0E6B48; }
.continue select:invalid, .continue select option[value=""] { color: #6E6E76; }
.continue select:focus-visible { outline: 2px solid #0E6B48; outline-offset: 3px; }
.continue .note { grid-column: 1 / -1; margin: 0; font: 400 12.5px/1.6 Inter, sans-serif; color: #6E6E76; }

/* Footer: offices and contact, structured */
.foffices { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); align-items: start; border-top: 1px solid rgba(18,18,20,.1); padding-top: 44px; padding-bottom: 44px; }
.foffices .fmark { margin: 0; font-size: clamp(56px, 6.5vw, 104px); line-height: .94; }
.foff h5 { margin: 0 0 10px; font: 600 12px/1.5 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #6E6E76; }
.foff p { margin: 0 0 8px; font: 400 13.5px/1.7 Inter, sans-serif; color: #52525B; }
.foff a { display: block; font: 400 13.5px/1.9 Inter, sans-serif; color: #121214; text-decoration: none; }
.foff a:hover { color: #0E6B48; }
@media (max-width: 1010px) { .foffices { grid-template-columns: 1fr 1fr; } .foffices .fmark { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foffices { grid-template-columns: 1fr; } }

/* Wide schematics pan sideways on narrow screens. Pin the caption to the
   left edge so it stays readable while the diagram is panned. */
.arch > figcaption { position: sticky; left: 0; }

/* Motion layer: photos settle as they enter; accordions ease open */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .band img, .ihero img, figure.interlude img { scale: 1.05; animation: photo-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
  .acc details[open] .ac-body { animation: acc-open .4s cubic-bezier(.16,1,.3,1); }
}
@keyframes photo-settle { to { scale: 1; } }
@keyframes acc-open { from { opacity: 0; transform: translateY(-6px); } }

/* Live subnav: the section under the reader is marked */
.subnav a.here { color: #121214; }