/* =========================================================================
   MAKTONIC — How We Work page
   Loaded after main.css, which supplies the tokens, nav, footer and buttons.
   Everything here is scoped to sections that only exist on this page.
   ========================================================================= */

/* ================================================================== HERO */
.hww-hero{position:relative;overflow:hidden}
.hww-hero_container{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s-64);
  align-items:center;
  padding-top:var(--s-140);padding-bottom:var(--s-64);
}
.hww-hero_content{display:flex;flex-direction:column;gap:var(--s-24);max-width:40rem}
.hww-hero_content h1{margin:0;font-size:3.5rem;line-height:var(--lh-110);letter-spacing:-.035em}
.hww-hero_copy{display:flex;flex-direction:column;gap:var(--s-16)}
.hww-hero_copy p{margin:0;color:var(--gray-600);max-width:36rem}

.hww-hero_visual{position:relative;display:flex;align-items:center;justify-content:center}
.hww-donut{position:relative;width:100%;max-width:21.5rem;margin-left:auto;aspect-ratio:1}
.hww-donut svg{width:100%;height:100%;display:block;overflow:visible}
.hww-donut_track{stroke:var(--coral-100)}
.hww-donut_fill{stroke:var(--green-200)}
.hww-donut_inner{stroke:var(--gray-100)}
/* the label rides just outside the ring at 12 o'clock */
.hww-donut_tag{
  position:absolute;top:-.25rem;left:50%;transform:translateX(-.5rem);
  font-size:.8125rem;letter-spacing:var(--ls-2);color:var(--gray-600);
  white-space:nowrap;
}
/* a travelling head on the drawn arc */
.hww-donut_dot{
  position:absolute;left:50%;top:50%;width:.75rem;height:.75rem;
  margin:-.375rem 0 0 -.375rem;border-radius:50%;
  background-color:var(--green-500);box-shadow:0 0 0 5px rgba(8,144,108,.16);
  opacity:0;pointer-events:none;
}

/* ============================================================= STATEMENT */
.hww-claim{padding-top:var(--s-100);padding-bottom:var(--s-120)}
.hww-claim_text{
  margin:0;text-align:center;max-width:58rem;margin-inline:auto;
  font-size:3.25rem;line-height:var(--lh-120);font-weight:500;
}
/* the second sentence stays quieter even once it has been read */
.hww-claim_text .word.is--muted{color:var(--gray-400)}

/* ================================================================ VISION */
.hww-vision{padding-top:var(--s-100);padding-bottom:var(--s-64);overflow:hidden}
.hww-vision .section_heading{max-width:44rem}
.hww-vision .section_heading h2{margin:0}
.hww-vision .section_heading p{color:var(--gray-600);max-width:34rem}

/* The arc sits behind a centred panel. Everything is proportional to the
   wrapper so the diagram holds together at any width. */
.hww-orbit{position:relative;margin-top:var(--s-64);min-height:34rem;display:flex;align-items:center}
.hww-orbit_arcs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hww-orbit_arc{stroke:var(--gray-200)}
.hww-orbit_arc.a2{stroke:var(--gray-100)}
.hww-orbit_arc.a3{stroke:var(--gray-100)}

/* the four tiles that sit on the outer arc */
.hww-orbit_tile{
  position:absolute;width:3rem;height:3rem;border-radius:.875rem;
  background-color:var(--white);color:var(--green-500);
  display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(21,23,26,.07);
  border:1px solid var(--gray-100);
}
.hww-orbit_tile svg{width:1.25rem;height:1.25rem}
/* left/top come from JS; the translate keeps the tile centred on the line */
.hww-orbit_tile{transform:translate(-50%,-50%)}
/* GSAP re-writes this transform with xPercent/yPercent once it takes over */

.hww-orbit_panel{
  position:relative;z-index:1;width:min(36rem,100%);margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--s-20);padding:var(--s-48) var(--s-40) var(--s-40);
}
.hww-orbit_badge{
  width:3.25rem;height:3.25rem;border-radius:.9rem;
  background-color:var(--green-500);display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(8,144,108,.28);
}
.hww-orbit_badge img{width:1.625rem;height:1.625rem;display:block}
.hww-orbit_panel h3{margin:0;font-weight:500}
.hww-orbit_copy{display:flex;flex-direction:column;gap:var(--s-16);max-width:31rem}
.hww-orbit_copy p{margin:0;color:var(--gray-600);font-size:var(--f-text-m);line-height:var(--lh-140)}

/* While the backdrop is scrubbing, the dark band defers its colour to it so
   the change crossfades across the edge instead of flipping. */
.bg-scrub .hww-story,
.bg-scrub .hww-became{background-color:transparent}

/* ============================================================== OUR STORY */
.hww-story{
  background-color:var(--black);color:var(--white);
  padding-top:var(--s-120);padding-bottom:var(--s-140);
  position:relative;overflow:hidden;
}
.hww-story_head{display:flex;flex-direction:column;gap:var(--s-20)}
.hww-story_head h2{margin:0}
.hww-story_accent{color:var(--green-300)}

.hww-story_body{
  position:relative;margin-top:var(--s-80);
  display:flex;flex-direction:column;align-items:center;
}
.hww-story_figure{margin:0;width:min(22rem,72%);position:relative;z-index:2}
.hww-story_figure img{width:100%;height:auto;display:block;border-radius:1.25rem}
/* the copy card tucks under the portrait, exactly as in the reference */
.hww-story_card{
  position:relative;z-index:1;margin-top:-3.5rem;
  width:min(50rem,100%);
  display:flex;flex-direction:column;gap:var(--s-16);
  padding:var(--s-64) var(--s-48) var(--s-48);
  border-radius:1.25rem;
  background-color:var(--gray-800);
  border:1px solid rgba(255,255,255,.08);
}
.hww-story_card p{margin:0;color:var(--gray-200);line-height:var(--lh-140);font-size:var(--f-text-m)}
.hww-story_lead{color:var(--green-300);font-weight:500}

/* =========================================================== BECAME MAKTONIC */
.hww-became{
  background-color:var(--black);color:var(--white);
  padding-top:var(--s-64);padding-bottom:var(--s-120);
}
.hww-became_text{
  margin:0 0 var(--s-80);max-width:56rem;font-weight:500;
}
.hww-became_text .word{color:var(--white)}
.hww-became_figure{margin:0;overflow:hidden;border-radius:1.125rem}
.hww-became_figure img{width:100%;height:auto;display:block}

/* ============================================================= MEET THE TEAM */
.hww-team{padding-top:var(--s-120);padding-bottom:var(--s-100);position:relative;overflow:hidden}
.hww-team_head{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--s-16);max-width:36rem;margin-inline:auto;
}
.hww-team_head h2{margin:0}
.hww-team_head p{margin:0;color:var(--gray-600);font-size:var(--f-text-m);line-height:var(--lh-140)}

.hww-team_grid{
  margin-top:var(--s-60);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-24);
}
.hww-team_card{display:flex;flex-direction:column;gap:var(--s-12)}
.hww-team_link{
  position:relative;display:block;border-radius:.875rem;overflow:hidden;
  background-color:var(--gray-100);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.hww-team_link img{
  width:100%;height:auto;display:block;aspect-ratio:6/7;object-fit:cover;
  transition:transform .5s var(--ease);
}
.hww-team_card:hover .hww-team_link{transform:translateY(-4px);box-shadow:0 16px 32px rgba(21,23,26,.12)}
.hww-team_card:hover .hww-team_link img{transform:scale(1.04)}
/* the LinkedIn chip slides up from the corner on hover */
.hww-team_badge{
  position:absolute;right:.625rem;bottom:.625rem;
  width:1.75rem;height:1.75rem;border-radius:.375rem;
  background-color:#0a66c2;color:var(--white);
  display:grid;place-items:center;
  opacity:0;transform:translateY(.5rem);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.hww-team_badge svg{width:1rem;height:1rem}
.hww-team_card:hover .hww-team_badge,
.hww-team_link:focus-visible .hww-team_badge{opacity:1;transform:translateY(0)}
.hww-team_card h3{
  margin:0;font-size:1rem;font-weight:500;letter-spacing:var(--ls-3);color:var(--black);
}
.hww-team_card p{
  margin:0;font-size:.8125rem;letter-spacing:var(--ls-2);color:var(--gray-500);
  line-height:var(--lh-130);
}

/* ================================================================= HIRING */
.hww-hiring{padding-top:var(--s-64);padding-bottom:var(--s-120);position:relative;overflow:hidden}
.hww-hiring_inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-32);
}
.hww-hiring_inner h2{margin:0;max-width:26ch}
.hww-hiring_accent{color:var(--green-500)}

/* ============================================================= RESPONSIVE */
@media (max-width:991px){
  .hww-hero_container{
    grid-template-columns:1fr;gap:var(--s-48);min-height:0;
    padding-top:var(--s-120);padding-bottom:var(--s-80);
  }
  .hww-hero_content{max-width:none}
  .hww-hero_content h1{font-size:3rem}
  .hww-donut{max-width:20rem;margin-inline:auto}

  .hww-claim{padding-top:var(--s-64);padding-bottom:var(--s-80)}
  .hww-claim_text{font-size:2.625rem}
  .hww-vision{padding-top:var(--s-80)}
  .hww-orbit{margin-top:var(--s-60)}
  .hww-orbit_tile{width:2.5rem;height:2.5rem;border-radius:.75rem}
  .hww-orbit_tile svg{width:1.0625rem;height:1.0625rem}
  .hww-orbit_panel{padding:var(--s-40) var(--s-20) var(--s-32)}

  .hww-story{padding-top:var(--s-90);padding-bottom:var(--s-100)}
  .hww-story_card{padding:var(--s-60) var(--s-32) var(--s-40)}

  .hww-team{padding-top:var(--s-90)}
  .hww-team_grid{grid-template-columns:repeat(3,1fr);gap:var(--s-20)}
}
@media (max-width:767px){
  .hww-hero_container{padding-top:var(--s-105)}
  .hww-hero_content h1{font-size:2.375rem}
  .hww-donut{max-width:17rem}
  .hww-donut_tag{font-size:.75rem}

  .hww-claim_text{text-align:left;font-size:2rem}

  .hww-story_figure{width:min(16rem,80%)}
  .hww-story_card{margin-top:-2.5rem;padding:var(--s-48) var(--s-24) var(--s-32)}
  .hww-became_text{margin-bottom:var(--s-48)}

  .hww-team_grid{grid-template-columns:repeat(2,1fr);gap:var(--s-16)}
  .hww-hiring_inner{align-items:flex-start;text-align:left}
}
@media (max-width:479px){
  /* the tiles have nowhere useful to sit at this width */
  .hww-orbit_tile{display:none}
  .hww-team_grid{grid-template-columns:repeat(2,1fr)}
  .hww-team_card p{font-size:.75rem}
}

/* Anyone who asked for less motion gets the finished state, not the journey. */
@media (prefers-reduced-motion: reduce){
  .hww-donut_dot{display:none}
}