/* ==================================================================
   HOME v2 — a new page below the hero.

   The old page was one shape repeated: a centred heading, a paragraph,
   a row of four equal cards, another centred heading, another row.
   Everything sat on the same paper at the same distance from the eye,
   so the page had no foreground and no middle ground.

   This is a different building:

     02  THE LEDGER   a statement that stays put on the left while the
                      four phases run past it on the right, then a strip
                      of proof that moves
     03  THE PROGRAMS the five programs as real cards with their own
                      pictures — the thing people came to see, given the
                      room it deserves
     04  THE FILM     a full-bleed ink band: the page's dark floor, and
                      the only place the eye rests
     05  WHO IT'S FOR twelve starting points travelling past in two rows
     06  THE CLOSE    ink, one line, one button

   Every class here is new (hv-), so nothing inherits from the old
   sheets and nothing here can leak into the other pages.
   ================================================================== */

#home-glydi .hv{
  --ink:#14120F;
  --ink-deep:#0B0A09;
  --paper:#FBF9F5;
  --paper-2:#F4F1EA;
  --body:#4C473F;
  --muted:#8A8378;
  --line:rgba(20,18,15,.12);
  --line-hi:rgba(20,18,15,.22);
  --accent:#F46718;
  --accent-ink:#B8480A;
  --cyber:#3B5BDB;
  --lift:0 1px 2px rgba(20,18,15,.05), 0 22px 44px -30px rgba(20,18,15,.55);
  --lift-hi:0 2px 6px rgba(20,18,15,.07), 0 40px 70px -36px rgba(20,18,15,.7);

  position:relative;
  padding:clamp(64px, 8vw, 118px) var(--page-edge) !important;
  background:var(--paper) !important;
}
/* the film band, following the reference: a near-black ground with a soft
   gradient through it rather than one flat fill */
#home-glydi .hv.hv-dark{
  background:
    radial-gradient(80% 60% at 50% 118%, rgba(244,103,24,.14), transparent 62%),
    linear-gradient(180deg, #060605 0%, #0D0C0B 44%, #131110 100%) !important;
}
#home-glydi .hv-who{
  background:var(--paper-2) !important;
  padding-inline:0 !important;
  padding-block:clamp(64px, 8vw, 118px) clamp(56px, 7vw, 96px) !important;
}
#home-glydi .cta-section.hv{ background:var(--ink-deep) !important; }

/* ---- shared type ---- */
#home-glydi .hv-eyebrow{
  display:flex; align-items:center; gap:10px;
  margin:0 0 clamp(14px, 1.8vw, 20px) !important;
  font-size:10.5px !important; font-weight:800 !important;
  letter-spacing:.22em !important; text-transform:uppercase !important;
  color:var(--muted) !important;
}
#home-glydi .hv-eyebrow::before{ content:""; width:24px; height:1px; background:var(--accent); }
#home-glydi .hv-eyebrow--on{ color:rgba(255,255,255,.6) !important; }

#home-glydi .hv-h1{
  margin:0 !important;
  font-family:var(--font-display) !important;
  font-size:clamp(36px, 4.4vw, 62px) !important;
  font-weight:800 !important; font-style:normal !important;
  line-height:1.02 !important; letter-spacing:-.035em !important;
  color:var(--ink) !important;
  max-width:16ch;
}
#home-glydi .hv-h2{
  margin:0 !important;
  font-family:var(--font-display) !important;
  font-size:clamp(30px, 3.4vw, 48px) !important;
  font-weight:800 !important; font-style:normal !important;
  line-height:1.05 !important; letter-spacing:-.032em !important;
  color:var(--ink) !important;
  max-width:20ch;
}
#home-glydi .hv-h1 span,
#home-glydi .hv-h2 span{
  font-family:inherit !important; font-style:normal !important;
  color:var(--accent-ink) !important;
}
#home-glydi .hv-dark .hv-h2,
#home-glydi .hv-h1--on{ color:#FFFFFF !important; }
#home-glydi .hv-dark .hv-h2 span,
#home-glydi .hv-h1--on span{ color:var(--accent) !important; }

#home-glydi .hv-lede{
  margin:clamp(16px, 2vw, 22px) 0 0 !important;
  max-width:56ch;
  font-size:16.5px !important; line-height:1.7 !important;
  color:var(--body) !important;
}
#home-glydi .hv-lede--on,
#home-glydi .hv-dark .hv-lede{ color:rgba(255,255,255,.72) !important; }

#home-glydi .hv-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px;
  margin-top:clamp(24px, 3vw, 34px);
}
#home-glydi .hv-ghost{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  transition:color .25s ease;
}
#home-glydi .hv-ghost em{ font-style:normal; transition:transform .4s cubic-bezier(.22,.72,.24,1); }
#home-glydi .hv-ghost:hover{ color:var(--accent-ink); }
#home-glydi .hv-ghost:hover em{ transform:translateX(5px); }
#home-glydi .hv-ghost--on{ color:#FFFFFF; }
#home-glydi .hv-ghost--on:hover{ color:var(--accent); }
#home-glydi .hv-note{
  margin:clamp(18px, 2vw, 24px) 0 0 !important;
  font-size:13px !important; color:var(--muted) !important;
}
#home-glydi .hv-note b{ color:var(--ink) !important; }

#home-glydi .hv-head{ max-width:44ch; margin-bottom:clamp(36px, 4.4vw, 60px); }
/* the rails run full-bleed, so their heading has to carry the page edge itself */
#home-glydi .hv-head--rail{
  /* the page edge is padding here, not part of the measure — folding it into
     a max-width squeezed the heading into a six-line column */
  max-width:none;
  padding-inline:var(--page-edge);
  margin-bottom:clamp(34px, 4vw, 52px);
}
#home-glydi .hv-head--rail .hv-h2{ max-width:24ch; }
#home-glydi .hv-head--rail .hv-lede{ max-width:56ch; }

/* ==================================================================
   02 — THE LEDGER
   ================================================================== */
/* both columns open with a label on the same line, which is what makes the
   two halves of this block read as one row rather than two stacks */
#home-glydi .hv-eyebrow--plain::before{ display:none; }
#home-glydi .hv-eyebrow--plain{ color:var(--muted) !important; }

/* the aside keeps the sticky column from ending in half a screen of paper */
#home-glydi .hv-aside{
  display:block;
  margin-top:clamp(28px, 3.4vw, 44px);
  padding:clamp(18px, 2vw, 24px);
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  border-radius:3px;
  background:#FFFFFF;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(20,18,15,.04);
  transition:transform .35s cubic-bezier(.22,.72,.24,1), box-shadow .35s ease, border-color .3s ease;
}
#home-glydi .hv-aside:hover{
  transform:translateY(-3px);
  box-shadow:var(--lift);
}
#home-glydi .hv-aside-k{
  display:block; margin-bottom:7px;
  font-size:10.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
}
#home-glydi .hv-aside-v{
  display:flex; align-items:center; gap:9px;
  font-size:15px; font-weight:700; letter-spacing:-.01em;
  color:var(--ink);
}
#home-glydi .hv-aside-v em{ font-style:normal; color:var(--accent-ink); transition:transform .4s cubic-bezier(.22,.72,.24,1); }
#home-glydi .hv-aside:hover .hv-aside-v em{ transform:translateX(5px); }
#home-glydi .hv-ledger{
  display:grid;
  grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr);
  gap:clamp(32px, 5vw, 96px);
  align-items:start;
}
#home-glydi .hv-say{
  position:sticky; top:calc(72px + clamp(28px, 4vh, 56px));
}

#home-glydi .hv-phases{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--line);
}
#home-glydi .hv-phase{
  display:grid;
  grid-template-columns:clamp(56px, 6vw, 88px) minmax(0, 1fr);
  gap:clamp(16px, 2.4vw, 32px);
  padding:clamp(24px, 3vw, 38px) 0;
  border-bottom:1px solid var(--line);
  transition:background .35s ease;
}
#home-glydi .hv-phase:hover{ background:rgba(244,103,24,.035); }
#home-glydi .hv-ix{
  font-family:var(--font-display);
  font-size:clamp(28px, 3.4vw, 46px);
  font-weight:800; letter-spacing:-.04em; line-height:1;
  color:var(--line-hi);
  transition:color .35s ease;
}
#home-glydi .hv-phase:hover .hv-ix{ color:var(--accent); }
#home-glydi .hv-pc h3{
  display:flex; flex-direction:column; gap:6px;
  margin:0 0 10px !important;
  font-family:var(--font-display) !important;
  font-size:clamp(20px, 2vw, 26px) !important;
  font-weight:800 !important;
  letter-spacing:-.025em !important; line-height:1.1 !important;
  color:var(--ink) !important;
}
#home-glydi .hv-pc h3 em{
  font-style:normal;
  font-family:var(--font-body) !important;
  font-size:10.5px; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
}
#home-glydi .hv-pc p{
  margin:0 !important;
  max-width:52ch;
  font-size:15px !important; line-height:1.7 !important;
  color:var(--body) !important;
}


/* ==================================================================
   04 — THE FILM
   ================================================================== */
/* the claim sits above the film, and the film runs the width of the page —
   a 16:9 frame at this size is the loudest thing on the page, which is what
   a film of the room deserves */
#home-glydi .hv-film{ display:block; }
#home-glydi .hv-film-say{ max-width:64ch; margin-bottom:clamp(28px, 3.4vw, 44px); }
#home-glydi .hv-film-say .hv-h2{ max-width:22ch; }
#home-glydi .hv-film-frame{
  position:relative;
  border-radius:4px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 50px 90px -45px rgba(0,0,0,.95);
}
/* the film sits in black and white until it is played, which is what makes
   the orange of the play control the only colour on the band */
#home-glydi .hv-film .build-video video{
  filter:grayscale(1) contrast(1.06);
  transition:filter .8s ease;
}
#home-glydi .hv-film .build-video.is-playing video{ filter:none; }
#home-glydi .hv-film .build-video{
  position:relative;
  aspect-ratio:16 / 9;
  background:#000;
}
#home-glydi .hv-film video{
  width:100%; height:100%; object-fit:cover; display:block;
}
#home-glydi .hv-film .vid-cover{
  position:absolute; inset:0;
  display:grid !important; place-content:center; justify-items:center;
  border:0 !important;
  background:linear-gradient(180deg, rgba(6,6,5,.12), rgba(6,6,5,.52)) !important;
  cursor:pointer;
  transition:background .45s ease;
}
#home-glydi .hv-film .vid-cover:hover{ background:linear-gradient(180deg, rgba(11,10,9,.12), rgba(11,10,9,.5)) !important; }
/* the play control, as in the reference: a plain solid white disc with a
   dark triangle — no outer ring, nothing else on it */
#home-glydi .hv-film .vc-ring{
  position:relative;
  display:grid !important; place-items:center;
  width:clamp(52px, 3.8vw, 60px) !important; height:clamp(52px, 3.8vw, 60px) !important;
  border:0 !important; border-radius:50% !important;
  background:#FFFFFF !important;
  box-shadow:0 6px 22px -8px rgba(0,0,0,.55);
  transition:transform .4s cubic-bezier(.22,.72,.24,1);
}
#home-glydi .hv-film .vc-ring::after{ content:none !important; }
#home-glydi .hv-film .vid-cover:hover .vc-ring{ transform:scale(1.08); background:#FFFFFF !important; }
/* theme-light pins this fill with !important, so this needs the same */
#home-glydi .hv-film .vc-ring svg{ width:20px !important; height:20px !important; fill:#0E3B2A !important; margin-left:2px; }
#home-glydi .hv-film .vc-label{
  font-size:10px; font-weight:800; letter-spacing:.26em; text-transform:uppercase;
  color:#FFFFFF;
}
#home-glydi .hv-film .vid-controls{ display:none !important; }
#home-glydi .hv-film-say .hv-ghost{ margin-top:clamp(20px, 2.4vw, 30px); }
#home-glydi .hv-film .vid-cover{ opacity:1; transition:opacity .4s ease, background .45s ease; }
#home-glydi .hv-film .build-video.is-playing .vid-cover{ opacity:0; pointer-events:none; }
#home-glydi .hv-film .build-video video{ cursor:pointer; }

#home-glydi .hv-facts{
  list-style:none;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0;
  margin:clamp(40px, 5vw, 68px) 0 0 !important;
  padding:0 !important;
  border-top:1px solid rgba(255,255,255,.16);
}
#home-glydi .hv-facts li{
  padding:clamp(20px, 2.4vw, 28px) clamp(18px, 2vw, 28px);
  border-left:1px solid rgba(255,255,255,.16);
}
#home-glydi .hv-facts li:first-child{ border-left:0; padding-left:0; }
#home-glydi .hv-facts b{
  display:block; margin-bottom:8px;
  font-size:10.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
}
#home-glydi .hv-facts span{
  font-size:15px; line-height:1.6;
  color:rgba(255,255,255,.78);
}

/* ==================================================================
   05 — WHO IT'S FOR
   Twelve cards on one grid. They used to travel past on two moving
   rails, which meant a visitor could never read the set: the row they
   wanted had already gone by, and half of every card was cut off at the
   edge of the screen. Now the twelve sit still, on four columns, in one
   frame — and each carries its own label rather than the one baked into
   the picture, so the type is finally consistent from card to card.
   ================================================================== */
#home-glydi .hv-who-grid{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(14px, 1.6vw, 22px);
  margin:0 !important;
  padding:0 var(--page-edge) !important;
}
#home-glydi .hv-who-card{
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:4px;
  background:#FFFFFF;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(20,18,15,.05);
  transition:transform .45s cubic-bezier(.22,.72,.24,1), box-shadow .45s ease, border-color .3s ease;
}
#home-glydi .hv-who-card:hover{
  transform:translateY(-6px);
  border-color:var(--line-hi);
  box-shadow:var(--lift);
}
#home-glydi .hv-who-shot{
  display:block;
  aspect-ratio:16 / 10;
  background:var(--ink) var(--img) center / cover no-repeat;
  /* the twelve pictures arrive in a dozen clashing colours; held back so the
     grid reads as one set and the orange stays ours */
  filter:grayscale(.72) contrast(1.06) sepia(.1);
  transition:filter .5s ease, transform .9s cubic-bezier(.22,.72,.24,1);
}
#home-glydi .hv-who-card:hover .hv-who-shot{ filter:grayscale(0) contrast(1.02); transform:scale(1.04); }
#home-glydi .hv-who-tx{
  display:block;
  padding:clamp(14px, 1.5vw, 18px) clamp(14px, 1.5vw, 18px) clamp(16px, 1.7vw, 20px);
  border-top:1px solid var(--line);
}
#home-glydi .hv-who-tx b{
  display:block;
  font-family:var(--font-display);
  font-size:15.5px; font-weight:800;
  letter-spacing:-.02em; line-height:1.2;
  color:var(--ink);
}
#home-glydi .hv-who-tx i{
  display:block; margin-top:6px;
  font-style:normal;
  font-size:12.5px; line-height:1.5;
  color:var(--muted);
}

/* the heading sits on the page edge with the grid under it */
#home-glydi .hv-head--wide{
  max-width:none;
  padding-inline:var(--page-edge);
  margin-bottom:clamp(34px, 4vw, 52px);
}
#home-glydi .hv-head--wide .hv-h2{ max-width:24ch; }
#home-glydi .hv-head--wide .hv-lede{ max-width:56ch; }


/* ==================================================================
   06 — THE CLOSE
   ================================================================== */
#home-glydi .cta-section.hv{
  overflow:hidden;
}
#home-glydi .cta-section.hv::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 100% at 18% 100%, rgba(244,103,24,.22), transparent 66%),
    radial-gradient(40% 80% at 90% 0%, rgba(244,103,24,.12), transparent 70%);
  pointer-events:none;
}
#home-glydi .hv-close{ position:relative; z-index:1; max-width:62ch; }

/* ==================================================================
   NARROW
   ================================================================== */
/* the twelve cards step down with the width; four columns on a phone would
   put each label in a 60px box */
@media (max-width:1180px){
  #home-glydi .hv-who-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:820px){
  #home-glydi .hv-who-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:900px){
  #home-glydi .hv-ledger{ grid-template-columns:minmax(0,1fr); gap:clamp(28px, 5vw, 44px); }
  #home-glydi .hv-say{ position:static; }
  #home-glydi .hv-film{ grid-template-columns:minmax(0,1fr); }
  #home-glydi .hv-facts{ grid-template-columns:minmax(0,1fr); }
  #home-glydi .hv-facts li{ border-left:0; border-top:1px solid rgba(255,255,255,.16); padding-inline:0; }
  #home-glydi .hv-facts li:first-child{ border-top:0; }
}
@media (max-width:620px){
  #home-glydi .hv-phase{ grid-template-columns:44px minmax(0,1fr); gap:14px; }
}
@media (prefers-reduced-motion:reduce){
}

/* ==================================================================
   06 — THE QUESTIONS
   Native <details>, so the answers work with no JavaScript and stay in
   the page for search. A sticky heading on the left, the list on the
   right; the plus turns into a cross when a question is open.
   ================================================================== */
#home-glydi .hv-faq{ background:var(--paper-2) !important; }
#home-glydi .hv-faq-grid{
  display:grid;
  grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);
  gap:clamp(32px, 5vw, 88px);
  align-items:start;
}
#home-glydi .hv-faq-say{ position:sticky; top:calc(72px + clamp(28px, 4vh, 56px)); }
#home-glydi .hv-faq-list{ border-top:1px solid var(--line); }
#home-glydi .hv-q{ border-bottom:1px solid var(--line); }
#home-glydi .hv-q summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:clamp(16px, 1.8vw, 22px) 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-display);
  font-size:clamp(15.5px, 1.5vw, 18px); font-weight:800;
  letter-spacing:-.02em; line-height:1.35;
  color:var(--ink);
  transition:color .25s ease;
}
#home-glydi .hv-q summary::-webkit-details-marker{ display:none; }
#home-glydi .hv-q summary::after{
  content:"";
  flex:0 0 auto;
  width:13px; height:13px;
  background:
    linear-gradient(var(--accent-ink), var(--accent-ink)) center/13px 1.5px no-repeat,
    linear-gradient(var(--accent-ink), var(--accent-ink)) center/1.5px 13px no-repeat;
  transition:transform .35s cubic-bezier(.22,.72,.24,1);
}
#home-glydi .hv-q[open] summary::after{ transform:rotate(135deg); }
#home-glydi .hv-q summary:hover{ color:var(--accent-ink); }
#home-glydi .hv-q p{
  margin:0 !important;
  padding:0 0 clamp(18px, 2vw, 24px);
  max-width:62ch;
  font-size:15px !important; line-height:1.75 !important;
  color:var(--body) !important;
}

@media (max-width:900px){
  #home-glydi .hv-faq-grid{ grid-template-columns:minmax(0,1fr); gap:clamp(24px, 4vw, 36px); }
  #home-glydi .hv-faq-say{ position:static; }
}