

:root {

   --ground:#eef4f7;
   --surface:#dee5e9;
   --surface-2:#ccd3d7;
   --line:#a9b0b4;
   --ink-soft:#494e50;
   --ink:#27292b;
   --accent:#19808e;
   --accent-ink:#ffffff;

   --surface-tint:rgba(222, 229, 233, 0.72);
   --surface-solid:#e5ecf0;
   --line-subtle:rgba(169, 176, 180, 0.35);
   --line-strong:#878e92;
   --ink-faint:#6d7478;

   --pili-fd8:'Syne', 'Syne Fallback', system-ui, -apple-system, sans-serif;
   --pili-a7c:'EB Garamond', 'EB Garamond Fallback', Georgia, serif;
   --pili-fb6:'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, Menlo, Consolas, monospace;

   --fs-hero:clamp(2.35rem, 1.8rem + 2.75vw, 4.25rem);
   --fs-h1:clamp(2.05rem, 1.65rem + 2.0vw, 3.4rem);
   --fs-h2:clamp(1.65rem, 1.35rem + 1.5vw, 2.5rem);
   --fs-h3:clamp(1.3rem, 1.15rem + 0.75vw, 1.75rem);
   --fs-h4:clamp(1.1rem, 1.05rem + 0.25vw, 1.35rem);
   --fs-body-lg:clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
   --fs-body:clamp(1.025rem, 0.975rem + 0.25vw, 1.15rem);
   --fs-body-sm:clamp(0.875rem, 0.85rem + 0.125vw, 0.95rem);
   --fs-caption:clamp(0.775rem, 0.75rem + 0.1vw, 0.85rem);
   --fs-mono:clamp(0.8rem, 0.75rem + 0.2vw, 0.9rem);
   --fs-quote:clamp(1.5rem, 1.25rem + 1.25vw, 2.4rem);

   /* Line Heights */
   --lh-tight:1.1;
   --lh-snug:1.25;
   --lh-heading:1.2;
   --lh-body:1.6;
   --lh-prose:1.68;
   --lh-loose:1.8;

   /* Tracking & Letter Spacing */
   --ls-display:-0.03em;
   --ls-heading:-0.02em;
   --ls-body:0.005em;
   --ls-mono:-0.01em;
   --ls-caps:0.08em;

   /* Spacing Rhythm */
   --space-3xs:0.25rem;
   --space-2xs:0.5rem;
   --space-xs:0.75rem;
   --space-sm:1rem;
   --space-md:1.5rem;
   --space-lg:2rem;
   --space-xl:3rem;
   --space-2xl:4.5rem;
   --space-3xl:6rem;
   --space-4xl:8.5rem;

   /* Layout Containers */
   --container-max:1360px;
   --container-narrow:840px;
   --container-prose:65ch;
   --gutter:clamp(1.25rem, 0.8rem + 2.25vw, 3rem);

   /* Geometry & Borders */
   --radius-xs:2px;
   --radius-sm:4px;
   --radius-md:8px;
   --radius-lg:12px;
   --radius-pill:9999px;
   --border-thin:1px solid var(--line);
   --border-subtle:1px solid var(--line-subtle);

   /* Depth & Shadows */
   --shadow-sm:0 1px 3px rgba(39, 41, 43, 0.06), 0 1px 2px rgba(39, 41, 43, 0.04);
   --shadow-md:0 4px 14px rgba(39, 41, 43, 0.08), 0 2px 6px rgba(39, 41, 43, 0.04);
   --shadow-lg:0 12px 32px rgba(39, 41, 43, 0.10), 0 4px 10px rgba(39, 41, 43, 0.05);

   /* Transitions & Motion */
   --dur-instant:120ms;
   --dur-fast:180ms;
   --dur-base:240ms;
   --dur-slow:400ms;
   --dur-deliberate:650ms;
   --ease-standard:cubic-bezier(0.2, 0, 0, 1);
   --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);
}


*,
*::before,
*::after {
   box-sizing:border-box;
   margin:0;
   padding:0;
}

html {
   font-size:100%;
   background-color:var(--ground);
   color:var(--ink);
   color-scheme:light;
   scroll-behavior:smooth;
   -webkit-text-size-adjust:100%;
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
}

body {
   min-height:100vh;
   background-color:var(--ground);
   color:var(--ink);
   font-family:var(--pili-a7c);
   font-size:var(--fs-body);
   line-height:var(--lh-body);
   letter-spacing:var(--ls-body);
   display:flex;
   flex-direction:column;
   overflow-x:hidden;
   position:relative;
}

input,
button,
textarea,
select {
   font:inherit;
   color:inherit;
   letter-spacing:inherit;
}

img,
svg,
video,
canvas {
   display:block;
   max-width:100%;
   height:auto;
}

ul,
ol { list-style:none; }

a {
   color:inherit;
   text-decoration:none;
}

table {
   border-collapse:collapse;
   border-spacing:0;
   width:100%;
}

fieldset {
   border:0;
   min-width:0;
}


h1,
h2,
h3,
h4,
h5,
h6 {
   font-family:var(--pili-fd8);
   font-weight:700;
   line-height:var(--lh-heading);
   letter-spacing:var(--ls-heading);
   color:var(--ink);
   text-wrap:balance;
   overflow-wrap:break-word;
   word-break:normal;
}

h1 {
   font-size:var(--fs-h1);
   font-weight:800;
   letter-spacing:var(--ls-display);
   line-height:var(--lh-tight);
}

h2 {
   font-size:var(--fs-h2);
   line-height:var(--lh-tight);
   margin-block-end:var(--space-xs);
}

h3 {
   font-size:var(--fs-h3);
   font-weight:600;
   line-height:var(--lh-snug);
   margin-block-end:var(--space-2xs);
}

h4 {
   font-size:var(--fs-h4);
   font-weight:600;
   line-height:var(--lh-snug);
}

p {
   max-width:var(--container-prose);
   margin-block-end:var(--space-sm);
   color:var(--ink);
   line-height:var(--lh-prose);
}

p:last-child { margin-block-end:0; }

.lede {
   font-size:var(--fs-body-lg);
   line-height:var(--lh-prose);
   color:var(--ink-soft);
   max-width:58ch;
}

.prose {
   max-width:var(--container-prose);
   font-size:var(--fs-body);
   line-height:var(--lh-prose);
}

.prose p { margin-block-end:var(--space-md); }

.prose h2 {
   margin-block-start:var(--space-xl);
   margin-block-end:var(--space-sm);
}

.prose h3 {
   margin-block-start:var(--space-lg);
   margin-block-end:var(--space-xs);
}

.prose ul,
.prose ol {
   margin-block:var(--space-sm) var(--space-md);
   padding-inline-start:1.4rem;
}

.prose ul { list-style:disc; }

.prose ol { list-style:decimal; }

.prose li {
   margin-block-end:var(--space-2xs);
   padding-inline-start:var(--space-2xs);
   color:var(--ink);
}

.prose strong {
   font-weight:700;
   color:var(--ink);
}

.prose em { font-style:italic; }

.prose a {
   text-decoration:underline;
   text-decoration-color:var(--line);
   text-underline-offset:3px;
   transition:color var(--dur-fast) var(--ease-standard),
                     text-decoration-color var(--dur-fast) var(--ease-standard);
}

.prose a:hover {
   color:var(--accent);
   text-decoration-color:var(--accent);
}

.mono {
   font-family:var(--pili-fb6);
   font-size:var(--fs-mono);
   letter-spacing:var(--ls-mono);
   font-variant-numeric:tabular-nums lining-nums;
}

.price-tag {
   font-family:var(--pili-fb6);
   font-size:var(--fs-mono);
   font-weight:500;
   font-variant-numeric:tabular-nums lining-nums;
   color:var(--ink);
}

.caption {
   font-size:var(--fs-caption);
   color:var(--ink-soft);
   line-height:1.4;
   letter-spacing:var(--ls-body);
}

.kicker {
   font-family:var(--pili-fb6);
   font-size:var(--fs-caption);
   text-transform:uppercase;
   letter-spacing:var(--ls-caps);
   color:var(--ink-soft);
   font-weight:500;
}

hr {
   border:0;
   border-top:var(--border-thin);
   margin-block:var(--space-xl);
}


.page-wrapper {
   display:flex;
   flex-direction:column;
   min-height:100vh;
   width:100%;
}

main {
   flex:1 0 auto;
   width:100%;
   position:relative;
}

.site-container {
   width:100%;

   max-width:var(--container-max);
   margin-inline:auto;
   padding-inline:var(--gutter);
}

.site-container--narrow { max-width:var(--container-narrow); }

.site-container--prose { max-width:var(--container-prose); }

.section-flow {
   padding-block:var(--space-2xl);
   position:relative;
}

.section-flow--tight { padding-block:var(--space-2xl); }

.section-flow--deep { padding-block:var(--space-2xl); }

.flow > * + * { margin-block-start:var(--space-md); }

.flow--tight > * + * { margin-block-start:var(--space-xs); }

.flow--spacious > * + * { margin-block-start:var(--space-xl); }

.split {
   display:grid;
   grid-template-columns:1fr;
   gap:var(--space-xl);
   align-items:start;
}

@media (min-width: 840px) {
   .split {
      grid-template-columns:1fr 1fr;
      gap:var(--space-2xl);
   }
   .split--60-40 { grid-template-columns:1.25fr 0.75fr; }
   .split--40-60 { grid-template-columns:0.75fr 1.25fr; }
}

.grid-cols {
   display:grid;
   grid-template-columns:repeat(1, minmax(0, 1fr));
   gap:var(--space-lg);
}

@media (min-width: 600px) {
   .grid-cols--2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
   .grid-cols--3 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
   .grid-cols--3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
   .grid-cols--4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }

}


.drawn-line-track {
   position:relative;
   padding-inline-start:var(--space-xl);
}

.drawn-line-track::before {
   content:'';
   position:absolute;
   top:0;
   bottom:0;
   left:0.75rem;
   width:1px;
   background-color:var(--line);
   z-index:1;
}

.stage-marker-item {
   position:relative;
   margin-block-end:var(--space-2xl);
}

.stage-marker-item:last-child { margin-block-end:0; }

.stage-marker-dot {
   position:absolute;
   top:0.25rem;
   left:calc(-1 * var(--space-xl) + 0.75rem - 4px);
   width:9px;
   height:9px;
   border-radius:var(--radius-pill);
   background-color:var(--ground);
   border:2px solid var(--accent);
   z-index:2;
}


.icon {
   display:inline-block;
   width:1.25rem;
   height:1.25rem;
   stroke-width:0;
   stroke:currentColor;
   fill:currentColor;
   flex-shrink:0;
   vertical-align:middle;
}

.icon--sm {
   width:1rem;
   height:1rem;
}

.icon--lg {
   width:1.75rem;
   height:1.75rem;
}


.visually-hidden {
   position:absolute !important;
   width:1px !important;
   height:1px !important;
   padding:0 !important;
   margin:-1px !important;
   overflow:hidden !important;
   clip:rect(0, 0, 0, 0) !important;
   white-space:nowrap !important;
   border:0 !important;
}

.skip-link {
   position:absolute;
   top:var(--space-xs);
   left:var(--space-xs);
   z-index:9999;
   padding:var(--space-xs) var(--space-md);
   background-color:var(--ink);
   color:var(--accent-ink);
   font-family:var(--pili-fb6);
   font-size:var(--fs-body-sm);
   font-weight:500;
   border-radius:var(--radius-sm);
   transform:translateY(-160%);
   transition:transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus-visible {
   transform:translateY(0);
   outline:2px solid var(--accent);
   outline-offset:2px;
}


@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
      scroll-behavior:auto !important;
   }
}


:root { --accent:#146975; }

.caption.mono,
div.caption.mono,
td.numeric,
.spec-table td.numeric { color:#0d4b54; }

.offer-card__tag {
   color:#0d4b54;
   background-color:rgba(13, 75, 84, 0.12);
}

.chip--accent {
   color:#0d4b54;
   background-color:rgba(13, 75, 84, 0.14);
}

.dated-rail__meta-tag {
   color:#0d4b54;
   background-color:rgba(13, 75, 84, 0.12);
}

@media (pointer: coarse), (max-width: 768px) {
   .site-footer__contact-item {
      min-height:44px;
      display:inline-flex;
      align-items:center;
   }
}
