:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-hero: clamp(2.5rem, 1rem + 5vw, 5.5rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --cyan: #1BA1E8;
  --cyan-ink: #0F7DBA;          /* AA-safe cyan for text on light */
  --charcoal: #3D3D3D;

  --color-bg: #FFFFFF;
  --color-surface: #F3F6F8;
  --color-surface-2: #E9EEF2;
  --color-text: #2B2B2B;
  --color-text-muted: #5A5F64;
  --color-border: rgba(61, 61, 61, 0.14);
  --color-primary: var(--cyan);
  --color-accent-text: var(--cyan-ink);
  --color-dark: #2F3133;
  --color-dark-2: #3D3D3D;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(20, 30, 40, 0.06), 0 2px 8px rgba(20, 30, 40, 0.05);
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --section-pad: clamp(var(--space-16), 9vw, var(--space-32));
  --wrap: 1200px;
}

[data-theme='dark'] {
  --color-bg: #1E2022;
  --color-surface: #26292C;
  --color-surface-2: #2E3236;
  --color-text: #ECEEF0;
  --color-text-muted: #A9AFB5;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-accent-text: #5CC0F2;
  --color-dark: #151718;
  --color-dark-2: #1B1D1F;
}

body { overflow-x: hidden; }
.wrap { width: min(var(--wrap), 100% - 2 * clamp(var(--space-4), 5vw, var(--space-12))); margin-inline: auto; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--cyan); color: #111; padding: var(--space-2) var(--space-4); z-index: 100; }
.skip:focus { left: var(--space-4); top: var(--space-4); }

a { color: inherit; }

/* ---------- type ---------- */
.eyebrow {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-accent-text); margin-bottom: var(--space-4);
}
.eyebrow--light { color: #8FD3F7; }
.section-title {
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl);
  letter-spacing: 0.02em; line-height: 1.2; color: var(--color-text);
}
.section-head { max-width: 46rem; margin-bottom: clamp(var(--space-8), 5vw, var(--space-16)); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
}
.btn--sm { min-height: 40px; padding: 0 var(--space-4); font-size: var(--text-xs); }
.btn--primary { background: var(--cyan); color: #0E1A22; }
.btn--primary:hover { background: #3DB2EE; }
.btn--primary:active { background: #1590D1; }
.btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.btn--outline { color: var(--color-text); border-color: var(--color-border); }
.btn--outline:hover { border-color: var(--cyan); color: var(--color-accent-text); }
.btn--block { width: 100%; }

.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--color-text); }
.icon-btn:hover { background: var(--color-surface); }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.header__inner { display: flex; align-items: center; gap: var(--space-6); min-height: 72px; }
.brand { display: block; flex-shrink: 0; }
.brand__logo { height: 48px; width: auto; }
.brand__logo--dark { display: none; }
[data-theme='dark'] .brand__logo--light { display: none; }
[data-theme='dark'] .brand__logo--dark { display: block; }
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--space-6); list-style: none; }
.nav__list a:not(.btn) { font-size: var(--text-sm); font-weight: 500; text-decoration: none; color: var(--color-text-muted); padding: var(--space-2) 0; }
.nav__list a:not(.btn):hover { color: var(--color-text); }
.header__tools { display: flex; gap: var(--space-1); }
.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav-toggle { display: grid; }
  .header__inner { gap: var(--space-2); }
  .nav { position: absolute; inset: 100% 0 auto 0; margin: 0; }
  .nav__list {
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-bg); border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) clamp(var(--space-4), 5vw, var(--space-12)) var(--space-6);
    clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden;
    transition: clip-path 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms, visibility 0s 260ms;
  }
  .nav__list.is-open { clip-path: inset(0 0 0 0); opacity: 1; visibility: visible; transition: clip-path 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms; }
  .nav__list a:not(.btn) { display: block; padding: var(--space-4) 0; font-size: var(--text-base); border-bottom: 1px solid var(--color-border); }
  .nav__portal { padding-top: var(--space-4); }
  .nav__portal .btn { width: 100%; min-height: 48px; }
  .header__tools { margin-left: auto; }
  .brand__logo { height: 38px; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(88vh, 860px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: #1c2633; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero__shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(10, 18, 28, 0.55) 0%, rgba(10, 18, 28, 0.15) 35%, rgba(10, 18, 28, 0.25) 60%, rgba(10, 18, 28, 0.85) 100%),
  linear-gradient(90deg, rgba(10, 18, 28, 0.55) 0%, rgba(10, 18, 28, 0) 60%); }
.hero__content { position: relative; padding-block: var(--space-32) clamp(var(--space-12), 8vw, var(--space-24)); }
.hero__title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-hero); line-height: 1.05; letter-spacing: 0.01em; max-width: 14ch; }
.hero__lede { margin-top: var(--space-6); font-size: var(--text-base); max-width: 40rem; color: rgba(255, 255, 255, 0.9); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

/* ---------- standard ---------- */
.standard { padding-block: var(--section-pad); }
.standard__grid { display: grid; gap: clamp(var(--space-8), 6vw, var(--space-20)); grid-template-columns: 1fr; }
@media (min-width: 900px) { .standard__grid { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.standard__body p { color: var(--color-text-muted); }
.facts { list-style: none; margin-top: var(--space-8); border-top: 1px solid var(--color-border); }
.facts li { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); align-items: baseline; }
.facts__k { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-accent-text); }
.facts__v { font-size: var(--text-sm); font-weight: 500; }

/* ---------- services ---------- */
.services { padding-block: var(--section-pad); background: var(--color-surface); }
.services__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 760px) { .services__grid { grid-template-columns: 1fr 1fr; } }
.svc { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; }
.svc img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; }
.svc__body { padding: clamp(var(--space-6), 3vw, var(--space-10)); }
.svc__num { font-family: var(--font-display); color: var(--color-accent-text); font-size: var(--text-lg); margin-bottom: var(--space-3); }
.svc h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-3); }
.svc p:not(.svc__num) { color: var(--color-text-muted); font-size: var(--text-base); }

/* ---------- process ---------- */
.process { padding-block: var(--section-pad); }
.steps { list-style: none; display: grid; gap: var(--space-8); grid-template-columns: 1fr; counter-reset: s; }
@media (min-width: 640px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { border-top: 2px solid var(--cyan); padding-top: var(--space-6); }
.step__n { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-accent-text); line-height: 1; }
.step h3 { font-size: var(--text-lg); font-weight: 700; margin: var(--space-3) 0 var(--space-2); }
.step p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------- bleed ---------- */
.bleed { margin: 0; }
.bleed img { width: 100%; height: clamp(280px, 55vw, 640px); object-fit: cover; }

/* ---------- about ---------- */
.about { padding-block: var(--section-pad); }
.about__grid { display: grid; gap: clamp(var(--space-8), 6vw, var(--space-20)); grid-template-columns: 1fr; }
@media (min-width: 900px) { .about__grid { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.about p { color: var(--color-text-muted); margin-top: var(--space-4); }
.owners { display: grid; gap: var(--space-4); }
.owner { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.owner__mark { width: 48px; height: auto; flex-shrink: 0; }
[data-theme='dark'] .owner__mark { filter: brightness(0) invert(1); }
.owner h3 { font-size: var(--text-lg); font-weight: 700; }
.owner__role { margin: 0 !important; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.owner a { display: block; font-size: var(--text-sm); color: var(--color-accent-text); text-decoration: none; word-break: break-word; }
.owner a:hover { text-decoration: underline; }

/* ---------- portal ---------- */
.portal { padding-block: var(--section-pad); background: var(--color-dark-2); color: #fff; }
.portal .section-title { color: #fff; }
.portal__intro { color: rgba(255, 255, 255, 0.82); margin-top: var(--space-4); }
.portal__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 760px) { .portal__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .portal__grid { grid-template-columns: repeat(3, 1fr); } }
.pcard { border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-md); padding: clamp(var(--space-6), 3vw, var(--space-10)); display: flex; flex-direction: column; gap: var(--space-4); background: rgba(255, 255, 255, 0.03); }
.pcard__tag { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #8FD3F7; }
.pcard h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); }
.pcard ul { list-style: none; display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.pcard li { position: relative; padding-left: var(--space-6); color: rgba(255, 255, 255, 0.85); font-size: var(--text-sm); }
.pcard li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 10px; height: 2px; background: var(--cyan); }
.pcard .btn { margin-top: auto; align-self: flex-start; }
.portal__note { margin-top: var(--space-6); min-height: 1.5em; color: #8FD3F7; font-size: var(--text-sm); font-weight: 500; }

/* ---------- contact ---------- */
.contact { padding-block: var(--section-pad); background: var(--color-surface); }
.contact__grid { display: grid; gap: clamp(var(--space-8), 6vw, var(--space-20)); grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1fr 1.1fr; } }
.contact__grid > div > p { color: var(--color-text-muted); margin-top: var(--space-4); }
.info { margin-top: var(--space-8); display: grid; gap: var(--space-6); }
.info dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-1); }
.info dd a { text-decoration: none; font-weight: 500; word-break: break-word; }
.info dd a:hover { color: var(--color-accent-text); }
.form { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: clamp(var(--space-6), 3vw, var(--space-10)); display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field-row { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label { font-size: var(--text-sm); font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); font-size: 16px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text);
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(27, 161, 232, 0.2); }
.field [aria-invalid='true'] { border-color: #C0392B; }
.form__msg { font-size: var(--text-sm); min-height: 1.4em; color: var(--color-text-muted); }

/* ---------- footer ---------- */
.footer { background: var(--color-dark); color: rgba(255, 255, 255, 0.82); padding-block: var(--space-16) var(--space-8); }
.footer__inner { display: grid; gap: var(--space-8); }
.footer__logo { width: 180px; height: auto; }
.footer__cols { display: grid; gap: var(--space-6); grid-template-columns: 1fr; font-size: var(--text-sm); }
@media (min-width: 760px) { .footer__cols { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: var(--space-16); } }
.footer a { text-decoration: none; word-break: break-word; }
.footer a:hover { color: #8FD3F7; }
.footer__copy { font-size: var(--text-xs); color: rgba(255, 255, 255, 0.6); border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: var(--space-6); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

@media (max-width: 700px) {
  .hero { min-height: 92vh; }
  .hero__img { object-position: 70% 50%; }
  .hero__shade { background: linear-gradient(180deg, rgba(10,18,28,0.35) 0%, rgba(10,18,28,0.55) 40%, rgba(10,18,28,0.9) 100%); }
}
.footer__copy { max-width: none; }
@media (max-width: 420px) {
  .owner { padding: var(--space-4); gap: var(--space-3); }
  .owner__mark { width: 34px; }
}