@charset "utf-8";

/* ============================================================
   ERGOSPHERE - FLAGSHIP SPOTLIGHT
   Home-page section that elevates ErgoSphere from "item 01"
   to the unmistakable flagship, and drives the click to
   ergosphere.com.au.

   Reuses the Ergonomics Engineered brand tokens:
     Deep Navy   #0a1628
     Gunmetal    #1a2332
     Cyan Accent #00d4ff
   Everything is scoped under .esf so it cannot leak into the
   rest of the page or collide with the shared theme.
   ============================================================ */

.esf{
  --esf-navy:   #0a1628;
  --esf-panel:  #0d1c30;
  --esf-card:   #111f34;
  --esf-line:   rgba(255,255,255,.09);
  --esf-cyan:   #00d4ff;
  --esf-cyan-2: #3aa0ff;
  --esf-ink:    #eaf3fb;
  --esf-mut:    rgba(233,243,251,.60);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 96px 0 104px;
  background:
    linear-gradient(180deg, #0b1a2d 0%, var(--esf-navy) 42%, var(--esf-navy) 100%);
}

/* Cyan hairline at the top edge so the flagship reads as a
   deliberate band, distinct from the flatter sibling sections. */
.esf::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background: linear-gradient(90deg,
    transparent, rgba(0,212,255,.55) 20%, rgba(0,212,255,.55) 80%, transparent);
  z-index:0;
}

/* Full-bleed backdrop: a radial cyan aura up top-right and a
   faint blueprint grid, both faded out at the edges. */
.esf_bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.esf_bg::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(58% 48% at 82% 6%, rgba(0,212,255,.20), transparent 66%),
    radial-gradient(46% 42% at 8% 88%, rgba(58,160,255,.12), transparent 70%);
}
.esf_bg::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,212,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(120% 90% at 80% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 80% 0%, #000 30%, transparent 78%);
}

.esf .esf_inner{ position:relative; z-index:2; }

/* ---------- FLAGSHIP HERO ---------- */
.esf_hero{
  display:grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 56px;
  align-items:center;
}
.esf_hero > *{ min-width:0; }   /* keep image intrinsic width from blowing out tracks */

.esf_badge{
  display:inline-flex; align-items:center; gap:12px;
  margin-bottom:22px;
  font-family:'Poppins',sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.32em; text-transform:uppercase;
  color: var(--esf-cyan);
}
.esf_badge .esf_bracket{
  width:26px; height:1px; background:var(--esf-cyan); display:inline-block;
  box-shadow:0 0 10px rgba(0,212,255,.8);
}
.esf_badge .esf_ord{
  color: rgba(255,255,255,.28); font-weight:700; letter-spacing:.1em;
}

.esf_wordmark{
  font-family:'Archivo Black', Arial Black, sans-serif;
  font-weight:400;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height:.98;
  letter-spacing:.5px;
  white-space:nowrap;   /* never break the wordmark mid-word */
  color:#fff;
  margin:0 0 20px;
  text-shadow: 0 0 46px rgba(0,212,255,.28);
}
.esf_wordmark span{ color: var(--esf-cyan); }
.esf_wordmark .esf_reg{
  font-size:.28em; vertical-align:super; opacity:.6; margin-left:.12em;
  text-shadow:none;
}

.esf_tag{
  font-family:'Poppins',sans-serif;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight:500;
  color: var(--esf-ink);
  margin:0 0 18px;
}

.esf_body{
  font-size:15.5px; line-height:1.75;
  color: var(--esf-mut);
  max-width:540px;
  margin:0 0 30px;
}
.esf_body strong{ color: rgba(233,243,251,.9); font-weight:600; }

/* stat trio */
.esf_stats{
  display:flex; align-items:stretch; gap:26px;
  margin:0 0 34px;
}
.esf_stat{ display:flex; flex-direction:column; gap:4px; flex:1 1 0; min-width:0; }
.esf_stat + .esf_stat{ padding-left:26px; border-left:1px solid var(--esf-line); }
.esf_statn{
  font-family:'Archivo Black', Arial Black, sans-serif;
  font-size:34px; line-height:1; color:#fff;
}
.esf_statn i{ color:var(--esf-cyan); font-style:normal; }
.esf_statl{
  font-family:'Poppins',sans-serif;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--esf-mut);
}

/* CTAs */
.esf_ctas{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; row-gap:12px; }
.esf_btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Poppins',sans-serif;
  font-size:14px; font-weight:600; letter-spacing:.02em;
  padding:15px 30px; border-radius:40px;
  text-decoration:none; cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.esf_btn svg{ width:17px; height:17px; }
.esf_btn_primary{
  color:#04121f; border:1px solid var(--esf-cyan);
  background: linear-gradient(135deg, var(--esf-cyan), var(--esf-cyan-2));
  box-shadow: 0 10px 30px rgba(0,212,255,.28);
}
.esf_btn_primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,212,255,.42);
  color:#04121f;
}
.esf_btn_ghost{
  color: var(--esf-ink);
  background: rgba(255,255,255,.02);
  border:1px solid var(--esf-line);
}
.esf_btn_ghost:hover{
  color:var(--esf-cyan); border-color: rgba(0,212,255,.55);
  background: rgba(0,212,255,.06);
}

/* ---------- PRODUCT STAGE (signature) ---------- */
.esf_stage{ position:relative; }

/* The stage carries no in-flow content now that both frames are absolute,
   so this spacer sets its height. The tallest state is the Method Tools
   frame in front: 88% width at its 1186/1908 aspect (0.6216) = 54.7%,
   plus the 34px title bar and the 64px drop. Sizing for the taller of the
   two states means the section never jumps when they swap. */
.esf_stage::before{ content:''; display:block; padding-top:calc(54.7% + 98px); }

.esf_frame{
  position:absolute;
  border-radius:12px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#0c1a2b;
  cursor:pointer;
  transition:
    left .75s cubic-bezier(.36,.06,.18,1),
    top .75s cubic-bezier(.36,.06,.18,1),
    width .75s cubic-bezier(.36,.06,.18,1),
    rotate .75s cubic-bezier(.36,.06,.18,1),
    opacity .6s ease,
    filter .6s ease,
    box-shadow .6s ease,
    z-index 0s linear .375s;
}
.esf_frame:focus-visible{
  outline:2px solid rgba(0,212,255,.6); outline-offset:6px;
}
.esf_bar{
  display:flex; align-items:center; gap:7px;
  height:34px; padding:0 14px;
  background:#0a1524; border-bottom:1px solid rgba(255,255,255,.07);
}
.esf_dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.16); }
.esf_dot:nth-child(1){ background:#ff5f57; opacity:.75; }
.esf_dot:nth-child(2){ background:#febc2e; opacity:.75; }
.esf_dot:nth-child(3){ background:#28c840; opacity:.75; }
.esf_bartitle{
  margin-left:8px; font-family:'Poppins',sans-serif;
  font-size:11px; letter-spacing:.04em; color: rgba(255,255,255,.5);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.esf_frame img{ display:block; width:100%; height:auto; }

/* Two windows on a desk. The ErgoTools frame sits back, top right; the Method
   Tools frame sits forward, bottom left, at 88% width and pushed down so the two
   genuinely overlap instead of the back one showing as a 26px fringe. Both stay
   inside .esf_stage, so the section's overflow:hidden never clips them.
   The main frame carries the float animation, so it must NOT take a static
   transform - the keyframes set transform and would override it. */
/* Both frames are positioned with `left` (never `right`), so the swap has a
   single animatable axis. The tilt uses the standalone `rotate` property
   rather than `transform`, which the float animation already owns. */
.esf_stage .is_back{
  left:34%; top:0; width:66%;
  z-index:1; opacity:.72;
  rotate: 2deg;
  box-shadow: 0 24px 50px rgba(0,0,0,.5);
  filter: saturate(.85) brightness(.92);
}
.esf_stage .is_back:hover{
  opacity:.9;
  filter: saturate(1) brightness(1);
}
.esf_stage .is_front{
  left:0; top:64px; width:88%;
  z-index:2; opacity:1;
  rotate: 0deg;
  filter: saturate(1) brightness(1);
  box-shadow:
    0 30px 70px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,212,255,.10),
    0 0 60px rgba(0,212,255,.16);
  animation: esf_float 7s ease-in-out infinite;
}

@keyframes esf_float{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-10px); }
}

.esf_chip{
  position:absolute; z-index:3; left:-14px; bottom:26px;
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 16px; border-radius:30px;
  background: rgba(8,20,34,.92);
  border:1px solid rgba(0,212,255,.4);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  font-family:'Poppins',sans-serif; font-size:12px; color:var(--esf-ink);
  backdrop-filter: blur(6px);
}
.esf_chip b{ color:var(--esf-cyan); font-weight:700; }
.esf_chip .esf_live{
  width:8px; height:8px; border-radius:50%; background:#28c840;
  box-shadow:0 0 0 4px rgba(40,200,64,.18);
}

/* ---------- CAPABILITY PILLARS ---------- */
.esf_pillars{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
  margin-top:76px;
}
.esf_pillar{
  padding:26px 22px 24px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border:1px solid var(--esf-line);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.esf_pillar:hover{
  transform: translateY(-5px);
  border-color: rgba(0,212,255,.45);
  box-shadow: 0 16px 40px rgba(0,0,0,.35), 0 0 30px rgba(0,212,255,.10);
}
.esf_picon{
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  background: rgba(0,212,255,.10);
  border:1px solid rgba(0,212,255,.28);
  color: var(--esf-cyan);
}
.esf_picon svg{ width:22px; height:22px; }
.esf_pillar h4{
  font-family:'Poppins',sans-serif;
  font-size:15.5px; font-weight:600; color:#fff; margin:0 0 8px;
}
.esf_pillar p{
  font-size:13px; line-height:1.65; color: var(--esf-mut); margin:0;
}

/* ---------- PRODUCT MARQUEE ---------- */
.esf_marquee{
  position:relative; z-index:2;
  margin-top:70px;
  padding:6px 0 4px;
  overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.esf_marquee_lead{
  max-width:1200px; margin:0 auto 22px; padding:0 40px;
  font-family:'Poppins',sans-serif; font-size:12px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color: var(--esf-mut);
}
.esf_marquee_lead b{ color: var(--esf-cyan); font-weight:600; }
.esf_track{
  display:flex; gap:22px; width:max-content;
  padding:14px 22px;
  animation: esf_scroll 68s linear infinite;
}
.esf_marquee:hover .esf_track{ animation-play-state: paused; }
@keyframes esf_scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
.esf_shot{
  flex:0 0 auto; width:360px;
  display:block; text-decoration:none;
  border-radius:11px; overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:#0c1a2b;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.esf_shot:hover{
  transform: translateY(-6px);
  border-color: rgba(0,212,255,.5);
  box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 26px rgba(0,212,255,.14);
}
.esf_shot .esf_bar{ height:30px; }
.esf_shot .esf_dot{ width:8px; height:8px; }
.esf_shotimg{ position:relative; height:212px; overflow:hidden; }
.esf_shotimg img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  filter: saturate(.82) brightness(.9);
  transition: filter .28s ease, transform .28s ease;
}
.esf_shot:hover .esf_shotimg img{ filter:none; transform: scale(1.03); }
.esf_shotcap{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 15px;
  border-top:1px solid rgba(255,255,255,.06);
  font-family:'Poppins',sans-serif;
}
.esf_shotcap span{ font-size:12.5px; color: rgba(255,255,255,.72); }
.esf_shotcap span b{ color:#fff; font-weight:600; }
.esf_shotcap .esf_arrow{
  color: var(--esf-cyan); opacity:0; transform: translateX(-4px);
  transition: opacity .28s ease, transform .28s ease;
}
.esf_shot:hover .esf_shotcap .esf_arrow{ opacity:1; transform: translateX(0); }

/* ---------- CTA BAND ---------- */
.esf_cta{
  position:relative; overflow:hidden;
  margin-top:72px;
  display:flex; align-items:center; justify-content:space-between; gap:34px;
  padding:46px 52px;
  border-radius:22px;
  background:
    radial-gradient(120% 160% at 12% 0%, rgba(0,212,255,.16), transparent 60%),
    linear-gradient(135deg, #0f2439, #0b1a2c);
  border:1px solid rgba(0,212,255,.30);
  box-shadow: 0 24px 60px rgba(0,0,0,.4), inset 0 0 60px rgba(0,212,255,.05);
}
.esf_cta_txt{ max-width:640px; }
.esf_cta_title{
  font-family:'Archivo Black', Arial Black, sans-serif; font-weight:400;
  font-size: clamp(22px, 2.6vw, 30px); line-height:1.12; color:#fff;
  margin:0 0 10px; letter-spacing:.4px;
}
.esf_cta_title span{ color: var(--esf-cyan); }
.esf_cta_sub{
  font-size:14.5px; line-height:1.65; color: var(--esf-mut); margin:0;
}
.esf_cta .esf_btn_primary{ flex:0 0 auto; padding:17px 34px; font-size:15px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1040px){
  .esf{ padding:72px 0 78px; }
  .esf_hero{ grid-template-columns:minmax(0, 1fr); gap:44px; }
  .esf_stage{ max-width:620px; margin:0 auto; width:100%; }
  .esf_pillars{ grid-template-columns:repeat(2, 1fr); margin-top:56px; }
  .esf_cta{ flex-direction:column; align-items:flex-start; padding:38px 34px; }
}
@media (max-width: 620px){
  .esf{ padding:56px 0 62px; }
  .esf_wordmark{ letter-spacing:.5px; }
  .esf_stats{ gap:16px; }
  .esf_stat + .esf_stat{ padding-left:16px; }
  .esf_statn{ font-size:27px; }
  .esf_ctas{ width:100%; }
  .esf_btn{ flex:1 1 auto; justify-content:center; }
  /* One screen at a time: the front frame goes back into flow so the stage
     takes its real height whichever image is showing, and the spacer stands
     down. A tap still swaps which of the two is on show. */
  .esf_stage::before{ display:none; }
  .esf_stage .is_back{ display:none; }
  .esf_stage .is_front{
    position:relative; left:auto; top:auto; width:100%; rotate:0deg;
  }
  .esf_chip{ left:8px; bottom:14px; padding:8px 13px; font-size:11px; }
  .esf_pillars{ grid-template-columns:1fr; gap:14px; }
  .esf_shot{ width:280px; }
  .esf_shotimg{ height:168px; }
  .esf_marquee_lead{ padding:0 20px; }
  .esf_cta{ padding:30px 22px; }
  .esf_cta .esf_btn_primary{ width:100%; justify-content:center; }
}

/* Focus visibility for keyboard users */
.esf a:focus-visible,
.esf .esf_btn:focus-visible{
  outline:2px solid var(--esf-cyan); outline-offset:3px; border-radius:6px;
}

/* Respect reduced-motion: no marquee, no float, no aura drift */
@media (prefers-reduced-motion: reduce){
  .esf_track{ animation:none; }
  .esf_stage .is_front{ animation:none; }
  .esf_frame{ transition:none; }
  .esf_btn, .esf_pillar, .esf_shot{ transition:none; }
}