@import url('./fonts/barlow.css');

:root {
  --navy: #0b2044;
  --ink: #17243b;
  --muted: #4b5d76;
  --line: #dbe2eb;
  --magenta: #d0007d;
  --magenta-on-navy: #e366b1;
  --magenta-hover: #b10069;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.public-radar { margin: 0; color: var(--ink); background: #f4f6fa; font: 1rem/1.65 system-ui, sans-serif; }
.public-radar a { color: var(--magenta); text-underline-offset: .22em; }
.public-radar a:focus-visible, .public-radar summary:focus-visible, .public-radar input:focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 4px;
}
.wrap { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.site-header { background: white; }
.header-inner, .site-header nav, .page-footer { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; }
.header-inner, .page-footer { justify-content: space-between; padding-block: 1.15rem; }
.site-header a { color: var(--navy); font-weight: 650; }
.site-header .booking-button {
  display: inline-block;
  padding: .45rem .85rem;
  border: 1px solid var(--navy);
  text-decoration: none;
}
.site-header .booking-button:hover { background: var(--navy); color: white; }
.site-header .brand { text-decoration: none; font-weight: 800; }
.brand-divider { color: var(--magenta); padding-inline: .2rem; }
.brand-radar { color: var(--magenta); }
.hero { background: var(--navy); color: white; border-bottom: 4px solid var(--magenta); padding-block: clamp(2.6rem, 7vw, 5rem); }
.hero h1 { max-width: 20ch; margin: .35rem 0 .7rem; font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.07; }
.hero p { max-width: 65ch; }
.hero a { color: white; font-weight: 700; }
.hero .hero-knowledge-button {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .75rem 1.1rem;
  background: var(--magenta);
  color: #fff;
  text-decoration: none;
}
.hero .hero-knowledge-button:hover { background: var(--magenta-hover); color: white; }
.hero .hero-knowledge-button:focus-visible { outline-color: var(--magenta-on-navy); }

.eyebrow { margin: 0; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--magenta-on-navy); font-weight: 750; }
.collection { padding-block: clamp(2rem, 5vw, 3.5rem); }
.collection-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; align-items: start; margin-bottom: 1.25rem; }
.collection-heading h2 { margin: 0; font-size: clamp(1.5rem, 3.5vw, 2rem); }
.collection-intro { margin: .5rem 0 0; }
.search { width: min(100%, 24rem); }
.search label { display: block; font-weight: 650; }
.search input { display: block; width: 100%; padding: .65rem .85rem; border: 1px solid #8392a7; border-radius: .4rem; font: inherit; }
#search-status { margin: .25rem 0 0; color: var(--muted); font-size: .88rem; }
.entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.entry { padding: clamp(1rem, 3vw, 1.6rem); background: white; border: 1px solid var(--line); border-radius: .65rem; overflow-wrap: anywhere; scroll-margin-top: 1rem; }
.entry:target { border-color: var(--magenta); box-shadow: 0 0 0 2px #e8bad3; }
.entry h3 { margin: .25rem 0; color: var(--navy); line-height: 1.25; font-size: 1.35rem; }
.entry .meta { margin: 0; color: var(--muted); font-size: .85rem; }
.entry summary { color: var(--magenta); font-weight: 700; cursor: pointer; }
.entry summary:hover { color: var(--navy); text-decoration: underline; }
.entry details h4 { margin-bottom: .2rem; }
.entry details h4 + p { margin-top: 0; }
.page-footer { border-top: 1px solid var(--line); }
.skip { position: absolute; inset-inline-start: 1rem; transform: translateY(-200%); padding: .5rem 1rem; background: white; }
.skip:focus { transform: translateY(0); }
@media (max-width: 42rem) {
  .entries { grid-template-columns: 1fr; }
}

.radar-preview .wrap {
  width: min(100% - 2 * clamp(1rem, 4vw, 3rem), 76.5rem);
}
.radar-preview .hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.radar-preview .hero-copy { min-width: 0; container-type: inline-size; }
.radar-preview .hero h1 {
  max-width: none;
  margin-top: 1rem;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.08rem;
}
.hero-brand {
  display: block;
  margin-bottom: .15em;
  font: 600 clamp(1.65rem, 3vw, 2.55rem)/1.1 Barlow, system-ui, sans-serif;
  letter-spacing: normal;
}
.hero-brand-divider { margin-inline-start: .25em; color: #b8c8de; font-weight: 400; }
.hero-product {
  display: block;
  font-size: clamp(2.4rem, 16cqi, 6.25rem);
  overflow-wrap: anywhere;
}
.hero-subtitle {
  margin: 0 0 .85rem;
  font: 600 clamp(1.125rem, 5.7cqi, 1.5625rem)/1.35 Barlow, system-ui, sans-serif;
}
.hero-cases {
  border-inline-start: 1px solid #526582;
  padding-inline-start: clamp(1rem, 3vw, 2.25rem);
}
.hero-cases .radar-title {
  margin: 0 0 1rem;
  color: #bdcbe0;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hero-cases .topic {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .65rem;
  padding: .8rem 0;
  font-weight: 700;
}
.hero-cases .topic + .topic { border-top: 1px solid #ffffff26; }
.hero-cases .topic p { margin: 0; }
.hero-cases .topic-number { color: var(--magenta-on-navy); font-variant-numeric: tabular-nums; }
.radar-preview .entries { grid-template-columns: minmax(0, 1fr); }
.profile-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .35rem;
  padding: .35rem;
  margin-bottom: .75rem;
  border: 1px solid var(--line);
  border-radius: .65rem;
  background: #e9eef6;
}
.profile-tabs button {
  padding: .8rem .5rem;
  border: 1px solid transparent;
  border-radius: .4rem;
  color: var(--navy);
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.profile-tabs button[aria-selected="true"] {
  border-color: var(--line);
  border-bottom: 3px solid var(--magenta);
  background: white;
  color: var(--magenta);
}
.profile-tabs button:hover { background: #e9eef6; color: var(--navy); }
.profile-tabs button:focus-visible { outline: 3px solid var(--magenta); outline-offset: -3px; }
.radar-preview .entry {
  padding: clamp(1.25rem, 4vw, 2.75rem);
  scroll-margin-top: 5rem;
}
.radar-preview .entry h3 { font-size: clamp(1.55rem, 3vw, 2.25rem); }
.profile-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3rem);
  margin-top: 1rem;
}
.profile-columns aside {
  padding: 1rem 1.25rem;
  border-radius: .4rem;
  background: #f4f6fa;
}
.profile-columns h4 { margin: 0; color: var(--navy); }
.profile-columns p { margin: .4rem 0 1rem; }
.profile-columns p:last-child { margin-bottom: 0; }
@media (max-width: 48rem) {
  .radar-preview .hero-inner, .profile-columns { grid-template-columns: 1fr; }
}
@media (max-width: 30rem) {
  .profile-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}