/* Illustrated landing pages: angular, architectural typography and open space.
   Cyan is a surface/accent; darker teal is used for legible accent headings. */
@font-face { font-family: Quantico; src: url("quantico-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Quantico; src: url("quantico-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --space-xs: .5rem; --space-sm: 1rem; --space-md: 1.5rem;
  --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem;
  --space-section: clamp(4rem, 9vw, 8rem);
  --measure: 96rem; --measure-copy: 36rem;
  --type-display: clamp(3rem, 6.2vw, 6rem);
  --type-heading: clamp(2rem, 3.4vw, 3.5rem);
  --type-body: 1rem; --type-small: .75rem;
  --mark-size: 2.75rem; --cut: 1rem;
  --paper: #f2f1f0; --ink: #2b3033; --body-ink: #62676a;
  --cyan: #15bcdf; --cyan-hover: #3fd0ef; --cyan-ink: #08758b;
  --cyan-border: #0fa3c2; --hairline: #c9cdce; --button-ink: #1a1c1e;
  --art-blend: multiply;
}
:root[data-theme="dark"] { --paper: #171c20; --ink: #f2f1f0; --body-ink: #b5bdc1; --cyan-ink: #3fd0ef; --hairline: #424b51; --art-blend: normal; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --paper: #171c20; --ink: #f2f1f0; --body-ink: #b5bdc1; --cyan-ink: #3fd0ef; --hairline: #424b51; --art-blend: normal; }
}
.skip-link { position: absolute; left: var(--space-sm); top: var(--space-sm); z-index: 10; padding: var(--space-sm); background: var(--bg); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.editorial { background: var(--paper); color: var(--ink); font-weight: 400; }
.editorial .wrap { max-width: var(--measure); padding-inline: clamp(1.25rem, 6vw, 6rem); }
.editorial .site-header { padding-block: var(--space-md); border: 0; }
.editorial .brand { gap: var(--space-xs); font-size: 1.75rem; color: var(--ink); letter-spacing: -.055em; }
.brand-mark { width: var(--mark-size); height: var(--mark-size); }
:root[data-theme="dark"] .brand-mark { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .brand-mark { filter: invert(1); } }
.editorial .nav-link, .editorial .icon-button { color: var(--ink); }
.editorial .nav-link { font-family: Quantico, 'Arial Narrow', sans-serif; text-transform: uppercase; font-size: var(--type-small); letter-spacing: .06em; }
.editorial .icon-button { border: 0; }
.editorial .hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-lg); align-items: center; min-height: calc(100svh - 6rem); padding-block: clamp(2rem, 5vh, 4rem) var(--space-2xl); }
.editorial .hero-copy { position: relative; z-index: 1; }
.editorial .eyebrow { font-family: Quantico, 'Arial Narrow', sans-serif; font-size: var(--type-small); letter-spacing: .08em; color: var(--body-ink); margin-bottom: var(--space-xl); }
.editorial .hero-title, .editorial .section-title, .editorial .feature-title { font-family: Quantico, 'Arial Narrow', sans-serif; text-transform: uppercase; font-weight: 700; letter-spacing: .01em; }
.editorial .hero-title { font-size: var(--type-display); line-height: .98; margin-bottom: var(--space-lg); }
.editorial .headline-start { display: block; max-width: 10ch; }
.editorial .headline-end { display: block; max-width: 11ch; margin-left: clamp(1rem, 8vw, 8rem); color: var(--cyan-ink); }
.editorial .lead { max-width: var(--measure-copy); font-size: var(--type-body); line-height: 1.75; color: var(--body-ink); margin: 0 0 var(--space-lg) clamp(1rem, 8vw, 8rem); }
.editorial .hero .buttons { margin-left: clamp(1rem, 8vw, 8rem); }
.editorial .button { position: relative; border: 0; border-radius: 0; padding: 1.125rem 1.75rem; min-height: 3.5rem; font: 700 .8125rem Quantico, 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: .06em; isolation: isolate; }
.editorial .button-primary { background: transparent; color: var(--button-ink); }
.editorial .button-primary::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--cyan); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.editorial .button-primary::after { content: '→'; font-size: 1.25rem; }
.editorial .button-primary:hover { background: transparent; color: var(--button-ink); }
.editorial .button-primary:hover::before { background: var(--cyan-hover); }
.editorial .button:focus-visible { outline: 3px solid var(--cyan-ink); outline-offset: 5px; }
.editorial .hero-side { margin-right: calc(-1 * clamp(1.25rem, 6vw, 6rem)); align-self: center; }
.editorial .illustration img { border: 0; border-radius: 0; }
.editorial .hero-side .illustration img { width: 100%; mix-blend-mode: var(--art-blend); }
.editorial .caption { font-family: Quantico, 'Arial Narrow', sans-serif; font-size: var(--type-small); line-height: 1.65; color: var(--body-ink); margin-top: var(--space-sm); max-width: var(--measure-copy); }
.editorial .hero-side .caption { margin-right: var(--space-lg); }
.editorial .section { padding-block: var(--space-section); border-top: 1px solid var(--hairline); }
.editorial .section-title { font-size: var(--type-heading); line-height: 1.04; max-width: 21ch; margin: 0 0 var(--space-xl); text-wrap: balance; }
.editorial .section-items > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-2xl); }
.editorial .cards { display: block; }
.editorial .card { display: grid; grid-template-columns: var(--space-lg) minmax(0, 1fr); gap: var(--space-xs) var(--space-sm); border: 0; border-radius: 0; background: transparent; padding: var(--space-md) 0; }
.editorial .card:first-child { padding-top: 0; }
.editorial .card + .card { border-top: 1px solid var(--hairline); }
.editorial .card-kicker { grid-row: 1 / 3; font: 400 var(--type-small) Quantico, 'Arial Narrow', sans-serif; color: var(--cyan-ink); margin: .25rem 0 0; }
.editorial .card h3 { font: 700 1.125rem/1.35 Quantico, 'Arial Narrow', sans-serif; margin: 0; }
.editorial .card p:not(.card-kicker) { grid-column: 2; font-size: var(--type-body); line-height: 1.75; color: var(--body-ink); }
.editorial .section > .wrap > .illustration { max-width: 62rem; margin: 0 0 0 auto; }
.editorial .section-faq > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-2xl); }
.editorial .faq { border: 0; border-radius: 0; background: transparent; }
.editorial .faq details { border-color: var(--hairline); }
.editorial .faq summary { font: 700 1rem/1.5 Quantico, 'Arial Narrow', sans-serif; padding-block: var(--space-md); }
.editorial .faq .answer { font-size: var(--type-body); line-height: 1.75; color: var(--body-ink); padding-bottom: var(--space-md); }
.editorial .closing { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-2xl); align-items: end; border: 0; border-radius: 0; padding: 0; background: transparent; margin: 0; }
.editorial .closing .feature-title { font-size: var(--type-heading); line-height: 1.04; margin-bottom: var(--space-lg); }
.editorial .closing p { color: var(--body-ink); line-height: 1.75; }
.editorial .closing .buttons { justify-content: end; }
.editorial .site-footer { border-color: var(--hairline); color: var(--body-ink); font-family: Quantico, 'Arial Narrow', sans-serif; }
.editorial .site-footer a { color: var(--body-ink); }
@media (max-width: 64rem) {
  .editorial .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .editorial .lead, .editorial .hero .buttons { margin-left: 0; }
  .editorial .section-items > .wrap, .editorial .section-faq > .wrap { gap: var(--space-lg); }
}
@media (min-width: 43.76rem) and (max-height: 53rem) {
  .editorial .hero-title { font-size: min(var(--type-display), 7.3vh); }
  .editorial .eyebrow { margin-bottom: var(--space-lg); }
}
@media (max-width: 43.75rem) {
  .editorial .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--space-xl); padding-top: var(--space-lg); }
  .editorial .hero-title { font-size: clamp(2.5rem, 10.7vw, 4rem); }
  .editorial .headline-end { margin-left: 14vw; }
  .editorial .eyebrow { margin-bottom: var(--space-lg); }
  .editorial .hero-side { margin: 0; }
  .editorial .section-items > .wrap, .editorial .section-faq > .wrap, .editorial .closing { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .editorial .section-title { margin-bottom: var(--space-sm); }
  .editorial .closing .buttons { justify-content: start; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }