:root {
  color-scheme: dark;
  --ink: #f1eee5;
  --text: #d3dad7;
  --muted: #aab9bb;
  --blue: #a9ced7;
  --bg: #162023;
  --band: #1c2a2e;
  --rule: #405055;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  scroll-behavior: smooth;
}
* {box-sizing: border-box}
body {margin: 0; line-height: 1.58}
img {display: block; max-width: 100%}
a {color: inherit; text-underline-offset: .22em}
a:focus-visible {outline: 3px solid #c4e3eb; outline-offset: 5px; border-radius: 2px}
h1, h2, h3, p, figure, dl, dd {margin: 0}
h1, h2, h3 {font-family: var(--serif); font-weight: 400; line-height: 1.04}
h2 {font-size: clamp(2.7rem, 4.7vw, 4.65rem); letter-spacing: -.047em}
h3 {font-size: clamp(1.55rem, 2.3vw, 2.1rem); letter-spacing: -.035em}
.wrap {width: min(1240px, 88%); margin-inline: auto}
.skip {position: absolute; left: 16px; top: -100px; padding: 12px; z-index: 10; background: var(--ink); color: var(--bg)}
.skip:focus {top: 12px}
.label, .kicker, .section-tag, .row-number, .file-meta, .figure-link, .plate, figcaption, .foot-inner>span {
  font-family: var(--mono); font-size: .71rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase
}
.kicker, .section-tag {display: flex; align-items: center; gap: 14px; color: var(--blue)}
.line {width: 38px; height: 1px; background: var(--blue); display: inline-block}
.mast {background: #141e21; border-bottom: 1px solid #3c484c}
.mast-row {display: flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 83px}
.brand {display: inline-block; flex: none; padding-block: 10px}
.brand img {width: 147px; height: auto}
.mast nav {display: flex; align-items: center; gap: clamp(24px, 3.2vw, 54px)}
.mast nav a {font-size: .87rem; font-weight: 520; text-decoration: none; color: #dce1dd}
.mast nav a:hover, .text-link:hover, .foot-inner a:hover, .call:hover, .guide-cross a:hover, .back:hover {color: var(--blue)}
.mast .nav-contact {display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; border: 1px solid #71888e; border-radius: 3px; padding: 8px 15px; color: var(--ink)}
.mast .nav-contact:hover {background: #253539}
.hero {isolation: isolate; position: relative; background: #182123; overflow: hidden}
.hero-image, .hero-shade {position: absolute; inset: 0; z-index: -1}
.hero-image img {width: 100%; height: 100%; object-fit: cover; object-position: center 55%}
.hero-shade {background: linear-gradient(90deg, rgba(12,23,25,.85) 0%, rgba(13,23,26,.67) 28%, rgba(12,23,25,.22) 58%, transparent 80%),linear-gradient(0deg,rgba(11,20,22,.43),transparent 27%)}
.hero-inner {position: relative; min-height: clamp(540px, 45vw, 680px); display: flex; align-items: center; padding-block: 65px 78px}
.hero-copy {max-width: 660px}
.hero h1 {margin: 22px 0 20px; font-size: clamp(5.8rem, 7.9vw, 8.1rem); line-height: .91; letter-spacing: -.065em; font-weight: 400}
h1 em, h2 em {color: #b6d5db; font-weight: 400}
.hero .lede {color: #e1e5df; max-width: 460px; font-size: clamp(1.05rem,1.45vw,1.25rem); line-height: 1.5}
.hero-actions, .contact-actions {display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 28px}
.button {display: inline-flex; gap: 20px; align-items: center; justify-content: space-between; padding: 13px 19px; border-radius: 3px; font-size: .88rem; font-weight: 650; text-decoration: none}
.primary {background: #b4d4db; color: #14282c}
.primary:hover {background: #cbe3e8}
.text-link, .call {display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-size: .86rem; font-weight: 550; text-decoration: underline; text-decoration-color: #8c9fa3; text-underline-offset: .37em; text-decoration-thickness: 1px}
.text-link span, .button span {font-size: 1.1rem; line-height: 1}
.figure-link {position: absolute; bottom: 24px; right: 0; color: #e6eeeb; display: flex; gap: 10px; align-items: center; text-decoration: none; padding: 5px 10px; background: rgba(19,31,34,.79); border: 1px solid #607377; border-radius: 2px; font-size: .62rem}
.figure-link b {font-weight: 500; color: #c1dfe5; margin-right: 7px}
.target {width: 10px; height: 10px; border: 1px solid #c3dade; position: relative}
.target::after {content: ''; position: absolute; background: #c3dade; width: 2px; height: 2px; top: 3px; left: 3px}
.route-bar {border-block: 1px solid var(--rule); background: #192629}
.route-inner {display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 59px}
.route-inner>.label {color: var(--muted)}
.route-inner>div {display: flex; gap: clamp(22px,4vw,68px)}
.route-inner a {display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 0; color: var(--blue); font: .68rem var(--mono); text-decoration: none}
.route-inner a span {color: var(--text); font: .83rem var(--sans)}
.route-inner a:hover span {text-decoration: underline}
.section {padding-block: clamp(58px,6.5vw,96px)}
.section-tag {margin-bottom: 21px; color: var(--blue)}
.section-tag span {display: inline-flex; align-items: center; gap: 12px}
.section-tag span::after {content: ''; height: 1px; width: 28px; background: #779097}
.intro-grid, .comparison-grid, .contact-grid {display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,8vw,135px); align-items: end}
.intro-grid>p, .section-blurb, .field-text p, .options p, .system-note p, .guide-content p, .contact-content>p {color: var(--text); font-size: 1rem}
.intro-grid>p {max-width: 48ch; padding-bottom: 3px}
.field {background: #1c292d; border: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; margin-top: 38px; overflow: hidden}
.field figure {position: relative; display: flex; flex-direction: column; justify-content: center; background: #1a272b; padding: 22px 26px; border-right: 1px solid var(--rule)}
.field figure img {width: 100%; height: auto}
figcaption {color: var(--muted); font-size: .6rem; margin-top: 6px}
figcaption span {color: var(--blue); margin-right: 10px}
.field-text {padding: clamp(24px,3.8vw,56px); align-self: center}
.field-text .label, .options .label, .measure .label {color: var(--blue)}
.field-text h3 {margin: 14px 0}
.field-text p+p {margin-top: 12px}
.options {display: grid; grid-template-columns: repeat(3,1fr); gap: 36px; margin-top: 40px}
.options article {border-top: 1px solid #65787c; padding-top: 17px}
.options h3 {margin: 13px 0}
.options p, .system-note p, .record-list {font-size: .94rem}
.system-note {display: flex; gap: 28px; padding-top: 27px; border-top: 1px solid var(--rule); margin-top: 32px}
.system-note .label {flex: none; color: var(--muted); margin-top: 3px}
.system-note p {max-width: 83ch}
.system-note a {display: inline-block; color: var(--blue); margin-right: 13px}
.band {background: var(--band); border-block: 1px solid var(--rule)}
.comparison-grid {align-items: start}
.section-blurb {margin: 21px 0; max-width: 37ch}
.download {color: var(--blue); margin: 5px 0 2px}
.file-meta {display: block; color: var(--muted); font-size: .62rem; margin-top: 7px}
.compare {border-top: 1px solid #6c7d80}
.compare div {display: grid; grid-template-columns: 41% 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); line-height: 1.48}
.compare dt {color: var(--ink); font-weight: 620; font-size: .93rem}
.compare dd {font-size: .89rem; color: var(--text)}
.property-list {margin-top: 34px; border-top: 1px solid #6c7e83}
.property-row {padding: 17px 2px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 34px minmax(210px,1fr) minmax(150px,.85fr) 36px; align-items: center; gap: 16px; text-decoration: none; transition: background .15s ease}
.property-row:hover {background: #213034}
.row-number, .property-cue {color: var(--muted)}
.property-name {font-family: var(--serif); font-size: clamp(1.42rem,2.15vw,2.06rem); letter-spacing: -.035em; line-height: 1.2}
.property-cue {font-size: .88rem}
.row-arrow {color: var(--blue); justify-self: end; font-size: 1.24rem}
.contact {border-top: 1px solid var(--rule); background: #243237}
.contact-grid {padding-block: clamp(46px,6vw,85px); align-items: center}
.contact h2 {margin-top: 20px; color: var(--ink)}
.contact-content>p {max-width: 44ch}
.plain-email {display: inline-block; color: var(--blue); font-size: .85rem; margin-top: 16px}
.footer {background: #111b1e; border-top: 1px solid var(--rule)}
.foot-inner {min-height: 76px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-block: 20px; font-size: .81rem; color: var(--text)}
.foot-brand {font-weight: 660; text-decoration: none; color: var(--ink)}
.foot-inner>span {color: var(--muted); margin-right: auto; font-size: .61rem}
.foot-inner a:not(.foot-brand) {text-decoration-color: #70888e}
.guide-head {background: #1a272b; border-bottom: 1px solid var(--rule)}
.back {display: inline-block; color: var(--blue); text-decoration: none; font-size: .86rem; margin-block: 26px}
.back span {margin-right: 8px}
.guide-layout {display: grid; grid-template-columns: 1.55fr .65fr; align-items: center; gap: clamp(24px,6vw,100px); padding: 14px 0 46px}
.guide-layout h1, .section>h1 {font-size: clamp(3rem,6.8vw,6.8rem); letter-spacing: -.055em; line-height: .99; margin: 18px 0; overflow-wrap: break-word}
.guide-headline {font-family: var(--serif); font-size: clamp(1.5rem,2.7vw,2.55rem); font-style: italic; line-height: 1.18; color: var(--blue)}
.guide-vignette {position: relative; border: 1px solid #59686b; height: clamp(120px,15vw,224px); overflow: hidden}
.guide-vignette img {width: 100%; height: 100%; object-fit: cover; object-position: center 41%}
.plate {position: absolute; bottom: 10px; right: 10px; background: #182428; padding: 4px 9px; font-size: .62rem; color: var(--blue)}
.guide-content {display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(32px,8vw,130px); padding-block: clamp(44px,6vw,86px)}
.guide-content h2 {font-size: clamp(2.05rem,3.5vw,3.5rem); margin-bottom: 20px}
.measure {border-left: 2px solid #84abb5; background: #1e2c30; padding: 18px 24px; margin-top: 24px}
.measure h3, .guide-fact h3 {font-size: 1.48rem; margin: 8px 0}
.measure p, .guide-fact p {font-size: .93rem}
.record-list {margin: 0 0 26px; padding-left: 19px; color: var(--text)}
.record-list li {margin: 0 0 10px; padding-left: 3px}
.record-list li::marker {color: var(--blue)}
.guide-fact {border-top: 1px solid var(--rule); margin-top: 15px; padding-block: 12px 0}
.guide-content .download {margin-top: 24px}
.guide-cross {border-top: 1px solid var(--rule)}
.guide-cross .wrap {padding-block: 22px; display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap}
.guide-cross .label {color: var(--muted)}
.guide-cross nav {display: flex; flex-wrap: wrap; gap: 8px 17px}
.guide-cross nav a {font-size: .86rem; text-decoration-color: #698084}
@media (max-width: 880px) {
  .wrap {width: min(91%, 740px)}
  .intro-grid, .comparison-grid, .contact-grid {gap: 30px}
  .hero h1 {font-size: clamp(5.25rem, 10vw, 6.5rem)}
  .hero-inner {min-height: 510px}
  .hero-copy {max-width: 540px}
  .hero .lede {max-width: 415px}
  .route-inner>div {gap: 18px}
  .field figure {padding: 17px}
  .options {gap: 21px}
  .property-row {grid-template-columns: 24px 1fr .75fr 22px}
}
@media (max-width: 670px) {
  .wrap {width: calc(100% - 40px)}
  .mast-row {min-height: 65px; flex-wrap: wrap; gap: 0; padding-block: 7px}
  .brand img {width: 108px}
  .mast nav {gap: 14px}
  .mast nav a {font-size: .75rem}
  .mast .nav-contact {padding: 6px 9px; gap: 5px}
  .hero-inner {min-height: 550px; align-items: flex-start; padding-block: 66px 80px}
  .hero-image img {object-position: 50% 33%}
  .hero-shade {background: linear-gradient(90deg, rgba(13,23,26,.78) 0%, rgba(13,23,26,.52) 56%, rgba(13,23,26,.12) 100%), linear-gradient(0deg,rgba(11,20,22,.66),transparent 28%)}
  .hero h1 {font-size: clamp(4.5rem, 15vw, 6.5rem); margin-block: 25px 18px}
  .hero .lede {font-size: 1rem; max-width: 34ch}
  .hero-actions {gap: 16px; align-items: flex-start; flex-direction: column; margin-top: 22px}
  .figure-link {right: 0; bottom: 16px; font-size: .55rem}
  .route-inner {min-height: 52px}
  .route-inner>.label {display: none}
  .route-inner>div {width: 100%; justify-content: space-between; gap: 10px}
  .route-inner a {gap: 5px; font-size: .59rem}
  .route-inner a span {font-size: .71rem}
  .intro-grid, .comparison-grid, .contact-grid, .guide-content {grid-template-columns: 1fr; gap: 23px}
  .desktop-br {display: none}
  .field {grid-template-columns: 1fr; margin-top: 24px}
  .field figure {border-right: 0; border-bottom: 1px solid var(--rule)}
  .field figure img {max-height: 195px; object-fit: contain}
  .options {grid-template-columns: 1fr; gap: 23px; margin-top: 28px}
  .options article {padding-top: 13px}
  .options h3 {margin-block: 6px}
  .system-note {display: block}
  .system-note .label {margin: 0 0 7px}
  .compare div {padding-block: 13px}
  .property-row {grid-template-columns: 22px 1fr 20px; gap: 4px 9px; padding-block: 15px}
  .property-cue {grid-column: 2; grid-row: 2; font-size: .79rem}
  .row-arrow {grid-column: 3; grid-row: 1 / 3}
  .contact-actions {margin-top: 19px}
  .foot-inner {gap: 8px 17px}
  .foot-inner>span {margin-right: 0}
  .foot-brand {flex-basis: 55%}
  .guide-layout {grid-template-columns: 1fr; gap: 20px; padding: 3px 0 28px}
  .guide-vignette {height: 90px}
  .guide-content {gap: 36px}
}
@media (max-width: 420px) {
  .mast-row {display: grid; grid-template-columns: 1fr auto; gap: 4px}
  .mast nav {display: grid; grid-template-columns: auto auto; gap: 0 14px; align-items: center}
  .mast nav a {font-size: .74rem; padding-block: 4px}
  .mast nav a:nth-child(2) {grid-column: 1; grid-row: 2}
  .mast .nav-contact {grid-column: 2; grid-row: 1/3; padding-block: 8px}
  .hero-inner {min-height: 505px; padding-top: 52px}
}
@media (max-width: 365px) {
  .wrap {width: calc(100% - 32px)}
  .brand img {width: 86px}
  .mast nav {column-gap: 9px}
  .hero h1 {font-size: clamp(3.55rem, 17.5vw, 3.95rem)}
  .route-inner a {display: block}
  .route-inner a span {display: block}
}
@media (prefers-reduced-motion: reduce) {
  :root {scroll-behavior: auto}
  *, *::before, *::after {transition: none !important; animation: none !important}
}
@media print {
  :root {color-scheme: light; --ink:#122127; --text:#25373a; --muted:#455b62; --blue:#304e5b; --bg:#fff; --rule:#bec8ca; --band:#fff; background:white}
  body, .band, .contact, .guide-head, .field, .measure {background:white; color:#172326}
  .mast, .hero-image, .hero-shade, .figure-link, .hero-actions, .route-bar, .guide-cross, .back, .guide-vignette {display:none}
  .hero, .footer {background:white}
  .hero-inner {min-height:0; padding-block:25px}
  .section, .guide-content, .contact-grid {padding-block:25px}
  .guide-content, .intro-grid, .comparison-grid, .contact-grid {display:block}
  .wrap {width:100%}
  h2, h3 {break-after:avoid}
  .field, .measure, .compare div, .property-row {break-inside:avoid}
  .hero .lede, em, .call, .plain-email {color:#25373a}
}