/* ---------- Why Choose Clarion (#why) ----------
   A 20 FT container seen straight on (services/why/20ft-front.webp, a cutout: the page's air shows all round it) is
   this chapter's ground, dark navy with its corrugated steel still showing, and the words sit on its side. .why-box is
   the container's body exactly; the image, a little larger for its transparent margin, lies over it. js/why.js plays
   Freight <-> Why, the camera closing in on the container. All rules are scoped to .why-*. */

.why {
  --why-navy: #071b33;
  --why-gold: #c79a2b;
  --why-gold-soft: rgba(199, 154, 43, 0.55);
  --why-pad: clamp(24px, 4vw, 64px);
  --why-top: 150px; /* clears the nav */
  --why-bottom: 44px; /* room for the container's shadow */
  --why-aspect: 2.0501; /* the container's body in 20ft-front.webp: 1718 x 838 of its 1768 x 890 pixels */
  position: relative;
  background: #eef6fe;
}

.why-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--why-top) var(--why-pad) var(--why-bottom);
  overflow: hidden; /* the container's planes are the photograph's size before js/why.js places them */
  overflow: clip;
  isolation: isolate;
}

/* The same light air as Freight's sky, without its photograph: a clean, bright place for the container to stand. */
.why-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 55% 40% at 50% 52%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #f3f9ff 0%, #eef6fe 38%, #e3effb 100%);
}

/* ---------- The container ---------- */
.why-box {
  position: relative;
  display: flex;
  width: min(100%, 1720px, calc((100svh - var(--why-top) - var(--why-bottom)) * var(--why-aspect)));
  aspect-ratio: var(--why-aspect); /* grows taller where its words need it: the container is then nearer, never stretched */
  isolation: isolate;
  color: #fff;
}

/* The container over the box: scaled with the box's height (never stretched), its body exactly on the box and centred
   on it. Where the box is taller than the container's proportions (tablets, phones) the camera is nearer and its
   ends run out of the view either side. */
.why-hull {
  position: absolute;
  top: -2.3866%; /* 20 of 838 px: the transparent margin above the body */
  left: 50%;
  z-index: 1;
  height: 106.2053%; /* 890 of 838 px */
  aspect-ratio: 1768 / 890;
  transform: translateX(-50.0566%); /* the body's centre (885 of 1768 px), on the box's */
}
/* The navy: the steel itself darkened (never a box over it), so the ribs, rust and light of the corrugation still read
   and the page's air stays clear around its edges. */
.why-container {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  transform-origin: 0 0;
  filter: brightness(0.5) saturate(0.9) contrast(1.08);
}

/* The ground it stands on: a soft, wide shadow, darkest right beneath the bottom rail and fading outward. */
.why-ground {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 0;
  height: 0;
  pointer-events: none;
}
.why-ground::before, /* the spread of the shadow over the ground */
.why-ground::after { /* where the rail meets the ground */
  content: "";
  position: absolute;
}
.why-ground::before {
  left: -3%;
  right: -3%;
  top: -14px;
  height: 64px;
  background: radial-gradient(ellipse 50% 50% at 50% 28%, rgba(7, 27, 51, 0.2), rgba(7, 27, 51, 0.07) 55%, rgba(7, 27, 51, 0) 100%);
}
.why-ground::after {
  left: 0.4%;
  right: 0.2%;
  top: -3px;
  height: 11px;
  background: linear-gradient(180deg, rgba(7, 27, 51, 0.34), rgba(7, 27, 51, 0.1) 55%, rgba(7, 27, 51, 0));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
  filter: blur(1.5px);
}

/* Readability over the steel: a little more depth behind the heading, a little light across the top rail. */
.why-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.38fr);
  align-items: center;
  padding: clamp(40px, 4.6%, 76px) clamp(48px, 6.4%, 118px) clamp(48px, 5.4%, 88px);
}
.why-inner::before {
  content: "";
  position: absolute;
  inset: 1.25% 0 0; /* from the top rail down: between the corner castings the rail sits 10 of 838 px lower */
  z-index: -1;
  background: linear-gradient(90deg, rgba(4, 11, 22, 0.32) 0, rgba(4, 11, 22, 0.12) 42%, rgba(4, 11, 22, 0) 70%);
  opacity: var(--why-shade, 1); /* js/why.js: comes in with the words */
  pointer-events: none;
}

/* ---------- The statement ---------- */
.why-statement { padding-right: clamp(32px, 4vw, 76px); }
.why-label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-nav);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}
.why-label::before { content: ""; width: 40px; height: 1px; background: var(--why-gold); }
.why-title {
  margin: clamp(18px, 2.4vh, 28px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 3.35vw, 4.1rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.005em;
  white-space: nowrap; /* the three lines as written: "A simpler way / to move your / business forward." */
  color: #fff;
}
.why-dot { color: var(--why-gold); }
.why-rule {
  display: block;
  width: 56px;
  height: 2px;
  margin: clamp(22px, 3vh, 34px) 0 clamp(18px, 2.4vh, 26px);
  background: var(--why-gold);
  transform-origin: 0 50%;
}
.why-lead {
  max-width: 25em;
  font-size: clamp(0.95rem, 1.02vw, 1.08rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- The four reasons, beyond one strong vertical line ---------- */
.why-points {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-self: stretch;
  align-content: center;
  column-gap: clamp(32px, 3.6vw, 72px);
  row-gap: clamp(26px, 4.4vh, 52px);
  margin: 0;
  padding: clamp(8px, 1.4vh, 20px) 0 clamp(8px, 1.4vh, 20px) clamp(36px, 4.2vw, 84px);
  list-style: none;
}
.why-points::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(199, 154, 43, 0) 0, var(--why-gold-soft) 14%, var(--why-gold-soft) 86%, rgba(199, 154, 43, 0) 100%);
  transform: scaleY(var(--why-line, 1)); /* js/why.js: drawn as the words arrive */
  transform-origin: 50% 0;
}
.why-point { display: flex; flex-direction: column; align-items: flex-start; }
.why-num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--why-gold);
  border-radius: 50%;
  font-family: var(--font-nav);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--why-gold);
}
.why-icon {
  width: 30px;
  height: 30px;
  margin-top: clamp(12px, 1.8vh, 20px);
  fill: none;
  stroke: #fff;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.92;
}
.why-point h3 {
  margin-top: clamp(10px, 1.6vh, 18px);
  font-family: var(--font-nav);
  font-size: clamp(0.8rem, 0.82vw, 0.9rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
.why-point p {
  max-width: 30em;
  margin-top: 8px;
  font-size: clamp(0.84rem, 0.86vw, 0.94rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- Shorter screens: the same composition, tighter ---------- */
@media (min-width: 760px) and (max-height: 820px) {
  .why { --why-top: 140px; --why-bottom: 36px; }
  .why-num { width: 34px; height: 34px; font-size: 0.7rem; }
  .why-icon { width: 26px; height: 26px; margin-top: 10px; }
  .why-point h3 { margin-top: 8px; }
  .why-point p { margin-top: 5px; line-height: 1.55; }
  .why-points { row-gap: 22px; }
}

@media (min-width: 760px) and (max-height: 760px) {
  .why { --why-top: 136px; --why-bottom: 26px; }
  .why-inner { padding-top: 30px; padding-bottom: 40px; }
  .why-title { margin-top: 14px; font-size: clamp(2rem, 2.9vw, 3.2rem); }
  .why-rule { margin: 18px 0 14px; }
  .why-points { row-gap: 16px; }
  .why-point p { font-size: 0.82rem; }
}

/* ---------- Tablets: the statement above, the four reasons beneath it, on a nearer wall of the container ---------- */
@media (max-width: 1080px) {
  .why-box { width: min(100%, 880px); }
  .why-inner {
    grid-template-columns: 1fr;
    align-items: start;
    padding: clamp(44px, 7vw, 64px) clamp(28px, 6vw, 56px) clamp(52px, 8vw, 72px);
  }
  .why-inner::before { background: linear-gradient(180deg, rgba(4, 11, 22, 0.3) 0, rgba(4, 11, 22, 0.1) 40%, rgba(4, 11, 22, 0) 70%); }
  .why-statement { padding: 0 0 clamp(30px, 5vw, 44px); }
  .why-title { font-size: clamp(2.2rem, 5.6vw, 3.2rem); }
  .why-points { padding: clamp(30px, 5vw, 44px) 0 0; row-gap: 34px; }
  .why-points::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--why-gold-soft) 0, var(--why-gold-soft) 60%, rgba(199, 154, 43, 0) 100%);
    transform: scaleX(var(--why-line, 1));
    transform-origin: 0 50%;
  }
}

/* ---------- Phones ---------- */
@media (max-width: 759px) {
  .why { --why-pad: 16px; --why-top: 114px; --why-bottom: 40px; }
  .why-stage { justify-content: flex-start; }
  .why-inner { padding: 40px 24px 52px; }
  .why-label { gap: 12px; font-size: 0.66rem; letter-spacing: 0.24em; }
  .why-label::before { width: 28px; }
  .why-title { font-size: clamp(2rem, 9vw, 2.6rem); }
  .why-lead { font-size: 0.95rem; }
}
@media (max-width: 520px) {
  .why-points { grid-template-columns: 1fr; row-gap: 30px; }
}