/* Hero: home and inner variants, optional 4:5 portrait (BRAND.md 6.4). Always on a dark section. */
.ws-hero__inner{
  display:grid;
  gap:var(--ws-space-5);
  align-items:end;
}
.ws-hero__content{
  display:grid;
  gap:var(--ws-space-3);
  justify-items:start;
}
.ws-hero__title{ font-size:var(--ws-fs-h1); max-width:20ch; }
.ws-hero--home .ws-hero__title{ font-size:var(--ws-fs-hero); max-width:20ch; }

.ws-hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--ws-space-2) var(--ws-space-4);
  margin-top:var(--ws-space-1);
}

/* Meta line (case studies): items separated by a middle dot. */
.ws-hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:4px 0;
  padding:0;
  list-style:none;
  font-size:var(--ws-fs-small);
  color:var(--ws-fg-muted);
}
/* Every item starts with a 24px separator; the list is pulled 24px left and its left strip is
   clipped, so a separator never shows at the start of a line (any width, any wrap). */
.ws-hero__meta{
  margin-left:-24px;
  clip-path:inset(-8px -8px -8px 20px);
}
/* The separator sits in the item's left padding, so a long item that wraps keeps its
   second line on the content edge instead of under the clipped strip. */
.ws-hero__meta li{
  position:relative;
  padding-left:24px;
}
.ws-hero__meta li::before{
  content:"·" / "";
  position:absolute;
  left:0;
  top:0;
  width:24px;
  text-align:center;
  color:var(--ws-fg-dim);
}

.ws-hero__media{ margin:0; }
.ws-hero__media img{
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  filter:grayscale(1);
}

/* The first hero on a page sits under the header. */
@media (max-width:991.98px){
  .ws-main > .ws-hero:first-child{ padding-top:120px; }
}
@media (min-width:992px){
  .ws-hero{
    display:flex;
    align-items:flex-end;
    min-height:82vh;
  }
  .ws-hero > .ws-wrap{ width:100%; }
  .ws-hero--portrait .ws-hero__inner{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--ws-space-6); }
  .ws-hero--portrait .ws-hero__media{ max-width:480px; justify-self:end; width:100%; }
}

/* Inner pages: short hero, no viewport minimum height (the next section starts above the fold).
   .ws-hero--short is kept as an alias. Home keeps its own hero. */
.ws-hero--inner{ padding-bottom:var(--ws-space-5); }
@media (min-width:768px){ .ws-hero--inner{ padding-bottom:var(--ws-space-6); } }
@media (min-width:992px){
  .ws-hero.ws-hero--inner{ display:block; min-height:0; padding-bottom:var(--ws-space-7); }
  .ws-main > .ws-hero--inner:first-child{ padding-top:calc(var(--ws-nav-h) + var(--ws-space-7)); }
  /* A short hero keeps the portrait smaller, so the next section starts above the fold. */
  .ws-hero--inner.ws-hero--portrait .ws-hero__media{ max-width:400px; }
}

/* Split variant (inner pages): text in 7 columns, an aside in 5 from 992px, top-aligned with the H1.
   The aside holds an index (services, process stages) or a project screenshot in a phone frame.
   Under 992px there is no aside; the same content follows further down the page. */
.ws-hero__aside{ display:none; }
@media (min-width:992px){
  .ws-hero--split .ws-hero__inner{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    column-gap:var(--ws-space-6);
    align-items:start;
  }
  .ws-hero--split .ws-hero__aside{
    display:block;
    margin-top:calc(var(--ws-fs-eyebrow) * 1.4 + var(--ws-space-3));
  }
  .ws-hero--split .ws-hero__phone{ max-width:300px; margin-right:0; }
}

/* Index: numbered rows, thin lines between them; rows can be links (name turns white, an arrow appears). No red. */
.ws-hero__index{ border-bottom:1px solid var(--ws-line); }
.ws-hero__index-item{ border-top:1px solid var(--ws-line); }
.ws-hero__index-row{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 20px;
  align-items:center;
  gap:var(--ws-space-2);
  padding-block:14px;
  color:var(--ws-fg-muted);
  text-decoration:none;
}
.ws-hero__index-number{
  font-family:var(--ws-font-display);
  font-size:28px;
  line-height:1;
  letter-spacing:.01em;
  color:var(--ws-fg-dim);
}
.ws-hero__index-name{ display:block; font-size:16px; font-weight:500; line-height:1.35; transition:color var(--ws-ease); }
.ws-hero__index-meta{
  display:block;
  margin-top:4px;
  font-size:var(--ws-fs-eyebrow);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ws-fg-dim);
}
.ws-hero__index-arrow{ width:16px; height:16px; opacity:0; transform:translateX(-4px); transition:opacity var(--ws-ease), transform var(--ws-ease); }
a.ws-hero__index-row:hover{ color:var(--ws-fg); } /* overrides the red a:hover: the index has no red */
a.ws-hero__index-row:hover .ws-hero__index-name,
a.ws-hero__index-row:focus-visible .ws-hero__index-name{ color:var(--ws-white); }
a.ws-hero__index-row:hover .ws-hero__index-arrow,
a.ws-hero__index-row:focus-visible .ws-hero__index-arrow{ opacity:1; transform:none; }

/* Phone frame for a project screenshot: radius 0, 4:5 screen. */
.ws-hero__aside.ws-hero__phone{ display:block; }
.ws-hero__phone{
  width:100%;
  max-width:280px;
  margin:var(--ws-space-4) auto 0;
  padding:10px 10px 26px;
  border:1px solid var(--ws-text-dim);
  background:var(--ws-dark-2);
}
.ws-hero__phone-screen{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:4 / 5;
  padding:var(--ws-space-2);
  background:var(--ws-dark-3);
  text-align:center;
}
.ws-hero__phone-screen img{ width:100%; height:100%; object-fit:cover; }
.ws-hero__phone-screen:has(img){ padding:0; }
@media (prefers-reduced-motion:reduce){
  .ws-hero__index-name,.ws-hero__index-arrow{ transition:none; }
}

/* Media variant (Home): text left (7 columns), a 4:5 video or image right (5 columns) from 992px,
   top-aligned with the H1. Below both, full width: the proof stats and the logo strip.
   Under 992px there is no media at all; the video script never loads it there. */
.ws-hero__accent{ color:var(--ws-red); }
.ws-hero--media .ws-hero__media{ display:none; }
.ws-hero__band{
  display:grid;
  gap:var(--ws-space-4);
  padding-top:var(--ws-space-4);
  border-top:1px solid var(--ws-line);
}
.ws-hero__stats{
  display:flex;
  flex-wrap:wrap;
  gap:var(--ws-space-3) var(--ws-space-6);
  margin:0;
}
.ws-hero__stat{ display:flex; flex-direction:column-reverse; gap:6px; }
.ws-hero__stat-value{
  margin:0;
  font-family:var(--ws-font-display);
  font-size:clamp(40px,3.4vw,56px);
  line-height:.9;
  letter-spacing:.01em;
}
.ws-hero__stat-label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ws-fg-muted);
}
.ws-hero__frame{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 5;
  object-fit:cover;
  background:var(--ws-dark-3);
  border:1px solid var(--ws-border-dark);
}
.ws-hero__video-toggle{
  position:absolute;
  right:12px;
  bottom:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--ws-text-dim);
  border-radius:50%; /* a single point: circle allowed (BRAND.md 1.2, rule 6) */
  background:var(--ws-dark);
  color:var(--ws-white);
  cursor:pointer;
  transition:border-color var(--ws-ease);
}
.ws-hero__video-toggle:hover{ border-color:var(--ws-white); }
.ws-hero__video-toggle .ws-hero__icon-play,
.ws-hero__video-toggle.is-paused .ws-hero__icon-pause{ display:none; }
.ws-hero__video-toggle.is-paused .ws-hero__icon-play{ display:block; }

@media (min-width:992px){
  .ws-hero--media{ display:block; min-height:0; }
  .ws-main > .ws-hero--media:first-child{ padding-top:calc(var(--ws-nav-h) + var(--ws-space-5)); }
  .ws-hero--media{ padding-bottom:var(--ws-space-5); }
  .ws-hero--media .ws-hero__inner{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    column-gap:var(--ws-space-6);
    row-gap:var(--ws-space-4);
    align-items:start;
  }
  /* The H1 fills its 7 columns, so it stays larger than the media (the H1 is the LCP element). */
  .ws-hero--media .ws-hero__title{ font-size:clamp(48px,5.2vw,96px); max-width:none; }
  .ws-hero--media .ws-hero__media{
    position:relative;
    display:block;
    justify-self:end;
    width:100%;
    max-width:min(280px, 22vw);
    /* Top-aligned with the H1: skip the eyebrow line and the gap under it. */
    margin-top:calc(var(--ws-fs-eyebrow) * 1.4 + var(--ws-space-3));
  }
  .ws-hero--media .ws-hero__band{ grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce){
  .ws-hero__video-toggle{ transition:none; }
}
/* Images in the media frame keep their colour (the grayscale rule is for the portrait variant). */
.ws-hero--media .ws-hero__media img{ filter:none; }

/* Video in the aside (case studies). The poster image shows first and is all that loads under
   992px; from 992px hero-video.js plays the MP4 loop over it. A YouTube video loads only on click
   (youtube.js), in place of the poster. Phone format uses the phone frame; landscape a 16:9 frame. */
.ws-hero__phone-screen{ position:relative; }
.ws-hero__aside.ws-hero__wide{ display:block; }
.ws-hero__wide{
  position:relative;
  width:100%;
  margin-top:var(--ws-space-4);
  aspect-ratio:16 / 9;
  overflow:hidden;
  border:1px solid var(--ws-text-dim);
  background:var(--ws-dark-3);
}
.ws-hero__phone-screen > video,
.ws-hero__wide > img,
.ws-hero__wide > video,
.ws-hero__wide > iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
}
.ws-hero__play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:0;
  border:0;
  background:none;
  color:var(--ws-white);
  cursor:pointer;
}
.ws-hero__play-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border:1px solid var(--ws-white);
  border-radius:50%; /* a single point: circle allowed (BRAND.md 1.2, rule 6) */
  background:var(--ws-dark);
  transition:background-color var(--ws-ease);
}
.ws-hero__play:hover .ws-hero__play-icon,
.ws-hero__play:focus-visible .ws-hero__play-icon{ background:var(--ws-dark-3); }
.ws-hero__play:focus-visible{ outline:2px solid var(--ws-focus); outline-offset:-4px; }
@media (prefers-reduced-motion:reduce){
  .ws-hero__play-icon{ transition:none; }
}