/* Token source of truth is tokens.css (loaded before this file).
   Do NOT redefine :root colour tokens here: keep one source.
   Legacy aliases (--blue/--navy/--ink/--muted/--line/--paper) live in tokens.css. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: Poppins, system-ui, sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; }
h1, h2, h3 { font-weight: 400; color: var(--ink); margin: 0 0 .4em; }
h1 { font-size: var(--tcd-display-md, clamp(38px, 5vw, 48px)); line-height: 1.1; font-weight: 300; }
h2 { font-size: var(--tcd-h2, clamp(28px, 4vw, 32px)); line-height: 1.15; font-weight: 400; }
h3 { font-size: var(--tcd-h3, 20px); font-weight: 500; line-height: 1.3; }
p { line-height: 1.6; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Section header pattern: big thin heading left, copy + button right */
.sec-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: end; margin-bottom: 28px; }
.sec-head .lede { color: var(--muted); font-size: 16px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #37424d;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 13px 24px;
  border-radius: 999px;
  transition: background .15s, transform .15s;
}
.btn:hover { background: #2a333d; transform: translateY(-1px); }
.btn svg { width: 15px; height: 15px; }
button, input, textarea, select { font: inherit; }
/* Primary CTA on white: navy pill. On a photo or navy panel use .btn-white. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--tcd-navy, #2A3F52);
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  padding: 14px 30px;
  border-radius: 999px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  box-shadow: none;
  transition: transform .15s, background .15s;
}
.btn-primary:hover { transform: translateY(-1px); background: #1e2e3d; }
.btn-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--tcd-navy, #2A3F52);
  font-weight: 500;
  font-size: 16px;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.btn-white:hover { transform: translateY(-1px); }
/* Ghost / outline button (light, for use over imagery) */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  padding: 14px 24px;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,.5);
  transition: background .15s;
}
.btn-ghost:hover { background: rgba(255,255,255,.1); }

.section { padding: 72px 0; }
.section.alt { background: var(--paper); }

:focus-visible { outline: 2px solid #0080FD; outline-offset: 2px; }
.footer :focus-visible,
.hero :focus-visible,
.dv-hero :focus-visible,
.drawer :focus-visible,
.wabl :focus-visible,
.hero-panel :focus-visible { outline-color: #fff; }

.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  background: #fff;
  color: var(--tcd-navy, #2A3F52);
  padding: 8px 14px;
  z-index: 10000;
  border-radius: 8px;
  text-decoration: none;
}
.skip:focus { top: 8px; }

.hero-panel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(640px, 100%);
  background: rgba(42, 63, 82, .78);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 48px 56px 56px;
  z-index: 1;
  color: #fff;
}
.hero-panel h1 {
  color: #fff;
  font-weight: 300;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0;
}
@media (max-width: 760px) {
  .hero-panel {
    top: auto;
    width: 100%;
    background: rgba(42, 63, 82, .80);
    padding: 22px 22px 26px;
  }
}

@media (max-width: 480px) {
  .btn-primary,
  .btn-white,
  .btn-ghost {
    white-space: normal;
    max-width: 100%;
    text-align: center;
    justify-content: center;
  }
}