:root {
  --bg: #ffffff; --ink: #20231f; --muted: #60675d; --line: #dee3da;
  --accent: #dbaa83; --accent-ink: #20231f; --focus: #526440; --body-font: 'Barlow';
  --cream: #f0eee8; --forest: #344b36; --moss: #788c58; --gold: #d4b65e; --peach: #e4b79a;
}
.page-width { width: 90%; max-width: 1440px; margin-inline: auto; }
.nav { min-height: 94px; border-bottom: 1px solid var(--line); }
.nav-links { font-size: 14px; }
.nav .button { min-height: 44px; padding: 11px 20px; }
.button { border-radius: 80px; min-height: 50px; padding: 14px 25px; font-size: 15px; gap: 24px; }
.button:hover { background: #506147; color: #fff; }
h1, .closing h2 { font-family: 'Zilla Slab', Georgia, serif; font-weight: 500; letter-spacing: -.025em; }
h2, h3 { font-family: 'Barlow', sans-serif; letter-spacing: -.025em; font-weight: 500; }
.hero { padding-top: 57px; }
.hero-copy { text-align: center; }
h1 { font-size: clamp(64px, 7.2vw, 112px); line-height: 1.02; }
.hero-copy > p { max-width: 610px; margin: 25px auto 28px; color: var(--muted); font-size: 19px; line-height: 1.55; }
.media-slot { position: relative; overflow: hidden; isolation: isolate; }
.media-slot::after { content: ''; position: absolute; inset: 0; z-index: 2; background: var(--media-image, none) center / cover no-repeat; pointer-events: none; }
.media-id, .media-caption { position: absolute; z-index: 3; font-size: 11px; }
.media-id { top: 24px; left: 26px; }.media-caption { bottom: 24px; right: 26px; }
.hero-art { --media-image: url('/design/assets/01-junction.webp'); aspect-ratio: 2.65; margin-top: 46px; border-radius: 24px; background: #bbc987; color: #172017; padding: 28px; }
.hero-moss { position: absolute; inset: 0 auto 0 0; width: 32%; background: #667c45; }
.hero-gold { position: absolute; inset: 0 0 45% auto; width: 24%; background: #d9b958; }
.hero-peach { position: absolute; inset: 55% 0 0 auto; width: 35%; background: #ebbea0; }
.hero-art .media-id, .hero-art .media-caption { color: #fff; background: #172017; padding: 8px 10px; }
.workspace-reservation { position: absolute; z-index: 3; left: 32%; top: 22%; width: 37%; height: 63%; background: #fcfaf3; border-radius: 7px; display: flex; flex-direction: column; }
.workspace-bar { height: 15%; border-bottom: 1px solid #d9ddd4; display: flex; align-items: center; gap: 5px; padding-inline: 7%; }
.workspace-bar i { height: 5px; width: 5px; background: #afb3a7; border-radius: 50%; }
.workspace-columns { margin: 8%; display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 7%; flex: 1; }
.workspace-columns span { background: #e6eadb; }.workspace-columns span:nth-child(2) { background: #ecd2b8; }.workspace-columns span:nth-child(3) { background: #dedcaf; }
.sector-line { display: flex; justify-content: space-between; gap: 24px; padding: 28px 0 72px; color: var(--muted); font-size: 14px; }
.split-feature { display: grid; grid-template-columns: 1fr 1fr; max-width: 1800px; margin-inline: auto; min-height: 570px; }
.feature-copy { background: var(--forest); color: #fff; display: flex; align-items: flex-end; padding: 70px max(40px, 6vw); }
.feature-content { position: relative; z-index: 3; }
.feature-tint { position: absolute; inset: 0 0 0 auto; width: 18%; background: #425b3d; }
.feature-content h2 { font-size: clamp(48px, 4.7vw, 74px); line-height: 1.04; }
.feature-content p { max-width: 570px; margin: 26px 0 32px; font-size: 20px; line-height: 1.5; color: #eef1e7; }
.button-light { background: #fff; color: #20231f; }.button-light:hover { background: #e4b79a; color: #20231f; }
.feature-image { background: #929e6a; min-height: 570px; padding: 28px; color: #172017; }
.feature-peach { position: absolute; inset: 0 0 0 auto; width: 55%; background: var(--peach); }
.feature-gold { position: absolute; inset: 60% 0 0 0; background: var(--gold); }
.capabilities { background: var(--cream); padding: 90px 0 100px; }
.capabilities-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 48px; }
.capabilities-intro h2 { font-size: clamp(42px, 4.3vw, 66px); line-height: 1.08; }.capabilities-intro p { font-size: 19px; color: var(--muted); }
.panel-stack { position: relative; }
.capability-panel { position: sticky; top: calc(20px + var(--panel-index) * 65px); border-radius: 24px; min-height: 575px; margin-bottom: 26px; padding: 30px 4% 52px; overflow: hidden; scroll-margin-top: 25px; }
.capability-panel:last-child { margin-bottom: 0; }
.panel-data { background: #24434a; color: #fff; --muted: #e0e8e4; --line: #587174; --focus: #d4b65e; }
.panel-intelligence { background: #101210; color: #fff; --muted: #d1d6cc; --line: #484d45; --focus: #d4b65e; }
.panel-operations { background: #e3e7db; color: #20231f; --muted: #495244; --line: #b2bbab; }
.panel-rail { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 15px; margin-bottom: 62px; }
.panel-rail svg { width: 18px; height: 18px; }
.panel-content { display: grid; grid-template-columns: 1.15fr 1fr; gap: 7%; align-items: center; }
.panel-copy h3 { font-size: clamp(39px, 4.1vw, 64px); line-height: 1.05; }
.panel-copy > p { font-size: 19px; line-height: 1.5; margin: 24px 0; color: var(--muted); max-width: 570px; }
.capability-detail { max-width: 490px; border-top: 1px solid var(--line); }
.capability-detail summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; cursor: pointer; list-style: none; padding: 18px 0; font-size: 15px; }
.capability-detail summary::-webkit-details-marker { display: none; }
.capability-detail ul { margin: 0; padding: 0 0 20px 20px; color: var(--muted); font-size: 16px; }
.capability-detail li + li { margin-top: 8px; }
.panel-art { aspect-ratio: 1.22; border-radius: 15px; padding: 22px; }
.data-art { background: #7d9b94; color: #142c2e; }.intelligence-art { background: #272e25; color: #fff; }.operations-art { background: #b6c79d; color: #23341e; }
.art-field-one { position: absolute; inset: 0 0 45% 48%; background: #bccba8; }.art-field-two { position: absolute; inset: 55% 0 0 0; background: #cdb773; }
.intelligence-art .art-field-one { background: #536348; inset: 0 0 0 60%; }.intelligence-art .art-field-two { background: #8e9e6b; inset: 67% 0 0 0; }
.operations-art .art-field-one { background: #dce3c8; inset: 0 0 0 45%; }.operations-art .art-field-two { background: #cfc198; inset: 65% 0 0 0; }
.art-window { position: absolute; top: 25%; left: 13%; width: 75%; height: 62%; background: #f4f3ec; border-radius: 8px; padding: 13%; display: flex; gap: 12%; }
.art-window > div { position: absolute; top: 0; left: 0; right: 0; height: 15%; border-bottom: 1px solid #c6cfc0; }
.art-window > span { width: 24%; background: #c0ceac; }.art-window > span:nth-last-child(2) { background: #d9c59d; }
.intelligence-art .art-window { background: #181d17; }.intelligence-art .art-window > div { border-color: #43503e; }.intelligence-art .art-window > span { background: #718162; }
.operations-art .art-window { background: #292c30; padding: 12% 8%; flex-direction: column; gap: 12%; }.operations-art .art-window > span { height: 20%; width: 100%; background: #414a40; }.operations-art .art-window > div { border-color: #52604a; }
.editorial { padding: 102px 0 108px; }
.editorial-heading { display: flex; justify-content: space-between; gap: 40px; align-items: flex-start; margin-bottom: 48px; }
.editorial-heading h2 { font-size: clamp(44px, 4.7vw, 72px); line-height: 1.06; }.editorial-heading .text-link { font-size: 17px; margin-top: 10px; }
.editorial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.editorial-card { background: var(--cream); border-radius: 24px; padding: 20px 20px 0; display: flex; flex-direction: column; overflow: hidden; }
.card-art { aspect-ratio: 1.66; border-radius: 10px; padding: 20px; }
.card-blue { background: #617da8; color: #fff; }.card-green { background: #405549; color: #fff; }.card-violet { background: #8d88ac; color: #171b21; }
.card-field-one { position: absolute; inset: 0 55% 0 0; background: #8097b8; }.card-field-two { position: absolute; inset: 64% 0 0 45%; background: #a6a2b8; }
.card-green .card-field-one { background: #77885b; inset: 0 0 60% 55%; }.card-green .card-field-two { background: #647452; inset: 67% 30% 0 0; }
.card-violet .card-field-one { background: #404d68; inset: 0 0 0 65%; }.card-violet .card-field-two { background: #d0c785; inset: 60% 35% 0 0; }
.card-blue .media-id { background: #2e456b; padding: 5px 8px; left: 18px; top: 18px; }.card-violet .media-id { background: #e1deed; padding: 5px 8px; left: 18px; top: 18px; }
.card-copy { padding: 28px 4px 32px; flex: 1; }.card-copy h3 { font-size: clamp(27px, 2.4vw, 36px); line-height: 1.17; }.card-copy p { font-size: 17px; line-height: 1.5; color: var(--muted); margin-top: 20px; }
.card-link { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 66px; font-size: 16px; text-decoration: none; margin-right: -20px; padding-left: 4px; }
.card-arrow { background: #fff; border-top-left-radius: 26px; padding: 23px 22px; align-self: stretch; display: grid; place-items: center; }.card-arrow svg { width: 23px; height: 23px; transition: transform 180ms; }.card-link:hover > span:first-child { text-decoration: underline; }.card-link:hover svg { transform: translateX(3px); }.card-link:focus-visible { outline-offset: -3px; }
.closing { background: #f7f7f0; text-align: center; padding: 96px 0 105px; }.closing h2 { font-size: clamp(48px, 6.1vw, 94px); line-height: 1.04; }.closing p { font-size: 19px; color: var(--muted); margin: 28px 0; }.closing .booking-notice { margin-inline: auto; }
.footer { padding-block: 35px; font-size: 14px; }.footer > span { color: var(--muted); }
@media (max-width: 1000px) {
  .feature-copy { padding: 50px 7%; }.feature-image, .split-feature { min-height: 520px; }.feature-content h2 { font-size: 48px; }.feature-content p { font-size: 18px; }
  .panel-content { gap: 5%; }.panel-copy h3 { font-size: 42px; }.panel-copy > p { font-size: 18px; }.panel-art { aspect-ratio: .9; }.panel-rail { margin-bottom: 40px; }
  .editorial-grid { gap: 16px; }.editorial-card { padding: 14px 14px 0; }.card-copy h3 { font-size: 28px; }.card-copy p { font-size: 16px; }.card-link { margin-right: -14px; font-size: 14px; gap: 8px; }.card-arrow { padding-inline: 16px; }
}
@media (max-width: 700px) {
  .page-width { width: auto; margin-inline: 24px; }.nav { min-height: 82px; }.nav .button { padding: 10px 14px; font-size: 13px; gap: 12px; }
  .hero { padding-top: 44px; }h1 { font-size: clamp(43px, 10vw, 68px); }.hero-copy > p { font-size: 17px; }.desktop-break { display: none; }
  .hero-art { aspect-ratio: 1.15; margin-top: 36px; border-radius: 16px; padding: 20px; }.workspace-reservation { left: 16%; top: 27%; width: 68%; height: 48%; }
  .media-id { top: 20px; left: 20px; }.media-caption { bottom: 20px; left: 20px; right: auto; }.sector-line { flex-wrap: wrap; gap: 7px 22px; padding: 24px 0 48px; font-size: 13px; }
  .split-feature { grid-template-columns: 1fr; }.feature-copy { padding: 55px 24px; }.feature-content h2 { font-size: 47px; }.feature-content p { font-size: 18px; margin: 24px 0 28px; }.feature-image { min-height: 0; aspect-ratio: 1.4; }
  .capabilities { padding: 60px 0; }.capabilities-intro { display: block; margin-bottom: 32px; }.capabilities-intro h2 { font-size: 43px; }.capabilities-intro p { font-size: 17px; margin-top: 22px; }
  .capability-panel { position: relative; top: auto; min-height: 0; padding: 24px; border-radius: 18px; margin-bottom: 18px; }.panel-rail { font-size: 13px; margin-bottom: 30px; }.panel-content { grid-template-columns: 1fr; gap: 22px; }.panel-copy h3 { font-size: 39px; }.panel-copy > p { font-size: 17px; margin-block: 22px; }.panel-art { aspect-ratio: 1.25; border-radius: 10px; }
  .editorial { padding: 62px 0 70px; }.editorial-heading { display: block; margin-bottom: 30px; }.editorial-heading h2 { font-size: 45px; }.editorial-heading .text-link { margin-top: 24px; font-size: 16px; }.editorial-grid { grid-template-columns: 1fr; gap: 25px; }.editorial-card { padding: 18px 18px 0; }.card-art { aspect-ratio: 1.55; }.card-copy { padding: 25px 4px 30px; }.card-copy h3 { font-size: 31px; }.card-copy p { font-size: 17px; }.card-link { margin-right: -18px; font-size: 16px; }.card-arrow { padding-inline: 22px; }
  .closing { padding: 66px 0 75px; }.closing h2 { font-size: clamp(40px, 10vw, 62px); }.closing p { font-size: 17px; }.footer { gap: 24px; }
}
@media (max-width: 370px) {
  .page-width { margin-inline: 20px; }.nav .brand { font-size: 19px; }.nav .button { padding-inline: 10px; gap: 8px; font-size: 12px; }.feature-copy { padding-inline: 20px; }.capability-panel { padding: 22px 20px; }.panel-copy h3 { font-size: 35px; }.panel-rail { gap: 12px; font-size: 12px; }.panel-rail svg { width: 16px; }
}
@media (max-height: 740px) and (min-width: 701px) { .capability-panel { position: relative; top: auto; } }
@media (prefers-reduced-motion: reduce) { .capability-panel { position: relative; top: auto; } }