/* ==========================================================================
   Hydro — Base
   Reset, document defaults, layout primitives, buttons, shared utilities.
   Component-specific styles live in components.css.
   ========================================================================== */

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:1.55;
  color:var(--color-ink);
  background:var(--color-white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:var(--tracking-display);
  line-height:1.07;
  color:var(--color-ink);
}

/* --- Layout primitives --- */
.hy-container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}

.hy-section{padding-block:var(--section-pad)}
.hy-section--onyx{background:var(--color-onyx);color:#fff}
.hy-section--bone{background:var(--color-bone)}
.hy-section--white{background:var(--color-white)}

/* Accessibility: skip link + visually-hidden */
.hy-skip{position:absolute;left:-9999px;top:auto}
.hy-skip:focus{left:16px;top:16px;z-index:9999;background:var(--color-green);color:#fff;padding:10px 16px;border-radius:var(--radius-sm)}
.hy-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- Accent: the one mint-highlighted word (DESIGN_SYSTEM §1 rule 2) --- */
.hy-accent{color:var(--color-mint);font-style:normal}

/* --- Eyebrow label --- */
.hy-eyebrow{
  display:inline-flex;align-items:center;
  font-family:var(--font-head);font-weight:700;
  font-size:var(--t-eyebrow);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--color-green);
}
.hy-eyebrow--mint{color:var(--color-mint)}
.hy-eyebrow--center{justify-content:center}

/* --- Section header (reusable: eyebrow + headline + intro) --- */
.hy-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:var(--space-16);flex-wrap:wrap}
.hy-sec-head__title{font-size:var(--t-h1);margin-top:14px}
.hy-sec-head__intro{max-width:480px;color:var(--color-ink-soft);font-size:var(--t-body);line-height:1.6}
.hy-sec-head--center{flex-direction:column;align-items:center;text-align:center}

/* --- Buttons --- */
.hy-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.02em;
  text-transform:uppercase;
  padding:14px 24px;min-height:var(--tap-min);
  border:1.5px solid transparent;border-radius:var(--radius-sm);
  cursor:pointer;transition:background var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),color var(--dur-base) var(--ease);
}
.hy-btn--primary{background:var(--color-green);color:#fff}
.hy-btn--primary:hover{background:var(--color-green-deep);transform:translateY(-2px);box-shadow:0 10px 24px rgba(23,81,50,.25)}
.hy-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.hy-btn--ghost:hover{background:#fff;color:var(--color-ink);border-color:#fff}
.hy-btn--dark{background:var(--color-onyx);color:#fff}
.hy-btn--dark:hover{background:#000;transform:translateY(-2px)}
.hy-btn--light{background:#fff;color:var(--color-green)}
.hy-btn--light:hover{background:var(--color-mint);color:var(--color-onyx);transform:translateY(-2px)}
.hy-btn--outline{background:transparent;color:var(--color-green);border-color:var(--color-green)}
.hy-btn--outline:hover{background:var(--color-green);color:#fff}
.hy-btn[disabled]{opacity:.4;cursor:not-allowed}
.hy-btn--block{width:100%}

/* --- Tag / badge (DESIGN_SYSTEM §4) --- */
.hy-tag{
  display:inline-block;font-family:var(--font-head);font-weight:700;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 10px;border-radius:var(--radius-sm);
  background:var(--color-green);color:#fff;
}
.hy-tag--mint{background:var(--color-mint);color:var(--color-onyx)}
.hy-tag--onyx{background:var(--color-onyx);color:#fff}
.hy-tag--outline{background:var(--color-onyx);color:#fff;border:1.5px solid var(--color-mint)}

/* --- Scroll reveal (progressive enhancement) --- */
.hy-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.hy-reveal.is-in{opacity:1;transform:none}

/* --- Respect reduced motion everywhere (HARD RULE) --- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hy-reveal{opacity:1;transform:none}
}