* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --primary-navy: #0B1F3B;
  --institutional-gold: #B08A28;
  --neutral-white: #FFFFFF;
  --charcoal: #222222;
  --gold-gradient: linear-gradient(180deg, #C49A32 0%, #B08A28 45%, #9A771F 100%);
  --navy-gradient: linear-gradient(180deg, #0B1F3B 0%, #091A31 50%, #071422 100%);
}

/* ══════════════════════════════
   KEYFRAMES — SHARED
══════════════════════════════ */

@keyframes ticker_scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes goldPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(176, 138, 40, 0);
  }

  50% {
    box-shadow: 0 0 20px 5px rgba(176, 138, 40, 0.3);
  }
}

/* ══════════════════════════════
   KEYFRAMES — MOBILE ONLY
   (prefixed mob_ to stay isolated)
══════════════════════════════ */

@keyframes mob_logoSlide {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes mob_btnDrop {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.93);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mob_ruleExpand {
  from {
    width: 0;
    opacity: 0;
  }

  to {
    width: 30px;
    opacity: 1;
  }
}

@keyframes mob_theReveal {
  from {
    opacity: 0;
    letter-spacing: 14px;
  }

  to {
    opacity: 1;
    letter-spacing: 4px;
  }
}

@keyframes mob_titleDrop {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
  }

  65% {
    transform: translateY(-3px) scale(1.01);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mob_fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mob_ctaIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mob_shimmer {
  0% {
    background-position: -220% center;
  }

  100% {
    background-position: 220% center;
  }
}

@keyframes mob_formReveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mob_iconPop {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.8);
  }

  70% {
    transform: translateY(-3px) scale(1.08);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mob_tickerRise {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes mob_inputGlow {
  from {
    box-shadow: 0 0 0 0 rgba(176, 138, 40, 0);
  }

  to {
    box-shadow: 0 0 0 3px rgba(176, 138, 40, 0.28);
  }
}

@keyframes mob_fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ══════════════════════════════
   BASE — DESKTOP
══════════════════════════════ */

main {
  background: white;
  color: #0B1F3B;
  font-family: "Playfair Display", serif;
  padding-bottom: 70px;
}

/* ── HEADER ── */

/* Desktop: single row — logo left, tagline centre, button right */
.header-top {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px 0;
}

/* Identity wrapper is invisible on desktop — just a passthrough */
.header-identity {
  display: contents;
}

.header img {
  width: 160px;
  position: absolute;
  left: 30px;
  top: 0;
}

.login-button {
  position: absolute;
  margin-top: 20px;
  right: 30px;
  top: 14px;
  border-radius: 5px;
  text-align: center;
  padding: 8px 18px;
  font-size: 15px;
  color: white;
  text-decoration: none;
  background: var(--gold-gradient);
  white-space: nowrap;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-button:hover {
  transform: scale(1.07);
  box-shadow: 0 4px 18px rgba(176, 138, 40, 0.4);
}

/* Tagline row centred between the two absolute elements */
.top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 30px;
  gap: 15px;
  padding: 0 200px;
  color: #B08A28;
}

.rule-left,
.rule-right {
  height: 1px;
  flex: 1;
  flex-shrink: 1;
  min-width: 30px;
  /* prevent lines from collapsing completely on very narrow viewports */
}

.rule-left {
  background: linear-gradient(90deg, transparent 0%, #C49A32 100%);
}

.rule-right {
  background: linear-gradient(90deg, #C49A32 0%, transparent 100%);
}

.top-row p {
  font-size: 18px;
  letter-spacing: 2px;
  color: #B08A28;
  white-space: nowrap;
}

/* ── MASTHEAD ── */
.masthead {
  margin-top: 10px;
  text-align: center;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
  line-height: 0;
}

.the {
  display: block;
  font-size: clamp(1rem, 3vw, 1.9rem);
  letter-spacing: 6px;
  margin-top: 80px;
  margin-bottom: 0;
  /* tight gap to Sovereign */
}

.sovereign {
  display: block;
  font-size: clamp(3rem, 13vw, 9.5rem);
  font-weight: 600;
  line-height: 1;
}

.times {
  display: block;
  font-size: clamp(3rem, 13vw, 9.5rem);
  line-height: 1;
}

/* ── TAGLINE & LAUNCHING ── */
.tagline {
  display: block;
  margin-top: 28px;
  text-align: center;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  padding: 0 20px;
}

.launching {
  display: block;
  margin-top: 20px;
  text-align: center;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-style: italic;
}

/* ── CTA BUTTON ── */
.contact {
  color: white;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.5px;
  display: flex;
  margin: 24px auto 0;
  border-radius: 8px;
  min-height: 44px;
  width: min(450px, 90%);
  background: var(--gold-gradient);
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  transition: box-shadow 0.3s ease;
}

.contact:hover {
  box-shadow: 0 4px 20px rgba(176, 138, 40, 0.4);
}

/* ── EMAIL FORM ── */
.email {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  flex-wrap: wrap;
  gap: 0;
  padding: 0 20px;
}

.email input {
  width: clamp(200px, 40vw, 300px);
  height: 50px;
  padding: 0 16px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-right: none;
  outline: none;
  font-family: "Playfair Display", serif;
  transition: border-color 0.3s ease;
}

.email input:focus {
  border-color: #B08A28;
}

.email button {
  width: clamp(110px, 18vw, 160px);
  height: 50px;
  font-weight: 700;
  padding: 0 16px;
  font-size: 16px;
  color: white;
  background: var(--gold-gradient);
  border: none;
  cursor: pointer;
  font-family: "Playfair Display", serif;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.email button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(176, 138, 40, 0.4);
}

/* ── SOCIALS ── */
.socials {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
  margin-bottom: 40px;
  gap: 28px;
  flex-wrap: wrap;
  padding: 0 20px;
}

/* Target imgs via their parent <a> so stagger nth-child works correctly */
.socials a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.socials img {
  width: 32px;
  height: 32px;
  transition: transform 0.3s ease, filter 0.3s ease;
  object-fit: contain;
}

.socials img:hover {
  transform: scale(1.4);
  filter: drop-shadow(0 2px 8px rgba(176, 138, 40, 0.45));
}

/* ── TICKER BAR ── */
.ticker_bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  z-index: 9999;
  background: #091A31;
  color: #FFFFFF;
}

.ticker_label {
  background: var(--gold-gradient);
  color: #FFFFFF;
  font-weight: 700;
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  letter-spacing: 1px;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ticker_scroll {
  overflow: hidden;
  flex: 1;
  display: flex;
  align-items: center;
}

.ticker_track {
  display: inline-flex;
  gap: 60px;
  white-space: nowrap;
  animation: ticker_scroll 40s linear infinite;
}

.ticker_track span {
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 500;
}

/* ══════════════════════════════
   TABLET  (≤ 900px)
══════════════════════════════ */
@media (max-width: 900px) {
  .header-identity {
    padding: 12px 20px 0;
  }

  .header img {
    width: 130px;
  }

  .top-row span {
    width: 80px;
  }

  .top-row p {
    font-size: 14px;
    letter-spacing: 1.5px;
  }
}

/* ══════════════════════════════
   MOBILE  (≤ 600px)
══════════════════════════════ */
@media (max-width: 600px) {

  main {
    overflow-x: hidden;
    padding-bottom: 56px;
  }

  /* ── Header — mobile stacks identity row above tagline ── */
  .header-top {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    position: static;
    /* cancel desktop relative positioning */
  }

  /* Identity row: logo left, Sign Up right — full width */
  .header-identity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 0;
    width: 100%;
  }

  .header img {
    width: 96px;
    position: static;
    /* cancel desktop absolute */
    animation: mob_logoSlide 0.5s ease 0.1s both;
  }

  .login-button {
    position: absolute;
    /* cancel desktop absolute */
    font-size: 12px;
    padding: 6px 12px;
    margin-top: 9px;
    border-radius: 4px;
    animation: mob_btnDrop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
  }

  /* Tagline row — now sits cleanly below logo+button */
  .top-row {
    display: flex;
    margin-top: 3px;
    margin-bottom: 10px;
    gap: 7px;
    width: 100%;
    justify-content: center;
  }

  .rule-left {
    width: 150px;
    height: 1px;
    white-space: nowrap;
    background: linear-gradient(90deg, transparent 0%, #C49A32 100%);
    animation: mob_ruleExpand 0.7s ease 0.35s both;
  }

  .rule-right {
    width: 150px;
    height: 1px;
    white-space: nowrap;
    background: linear-gradient(90deg, #C49A32 0%, transparent 100%, #C49A32 100%);
    animation: mob_ruleExpand 0.7s ease 0.35s both;
  }

  /* ── Masthead ── */
  .the {
    margin-top: 18px;
    margin-bottom: 0;
    font-size: 0.95rem;
    letter-spacing: 4px;
    animation: mob_theReveal 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.45s both;
  }

  .sovereign {
    font-size: clamp(2.6rem, 15vw, 4.2rem);
    animation: mob_titleDrop 0.75s cubic-bezier(0.34, 1.3, 0.64, 1) 0.6s both;
  }

  .times {
    font-size: clamp(2.6rem, 15vw, 4.2rem);
    animation: mob_titleDrop 0.75s cubic-bezier(0.34, 1.3, 0.64, 1) 0.72s both;
  }

  /* ── Tagline ── */
  .tagline {
    font-size: 0.95rem;
    line-height: 1.55;
    padding: 0 20px;
    margin-top: 18px;
    animation: mob_fadeUp 0.6s ease 0.85s both;
  }

  .launching {
    font-size: 1.35rem;
    margin-top: 14px;
    animation: mob_fadeUp 0.6s ease 0.97s both;
  }

  /* ── CTA ── */
  .contact {
    width: 90%;
    font-size: 3 rem;
    letter-spacing: 1.2px;
    padding: 12px 14px;
    min-height: 48px;
    border-radius: 6px;
    background: linear-gradient(90deg,
        #9A771F 0%,
        #C49A32 25%,
        #E8C460 50%,
        #C49A32 75%,
        #9A771F 100%);
    background-size: 250% auto;
    animation:
      mob_ctaIn 0.6s ease 1.1s both,
      mob_shimmer 4s linear 2.5s infinite;
  }

  /* ── Email form ── */
  .email {
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    padding: 0 20px;
    gap: 10px;
    animation: mob_formReveal 0.6s ease 1.25s both;
  }

  .email input {
    width: 100%;
    max-width: 400px;
    height: 48px;
    border: 1px solid #ccc;
    border-right: 1px solid #ccc;
    font-size: 15px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
  }

  .email input:focus {
    border-color: #B08A28;
    animation: mob_inputGlow 0.25s ease forwards;
  }

  .email button {
    width: 100%;
    max-width: 400px;
    height: 48px;
    font-size: 15px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .email button:active {
    transform: scale(0.97);
    box-shadow: 0 2px 12px rgba(176, 138, 40, 0.35);
  }

  /* ── Socials ── */
  .socials {
    margin-top: 32px;
    margin-bottom: 22px;
    gap: 16px;
  }

  .socials img {
    width: 30px;
    height: 30px;
    transition: transform 0.2s ease;
  }

  .socials img:active {
    transform: scale(0.85);
  }

  /* Stagger via <a> tags (which are the direct children of .socials) */
  .socials a:nth-child(1) img {
    animation: mob_iconPop 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) 1.40s both;
  }

  .socials a:nth-child(2) img {
    animation: mob_iconPop 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) 1.50s both;
  }

  .socials a:nth-child(3) img {
    animation: mob_iconPop 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) 1.60s both;
  }

  .socials a:nth-child(4) img {
    animation: mob_iconPop 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) 1.70s both;
  }

  .socials a:nth-child(5) img {
    animation: mob_iconPop 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) 1.80s both;
  }

  .socials a:nth-child(6) img {
    animation: mob_iconPop 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) 1.90s both;
  }

  .socials a:nth-child(7) img {
    animation: mob_iconPop 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) 2.00s both;
  }

  /* ── Ticker ── */
  .ticker_bar {
    height: 40px;
    animation: mob_tickerRise 0.55s ease 2.1s both;
  }

  .ticker_label {
    font-size: 11px;
    padding: 0 10px;
    letter-spacing: 0.4px;
  }

  .ticker_track {
    animation: ticker_scroll 26s linear infinite;
  }

  .ticker_track span {
    font-size: 12px;
    letter-spacing: 0.4px;
  }
}

/* ══════════════════════════════
   VERY SMALL PHONES  (≤ 380px)
══════════════════════════════ */
@media (max-width: 380px) {
  .header img {
    width: 80px;
  }

  .login-button {
    font-size: 11px;
    padding: 5px 10px;
  }

  .top-row p {
    font-size: 7.5px;
  }

  .top-row span {
    width: 18px;
  }

  .sovereign,
  .times {
    font-size: clamp(2.2rem, 16vw, 3rem);
  }

  .tagline {
    font-size: 0.88rem;
  }

  .launching {
    font-size: 1.2rem;
  }

  .contact {
    font-size: 0.75rem;
    padding: 10px 12px;
  }

  .email input,
  .email button {
    height: 44px;
    font-size: 14px;
  }

  .socials img {
    width: 26px;
    height: 26px;
  }

  .ticker_label {
    font-size: 10px;
    padding: 0 8px;
  }

  .ticker_track span {
    font-size: 11px;
  }
}