/* ═══════════════════════════════════════════════════════
   GCDAY : Editorial service-page components (MOCKUP)

   A second layout language for service pages, built for the
   real photo supply rather than the 5-slot wish list. Where
   the original service page needed a hero banner plus four
   body images, this one carries the same content on four
   photos total and lets typography do the rest.

   Reference points: houseofrohl.com for the alternating
   full-bleed / contained rhythm and the asymmetric splits,
   menudurable.ca for the fact rows, the numbered sequence,
   and letting whitespace carry a section with no image in it.

   Everything here rides on the existing tokens, the Jost
   type scale, the 3px white border card treatment, the
   --accent per-service colour, and the .reveal classes.
   Nothing new is invented that the brand doesn't already own.
═══════════════════════════════════════════════════════ */

/* The spinning brand icons keep their normal weight on these pages.
   An earlier draft dimmed them to 0.2 where they sat behind the fact
   numerals. The spin is part of the brand and stays as it is. */

/* ─── Shared rhythm */

.ed-section {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sp-9) var(--page-gutter);
}

.ed-section--tight { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }

.ed-eyebrow {
  display: block;
  margin: 0 0 var(--sp-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-allcaps);
  text-transform: uppercase;
  color: var(--accent-text);
}

@media (max-width: 991px) {
  .ed-section { padding: var(--sp-8) var(--page-gutter-sm); }
}

/* ─── 1. Editorial hero
   Asymmetric split. Copy holds the container's left edge, the
   photo runs off the right of the viewport so one tall image
   reads as a deliberate feature instead of a stretched banner. */

.ed-hero {
  /* The hero image sits flush to the right edge and enters with a
     translateX, so for the length of that animation it pushes the page
     wider and a horizontal scrollbar flashes on load. Clip rather than
     hidden, because clip does not create a scroll container and so
     leaves sticky positioning alone. */
  overflow-x: clip;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: var(--sp-9);
  align-items: center;
  padding: var(--sp-8) 0 var(--sp-10)
           max(var(--page-gutter), calc((100vw - var(--container-max)) / 2 + var(--page-gutter)));
}

.ed-hero__title {
  margin: 0;
  font-size: clamp(40px, 5.6vw, 82px);
  line-height: 1.02;
  font-weight: var(--weight-semi);
  color: var(--white-sub);
  max-width: 14ch;
}

.ed-hero__lede {
  margin: var(--sp-6) 0 0;
  max-width: 46ch;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  font-weight: var(--weight-light);
  color: var(--surface-text-dim);
}

.ed-hero__actions { margin-top: var(--sp-7); }

.ed-hero__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: var(--border-image);
  border-right: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: var(--shadow-soft);
  background-color: #0e0e0e;
}

.ed-hero__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 991px) {
  .ed-hero {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
    padding: var(--sp-7) var(--page-gutter-sm) var(--sp-8);
  }
  .ed-hero__title { max-width: none; }
  .ed-hero__media {
    aspect-ratio: 4 / 3;
    border-right: var(--border-image);
    border-radius: var(--radius-lg);
  }
}

/* ─── 2. Fact row
   Three numbers, hairline dividers, no imagery. This is the
   section that would otherwise have demanded a photo. */

.ed-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-7);
  border-top: 1px solid rgba(245, 247, 246, 0.16);
  border-bottom: 1px solid rgba(245, 247, 246, 0.16);
  padding: var(--sp-8) 0;
}

.ed-fact { padding-left: var(--sp-6); border-left: 1px solid rgba(245, 247, 246, 0.16); }
.ed-fact:first-child { padding-left: 0; border-left: 0; }

.ed-fact__figure {
  display: block;
  font-size: clamp(48px, 6.5vw, 88px);
  line-height: 0.9;
  font-weight: var(--weight-semi);
  color: var(--accent-text);
}

.ed-fact__unit {
  display: block;
  margin: var(--sp-4) 0 var(--sp-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-allcaps);
  text-transform: uppercase;
  color: var(--white-sub);
}

.ed-fact__text {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--surface-text-dim);
}

@media (max-width: 767px) {
  .ed-facts { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-7) 0; }
  .ed-fact {
    padding: var(--sp-6) 0 0;
    border-left: 0;
    border-top: 1px solid rgba(245, 247, 246, 0.16);
  }
  .ed-fact:first-child { padding-top: 0; border-top: 0; }
}

/* ─── 3. Statement block
   Left-aligned prose against an accent rule. Carries the
   problem-and-answer copy with nothing but type. */

.ed-statement {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--sp-9);
  align-items: start;
}

.ed-statement__heading {
  margin: 0;
  padding-left: var(--sp-5);
  border-left: 3px solid var(--accent);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semi);
  color: var(--white-sub);
}

.ed-statement__body > p {
  margin: 0 0 var(--sp-5);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--surface-text-dim);
}

.ed-statement__body > p:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
  .ed-statement { grid-template-columns: 1fr; gap: var(--sp-6); }
  .ed-statement__heading { font-size: var(--text-2xl); }
}

/* ─── 4. Numbered sequence
   Four steps as hairline-ruled rows. Replaces four
   alternating text-and-image blocks with zero photos. */

.ed-steps { border-bottom: 1px solid rgba(245, 247, 246, 0.16); }

.ed-step {
  display: grid;
  grid-template-columns: 96px minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: var(--sp-6);
  align-items: start;
  padding: var(--sp-7) 0;
  border-top: 1px solid rgba(245, 247, 246, 0.16);
  transition: background-color var(--motion-base) var(--ease-standard);
}

.ed-step:hover { background-color: rgba(245, 247, 246, 0.03); }

.ed-step__num {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

.ed-step__title {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semi);
  color: var(--white-sub);
}

.ed-step__text {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--surface-text-dim);
}

@media (max-width: 991px) {
  .ed-step {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    padding: var(--sp-6) 0;
  }
  .ed-step__num { font-size: var(--text-base); }
}

/* ─── 5. Full-bleed image band
   Edge to edge, cropped short. A 2016px source is plenty at
   this height, which is exactly why the band shape was chosen. */

.ed-band {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  isolation: isolate;
  margin: var(--sp-8) 0;
}

.ed-band > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.ed-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(22, 22, 22, 0.92) 0%,
    rgba(22, 22, 22, 0.72) 38%,
    rgba(22, 22, 22, 0.18) 78%,
    rgba(22, 22, 22, 0.05) 100%
  );
}

.ed-band__inner {
  position: relative;
  height: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ed-band__quote {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(24px, 3vw, 44px);
  line-height: var(--leading-snug);
  font-weight: var(--weight-light);
  color: var(--white-sub);
}

.ed-band__quote::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-bottom: var(--sp-5);
  background: var(--accent);
  border-radius: var(--radius-pill);
}

.ed-band__attrib {
  margin: var(--sp-5) 0 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-allcaps);
  text-transform: uppercase;
  color: var(--surface-text-dim);
}

@media (max-width: 991px) {
  .ed-band { aspect-ratio: 4 / 3; }
  .ed-band__inner { padding: 0 var(--page-gutter-sm); }
  .ed-band::before {
    background: linear-gradient(
      90deg,
      rgba(22, 22, 22, 0.94) 0%,
      rgba(22, 22, 22, 0.80) 55%,
      rgba(22, 22, 22, 0.40) 100%
    );
  }
}

/* ─── 6. Offset image pair
   Two photos shown as themselves, with captions, one dropped
   down the page so the mismatched shapes read as intentional. */

.ed-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
  align-items: start;
}

.ed-pair__item { margin: 0; }
.ed-pair__item--offset { margin-top: var(--sp-9); }

.ed-pair__frame {
  overflow: hidden;
  border: var(--border-image);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  background-color: #0e0e0e;
}

.ed-pair__frame--wide { aspect-ratio: 4 / 3; }
.ed-pair__frame--tall { aspect-ratio: 3 / 4; }

.ed-pair__frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ed-pair__caption {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--surface-text-dim);
}

.ed-pair__caption::before {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 2px;
  margin-top: 0.65em;
  background: var(--accent);
  border-radius: var(--radius-pill);
}

@media (max-width: 767px) {
  .ed-pair { grid-template-columns: 1fr; gap: var(--sp-7); }
  .ed-pair__item--offset { margin-top: 0; }
}

/* ─── 7. Closing statement */

.ed-closing {
  max-width: var(--container-prose);
  margin: 0 auto;
  padding: var(--sp-9) var(--page-gutter) var(--sp-10);
  text-align: center;
}

.ed-closing__heading {
  margin: 0 0 var(--sp-5);
  font-size: clamp(30px, 4vw, 55px);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semi);
  color: var(--white-sub);
}

.ed-closing__copy {
  margin: 0 auto var(--sp-7);
  max-width: 58ch;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  font-weight: var(--weight-light);
  color: var(--surface-text-dim);
}

/* ─── Hero variants.
   --wide  : the page's best photo is a landscape one.
   --bare  : the page has no photo at all, so the type carries it. */

.ed-hero--wide .ed-hero__media { aspect-ratio: 4 / 3; }

.ed-hero--bare {
  grid-template-columns: minmax(0, 1fr);
  padding-right: var(--page-gutter);
  max-width: var(--container-max);
  margin: 0 auto;
}

/* With no photo to fill the right side, the copy splits into two columns
   so the space reads as composition rather than as something missing. */
.ed-hero--bare .ed-hero__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: var(--sp-5) var(--sp-9);
  align-items: end;
}

.ed-hero--bare .ed-eyebrow      { grid-column: 1 / -1; margin-bottom: 0; }
.ed-hero--bare .ed-hero__actions,
.ed-hero--bare .ed-hero__lede   { margin-top: 0; }
.ed-hero--bare .ed-hero__lede   { grid-column: 2; max-width: none; padding-bottom: var(--sp-2); }
.ed-hero--bare .ed-hero__actions { grid-column: 1 / -1; margin-top: var(--sp-5); }

.ed-hero--bare .ed-hero__title {
  grid-column: 1;
  font-size: clamp(44px, 6.4vw, 96px);
  max-width: 15ch;
}

/* A single accent rule doing the work an image would have done. */
.ed-hero--bare .ed-hero__copy::after {
  content: "";
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 6px;
  margin-top: var(--sp-7);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent), transparent 85%);
}

@media (max-width: 991px) {
  .ed-hero--bare .ed-hero__copy { grid-template-columns: 1fr; }
  .ed-hero--bare .ed-hero__lede { grid-column: 1; padding-bottom: 0; }
}

/* ─── Lead-in prose.
   The second and later intro paragraphs, set in two columns so a wall
   of text reads as an editorial opening rather than a block. */

/* Single column, deliberately.

   This was two columns, which forced the reader down the left half and
   then back up to the top of the right half to finish one sentence. That
   is a poor read for anyone and a bad one on a disability services site.
   Newspaper columns only work when the text is long enough to fill both;
   here it is usually a single paragraph, so it never was. */

.ed-lead {
  max-width: 68ch;
}

.ed-lead > p {
  margin: 0 0 var(--sp-5);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  font-weight: var(--weight-light);
  color: var(--surface-text-dim);
}

.ed-lead > p:last-child { margin-bottom: 0; }

/* ─── Principles row.
   Same rhythm as the fact row, for pages with no honest numbers to
   put in it. An accent rule replaces the numeral. */

.ed-fact__rule {
  display: block;
  width: 40px;
  height: 4px;
  margin-bottom: var(--sp-5);
  background: var(--accent);
  border-radius: var(--radius-pill);
}

/* ─── Gallery.
   Square crops, so small phone-sized sources sit at their own scale
   instead of being stretched across a hero. */

.ed-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-5);
}

.ed-gallery__item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: var(--border-image);
  border-radius: var(--radius-lg);
  background-color: #0e0e0e;
  box-shadow: var(--shadow-soft);
  transition: transform var(--motion-base) var(--ease-standard);
}

.ed-gallery__item:hover { transform: var(--hover-shift); }

.ed-gallery__item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Contained wide strip, for the odd very wide source. */

.ed-strip {
  overflow: hidden;
  border: var(--border-image);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  background-color: #0e0e0e;
}

.ed-strip > img { width: 100%; height: auto; display: block; }

/* ─── Flat band.
   The full-bleed band shape for pages with no photo to put in it.
   An accent field carries it instead, so the page keeps its rhythm. */

.ed-band--flat {
  aspect-ratio: auto;
  padding: var(--sp-10) 0;
  background:
    linear-gradient(115deg,
      color-mix(in srgb, var(--accent) 22%, #101010) 0%,
      color-mix(in srgb, var(--accent) 8%, #0e0e0e) 55%,
      #0d0d0d 100%);
  border-top: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

.ed-band--flat::before { display: none; }
.ed-band--flat .ed-band__quote { max-width: 34ch; }

@media (max-width: 991px) {
  .ed-band--flat { padding: var(--sp-8) 0; }
}

/* ─── Pair variant where both photos are landscape. */

.ed-pair__frame--wide-alt { aspect-ratio: 4 / 3; }

/* ─── Photos inside the existing home-page components.
   Those were built with gradient placeholders, so they need an image
   rule adding. Nothing else about them changes. */

.hero__photo > img,
.service-card__media > img,
.philosophy-split__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Let the page's own spinning icon show through the home hero.

   No extra icons are added. The existing .icon-bleeds layer already runs
   the full height of #main, it was just being covered up: the layer sits
   at z-index 0 while `#main > section` sits at z-index 1, so the hero's
   full-bleed photo painted over it and the icon only appeared once the
   hero ended.

   Two things have to go for it to show through. The hero's own z-index,
   so the section stops sitting above the icon layer, and its `isolation:
   isolate`, which was sealing the photo and the headline into one
   stacking context that nothing could get between.

   With both gone the order falls out naturally: .hero__photo is z-index
   -2 so it stays at the back, the icon layer paints over it at 0, and
   .hero__inner is positioned and comes later in the document so the
   headline still lands on top. The ID in the selector is only there to
   outrank the `#main > section` rule. */

.ed-page #main > section.hero {
  z-index: auto;
  isolation: auto;
}

/* The home hero photo needs a scrim or the headline stops being legible. */
.ed-page .hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(22, 22, 22, 0.94) 0%,
    rgba(22, 22, 22, 0.78) 42%,
    rgba(22, 22, 22, 0.35) 75%,
    rgba(22, 22, 22, 0.15) 100%
  );
}

.ed-page .hero__inner { max-width: var(--container-max); padding: 0 var(--page-gutter); }
.ed-page .landing-actions { justify-content: flex-start; margin-left: 0; }

@media (max-width: 991px) {
  .ed-page .hero__photo::after {
    background: linear-gradient(180deg, rgba(22, 22, 22, 0.80) 0%, rgba(22, 22, 22, 0.92) 60%);
  }
}

/* ─── Mockup-only banner so nobody mistakes this for the live page. */

.mockup-flag {
  position: relative;
  z-index: 60;
  padding: var(--sp-3) var(--page-gutter);
  background: var(--accent);
  color: var(--dark-grey);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-ui);
  text-align: center;
}