/* ===== COLD-CHAIN DESIGN TOKENS (single locked scheme) ===== */
  :root {
    --color-bg:#F2F7FB;          /* icy off-white */
    --color-surface:#FFFFFF;
    --color-primary:#1D2253;     /* Harbour brand navy */
    --color-secondary:#214A86;   /* cold deep blue */
    --color-accent:#0E8FA8;      /* cold teal */
    --color-accent-bright:#3FC6DC;/* icy cyan */
    --color-text:#141838;
    --color-muted:#586089;
    --color-dark:#0A0F2B;        /* deep cold navy */
    --font-heading:'Inter Tight',sans-serif; --font-drama:'Space Grotesk',sans-serif; --font-mono:'JetBrains Mono',monospace;
    --motion-duration:0.55; --motion-ease:power2.out; --motion-stagger:0.07;
    --radius-card:0.75rem; --radius-pill:9999px;
    --section-py:7rem; --content-max-w:52rem;
  }

  html { scroll-behavior:smooth; }
  body { background:var(--color-bg); color:var(--color-text); font-family:var(--font-heading); -webkit-font-smoothing:antialiased; }

  .font-heading{font-family:var(--font-heading);} .font-drama{font-family:var(--font-drama);} .font-mono{font-family:var(--font-mono);}

  /* Noise overlay */
  #noise{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.04;}

  /* Scroll progress */
  #progress{position:fixed;top:0;left:0;height:2px;width:0%;background:var(--color-accent-bright);z-index:60;}

  /* Magnetic CTA */
  .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.5rem;
    border-radius:var(--radius-pill);transition:transform .3s cubic-bezier(.25,.46,.45,.94);cursor:pointer;
    font-family:var(--font-heading);font-weight:600;letter-spacing:.01em;}
  .btn:hover{transform:scale(1.03);}
  .btn .fill{position:absolute;inset:0;transform:translateX(-101%);transition:transform .35s cubic-bezier(.25,.46,.45,.94);z-index:0;}
  .btn:hover .fill{transform:translateX(0);}
  .btn .label{position:relative;z-index:10;display:inline-flex;align-items:center;gap:.5rem;}

  a.navlink{transition:transform .2s, color .2s;} a.navlink:hover{transform:translateY(-1px);}

  /* Nav */
  #navbar{transition:background .4s, box-shadow .4s, padding .4s, width .4s;}
  #navbar.scrolled{backdrop-filter:blur(16px);box-shadow:0 8px 30px rgba(16,24,38,.10);}

  .card-hover{transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;}
  .card-hover:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,24,38,.12);}

  .reveal{opacity:0;transform:translateY(24px);}

  .scope-item{transition:padding-left .25s ease, color .25s ease;}
  .scope-item:hover{padding-left:.4rem;}
  .scope-item:hover span{color:#fff !important;}

  /* Modal show/hide guard (independent of utility ordering) */
  .modal.hidden{display:none !important;}

  .pulse-dot{width:8px;height:8px;border-radius:9999px;background:#34D399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pulse 2s infinite;}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5);}70%{box-shadow:0 0 0 8px rgba(52,211,153,0);}100%{box-shadow:0 0 0 0 rgba(52,211,153,0);}}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
  :root { --section-py: 4rem; }
}

/* Mobile nav menu */
.mobile-menu { transition: opacity .3s ease; }
.mobile-menu.is-open { opacity: 1 !important; pointer-events: auto !important; }
.mobile-nav-link { transition: color .2s, transform .2s; letter-spacing:.015em; }
.mobile-nav-link:hover { color: var(--color-accent-bright) !important; transform: translateX(4px); }

/* ===== RESPONSIVE POLISH ===== */

/* Offset anchors so fixed navbar doesn't hide section tops */
section[id], footer { scroll-margin-top: 5.5rem; }

/* Prevent iOS Safari from zooming in when tapping inputs */
@media (max-width: 767px) {
  input, textarea, select { font-size: 16px !important; }
}

/* Hero headline: smaller on narrow phones (< 480px) */
@media (max-width: 479px) {
  #hero h1 { font-size: 2.5rem !important; line-height: 1 !important; }
}

/* Closing CTA: full-width pill on phones */
@media (max-width: 639px) {
  #closing .btn { width: 100%; justify-content: center; }
}

/* Brand grid: center lone 3rd card on 2-col mobile layout */
@media (max-width: 767px) {
  #brands .grid > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 16rem;
    margin-inline: auto;
  }
}

/* Tablet: constrain guide photo height so it doesn't tower */
@media (min-width: 768px) and (max-width: 1023px) {
  #guide .reveal-left > div { max-height: 460px; }
}

/* Form success animations */
@keyframes btn-confirmed {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.07); }
  65%  { transform: scale(.97); }
  100% { transform: scale(1); }
}
.btn-confirmed { animation: btn-confirmed .55s cubic-bezier(.25,.46,.45,.94) forwards !important; }

@keyframes note-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.note-rise { animation: note-rise .4s ease forwards; }