:root {
  --navy: #0f3863;
  --navy-deep: #082747;
  --green: #2e7d32;
  --teal: #148ba6;
  --orange: #f7941d;
  --ink: #1f2937;
  --muted: #596979;
  --line: #d9e2e9;
  --light: #f3f6f9;
  --sand: #fff7ec;
  --white: #fff;
  --max: 1160px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--light); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.65; }
body, button, a { -webkit-font-smoothing: antialiased; }
a { color: var(--navy); }
a:hover { color: var(--teal); }
img { display: block; max-width: 100%; }
.container { width: min(calc(100% - 3rem), var(--max)); margin-inline: auto; }

.site-header { position: relative; z-index: 10; border-bottom: 1px solid rgba(15, 56, 99, .1); background: rgba(255, 255, 255, .96); }
.header-inner { display: flex; align-items: center; gap: 1.4rem; min-height: 5.3rem; }
.site-logo { display: inline-flex; flex: 0 0 auto; align-items: center; }
.site-logo img { width: 10.5rem; height: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.8rem); margin-left: auto; }
.site-nav a, .footer-nav a { color: var(--ink); font-size: .9rem; font-weight: 650; text-decoration: none; }
.site-nav a:hover, .site-nav a:focus-visible, .footer-nav a:hover, .footer-nav a:focus-visible { color: var(--teal); }
.site-nav a[aria-current="page"] { color: var(--navy); }
.header-cta { border-radius: 999px; background: var(--navy); color: var(--white); padding: .63rem 1rem; font-size: .84rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.header-cta:hover, .header-cta:focus-visible { background: var(--teal); color: var(--white); }
.menu-toggle { display: none; align-items: center; gap: .55rem; margin-left: auto; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--navy); padding: .55rem .8rem; font: inherit; font-size: .84rem; font-weight: 700; }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 1rem; height: 2px; background: currentColor; transition: transform .2s ease; }
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { position: absolute; content: ""; }
.menu-icon::before { top: -5px; }
.menu-icon::after { top: 5px; }

.hero { position: relative; min-height: min(720px, calc(100vh - 5.3rem)); overflow: hidden; color: var(--white); background-color: var(--navy-deep); background-position: center; background-size: cover; background-image: url('/assets/images/hero/roameoroam-hero-desktop.jpg'); background-image: image-set(url('/assets/images/hero/roameoroam-hero-desktop.webp') type('image/webp'), url('/assets/images/hero/roameoroam-hero-desktop.jpg') type('image/jpeg')); }
.hero-scrim { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-scrim { background: linear-gradient(90deg, rgba(8, 39, 71, .94) 0%, rgba(8, 39, 71, .74) 31%, rgba(8, 39, 71, .08) 72%), linear-gradient(0deg, rgba(8, 39, 71, .3), transparent 50%); }
.hero-content { position: relative; z-index: 1; display: flex; min-height: inherit; max-width: var(--max); flex-direction: column; justify-content: center; padding-block: 6rem; }
.hero h1 { max-width: 700px; margin: .7rem 0 1.35rem; color: var(--white); font-size: clamp(3.2rem, 7vw, 6.6rem); line-height: .98; letter-spacing: -.065em; }
.hero-copy { max-width: 620px; margin: 0; color: rgba(255, 255, 255, .9); font-size: clamp(1.05rem, 1.8vw, 1.25rem); }

.section { padding-block: clamp(4.5rem, 9vw, 8rem); }
.section-blue { background: var(--navy); color: rgba(255, 255, 255, .85); }
.section-sand { background: var(--sand); }
.section-heading { max-width: 710px; margin-bottom: 3rem; }
.centered-heading { margin-inline: auto; text-align: center; }
.section-heading h2, .content-column h2, .story-grid h2, .narrow h2, .notice h2 { margin: .4rem 0 1rem; color: var(--navy); font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.05; letter-spacing: -.055em; }
.section-blue h2, .section-blue .section-heading h2, .section-blue .content-column h2, .section-blue .story-grid h2 { color: var(--white); }
.section-heading > p:last-child, .content-column > p, .story-copy p, .narrow > p, .notice p { color: var(--muted); font-size: 1.08rem; }
.section-blue .section-heading > p:last-child, .section-blue .content-column > p, .section-blue .story-copy p { color: rgba(255, 255, 255, .78); }
.eyebrow { margin: 0; color: var(--navy); font-size: .76rem; font-weight: 800; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; }
.eyebrow-light { color: #70d4df; }
.eyebrow-teal { color: var(--navy); }
.section-blue .eyebrow-teal { color: #70d4df; }
.eyebrow-green, .eyebrow-orange { color: var(--navy); }

.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 1.35rem; margin-top: 1.8rem; }
.centered-row { justify-content: center; }
.button { display: inline-flex; align-items: center; justify-content: center; border: 2px solid transparent; border-radius: 999px; padding: .78rem 1.2rem; font-size: .9rem; font-weight: 800; text-decoration: none; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button-light { background: var(--white); color: var(--navy); }
.button-light:hover, .button-light:focus-visible { background: #dff8f7; color: var(--navy); }
.button-navy { background: var(--navy); color: var(--white); }
.button-navy:hover, .button-navy:focus-visible { background: var(--teal); color: var(--white); }
.button-outline { border-color: var(--navy); color: var(--navy); }
.button-outline:hover, .button-outline:focus-visible { background: var(--navy); color: var(--white); }
.text-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem; font-weight: 800; text-decoration: none; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span, .text-link:focus-visible span { transform: translateX(4px); }
.text-link-light { color: var(--white); }
.text-link-light:hover, .text-link-light:focus-visible { color: #b9f4f5; }
.text-link-dark { color: var(--navy); }
.text-link-dark:hover, .text-link-dark:focus-visible { color: var(--teal); }
.text-link-navy { color: #9ee7ed; }
.text-link-navy:hover, .text-link-navy:focus-visible { color: var(--white); }

.idea-section { background: var(--white); }
.idea-grid, .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.idea-card { min-height: 260px; border-radius: 1.2rem; padding: 2rem; }
.idea-card h3 { margin: 2.4rem 0 .7rem; color: var(--navy); font-size: 1.8rem; letter-spacing: -.04em; }
.idea-card p { max-width: 28rem; margin: 0; color: var(--muted); }
.idea-number { color: rgba(15, 56, 99, .55); font-size: .8rem; font-weight: 800; letter-spacing: .12em; }
.idea-people { background: #e6f2e7; }.idea-places { background: #e1f5f7; }.idea-possibilities { background: #fff0da; }

.two-column { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); gap: clamp(3rem, 9vw, 8rem); }
.two-column-align-center { align-items: center; }
.compass-mark { display: grid; place-items: center; min-height: 240px; }
.compass-mark img { width: min(100%, 270px); }
.compass-mark-small { min-height: 180px; }.compass-mark-small img { width: 160px; }
.content-column { max-width: 660px; }
.section-blue .content-column h2 { color: var(--white); }
.section-blue .content-column p { color: rgba(255, 255, 255, .8); }

.product-card { display: flex; min-height: 390px; flex-direction: column; border-radius: 1.15rem; padding: clamp(1.5rem, 3vw, 2.25rem); }
.product-card-green { background: #e6f2e7; }.product-card-teal { background: #e1f5f7; }.product-card-orange { background: #fff0da; }
.product-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.product-status { color: var(--navy); font-size: .72rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.product-index { color: rgba(15, 56, 99, .5); font-size: .8rem; font-weight: 800; }
.product-card h3 { margin: 3rem 0 .45rem; color: var(--navy); font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -.05em; }
.product-tagline { margin: 0 0 .8rem; color: var(--navy); font-size: 1.05rem; font-weight: 800; line-height: 1.35; }
.product-card > p:not(.product-tagline):not(.small-note) { margin: 0; color: var(--muted); }
.product-card .text-link { margin-top: auto; padding-top: 1.5rem; }
.product-grid-page { grid-template-columns: repeat(2, 1fr); }.product-card-featured { max-width: 700px; min-height: 0; }.small-note { margin-top: 1.2rem !important; color: var(--navy) !important; font-size: .86rem; font-weight: 800; }

.history-visual, .motif-panel { display: flex; min-height: 260px; align-items: center; justify-content: center; gap: .4rem; border-radius: 50%; color: var(--navy); font-size: clamp(1rem, 2.2vw, 1.45rem); font-weight: 800; letter-spacing: -.03em; }
.history-visual { width: min(100%, 380px); height: 300px; margin-inline: auto; border: 2px dashed rgba(247, 148, 29, .55); border-radius: 48% 52% 55% 45%; transform: rotate(-5deg); }.history-visual span:nth-child(2) { color: var(--orange); font-size: 2rem; }.history-visual span:first-child { color: var(--teal); }.history-visual span:last-child { color: var(--green); }.history-visual-large { min-height: 310px; }
.motif-row { display: flex; justify-content: center; gap: clamp(1.2rem, 6vw, 6rem); margin: 3rem 0; color: #b6eef0; font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.04em; }.motif-row span:nth-child(2) { color: #9bdba2; }.motif-row span:nth-child(3) { color: #ffc36e; }
.motif-panel { min-height: 270px; flex-direction: column; border: 1px solid var(--line); border-radius: 1.2rem; background: var(--light); }.motif-panel span:nth-child(1) { color: var(--teal); }.motif-panel span:nth-child(2) { color: var(--green); }.motif-panel span:nth-child(3) { color: var(--orange); }

.page-hero { padding-block: clamp(5rem, 10vw, 9rem); }.page-hero-inner { max-width: var(--max); }.page-hero h1 { max-width: 850px; margin: .7rem 0 1.2rem; color: var(--navy); font-size: clamp(3rem, 7vw, 6rem); line-height: .98; letter-spacing: -.065em; }.section-blue .page-hero-inner h1 { color: var(--white); }.page-hero .lede { max-width: 660px; margin: 0; color: var(--muted); font-size: clamp(1.1rem, 2vw, 1.35rem); }.section-blue .page-hero .lede { color: rgba(255, 255, 255, .8); }
.story-grid { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); gap: clamp(3rem, 9vw, 8rem); }.story-grid h2 { font-size: clamp(2.3rem, 4vw, 4.4rem); }.story-copy { max-width: 680px; }.story-copy p:first-child { margin-top: 0; }.narrow { max-width: 760px; }.narrow .notice { max-width: 660px; }
.vision-phrase { display: flex; flex-direction: column; color: var(--navy); font-size: clamp(2.6rem, 6vw, 5.5rem); font-weight: 850; line-height: .95; letter-spacing: -.07em; }.vision-phrase span:nth-child(1) { color: var(--green); }.vision-phrase span:nth-child(2) { color: var(--teal); }.vision-phrase span:nth-child(3) { color: var(--orange); }
.notice { border: 1px solid var(--line); border-radius: 1rem; background: var(--white); padding: clamp(1.5rem, 4vw, 3rem); }.notice h2 { font-size: clamp(2rem, 4vw, 3.3rem); }.notice p:last-child { margin-bottom: 0; }
.final-cta { background: var(--white); }.final-cta h2 { max-width: 760px; margin: .6rem auto 1rem; color: var(--navy); font-size: clamp(2.6rem, 6vw, 5.5rem); line-height: .98; letter-spacing: -.065em; }.final-cta p:not(.eyebrow) { color: var(--muted); font-size: 1.1rem; }

.site-footer { border-top: 1px solid var(--line); background: var(--white); }.footer-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; min-height: 7rem; }.footer-inner p { margin: 0; color: var(--muted); font-size: .9rem; }.footer-nav { display: flex; justify-content: flex-end; gap: 1rem; flex-wrap: wrap; }.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding-block: 1.1rem; color: var(--muted); font-size: .78rem; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
@media (max-width: 900px) { .header-cta { display: none; }.site-nav { gap: 1rem; }.idea-grid, .product-grid { grid-template-columns: 1fr; }.idea-card { min-height: 0; }.product-card { min-height: 330px; }.footer-inner { grid-template-columns: 1fr 1fr; }.footer-nav { justify-content: flex-start; grid-column: 1 / -1; } }
@media (max-width: 700px) {
  .container { width: min(calc(100% - 2rem), var(--max)); }.header-inner { min-height: 4.6rem; }.site-logo img { width: 9rem; }.menu-toggle { display: inline-flex; }.site-nav { display: none; position: absolute; top: calc(100% + 1px); right: 1rem; left: 1rem; flex-direction: column; align-items: stretch; gap: 0; margin: 0; border: 1px solid var(--line); border-radius: .75rem; background: var(--white); padding: .45rem; box-shadow: 0 1rem 2.5rem rgba(15, 56, 99, .15); }.site-nav.is-open { display: flex; }.site-nav a { padding: .75rem .8rem; }.hero { min-height: 700px; background-position: 58% center; background-image: url('/assets/images/hero/roameoroam-hero-mobile.jpg'); background-image: image-set(url('/assets/images/hero/roameoroam-hero-mobile.webp') type('image/webp'), url('/assets/images/hero/roameoroam-hero-mobile.jpg') type('image/jpeg')); }.hero-scrim { background: linear-gradient(180deg, rgba(8, 39, 71, .2) 0%, rgba(8, 39, 71, .9) 65%, rgba(8, 39, 71, .98) 100%); }.hero-content { justify-content: flex-end; padding-block: 3.5rem; }.hero h1 { font-size: clamp(3.1rem, 15vw, 5rem); }.hero-copy { font-size: 1rem; }.two-column, .story-grid, .product-grid-page { grid-template-columns: 1fr; gap: 2.5rem; }.compass-mark { min-height: 160px; }.compass-mark img { width: 180px; }.story-grid h2 { margin-top: .5rem; }.history-visual { width: min(100%, 330px); }.vision-phrase { font-size: clamp(3.1rem, 15vw, 5.5rem); }.footer-inner { grid-template-columns: 1fr; gap: 1rem; padding-block: 2rem; }.footer-nav { grid-column: auto; }.footer-bottom { flex-direction: column; }.motif-row { flex-direction: column; align-items: center; gap: .5rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.button, .text-link span, .menu-icon, .menu-icon::before, .menu-icon::after { transition: none; } }