/* Medici Capital — stylesheet */
:root {
  --medici-blue: #19336e;
  --medici-blue-deep: #101f47;
  --ink: #15181d;
  --charcoal: #1c2127;
  --paper: #fafbfc;
  --grey-light: #eef1f4;
  --hairline: #dce2e9;
  --hairline-dark: #2a3340;
  --slate: #5c6b7e;
  --silver: #c3cbd4;
  --steel: #33518f;
  --display: "Cinzel", serif;
  --body: "Inter", -apple-system, sans-serif;
  --max: 1180px;
  --header-h: 78px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: var(--body);
  cursor: pointer;
}
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 720px) {
  .wrap {
    padding: 0 22px;
  }
}

/* ---------- type scale ---------- */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 500;
  margin-bottom: 18px;
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 500;
  color: var(--medici-blue);
  line-height: 1.18;
}
h1 {
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: 0.06em;
}
h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: 0.05em;
}
h3 {
  font-size: 19px;
  letter-spacing: 0.04em;
}
.lead {
  font-size: 18px;
  font-weight: 300;
  color: var(--slate);
  max-width: 640px;
  line-height: 1.75;
}
p {
  color: #3a4350;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 15px 34px;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--medici-blue);
  transition:
    background 0.25s,
    color 0.25s,
    border-color 0.25s;
  background: transparent;
  color: var(--medici-blue);
  width: 100%;
  max-width: 300px;
  text-align: center;
}
.btn:hover {
  background: var(--medici-blue);
  color: #fff;
}
.btn-solid {
  background: var(--medici-blue);
  color: #fff;
}
.btn-solid:hover {
  background: var(--medici-blue-deep);
}
.btn-light {
  border-color: var(--silver);
  color: #fff;
}
.btn-light:hover {
  background: #fff;
  color: var(--medici-blue);
  border-color: #fff;
}
.btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .btn-center {
    display: flex;
    justify-content: center;
  }
}

/* ---------- navigation ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 251, 252, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
  transition: background 0.3s;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand .mark {
  width: 38px;
  height: 38px;
  flex: none;
}
.brand .name {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.18em;
  color: var(--medici-blue);
  font-weight: 600;
}
.brand .name span {
  display: block;
  font-family: var(--body);
  font-size: 8.5px;
  letter-spacing: 0.42em;
  color: var(--slate);
  font-weight: 500;
  margin-top: 2px;
}
nav.links {
  display: flex;
  gap: 34px;
  align-items: center;
}
nav.links a {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition:
    color 0.2s,
    border-color 0.2s;
  white-space: nowrap;
}
nav.links a:hover,
nav.links a.active {
  color: var(--medici-blue);
  border-bottom-color: var(--medici-blue);
}
.nav-portal {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--medici-blue);
  color: var(--medici-blue);
  padding: 10px 20px;
  transition: all 0.25s;
  white-space: nowrap;
  flex: none;
}
.nav-portal:hover {
  background: var(--medici-blue);
  color: #fff;
}
nav.links .nav-portal {
  display: none;
}
.burger {
  display: none;
  background: none;
  border: none;
  width: 30px;
  height: 22px;
  position: relative;
}
.burger span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--medici-blue);
  transition: 0.3s;
}
.burger span:nth-child(1) {
  top: 0;
}
.burger span:nth-child(2) {
  top: 10px;
}
.burger span:nth-child(3) {
  top: 20px;
}
@media (max-width: 1099.98px) {
  nav.links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: -1;
    background: var(--paper);
    flex-direction: column;
    gap: 0;
    padding: 10px 0 30px;
    border-bottom: 1px solid var(--hairline);
    transform: translateY(-130%);
    transition: transform 0.35s;
    align-items: stretch;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  nav.links.open {
    transform: translateY(0);
  }
  nav.links a:not(.nav-portal) {
    padding: 14px 40px;
    border-bottom: none;
  }
  .burger {
    display: block;
  }
  .nav-portal {
    display: none;
  }
  nav.links .nav-portal {
    display: block;
    margin: 14px 40px 4px;
    text-align: center;
    flex: none;
    border-bottom: 1px solid var(--slate);
  }

  nav.links .nav-portal:hover {
    color: #fff;
  }
}

/* ---------- page routing ---------- */
.page {
  display: none;
}
.page.active {
  display: block;
  animation: pageIn 0.5s ease;
}
@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- reveal ---------- */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.rv.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .page.active {
    animation: none;
  }
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- contour divider (signature) ---------- */
.contour-rule {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 26px;
}
.contour-rule svg {
  width: 54px;
  height: 20px;
  flex: none;
}
.contour-rule:after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.dark .contour-rule:after {
  background: var(--hairline-dark);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  background: linear-gradient(168deg, #101f47 0%, #19336e 58%, #1f3e85 100%);
  overflow: hidden;
}
.hero .wrap {
  position: relative;
  z-index: 2;
  padding-top: 90px;
  padding-bottom: 110px;
}
.hero .eyebrow {
  color: var(--silver);
}
.hero h1 {
  color: #fff;
  max-width: 760px;
}
.hero .lead {
  color: #b9c4d2;
  margin: 28px 0 44px;
}
.hero-ctas {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.hero-skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  opacity: 0.5;
  z-index: 1;
}
.hero-contours {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: 62vw;
  max-width: 880px;
  opacity: 0.16;
  z-index: 1;
}
.hero-stats {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(195, 203, 212, 0.25);
  margin-top: 72px;
  padding-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 760px;
}
.hero-stats div small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8fa0b5;
  margin-bottom: 6px;
}
.hero-stats div strong {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 500;
  color: #e8edf3;
  letter-spacing: 0.05em;
}
@media (max-width: 720px) {
  .hero-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- sections ---------- */
section {
  padding: 104px 0;
}
section.tight {
  padding: 80px 0;
}
.split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 72px;
  align-items: start;
}
@media (max-width: 1150px) {
  .split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ---------- pillars ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  margin-top: 54px;
}
.pillar {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 46px 38px 50px;
  background: #fff;
  transition: background 0.3s;
}
.pillar:hover {
  background: var(--grey-light);
}
.pillar .num {
  font-family: var(--display);
  font-size: 13px;
  color: var(--medici-blue);
  letter-spacing: 0.2em;
  margin-bottom: 26px;
}
.pillar h3 {
  margin-bottom: 14px;
}
.pillar p {
  font-size: 15px;
  color: var(--slate);
}
.pillar a {
  display: inline-block;
  margin-top: 24px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  font-weight: 500;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 4px;
  transition:
    border-color 0.25s,
    color 0.25s;
}
.pillar a:hover {
  color: var(--medici-blue);
  border-color: var(--medici-blue);
}
@media (max-width: 880px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}

/* ---------- principles ---------- */
.principles {
  border-top: 1px solid var(--hairline);
}
.principle {
  display: grid;
  grid-template-columns: 64px 1fr 2fr;
  gap: 34px;
  padding: 30px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.principle .idx {
  font-family: var(--display);
  color: var(--medici-blue);
  font-size: 14px;
  letter-spacing: 0.1em;
}
.principle h3 {
  font-size: 17px;
}
.principle p {
  font-size: 15px;
  color: var(--slate);
}
@media (max-width: 720px) {
  .principle {
    grid-template-columns: 44px 1fr;
    gap: 16px;
  }
  .principle p {
    grid-column: 2;
  }
}

/* ---------- dark sections ---------- */
.dark {
  background: var(--charcoal);
  color: #c7cfd9;
}
.dark h2,
.dark h3 {
  color: #e9edf2;
}
.dark p {
  color: #9aa6b4;
}
.dark .eyebrow {
  color: #7c8a9b;
}

/* ---------- charts ---------- */
.chart-card {
  background: #fff;
  border: 1px solid var(--hairline);
  padding: 30px 30px 24px;
}
.chart-card .ct {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
}
.chart-card .ct b {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--medici-blue);
  font-weight: 600;
}
.chart-card .ct span {
  font-size: 11px;
  color: var(--slate);
  letter-spacing: 0.08em;
}
.alloc {
  display: grid;
  gap: 14px;
  margin-top: 6px;
}
.alloc-row {
  display: grid;
  grid-template-columns: 140px 1fr 48px;
  gap: 16px;
  align-items: center;
  font-size: 13px;
}
.alloc-row .lbl {
  color: var(--slate);
}
.alloc-row .bar {
  height: 7px;
  background: var(--grey-light);
  position: relative;
}
.alloc-row .bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--medici-blue);
}
.alloc-row .pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 500;
}

/* ---------- research page ---------- */
.cov-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: 50px;
}
.cov {
  background: #fff;
  padding: 34px 30px;
}
.cov h3 {
  font-size: 16px;
  margin-bottom: 10px;
}
.cov p {
  font-size: 14px;
  color: var(--slate);
}
@media (max-width: 880px) {
  .cov-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .cov-grid {
    grid-template-columns: 1fr;
  }
}
.deliv {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline);
  margin-top: 46px;
}
.deliv-row {
  display: grid;
  grid-template-columns: 1fr 1fr 120px;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}

.deliv-row b {
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  color: var(--medici-blue);
  letter-spacing: 0.04em;
}
.deliv-row p {
  font-size: 14px;
  color: var(--slate);
}
.deliv-row em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--medici-blue);
  text-align: right;
}

@media (max-width: 1150px) {
  .deliv-row {
    display: grid;
    grid-template-columns: 1fr 2fr 90px;
    gap: 28px;
    padding: 26px 0;
    border-bottom: 1px solid var(--hairline);
    align-items: baseline;
  }

  .deliv-row:nth-of-type(3) em {
    text-wrap: nowrap;
  }
}

@media (max-width: 720px) {
  .deliv-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .deliv-row em {
    text-align: left;
  }
}

/* ---------- portal preview / terminal ---------- */
.terminal {
  background: #15181d;
  border: 1px solid var(--hairline-dark);
  font-size: 12.5px;
  color: #aeb9c6;
}
.terminal .tbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--hairline-dark);
}
.terminal .tbar b {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e2e8ef;
  font-weight: 600;
}
.terminal .tbar span {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: #5e6e80;
}
.tgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline-dark);
}
.tcell {
  background: #15181d;
  padding: 18px 20px;
}
.tcell small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5e6e80;
  margin-bottom: 7px;
}
.tcell strong {
  font-size: 16px;
  font-weight: 500;
  color: #e5eaf0;
  font-variant-numeric: tabular-nums;
}
.tcell .chg {
  font-size: 11px;
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
}
.up {
  color: #7fb295;
}
.dn {
  color: #c08a8a;
}
.tbody {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 1px;
  background: var(--hairline-dark);
}
.tpanel {
  background: #15181d;
  padding: 22px;
}
.tpanel small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #5e6e80;
  margin-bottom: 14px;
}
.tlist {
  display: grid;
  gap: 0;
}
.tlist a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid #232b35;
  color: #c2ccd7;
  transition: color 0.2s;
}
.tlist a:hover {
  color: #fff;
}
.tlist a span {
  color: #5e6e80;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
@media (max-width: 880px) {
  .tgrid {
    grid-template-columns: 1fr 1fr;
  }
  .tbody {
    grid-template-columns: 1fr;
  }
}
/* ---------- academy ---------- */
.path {
  border-top: 1px solid var(--hairline);
  margin-top: 50px;
}
.path-row {
  display: grid;
  grid-template-columns: 90px 1fr 2fr 150px;
  gap: 30px;
  padding: 34px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.path-row .stage {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--medici-blue);
  padding-top: 4px;
}
.path-row h3 {
  font-size: 17px;
}
.path-row p {
  font-size: 14px;
  color: var(--slate);
}
.path-row .dur {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  text-align: right;
  padding-top: 5px;
}
@media (max-width: 780px) {
  .path-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .path-row .dur {
    text-align: left;
  }
}

/* ---------- offer cards (live env / framework) ---------- */
.offer {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 1px;
  background: var(--hairline-dark);
  border: 1px solid var(--hairline-dark);
  margin-top: 54px;
}
.offer .o-main,
.offer .o-side {
  background: var(--charcoal);
  padding: 52px 48px;
}

.offer .o-main p {
  margin-top: 24px;
  font-size: 17.5px;
  line-height: 1.7;
  color: #afbccc;
}
.offer .o-side {
  background: #101f47;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
}

.offer .o-side p {
  margin-top: 24px;
  font-size: 17.5px;
  line-height: 1.7;
  color: #9fb0c2;
}

.offer ul {
  list-style: none;
  display: grid;
  gap: 13px;
  margin-top: 26px;
}
.offer ul li {
  padding-left: 26px;
  position: relative;
  font-size: 14.5px;
  color: #aab6c4;
}
.offer ul li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 1px;
  background: var(--silver);
}

@media (max-width: 880px) {
  .offer {
    grid-template-columns: 1fr;
  }
}
.offer-light {
  background: var(--hairline);
  border-color: var(--hairline);
}
.offer-light .o-main {
  background: #fff;
}
.offer-light .o-side {
  background: #19336e;
}

.offer .o-side p {
  font-size: 16px;
}

.offer-light .o-main h3 {
  font-size: 22px;
}
.offer-light .o-main p {
  color: var(--slate);
  font-size: 16px;
}
.offer-light ul li {
  color: #43505f;
}
.offer-light ul li:before {
  background: var(--medici-blue);
}

/* ---------- advisory ---------- */
.svc-list {
  border-top: 1px solid var(--hairline);
  margin-top: 50px;
}
.svc {
  display: grid;
  grid-template-columns: 64px 1fr 2fr;
  gap: 34px;
  padding: 32px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.svc .idx {
  font-family: var(--display);
  color: var(--medici-blue);
  font-size: 14px;
}
.svc h3 {
  font-size: 17px;
}
.svc p {
  font-size: 14.5px;
  color: var(--slate);
}
@media (max-width: 720px) {
  .svc {
    grid-template-columns: 44px 1fr;
  }
  .svc p {
    grid-column: 2;
  }
}

/* ---------- about ---------- */
.values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: 46px;
}
.value {
  background: #fff;
  padding: 38px 30px;
}
.value h3 {
  font-size: 15px;
  margin-bottom: 10px;
}
.value p {
  font-size: 13.5px;
  color: var(--slate);
}
@media (max-width: 880px) {
  .values {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 540px) {
  .values {
    grid-template-columns: 1fr;
  }
}
.mv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hairline-dark);
  border: 1px solid var(--hairline-dark);
  margin-top: 54px;
}
.mv > div {
  background: #101f47;
  padding: 54px 48px;
}
.mv b {
  display: block;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 18px;
  font-weight: 500;
}
.mv p {
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.55;
  color: #e6ebf1;
  letter-spacing: 0.03em;
}
@media (max-width: 780px) {
  .mv {
    grid-template-columns: 1fr;
  }
}

/* ---------- contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: 54px;
}
.contact-info {
  background: #19336e;
  padding: 52px 46px;
  color: #c2cdda;
}
.contact-info h3 {
  color: #fff;
  font-size: 20px;
  margin-bottom: 30px;
}
.cline {
  padding: 18px 0;
  border-bottom: 1px solid rgba(195, 203, 212, 0.18);
}
.cline small {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8fa0b5;
  margin-bottom: 5px;
}
.cline span {
  font-size: 14.5px;
  color: #e2e8f0;
}
.contact-form {
  background: #fff;
  padding: 52px 46px;
}
.form-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.05em;
  color: var(--medici-blue);
  margin-bottom: 30px;
}
.f-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.f-field {
  margin-bottom: 24px;
}
.f-field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 9px;
  font-weight: 500;
}
.f-field input,
.f-field select,
.f-field textarea {
  width: 100%;
  border: 1px solid var(--hairline);
  background: var(--paper);
  padding: 13px 15px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.2s;
}
.f-field input:focus,
.f-field select:focus,
.f-field textarea:focus {
  outline: none;
  border-color: var(--medici-blue);
}
.f-field textarea {
  min-height: 120px;
  resize: vertical;
}

@media (max-width: 880px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .f-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- portal page ---------- */
.portal-wrap {
  min-height: calc(100vh - var(--header-h));
  background: linear-gradient(160deg, #15181d 0%, #101f47 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 70px 24px;
  position: relative;
  overflow: hidden;
}
.cs-contours {
  position: absolute;
  right: -8%;
  bottom: -12%;
  width: 58vw;
  max-width: 760px;
  opacity: 0.13;
}
.cs-inner {
  position: relative;
  z-index: 2;
  max-width: 620px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cs-logo {
  width: 230px;
  margin-bottom: 40px;
}
.cs-title {
  color: #fff;
  font-size: clamp(34px, 5.5vw, 54px);
  margin-top: 4px;
}
.cs-rule {
  margin: 26px 0;
}
.cs-rule svg {
  width: 54px;
  height: 20px;
}
.cs-copy {
  font-size: 15px;
  line-height: 1.8;
  color: #9fb0c2;
  max-width: 540px;
}
.cs-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 38px;
}

/* ---------- footer ---------- */
footer {
  background: #101f47;
  color: #9aa8b9;
  padding: 78px 0 44px;
}
.f-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 54px;
  border-bottom: 1px solid rgba(195, 203, 212, 0.14);
}
.f-top .brand .name {
  color: #e9edf2;
}
.f-top .tag {
  font-size: 14px;
  line-height: 1.7;
  color: #8fa0b5;
  max-width: 380px;
  margin-top: 22px;
}
.f-col b {
  display: block;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #9aafc2;
  margin-bottom: 20px;
  font-weight: 500;
}
.f-col a {
  display: block;
  font-size: 14px;
  color: #b4c0ce;
  padding: 6px 0;
  transition: color 0.2s;
}
.f-col a:hover {
  color: #fff;
}
.f-reg {
  padding: 34px 0 0;
  font-size: 12px;
  line-height: 1.8;
  color: #9aafc2;
}
.f-reg b {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: #a8bace;
}
.f-base {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid rgba(195, 203, 212, 0.1);
  font-size: 12px;
  color: #9aafc2;
}
@media (max-width: 780px) {
  .f-top {
    grid-template-columns: 1fr;
    gap: 38px;
  }
}

/* page hero band */
.band {
  background: linear-gradient(168deg, #101f47, #19336e);
  padding: 120px 0 90px;
  position: relative;
  overflow: hidden;
}
.band h1 {
  color: #fff;
  font-size: clamp(30px, 4vw, 46px);
}
.band .lead {
  color: #afbccc;
  margin-top: 22px;
}
.band .eyebrow {
  color: var(--silver);
}
.band-contours {
  position: absolute;
  right: -4%;
  bottom: -30%;
  width: 46vw;
  max-width: 640px;
  opacity: 0.14;
}

/* ================= DARK THEME ================= */
html[data-theme="dark"] {
  --medici-blue: #a4bce3;
  --paper: #13171d;
  --grey-light: #191e26;
  --hairline: #262e39;
  --ink: #dde4ec;
  --slate: #8c99a9;
  --silver: #adb9c7;
  --steel: #9fb4d6;
}
html[data-theme="dark"] body {
  background: #13171d;
  color: #c9d2dc;
}
html[data-theme="dark"] header {
  background: rgba(19, 23, 29, 0.92);
  border-bottom-color: #232b35;
}
html[data-theme="dark"] .brand img.mark {
  filter: brightness(0) invert(1);
}
html[data-theme="dark"] .brand .name {
  color: #e7edf4;
}
html[data-theme="dark"] nav.links a {
  color: #8c99a9;
}
html[data-theme="dark"] nav.links a:hover,
html[data-theme="dark"] nav.links a.active {
  color: #e7edf4;
  border-bottom-color: none;
}
html[data-theme="dark"] nav.links {
  background: #13171d;
  border-bottom-color: #232b35;
}
html[data-theme="dark"] .nav-portal {
  border-color: #3a4655;
  color: #c9d2dc;
}
html[data-theme="dark"] .nav-portal:hover {
  background: #19336e;
  border-color: #19336e;
  color: #fff;
}
html[data-theme="dark"] .burger span {
  background: #dde4ec;
}
html[data-theme="dark"] p {
  color: #9aa6b4;
}
html[data-theme="dark"] .btn {
  border-color: #3f4c5d;
  color: #dde4ec;
}
html[data-theme="dark"] .btn:hover {
  background: #e7edf4;
  color: #13171d;
  border-color: #e7edf4;
}
html[data-theme="dark"] .btn-solid {
  background: #19336e;
  border-color: #19336e;
  color: #fff;
}
html[data-theme="dark"] .btn-solid:hover {
  background: #1f3e85;
  border-color: #1f3e85;
  color: #fff;
}
html[data-theme="dark"] .btn-light {
  border-color: var(--silver);
  color: #fff;
}
html[data-theme="dark"] .btn-light:hover {
  background: #fff;
  color: #19336e;
  border-color: #fff;
}
html[data-theme="dark"] .pillar,
html[data-theme="dark"] .cov,
html[data-theme="dark"] .value {
  background: #181d24;
}
html[data-theme="dark"] .pillar:hover {
  background: #1d232c;
}
html[data-theme="dark"] .dark {
  background: #0f1318;
}
html[data-theme="dark"] .dark .chart-card,
html[data-theme="dark"] .dark .chart-card[style] {
  background: #151a21 !important;
  border-color: #232b35 !important;
}
html[data-theme="dark"] .chart-card {
  background: #181d24;
  border-color: #262e39;
}
html[data-theme="dark"] .contact-form {
  background: #181d24;
}
html[data-theme="dark"] .f-field input,
html[data-theme="dark"] .f-field select,
html[data-theme="dark"] .f-field textarea {
  background: #13171d;
  border-color: #2c3542;
  color: #dde4ec;
}
html[data-theme="dark"] .f-field input:focus,
html[data-theme="dark"] .f-field select:focus,
html[data-theme="dark"] .f-field textarea:focus {
  border-color: #a4bce3;
}

html[data-theme="dark"] .offer-light {
  background: #262e39;
  border-color: #262e39;
}
html[data-theme="dark"] .offer-light .o-main {
  background: #181d24;
}
html[data-theme="dark"] .offer-light ul li {
  color: #aab6c4;
}
html[data-theme="dark"] .offer-light ul li:before {
  background: #adb9c7;
}
html[data-theme="dark"] .alloc-row .bar {
  background: #232b35;
}
html[data-theme="dark"] .hero-skyline {
  opacity: 0.4;
}
/* theme toggle */
.theme-toggle {
  background: none;
  border: 1px solid var(--hairline);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--slate);
  transition:
    border-color 0.25s,
    color 0.25s;
  flex: none;
}
.theme-toggle:hover {
  border-color: var(--medici-blue);
  color: var(--medici-blue);
}
.theme-toggle svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle .ic-moon {
  display: none;
}
html[data-theme="dark"] .theme-toggle .ic-sun {
  display: none;
}
html[data-theme="dark"] .theme-toggle .ic-moon {
  display: block;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: 34px;
  flex: none;
}
nav.links.no-anim {
  transition: none !important;
}
@media (max-width: 1099.98px) {
  .nav-right .nav-portal {
    display: none;
  }
}

/* ================= BOOKING SYSTEM ================= */

.bk-fine {
  font-size: 11.5px;
  color: var(--slate);
  margin-top: 18px;
  line-height: 1.7;
}

/* ================= RESPONSIVE REFINEMENTS ================= */
@media (min-width: 1100px) and (max-width: 1320px) {
  nav.links {
    gap: 20px;
  }
  nav.links a {
    font-size: 12px;
  }
  .nav-right {
    margin-left: 22px;
    gap: 12px;
  }
  .nav-portal {
    padding: 10px 14px;
    font-size: 11px;
  }
  .brand .name {
    font-size: 15px;
  }
}
@media (max-width: 720px) {
  section {
    padding: 72px 0;
  }
  section.tight {
    padding: 58px 0;
  }
  .band {
    padding: 104px 0 64px;
  }
  .hero .wrap {
    padding-top: 64px;
    padding-bottom: 84px;
  }
  .hero-stats {
    margin-top: 52px;
    gap: 22px;
  }
  .pillar {
    padding: 34px 26px 38px;
  }
  .offer .o-main,
  .offer .o-side,
  .contact-info,
  .contact-form {
    padding: 36px 26px;
  }
  .mv > div {
    padding: 38px 28px;
  }

  .cov {
    padding: 26px 22px;
  }
  .value {
    padding: 28px 22px;
  }
  footer {
    padding: 58px 0 36px;
  }
}
@media (max-width: 560px) {
  .tgrid {
    grid-template-columns: 1fr 1fr;
  }
  .tcell {
    padding: 14px 16px;
  }
  .tcell strong {
    font-size: 14px;
  }
  .tbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .hero-ctas .btn,
  .cs-ctas .btn {
    width: 100%;
    text-align: center;
  }
  .hero-stats {
    grid-template-columns: 1fr 1fr;
  }
  .hero-stats div strong {
    font-size: 16px;
  }
  .brand .name {
    font-size: 15px;
  }
  .cs-logo {
    width: 190px;
  }
}
@media (max-width: 380px) {
  .wrap {
    padding: 0 16px;
  }
  .brand {
    gap: 10px;
  }
  .brand .mark {
    width: 32px;
    height: 32px;
  }
  .brand .name {
    font-size: 13px;
  }
  .brand .name span {
    letter-spacing: 0.3em;
  }
  .nav-right {
    gap: 8px;
  }
  .theme-toggle {
    width: 34px;
    height: 34px;
  }
}