/* ============================================================
   Enhydra Productivity company site (enhydraproductivity.com)
   Black ground, white type and the owner's white logo, with one
   cool accent from the sea used sparingly. Generous space, few
   lines, nothing boxed that need not be.
   Movement (site.js) follows the scroll: the hero logo drifts away,
   the mission's words light one by one, sections rise into place
   and pictures move at their own pace. Without the script, or when
   the visitor asks for reduced motion, every element shows at rest.
   ============================================================ */
:root {
  --black:       #000000;
  --surface:     #0B0D0E;   /* the few panels: the otter picture, empty roles */
  --line:        rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.22);
  --text:        #F3F5F6;
  --text-soft:   #9AA3A9;
  --text-dim:    #3F474C;   /* the mission's words before they light */
  --glow:        #7FD0E6;   /* the sea accent, on black */
  --glow-tint:   rgba(127,208,230,0.12);
  --live:        #6FE3A5;
  --live-tint:   rgba(111,227,165,0.12);
  --th-green:    #018B44;   /* TestHelm's own green, for its wordmark */
  --white:       #FFFFFF;
  --focus:       rgba(127,208,230,0.6);
  --radius-lg:   22px;
  --radius-md:   14px;
  --container:   1120px;
  --header-h:    72px;
  --ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --font-body:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:'Manrope', 'Inter', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  background: var(--black);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--black);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 6px;
}
::selection { background: var(--glow); color: var(--black); }

.container {
  max-width: var(--container); margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--glow);
  margin-bottom: 22px;
}

/* TestHelm's wordmark: Test in white here, Helm in its green */
.wm-th { font-weight: 700; color: var(--text); }
.wm-th em { font-style: normal; color: var(--th-green); }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 15px/1 var(--font-body);
  padding: 15px 26px; border-radius: 999px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-light { background: var(--white); color: var(--black); }
.btn-light:hover { background: #DCEFF5; }
.btn-ghost { border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); }
.text-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; color: var(--glow); text-decoration: none;
}
.text-link span { transition: transform 0.25s var(--ease); }
.text-link:hover span { transform: translateX(5px); }

.pill {
  display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.4;
  letter-spacing: 0.02em; padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
.pill-live { background: var(--live-tint); color: var(--live); }
.pill-soon { background: var(--glow-tint); color: var(--glow); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease;
}
.site-header.is-solid {
  background: rgba(0,0,0,0.74);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-logo { flex: none; transition: opacity 0.5s ease, transform 0.5s var(--ease); }
.nav-logo img { height: 46px; width: auto; }
/* On the home page the small logo waits until the large one has gone by */
.over-hero .nav-logo { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.over-hero.is-past .nav-logo { opacity: 1; transform: none; pointer-events: auto; }
.nav-links { display: flex; gap: 34px; list-style: none; }
.nav-links a {
  position: relative; padding-block: 6px;
  font-size: 14.5px; font-weight: 500; color: var(--text-soft);
  text-decoration: none; transition: color 0.2s ease;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Home: the logo, alone on black ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding: calc(var(--header-h) + 24px) 24px 96px;
}
.hero::before {
  content: ''; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(48% 42% at 50% 52%, rgba(127,208,230,0.14), transparent 72%);
  animation: fade-in 2.6s ease 0.2s both;
}
/* --p is how far the hero has scrolled away, 0 to 1 (site.js) */
.hero-logo {
  width: min(88vw, 880px);
  transform: translate3d(0, calc(var(--p, 0) * -90px), 0) scale(calc(1 - var(--p, 0) * 0.12));
  opacity: calc(1 - var(--p, 0) * 1.2);
}
.hero-logo img { width: 100%; height: auto; animation: logo-in 1.6s var(--ease) 0.15s both; }
.scroll-cue {
  position: absolute; left: 50%; bottom: calc(36px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: 14px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-soft); text-decoration: none;
  opacity: calc(1 - var(--p, 0) * 4);
}
.scroll-cue span { animation: fade-in 1s ease 1.4s both; }
.scroll-cue i {
  position: relative; overflow: hidden; display: block;
  width: 1px; height: 52px; background: var(--line-strong);
  animation: fade-in 1s ease 1.4s both;
}
.scroll-cue i::after {
  content: ''; position: absolute; left: 0; top: -40%;
  width: 1px; height: 40%; background: var(--text);
  animation: cue 2.4s ease-in-out 2s infinite;
}
@keyframes logo-in {
  from { opacity: 0; filter: blur(14px); transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cue { from { top: -40%; } to { top: 100%; } }

/* ---------- Home: the mission ---------- */
.mission { padding-block: clamp(120px, 18vw, 230px); }
.statement {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 6.6vw, 92px); line-height: 1.04; letter-spacing: -0.035em;
  max-width: 13ch; text-wrap: balance;
}
.statement .w { transition: color 0.4s ease; }
.statement.is-live .w { color: var(--text-dim); }
.statement.is-live .w.lit { color: var(--text); }
.mission-sub { margin-top: 44px; max-width: 54ch; font-size: 18px; color: var(--text-soft); }
.mission .text-link { margin-top: 26px; }

/* ---------- Home: about us ---------- */
.about { padding-block: clamp(100px, 14vw, 190px); border-top: 1px solid var(--line); }
.about-grid {
  display: grid; grid-template-columns: 5fr 7fr; align-items: center;
  gap: clamp(40px, 7vw, 112px);
}
.about-grid > * { min-width: 0; }
.about-art {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; max-width: 100%;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: radial-gradient(70% 55% at 50% 38%, rgba(127,208,230,0.16), transparent 72%), var(--surface);
  display: grid; place-items: center;
}
.about-art img { width: 40%; height: auto; }
.about-art figcaption {
  position: absolute; left: 22px; bottom: 18px;
  font-size: 13px; color: var(--text-soft);
}
.about-art figcaption i { color: var(--text); }
.about-copy h2 { font-size: clamp(34px, 4.4vw, 60px); margin-bottom: 28px; }
.about-copy p { font-size: 17px; color: var(--text-soft); max-width: 56ch; }
.about-copy p + p { margin-top: 18px; }
.about-copy .lead { font-size: clamp(19px, 1.8vw, 22px); line-height: 1.5; color: var(--text); }

/* ---------- Inner pages ---------- */
.page-head {
  padding-top: calc(var(--header-h) + clamp(80px, 13vw, 160px));
  padding-bottom: clamp(56px, 8vw, 104px);
}
.page-head h1 { font-size: clamp(42px, 6.8vw, 92px); max-width: 15ch; }
.page-head .lead { margin-top: 30px; max-width: 56ch; font-size: 18px; color: var(--text-soft); }
.block { padding-block: clamp(64px, 9vw, 120px); border-top: 1px solid var(--line); }
.block-head { margin-bottom: clamp(36px, 5vw, 56px); }
.block-head h2 { font-size: clamp(30px, 3.8vw, 48px); max-width: 20ch; }

/* ---------- Products ---------- */
.product {
  display: grid; grid-template-columns: 5fr 7fr; align-items: center;
  gap: clamp(32px, 6vw, 84px);
  padding-block: clamp(56px, 8vw, 110px); border-top: 1px solid var(--line);
}
.product > * { min-width: 0; }
.product-brand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.product-icon {
  flex: none; width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center; background: var(--white);
}
.product-icon img { width: 30px; height: auto; }
.product-icon.soon {
  background: transparent; border: 1.5px dashed var(--line-strong);
  font: 800 15px/1 var(--font-display); color: var(--glow); letter-spacing: 0.02em;
}
.product-name { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; }
.product h2 { font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 18px; }
.product p { color: var(--text-soft); max-width: 52ch; }
.ticks { list-style: none; display: grid; gap: 10px; margin-top: 24px; }
.ticks li { position: relative; padding-left: 28px; font-size: 15px; color: var(--text); }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 4px;
  width: 17px; height: 17px; border-radius: 50%; background: var(--glow-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%237FD0E6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  background-size: 11px; background-position: center; background-repeat: no-repeat;
}
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.product .text-link { margin-top: 26px; }
/* A screenshot, framed as an app window */
.shot {
  border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--line-strong); background: #F1F2F6;
  box-shadow: 0 40px 120px rgba(127,208,230,0.10), 0 30px 80px rgba(0,0,0,0.6);
}
.shot-bar {
  display: flex; gap: 6px; align-items: center; height: 24px; padding: 0 12px;
  background: #1A1D20; border-bottom: 1px solid var(--line);
}
.shot-bar span { width: 9px; height: 9px; border-radius: 50%; background: #3A3F43; }
.shot img { width: 100%; height: auto; }
.soon-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.soon-grid .product { display: block; border-top: 0; padding-right: clamp(24px, 4vw, 56px); }
.soon-grid .product + .product { border-left: 1px solid var(--line); padding-left: clamp(24px, 4vw, 56px); padding-right: 0; }

/* ---------- Careers ---------- */
.why { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.why h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; margin-bottom: 10px; }
.why p { color: var(--text-soft); font-size: 15.5px; }
.roles-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 32px;
}
.roles-head h2 { font-size: clamp(30px, 3.8vw, 48px); }
.roles-count { font-size: 15px; font-weight: 600; color: var(--text-soft); }
.roles-empty {
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
  background: var(--surface); padding: clamp(28px, 4vw, 48px);
}
.roles-empty h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin-bottom: 10px; }
.roles-empty p { color: var(--text-soft); max-width: 60ch; }
.roles-empty .actions { margin-top: 26px; }
.roles-empty .note { margin-top: 18px; font-size: 15px; }
.roles-empty .note a { color: var(--glow); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
/* One listing, for when there are roles (see the template in careers.html) */
.role {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-block: 24px; border-top: 1px solid var(--line);
}
.role h3 { font-size: 19px; font-weight: 600; }
.role-meta { font-size: 14px; color: var(--text-soft); }
.fine-print { margin-top: 36px; max-width: 76ch; font-size: 14px; color: var(--text-soft); }

/* ---------- Contact ---------- */
.contacts { list-style: none; }
.contact-row {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 12px 32px; align-items: baseline;
  padding-block: clamp(32px, 4vw, 44px); border-top: 1px solid var(--line);
}
.contact-row > * { min-width: 0; }
.contact-row h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; letter-spacing: -0.02em; }
.contact-row p { margin-top: 6px; color: var(--text-soft); font-size: 15.5px; }
.address {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(20px, 2.6vw, 32px); color: var(--text);
  text-decoration: none; overflow-wrap: anywhere; transition: color 0.2s ease;
}
.address:hover { color: var(--glow); }
.contact-row .text-link { margin-top: 14px; display: flex; }

/* ---------- Legal pages ---------- */
.legal {
  max-width: 808px;
  padding-top: calc(var(--header-h) + clamp(64px, 10vw, 120px));
  padding-bottom: 120px;
}
.legal h1 { font-size: clamp(38px, 5.4vw, 60px); margin-bottom: 14px; }
.legal .effective { font-size: 14px; color: var(--text-soft); margin-bottom: 48px; }
.legal h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin: 46px 0 14px; }
.legal p, .legal ul { margin-bottom: 14px; max-width: 70ch; color: var(--text-soft); }
.legal strong { color: var(--text); }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--glow); text-underline-offset: 3px; }

/* ---------- Footer: the legal lines ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px));
  font-size: 13.5px; color: var(--text-soft);
}
.footer-inner { display: flex; align-items: center; gap: 16px 32px; flex-wrap: wrap; }
.footer-mark { flex: none; width: 22px; height: auto; opacity: 0.9; }
.legal-text { flex: 1 1 460px; min-width: 0; max-width: 84ch; }
.footer-links { display: flex; gap: 24px; white-space: nowrap; }
.footer-links a { color: var(--text-soft); text-decoration: none; transition: color 0.2s ease; }
.footer-links a:hover, .footer-links a[aria-current="page"] { color: var(--text); }

/* ---------- Motion (site.js) ---------- */
/* Elements below the first screen wait out of sight and rise as they arrive */
.reveal {
  opacity: 0; transform: translate3d(0, 34px, 0);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
/* Pictures that move at their own pace; --drift is set as the page scrolls */
[data-drift] { transform: translate3d(0, var(--drift, 0px), 0); }

/* ---------- Narrow screens ---------- */
@media (max-width: 860px) {
  .about-grid, .product { grid-template-columns: 1fr; }
  .about-art { max-width: 420px; }
  .soon-grid { grid-template-columns: 1fr; }
  .soon-grid .product, .soon-grid .product + .product { padding-inline: 0; border-left: 0; }
  .soon-grid .product + .product { border-top: 1px solid var(--line); }
  .why { grid-template-columns: 1fr; }
  .contact-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .nav { gap: 14px; }
  .nav-logo img { height: 38px; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 13.5px; }
  .footer-links { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero::before, .hero-logo img, .scroll-cue span, .scroll-cue i, .scroll-cue i::after { animation: none; }
  .hero-logo, .scroll-cue { opacity: 1; }
  .hero-logo { transform: none; }
  .scroll-cue { transform: translateX(-50%); }
  .reveal { opacity: 1; transform: none; transition: none; }
  [data-drift] { transform: none; }
}