/* ==========================================================================
   ETAPRISE OS — home page only (front-page.php)

   Enqueued from functions.php behind is_front_page(), with etaprise-system
   as its dependency, so no other page pays for it. Every class is .hp-.

   A sales page, not a brochure: image-led hero, logo strip, problem cards,
   a bento grid, outcome numbers, nine engine cards with photography, a
   three-step how-it-works, portrait testimonials, sector tiles, FAQ and a
   closing CTA.

   Theme handling. Most surfaces are drawn in the ink/paper scale, so the
   [data-theme="light"] remap in etaprise-system.css carries them with no
   second ruleset. Two full-bleed surfaces carry artwork and cannot rely on
   that alone -- the hero and the closing CTA -- so section 13 at the bottom
   remaps them explicitly for light: the dark render is flipped with
   invert + hue-rotate (luminance inverts, hue survives), the scrims become
   light, and the type goes to ink.

   The only surfaces that stay dark in both themes are the cards that sit
   ON a photograph -- the two bento photo cells and the six sector tiles.
   Those are overlay-on-image cards, dark in either theme by convention,
   and inverting a photo of a person or a plant room would look wrong.
   ========================================================================== */

:root {
  --hp-dark:       #050505;
  --hp-dark-line:  rgba(255, 255, 255, 0.12);
  --hp-dark-text:  #FFFFFF;
  --hp-dark-quiet: #B4B4AE;
  --hp-glow:       rgba(7, 75, 230, 0.42);
}

/* The hero photograph and the bento art are wider than their layout boxes
   once scaled, and body { overflow-x: hidden } propagates to the viewport
   rather than clipping here. overflow-x: clip does clip, and unlike hidden
   it creates no scroll container, so sticky positioning still works. */
html { overflow-x: clip; }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hp-hero {
  position: relative;
  isolation: isolate;
  background: var(--hp-dark);
  color: var(--hp-dark-text);
  padding-block: var(--s9) var(--s8);
  overflow: hidden;
}
.hp-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}
/* Scrim: dark at the edges and under the type, open over the artwork. */
.hp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, transparent, var(--hp-dark) 78%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.86) 0%, rgba(5, 5, 5, 0.34) 34%, var(--hp-dark) 96%);
}
/* Split hero: copy left, globe right. The globe is taken out of the grid and
   pinned to the right so it can run past the viewport edge — .hp-hero clips
   it, which is what gives the cropped-sphere framing. The copy keeps a
   comfortable measure on the left; both stack at 980px. */
/* No hero visual for now: the headline carries the screen on its own, so the
   copy is a single centred column at full measure. */
.hp-hero-grid { position: relative; }
.hp-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
}

.hp-hero h1 {
  padding-top: var(--s5);
  color: var(--hp-dark-text);
}

.hp-hero h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--orange) 6%, #FF9E4D 48%, var(--blue-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hp-hero .lede {
  padding-top: var(--s5);
  margin-inline: auto;
  max-width: 60ch;
  color: var(--hp-dark-quiet);
}
.hp-hero-cta {
  justify-content: center;
  flex-wrap: wrap;
  padding-top: var(--s6);
}

/* Four short proof items under the buttons. */
.hp-hero-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3) var(--s5);
  padding-top: var(--s6);
  font-size: 13px;
  color: var(--hp-dark-quiet);
}
.hp-hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
.hp-hero-proof svg { color: var(--blue-light); flex: none; }

/* ==========================================================================
   3. PROBLEM CARDS
   ========================================================================== */
.hp-problem {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s5);
  padding-top: var(--s7);
}
.hp-problem-card {
  padding: var(--s6) var(--s5);
  border-radius: var(--r-card);
  border: 1px solid var(--ink-line);
  background: var(--ink-700);
}
.hp-problem-card b {
  display: block;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  /* --red-text is the paper red; on the dark card it measured 3.13:1, under
     AA. --red carries on dark, and light gets the deeper one back below. */
  color: var(--red);
  padding-bottom: var(--s3);
}
:root[data-theme="light"] .hp-problem-card b { color: var(--red-text); }
.hp-problem-card h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}
.hp-problem-card p {
  margin: 0;
  padding-top: var(--s3);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--on-ink-2);
}

/* ==========================================================================
   4. BENTO GRID
   ========================================================================== */
.hp-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s4);
  padding-top: var(--s7);
}
.hp-cell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-panel);
  border: 1px solid var(--ink-line);
  background: var(--ink-700);
  padding: var(--s6);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 240px;
}
.hp-cell-wide  { grid-column: span 4; min-height: 360px; }
.hp-cell-third { grid-column: span 2; min-height: 300px; }

/* Photo cells: the image is the background, type sits on a scrim. The
   background is pinned dark rather than inherited, so a slow or failed
   image never leaves white type on the light theme's white card. */
.hp-cell-photo {
  border-color: transparent;
  background: var(--hp-dark);
  color: #fff;
}
.hp-cell-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hp-cell-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.15) 0%, rgba(5, 5, 5, 0.62) 52%, rgba(5, 5, 5, 0.92) 100%);
}
.hp-cell-photo h3 { color: #fff; }
.hp-cell-photo p  { color: rgba(255, 255, 255, 0.82); }
.hp-cell-photo .label { color: rgba(255, 255, 255, 0.72); }

.hp-cell .label { padding-bottom: var(--s3); }
.hp-cell h3 {
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0;
}
.hp-cell p {
  margin: 0;
  padding-top: var(--s3);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--on-ink-2);
  max-width: 46ch;
}

/* The one cell that carries a figure rather than a photograph. */
.hp-cell-figure {
  justify-content: center;
  align-items: flex-start;
  background: linear-gradient(150deg, var(--blue) 0%, var(--blue-deep) 100%);
  border-color: transparent;
  color: #fff;
}
.hp-cell-figure b {
  font-size: clamp(46px, 5.4vw, 72px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.045em;
}
.hp-cell-figure h3 { color: #fff; }
.hp-cell-figure p  { color: rgba(255, 255, 255, 0.86); }

/* ==========================================================================
   5. OUTCOME NUMBERS
   ========================================================================== */
.hp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s6);
  padding-top: var(--s7);
  border-top: 1px solid var(--ink-line);
  margin-top: var(--s7);
}
.hp-stat-num {
  display: block;
  font-size: clamp(44px, 5.2vw, 68px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.045em;
}
.hp-stat-num em {
  font-style: normal;
  color: var(--accent-text);
}
.hp-stats h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  padding-top: var(--s4);
}
.hp-stats p {
  margin: 0;
  padding-top: var(--s2);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--on-ink-3);
  max-width: 32ch;
}

/* ==========================================================================
   6. NINE ENGINES
   ========================================================================== */
.hp-engines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--s5);
  padding-top: var(--s7);
}
.hp-engine {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-panel);
  border: 1px solid var(--ink-line);
  background: var(--ink-700);
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease-out),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-mid) var(--ease-out);
}
.hp-engine:hover {
  transform: translateY(-4px);
  border-color: var(--blue);
  box-shadow: 0 22px 50px -26px rgba(7, 75, 230, 0.6);
}
.hp-engine-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink-600);
}
.hp-engine-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--ease-out);
}
.hp-engine:hover .hp-engine-media img { transform: scale(1.05); }
.hp-engine-copy { padding: var(--s5); }
.hp-engine-copy h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.hp-engine-copy p {
  margin: 0;
  padding-top: var(--s2);
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-ink-2);
}
.hp-engine-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: var(--s4);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-blue-text);
}
.hp-engine-go svg { transition: transform var(--t-fast) var(--ease); }
.hp-engine:hover .hp-engine-go svg { transform: translateX(4px); }

/* ==========================================================================
   7. HOW IT WORKS — three steps
   ========================================================================== */
.hp-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s6);
  padding-top: var(--s7);
}
.hp-step-media {
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--ink-600);
}
.hp-step-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  margin-top: var(--s5);
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.hp-steps h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
  padding-top: var(--s5);
}
.hp-steps p {
  margin: 0;
  padding-top: var(--s3);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--on-ink-2);
}

/* ==========================================================================
   9. SECTOR TILES
   ========================================================================== */
.hp-sectors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s4);
  padding-top: var(--s7);
}
.hp-sector {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 260px;
  background: var(--hp-dark);
  padding: var(--s5);
  border-radius: var(--r-panel);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
}
.hp-sector img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--t-slow) var(--ease-out);
}
.hp-sector::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.10) 0%, rgba(5, 5, 5, 0.60) 55%, rgba(5, 5, 5, 0.92) 100%);
  transition: background var(--t-mid) var(--ease);
}
.hp-sector:hover img { transform: scale(1.06); }
.hp-sector:hover::after {
  background: linear-gradient(180deg, rgba(7, 75, 230, 0.22) 0%, rgba(5, 5, 5, 0.62) 55%, rgba(5, 5, 5, 0.94) 100%);
}
/* Tiles are links, so the copy is phrasing content rather than a heading —
   the section heading above already names the group. */
.hp-sector-copy { display: block; }
.hp-sector-name {
  display: block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
}
.hp-sector-note {
  display: block;
  padding-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   10. FAQ
   ========================================================================== */
.hp-faq {
  padding-top: var(--s5);
  max-width: 860px;
  border-top: 1px solid var(--ink-line);
  margin-top: var(--s6);
}
.hp-faq details { border-bottom: 1px solid var(--ink-line); }
.hp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: var(--s5);
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: color var(--t-fast) var(--ease);
}
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary:hover { color: var(--accent-blue-text); }
.hp-faq summary::after {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--t-fast) var(--ease);
}
.hp-faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.hp-faq details p {
  margin: 0;
  padding-bottom: var(--s5);
  max-width: 68ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--on-ink-2);
}

/* ==========================================================================
   11. CLOSING CTA
   ========================================================================== */
.hp-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--hp-dark);
  color: var(--hp-dark-text);
  padding-block: var(--s9);
  text-align: center;
}
.hp-final-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
}
.hp-final::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(7, 75, 230, 0.30), transparent 72%),
    linear-gradient(180deg, var(--hp-dark) 0%, rgba(5, 5, 5, 0.62) 42%, var(--hp-dark) 100%);
}
.hp-final h2 { max-width: 20ch; margin-inline: auto; color: var(--hp-dark-text); }
.hp-final .lede {
  max-width: 560px;
  margin-inline: auto;
  padding-top: var(--s5);
  color: var(--hp-dark-quiet);
}
.hp-final .btn-row {
  justify-content: center;
  flex-wrap: wrap;
  padding-top: var(--s6);
}
.hp-final-note {
  padding-top: var(--s5);
  font-size: 13px;
  color: var(--hp-dark-quiet);
}

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
  .hp-cell-wide,
  .hp-cell-third { grid-column: span 3; }
}
@media (max-width: 768px) {
  /* etaprise-system.css caps every .display-xl at 28-40px on mobile, which is
     right for a page title but undersells a sales-page hero. Scoped to this
     one headline so no other page's H1 changes. */
  .hp-hero h1.display-xl {
    font-size: clamp(34px, 10vw, 52px) !important;
    line-height: 1.0 !important;
  }
}

/* Tablet: side-by-side would squeeze the headline, so stack and centre.
   The globe keeps a generous but shorter box. */
@media (max-width: 720px) {
  .hp-hero { padding-block: var(--s8) var(--s7); }
  .hp-hero-bg { opacity: 0.3; }
  .hp-bento { grid-template-columns: 1fr; }
  .hp-cell-wide,
  .hp-cell-third { grid-column: span 1; min-height: 220px; }
  .hp-hero-cta .btn { width: 100%; justify-content: center; }
  .hp-sector { min-height: 200px; }
}

/* Reveals are already neutralised under this query by the system
   stylesheet; only the decorative hover transitions need switching off. */
@media (prefers-reduced-motion: reduce) {
  .hp-engine,
  .hp-engine-media img,
  .hp-sector img,
  .hp-sector::after,
  .hp-engine-go svg { transition: none !important; }
  .hp-engine:hover { transform: none; }
  .hp-engine:hover .hp-engine-media img,
  .hp-sector:hover img { transform: none; }
}

/* ==========================================================================
   13. LIGHT THEME — the two full-bleed artwork surfaces

   The hero fills the whole first screen on phones and tablets. When it did
   not respond to the toggle, the toggle read as broken even though the rest
   of the page was flipping correctly. These rules make it respond.
   ========================================================================== */
:root[data-theme="light"] .hp-hero,
:root[data-theme="light"] .hp-final {
  background: var(--paper);
  color: var(--on-paper);
}

/* invert flips the render's luminance, hue-rotate puts the colour back, so
   a dark artwork becomes a light one instead of a photographic negative. */
:root[data-theme="light"] .hp-hero-bg,
:root[data-theme="light"] .hp-final-bg {
  filter: invert(1) hue-rotate(180deg);
  opacity: 0.20;
}

:root[data-theme="light"] .hp-hero::after {
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, transparent, var(--paper) 78%),
    linear-gradient(180deg, rgba(250, 250, 249, 0.78) 0%, rgba(250, 250, 249, 0.28) 34%, var(--paper) 96%);
}
:root[data-theme="light"] .hp-final::after {
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(7, 75, 230, 0.12), transparent 72%),
    linear-gradient(180deg, var(--paper) 0%, rgba(250, 250, 249, 0.55) 42%, var(--paper) 100%);
}

:root[data-theme="light"] .hp-hero h1,
:root[data-theme="light"] .hp-final h2 { color: var(--on-paper); }
:root[data-theme="light"] .hp-hero h1 em {
  background: linear-gradient(96deg, var(--blue) 0%, #2563EB 50%, var(--blue-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root[data-theme="light"] .hp-hero .lede,
:root[data-theme="light"] .hp-final .lede,
:root[data-theme="light"] .hp-hero-proof { color: var(--on-paper-2); }
:root[data-theme="light"] .hp-final-note { color: var(--on-paper-3); }
:root[data-theme="light"] .hp-hero-proof svg { color: var(--blue); }

/* The closing CTA's buttons are the dark-background pair. On paper they
   would be white-on-white and an invisible outline, so swap them for the
   standard primary / secondary treatment. */
:root[data-theme="light"] .hp-final .btn-invert {
  background: var(--blue);
  color: #fff !important;
  box-shadow: 0 8px 26px rgba(7, 75, 230, 0.34);
}
:root[data-theme="light"] .hp-final .btn-invert:hover { background: var(--blue-deep); }
:root[data-theme="light"] .hp-final .btn-outline-light {
  color: var(--on-paper) !important;
  border-color: var(--paper-ghost);
}
:root[data-theme="light"] .hp-final .btn-outline-light:hover {
  border-color: var(--on-paper);
  background: var(--paper-card);
}