/* ========================================================================
   Freight World: what-we-do page-scoped styles
   Inherits the locked shared system (styles.css). Only adds the hero VARIANT
   composition + the rates band + a couple of layout tweaks for this page.
   All selectors scoped under body.page-wwd. 0 radius, monochrome + one accent.
   ======================================================================== */

/* ---------------- HERO VARIANT ----------------
   Home hero = portrait truck plate LEFT of a giant stacked headline.
   This variant = a wide cinematic terminal plate as a FULL-WIDTH band with the
   headline overlaid bottom-left, plus an image-interrupt cut on a different word.
   Same grammar (giant Anton caps, inset photo breaking the baseline, one accent),
   different composition, so it reads as a secondary page, never a home clone. */
.page-wwd .c-hero-wwd{
  position:relative;min-height:100svh;padding:6.5rem var(--pad) 2.4rem;
  display:flex;flex-direction:column;justify-content:flex-end;gap:1.6rem;overflow:clip;
}
.page-wwd .c-hero-wwd__media{position:absolute;inset:0;z-index:0}
.page-wwd .c-hero-wwd__media img{width:100%;height:100%;object-fit:cover}
/* darkening scrim so the white poster type stays legible on the photo */
.page-wwd .c-hero-wwd__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,19,19,.55) 0%,rgba(19,19,19,.30) 38%,rgba(19,19,19,.88) 100%);
}
.page-wwd .c-hero-wwd__label{
  position:relative;z-index:2;font-family:var(--sub);font-weight:700;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  display:inline-flex;align-items:center;gap:.55em;
}
.page-wwd .c-hero-wwd__label::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);flex:0 0 auto;
}
.page-wwd .c-hero-wwd__title{
  position:relative;z-index:2;font-size:clamp(3rem,15.5vw,7.2rem);color:var(--ink);
}
.page-wwd .c-hero-wwd__title span{display:block}
/* line 2 runs as a flex row so the inset plate sits cleanly inline */
.page-wwd .c-hero-wwd__line2{display:flex;align-items:center;flex-wrap:wrap}
/* the image-interrupt cut: a landscape plate inset into the headline line,
   breaking the baseline, the reference's signature device (hero variant). */
.page-wwd .c-hero-wwd__cut{
  display:inline-block;width:clamp(86px,16vw,220px);height:.56em;overflow:hidden;
  margin:0 .14em;vertical-align:middle;border-radius:var(--r-flat);flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(254,254,254,.12);
}
.page-wwd .c-hero-wwd__cut img{width:100%;height:100%;object-fit:cover;will-change:transform}
.page-wwd .c-hero-wwd__sub{
  position:relative;z-index:2;font-size:.95rem;color:var(--ink-soft);max-width:42ch;line-height:1.55;
}
.page-wwd .c-hero-wwd__sub strong{color:var(--ink)}

/* the service-line index chips under the hero (anchor jumps) */
.page-wwd .c-hero-wwd__index{
  position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem;
}
.page-wwd .c-hero-wwd__index a{
  font-family:var(--sub);font-weight:600;font-size:.82rem;letter-spacing:.01em;
  padding:.5em .9em;border:1px solid var(--line);color:var(--ink-soft);transition:.18s;
}
.page-wwd .c-hero-wwd__index a:hover{border-color:var(--accent);color:var(--ink)}

/* ---------------- INTRO LEAD (reuses .c-intro grammar, tightened for this page) */
.page-wwd .c-wwd-intro{padding-block:clamp(3rem,9vw,7rem)}
.page-wwd .c-wwd-intro__lead{font-size:clamp(2.1rem,8.5vw,3.6rem);margin-bottom:1.8rem}
.page-wwd .c-wwd-intro__grid{display:grid;gap:1.4rem;color:var(--ink-soft);
  font-size:.98rem;line-height:1.6}
.page-wwd .c-wwd-intro__grid .big{
  font-family:var(--sub);font-weight:700;color:var(--ink);
  font-size:clamp(1.3rem,5vw,2rem);line-height:1.12;letter-spacing:-.02em;max-width:24ch;
}
.page-wwd .c-wwd-intro__cols{display:grid;gap:1.2rem;max-width:64ch}

/* ---------------- SERVICE LINES (numbered editorial, the reference device) ----
   Reuses the home's (1)(2)(3) feature grammar but as full-width rows with a
   modes/detail sub-list, so What We Do reads deeper than the home teaser. */
.page-wwd .c-lines{padding-block:clamp(2rem,7vw,4.5rem);display:grid;gap:0}
.page-wwd .c-line{
  display:grid;gap:1.4rem;padding-block:clamp(2.4rem,6vw,4rem);
  border-top:1px solid var(--line);scroll-margin-top:90px;
}
.page-wwd .c-line:last-child{border-bottom:1px solid var(--line)}
.page-wwd .c-line__head{display:flex;gap:.5em;align-items:baseline}
.page-wwd .c-line__no{
  color:var(--accent);font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,5vw,2rem);
}
.page-wwd .c-line__name{font-size:clamp(1.7rem,7vw,2.8rem)}
.page-wwd .c-line__body{color:var(--ink-soft);font-size:.98rem;line-height:1.62;max-width:50ch}
.page-wwd .c-line__media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.page-wwd .c-line__modes{
  list-style:none;display:grid;gap:.7rem;margin-top:.4rem;
}
.page-wwd .c-line__modes li{
  display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:baseline;
  border-top:1px solid var(--line);padding-top:.7rem;
}
.page-wwd .c-line__modes b{
  font-family:var(--sub);font-weight:700;font-size:.92rem;letter-spacing:-.01em;color:var(--ink);
  min-width:3.4em;
}
.page-wwd .c-line__modes span{font-size:.9rem;color:var(--ink-soft);line-height:1.5}

@media (min-width:760px){
  .page-wwd .c-hero-wwd__title{font-size:clamp(4.4rem,9vw,8rem)}
  .page-wwd .c-hero-wwd__cut{width:1.6em;height:.52em}
  .page-wwd .c-wwd-intro__grid{grid-template-columns:.9fr 1.1fr;gap:3.2rem;align-items:start}
  .page-wwd .c-wwd-intro__cols{grid-template-columns:1fr 1fr;gap:2rem}

  /* service rows alternate image side for editorial rhythm */
  .page-wwd .c-line{grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
  .page-wwd .c-line__txt{grid-column:1}
  .page-wwd .c-line__media{grid-column:2}
  .page-wwd .c-line:nth-child(even) .c-line__txt{grid-column:2}
  .page-wwd .c-line:nth-child(even) .c-line__media{grid-column:1;grid-row:1}
  .page-wwd .c-line__modes{grid-template-columns:1fr 1fr;gap:.7rem 2rem}
  .page-wwd .c-line__modes li{grid-template-columns:auto 1fr}
}

/* ---------------- RATES BAND (their real "Our Rates" framing) ----------------
   A calm dark band paired with the road image, recapping how rates work. */
.page-wwd .c-rates{padding-block:clamp(3rem,9vw,6rem)}
.page-wwd .c-rates__grid{display:grid;gap:2.4rem;align-items:center}
.page-wwd .c-rates__media img{width:100%;aspect-ratio:16/11;object-fit:cover}
.page-wwd .c-rates__line{
  font-family:var(--sub);font-weight:700;font-size:clamp(1.5rem,6vw,2.6rem);
  letter-spacing:-.02em;line-height:1.1;margin-bottom:1.4rem;max-width:18ch;
}
.page-wwd .c-rates__body{display:grid;gap:1.1rem;color:var(--ink-soft);
  font-size:.96rem;line-height:1.62;max-width:54ch}
.page-wwd .c-rates__body b{color:var(--ink)}

@media (min-width:760px){
  .page-wwd .c-rates__grid{grid-template-columns:1.05fr .95fr;gap:4rem}
  .page-wwd .c-rates__media{grid-column:1}
}