.inner-page { background: var(--paper); }

.inner-page .site-header { color: var(--paper); }
.inner-page .site-header .wordmark,
.inner-page .site-header .desktop-nav,
.inner-page .site-header .header-cta { position: relative; z-index: 2; }

.page-hero {
  min-height: 78svh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8.5rem clamp(1.25rem, 6vw, 7rem) 2.5rem;
  overflow: hidden;
  isolation: isolate;
  color: var(--paper);
  background: var(--ink);
}
.page-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle at 80% 17%, rgba(217,255,69,.28), transparent 22%),
    radial-gradient(circle at 25% 75%, rgba(88,66,255,.35), transparent 29%),
    linear-gradient(135deg, rgba(13,27,22,.98), rgba(13,27,22,.78));
}
.page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .22;
  background-image: linear-gradient(rgba(242,240,233,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(242,240,233,.2) 1px, transparent 1px);
  background-size: 7rem 7rem;
  mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero-top, .page-hero-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; }
.page-hero-top .section-kicker { margin-bottom: 0; }
.page-code { color: rgba(242,240,233,.55); font-size: .67rem; text-transform: uppercase; letter-spacing: .14em; }
.page-hero-main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr); gap: clamp(3rem, 10vw, 11rem); align-items: end; }
.page-hero h1 { max-width: 10ch; margin: 0; font-family: var(--serif); font-size: clamp(4.4rem, 10vw, 11rem); line-height: .78; letter-spacing: -.1em; }
.page-hero h1 em { color: var(--acid); font-style: italic; }
.page-hero-copy { max-width: 31rem; margin: 0 0 .6rem; color: rgba(242,240,233,.7); font-size: clamp(1rem, 1.45vw, 1.35rem); line-height: 1.25; }
.page-hero-bottom { align-items: center; color: rgba(242,240,233,.62); font-size: .67rem; text-transform: uppercase; letter-spacing: .13em; }
.page-hero-bottom b { color: var(--acid); font-family: var(--serif); font-size: 1.45rem; font-weight: 400; letter-spacing: -.06em; }
.page-hero-bottom .page-rail { display: flex; align-items: center; gap: .75rem; }
.page-rail::before { content: ""; width: 3.25rem; height: 1px; background: currentColor; }

.page-section { padding: clamp(5rem, 11vw, 10rem) clamp(1.25rem, 6vw, 7rem); border-top: 1px solid var(--line); background: var(--paper); }
.page-section-dark { color: var(--paper); background: var(--ink); border-color: rgba(242,240,233,.18); }
.page-section-acid { color: var(--ink); background: var(--acid); border-color: rgba(13,27,22,.35); }
.page-section-grid { display: grid; grid-template-columns: minmax(12rem, .42fr) minmax(0, 1.58fr); gap: clamp(3rem, 10vw, 11rem); align-items: start; }
.page-section-label { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; }
.page-section-dark .page-section-label { color: rgba(242,240,233,.54); }
.page-section-acid .page-section-label { color: rgba(13,27,22,.65); }
.page-section-label b { display: block; margin-bottom: .7rem; color: currentColor; font-family: var(--serif); font-size: 1.3rem; font-weight: 400; letter-spacing: -.06em; }
.page-section h2 { max-width: 12ch; margin: 0 0 2.5rem; font-family: var(--serif); font-size: clamp(3.2rem, 7vw, 8rem); line-height: .82; letter-spacing: -.09em; }
.page-section h2 em { color: var(--electric); font-style: italic; }
.page-section-dark h2 em { color: var(--acid); }
.page-section-acid h2 em { color: var(--ink); }
.page-section-copy { max-width: 45rem; }
.page-section-copy p { max-width: 38rem; color: #52605a; font-size: 1rem; }
.page-section-copy .lede { color: var(--ink); font-family: var(--serif); font-size: clamp(1.55rem, 2.5vw, 2.7rem); line-height: .98; letter-spacing: -.06em; }
.page-section-dark .page-section-copy p { color: rgba(242,240,233,.65); }
.page-section-dark .page-section-copy .lede { color: var(--paper); }
.page-section-acid .page-section-copy p { color: rgba(13,27,22,.74); }
.page-section-acid .page-section-copy .lede { color: var(--ink); }
.page-section-copy .text-link { display: inline-flex; margin-top: 1.2rem; }

.page-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.page-stat { min-height: 9rem; padding: 1.1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.page-stat b { display: block; margin-bottom: .65rem; font-family: var(--serif); font-size: clamp(2.3rem, 4.8vw, 5rem); font-weight: 400; line-height: .8; letter-spacing: -.09em; }
.page-stat span { color: var(--muted); font-size: .67rem; text-transform: uppercase; letter-spacing: .11em; }
.page-section-dark .page-stat-grid { border-color: rgba(242,240,233,.2); }
.page-section-dark .page-stat { border-color: rgba(242,240,233,.2); }
.page-section-dark .page-stat b { color: var(--acid); }
.page-section-dark .page-stat span { color: rgba(242,240,233,.55); }
.page-section-dark .process-list { border-color: rgba(242,240,233,.28); }
.page-section-dark .process-item { border-color: rgba(242,240,233,.28); }
.page-section-dark .process-item em { color: rgba(242,240,233,.58); }
.page-section-dark .process-item:hover, .page-section-dark .process-item.is-active { background: rgba(242,240,233,.07); }

.page-photo-strip { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 1rem; margin-top: clamp(4rem, 9vw, 9rem); }
.page-photo-strip figure { position: relative; min-height: 19rem; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--ink); }
.page-photo-strip figure:nth-child(2) { transform: translateY(3rem); }
.page-photo-strip img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform .7s cubic-bezier(.2,.75,.25,1); }
.page-photo-strip figure:hover img { transform: scale(1.06); }
.page-photo-strip figcaption { position: absolute; z-index: 1; left: 1rem; right: 1rem; bottom: 1rem; color: var(--paper); font-size: .63rem; text-transform: uppercase; letter-spacing: .12em; text-shadow: 0 1px 1rem rgba(0,0,0,.4); }

.page-band { padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 6vw, 7rem); color: var(--ink); background: var(--acid); overflow: hidden; }
.page-band h2 { max-width: 13ch; margin: 0; font-family: var(--serif); font-size: clamp(3.2rem, 7vw, 8rem); line-height: .82; letter-spacing: -.09em; }
.page-band h2 em { font-style: italic; }
.page-band-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.page-band-row p { max-width: 23rem; margin: 0; font-size: 1rem; }
.button-ink { color: var(--paper); background: var(--ink); }

.vertical-stack { border-top: 1px solid var(--line); }
.vertical-card { display: grid; grid-template-columns: 4rem minmax(10rem, .62fr) minmax(15rem, 1fr) auto; gap: 1.5rem; align-items: end; padding: 1.6rem 0; border-bottom: 1px solid var(--line); transition: padding .3s ease, background .3s ease; }
.vertical-card:hover { padding-left: 1rem; padding-right: 1rem; background: rgba(255,255,255,.45); }
.vertical-card-index, .vertical-card-kicker { align-self: start; color: var(--muted); font-size: .67rem; text-transform: uppercase; letter-spacing: .13em; }
.vertical-card h3 { margin: 0; font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 5.8rem); font-weight: 400; line-height: .8; letter-spacing: -.09em; }
.vertical-card p { max-width: 28rem; margin: 0; color: #52605a; }
.vertical-card-link { display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border: 1px solid var(--ink); border-radius: 50%; font-size: 1.2rem; transition: color .25s ease, background .25s ease, transform .25s ease; }
.vertical-card-link:hover { color: var(--acid); background: var(--ink); transform: translate(2px, -2px); }
.vertical-card:nth-child(1) h3 { color: var(--electric); }
.vertical-card:nth-child(2) h3 { color: #0d7f98; }
.vertical-card:nth-child(3) h3 { color: #e35e4d; }
.vertical-card:nth-child(4) h3 { color: var(--ink); }

.capability-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.capability-detail { min-height: 16rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.28); transition: transform .3s ease, background .3s ease; }
.capability-detail:hover { transform: translateY(-6px); background: #fffdf6; }
.capability-detail:nth-child(2) { background: rgba(68,215,239,.24); }
.capability-detail:nth-child(3) { background: rgba(255,128,109,.23); }
.capability-detail:nth-child(4) { background: rgba(217,255,69,.35); }
.capability-detail:nth-child(5) { background: rgba(88,66,255,.12); }
.capability-detail-index { color: var(--muted); font-size: .65rem; text-transform: uppercase; letter-spacing: .13em; }
.capability-detail h3 { max-width: 12ch; margin: 2rem 0 .75rem; font-family: var(--serif); font-size: clamp(1.9rem, 3.2vw, 3.5rem); font-weight: 400; line-height: .88; letter-spacing: -.07em; }
.capability-detail p { max-width: 25rem; margin: 0; color: #52605a; }
.capability-detail ul { display: flex; flex-wrap: wrap; gap: .45rem; padding: 1rem 0 0; margin: 1.4rem 0 0; border-top: 1px solid var(--line); list-style: none; }
.capability-detail li { color: var(--muted); font-size: .63rem; text-transform: uppercase; letter-spacing: .1em; }
.capability-detail li:not(:last-child)::after { content: " /"; color: var(--ink); }

.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.note-card { min-height: 23rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.25rem; border-radius: var(--radius); background: var(--ink); color: var(--paper); transition: transform .35s ease; }
.note-card:hover { transform: rotate(-1.5deg) translateY(-6px); }
.note-card:nth-child(2) { color: var(--ink); background: var(--sky); }
.note-card:nth-child(3) { color: var(--ink); background: var(--coral); }
.note-card:nth-child(4) { color: var(--ink); background: var(--acid); }
.note-card-top { display: flex; justify-content: space-between; gap: 1rem; color: inherit; opacity: .68; font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; }
.note-card h3 { max-width: 12ch; margin: 0; font-family: var(--serif); font-size: clamp(2rem, 3.5vw, 3.8rem); font-weight: 400; line-height: .86; letter-spacing: -.08em; }
.note-card p { max-width: 22rem; margin: 1.2rem 0 0; opacity: .72; }
.note-card-foot { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding-top: 1rem; margin-top: 1.4rem; border-top: 1px solid currentColor; color: inherit; font-size: .63rem; text-transform: uppercase; letter-spacing: .1em; }
.note-card-foot a:hover { text-decoration: underline; text-underline-offset: .25rem; }

.contact-sheet { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1rem; }
.contact-panel { min-height: 22rem; padding: 1.35rem; border: 1px solid rgba(242,240,233,.2); border-radius: var(--radius); background: rgba(242,240,233,.04); }
.contact-panel-large { display: flex; flex-direction: column; justify-content: space-between; min-height: 31rem; background: radial-gradient(circle at 75% 25%, rgba(217,255,69,.24), transparent 32%), rgba(242,240,233,.04); }
.contact-panel h3 { margin: 0; font-family: var(--serif); font-size: clamp(2rem, 4vw, 4.5rem); font-weight: 400; line-height: .86; letter-spacing: -.08em; }
.contact-panel p { max-width: 25rem; color: rgba(242,240,233,.62); }
.contact-panel small, .contact-panel-label { color: rgba(242,240,233,.5); font-size: .65rem; text-transform: uppercase; letter-spacing: .13em; }
.contact-panel .contact-email { margin-top: 2rem; font-size: clamp(1.3rem, 2.8vw, 2.8rem); }
.contact-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: .8rem; }
.contact-links a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid rgba(242,240,233,.2); color: var(--paper); font-size: .68rem; text-transform: uppercase; letter-spacing: .11em; transition: color .25s ease, background .25s ease; }
.contact-links a:hover { color: var(--ink); background: var(--acid); }
.contact-links a span { font-size: 1.1rem; }
.contact-market-list { display: grid; gap: .75rem; margin-top: 2rem; }
.contact-market { padding-top: .75rem; border-top: 1px solid rgba(242,240,233,.2); }
.contact-market b { display: block; margin-bottom: .25rem; color: var(--acid); font-family: var(--serif); font-size: 2rem; font-weight: 400; letter-spacing: -.07em; }
.contact-market span { color: rgba(242,240,233,.62); font-size: .8rem; }

.inner-page .site-footer { position: relative; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.footer-nav a { color: rgba(242,240,233,.72); }
.footer-nav a:hover { color: var(--acid); }

@media (max-width: 1100px) and (min-width: 901px) {
  .desktop-nav { gap: .7rem; font-size: .58rem; }
  .header-cta { font-size: .63rem; }
}
@media (max-width: 900px) {
  .page-hero { min-height: 82svh; }
  .page-hero-main, .page-section-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .page-hero-copy { margin: 0; }
  .page-hero h1 { max-width: 9ch; }
  .page-section-copy { max-width: 40rem; }
  .vertical-card { grid-template-columns: 3rem 1fr auto; align-items: start; }
  .vertical-card p { grid-column: 2 / 3; }
  .vertical-card-link { grid-column: 3; grid-row: 1 / span 2; }
  .notes-grid { grid-template-columns: 1fr 1fr; }
  .contact-sheet { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .page-hero { min-height: 88svh; padding-top: 8rem; padding-bottom: 1.35rem; }
  .page-hero-top, .page-hero-bottom { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .page-code { display: none; }
  .page-hero h1 { font-size: clamp(4.1rem, 19vw, 7.2rem); }
  .page-hero-bottom .page-rail { align-self: stretch; }
  .page-section { padding: 4.8rem 1.25rem; }
  .page-section h2 { font-size: clamp(3.1rem, 15vw, 5.8rem); }
  .page-stat-grid { grid-template-columns: 1fr; }
  .page-stat { min-height: 6.4rem; }
  .page-photo-strip { grid-template-columns: 1fr; }
  .page-photo-strip figure, .page-photo-strip figure:nth-child(2) { min-height: 15rem; transform: none; }
  .page-band { padding: 4.8rem 1.25rem; }
  .page-band-row { align-items: flex-start; flex-direction: column; }
  .vertical-card { grid-template-columns: 2.2rem 1fr auto; gap: .8rem; }
  .vertical-card h3 { font-size: 3rem; }
  .vertical-card p { grid-column: 2 / 4; }
  .capability-detail-grid, .notes-grid, .contact-links { grid-template-columns: 1fr; }
  .capability-detail { min-height: 14rem; }
  .contact-panel, .contact-panel-large { min-height: 20rem; }
  .contact-panel-large { min-height: 26rem; }
}
