/* Services page spreads. Loaded on /services only, through $page_styles in
   head.php. Each service is one .spread section; the partials in
   includes/service-spreads/ add their own layout on top of the shared
   classes here. Colours come from tokens.css, and there are no markers,
   arrows or all-caps labels anywhere on this page. */

/* Section frame. Slate is the page ground, a spread on paper or yellow adds
   .ground-paper or .ground-yellow with .on-light. The scroll margin keeps the
   header anchors (/services#website-design) clear of the sticky nav. */
.spread {
  position: relative;
  padding: clamp(56px, 8vw, 110px) 0;
  scroll-margin-top: 90px;
  overflow-x: clip;
}

.spread__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  margin: 0 0 var(--sp-3);
}

.spread__tagline {
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  color: var(--yellow);
  margin: 0 0 var(--sp-3);
}

.spread__intro {
  color: var(--paper-dim);
  font-size: 17px;
  max-width: 56ch;
  margin: 0 0 var(--sp-4);
}

/* Points: a plain list, one hairline row per point. */
.spread__points {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  max-width: 60ch;
  border-bottom: 1px solid var(--hair);
}

.spread__points li {
  padding: 14px 0;
  border-top: 1px solid var(--hair);
  font-size: 16px;
  line-height: 1.5;
  color: var(--paper);
}

.spread__action { margin: 0; }

/* On paper and yellow. */
.on-light .spread__tagline { color: var(--on-light); }
.on-light .spread__intro { color: var(--on-light-muted); }
.on-light .spread__points { border-bottom-color: var(--on-light-faint); }
.on-light .spread__points li { border-top-color: var(--on-light-faint); color: var(--on-light); }

/* Slate at 22% on yellow, so the rules stay visible on the brighter ground. */
.ground-yellow .spread__points { border-bottom-color: rgba(42, 50, 63, .22); }
.ground-yellow .spread__points li { border-top-color: rgba(42, 50, 63, .22); }

/* Default split: words on one side, image on the other. */
.spread__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.spread__text { min-width: 0; }

.spread__media {
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--slate-deep);
}

.spread__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No image at all: a single text column, no empty box. */
.spread--no-image .spread__split { grid-template-columns: minmax(0, 1fr); }
.spread--no-image .spread__text { max-width: 720px; }

@media (max-width: 900px) {
  .spread__split { grid-template-columns: minmax(0, 1fr); }
  /* The image leads, then the words. */
  .spread__media { order: -1; }
  .spread__intro { max-width: none; }
  .spread__points { max-width: none; }
}

/* Website Design, the browser. Mobile first: the image sits full width
   above the words at a normal heading size. From 1100px it bleeds off the
   right edge behind a very large name. */
.spread--website-design .website__media {
  position: relative;
  width: calc(min(100%, var(--maxw)) - 2 * var(--gutter));
  margin: 0 auto var(--sp-5);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--slate-deep);
}

.spread--website-design .website__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spread--website-design .spread__name {
  font-size: clamp(38px, 6vw, 64px);
  overflow-wrap: break-word;
}

.spread--website-design .website__text { min-width: 0; }

@media (min-width: 1100px) {
  .spread--website-design { padding: clamp(110px, 9vw, 130px) 0; }

  .spread--website-design .website__media {
    position: absolute;
    top: 90px;
    right: 0;
    bottom: 90px;
    width: 56%;
    margin: 0;
    aspect-ratio: auto;
    border-radius: 0;
  }

  /* The slate veil under the name. The name reaches at most 44.4% into the
     image (at 1440px, where its 132px cap meets the wrap's max width). The
     veil eases from solid slate at the image's edge to 74% by 12%, holds at
     70% or more to 46%, then clears by 58%. At 70% the name keeps better
     than 4:1 even over pure white, while the image still shows faintly
     beneath it, and the right 42% of the image is untouched. */
  .spread--website-design .website__media::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, var(--slate) 0%, rgba(42, 50, 63, .74) 12%, rgba(42, 50, 63, .7) 46%, rgba(42, 50, 63, 0) 58%);
    pointer-events: none;
  }

  /* The wrap (z-index 1 in base.css) already stacks the name over the image. */
  .spread--website-design .spread__name {
    font-size: clamp(64px, 9.2vw, 132px);
    line-height: .95;
    letter-spacing: -.02em;
    white-space: nowrap;
    margin-bottom: var(--sp-4);
  }

  /* The words stop short of the image: its left edge sits at 44% of the
     section, and the column starts at the wrap's content edge. */
  .spread--website-design .website__text {
    max-width: min(640px, calc(44vw - max(0px, (100vw - var(--maxw)) / 2) - var(--gutter) - 40px));
  }

  .spread--website-design.spread--no-image .website__text { max-width: 720px; }
}

/* Branding Design, the guidelines page. On paper: a document head over a
   2px slate rule, then the image on seven columns and the rules on five. */
.spread--branding-design .branding__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-5);
  align-items: end;
  padding-bottom: 40px;
  border-bottom: 2px solid var(--slate);
}

.spread--branding-design .spread__name {
  font-size: clamp(38px, 7.2vw, 104px);
  line-height: .95;
  letter-spacing: -.02em;
  margin: 0;
}

.spread--branding-design .branding__lede .spread__intro { margin-bottom: 0; }

.spread--branding-design .branding__body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  align-items: start;
}

.spread--branding-design .branding__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--slate-deep);
}

.spread--branding-design .branding__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spread--branding-design .branding__rules { min-width: 0; }

.spread--branding-design .spread__points {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 28px;
  max-width: none;
}

/* The first point is the lead rule, set in the display face. */
.spread--branding-design .spread__points li:first-child {
  grid-column: 1 / -1;
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.2;
  border-top: 0;
  padding-top: 0;
}

.spread--branding-design.spread--no-image .branding__body { grid-template-columns: minmax(0, 1fr); }
.spread--branding-design.spread--no-image .branding__rules { max-width: 760px; }

@media (max-width: 900px) {
  .spread--branding-design .branding__head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    padding-bottom: 32px;
  }
  .spread--branding-design .branding__body { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .spread--branding-design .spread__points { grid-template-columns: minmax(0, 1fr); }
}

/* Brochure Design, the open brochure. Two pages on a slate-deep panel with
   a soft drop shadow, and a spine shadow at the right page's inner edge. */
.spread--brochure-design { padding: clamp(56px, 9vw, 130px) 0; }

.spread--brochure-design .brochure__book {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--slate-deep);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
}

.spread--brochure-design .brochure__media {
  position: relative;
  min-height: 620px;
  overflow: hidden;
}

.spread--brochure-design .brochure__media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spread--brochure-design .brochure__words {
  position: relative;
  min-width: 0;
  padding: clamp(32px, 5vw, 72px) clamp(28px, 4.4vw, 64px);
}

/* The spine: a soft shadow along the inner edge of the right page. */
.spread--brochure-design .brochure__words::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 36px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.spread--brochure-design .spread__name {
  font-size: clamp(38px, 5.8vw, 84px);
  line-height: .95;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
}

/* No image: a single page, so no spine. */
.spread--brochure-design.spread--no-image .brochure__book {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
}
.spread--brochure-design.spread--no-image .brochure__words::before { content: none; }

@media (max-width: 900px) {
  .spread--brochure-design .brochure__book { grid-template-columns: minmax(0, 1fr); }
  .spread--brochure-design .brochure__media { min-height: 0; aspect-ratio: 4 / 5; width: 100%; max-height: 560px; }
  .spread--brochure-design .brochure__words::before { content: none; }
}

/* Two-column points, used by Website, Flyer and Motion from 1100px. Each point
   carries its own bottom rule and the list a top rule, so both columns close
   on a hairline however the five points fall. */
@media (min-width: 1100px) {
  .spread--website-design .spread__points,
  .spread--flyer-design .spread__points,
  .spread--motion-design .spread__points {
    columns: 2;
    column-gap: 32px;
    max-width: none;
    border-bottom: 0;
    border-top: 1px solid var(--hair);
  }

  .spread--website-design .spread__points li,
  .spread--flyer-design .spread__points li,
  .spread--motion-design .spread__points li {
    break-inside: avoid;
    border-top: 0;
    border-bottom: 1px solid var(--hair);
  }

  .spread--flyer-design .spread__points { border-top-color: rgba(42, 50, 63, .22); }
  .spread--flyer-design .spread__points li { border-bottom-color: rgba(42, 50, 63, .22); }
}

/* Flyer Design, one page, one message. The page's single yellow section: a
   modest name, the tagline as a very large statement, and the image printed
   as an A5 flyer on a paper card. The intro is #3B4250, 8.5:1 on yellow,
   a step softer than the slate text around it. */
.spread--flyer-design .flyer__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.spread--flyer-design .flyer__words { min-width: 0; }

.spread--flyer-design .spread__name {
  font-size: clamp(28px, 2.8vw, 40px);
  margin: 0;
}

.spread__statement {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 6.7vw, 96px);
  line-height: .95;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
  margin: 18px 0 var(--sp-4);
}

.spread--flyer-design .spread__intro {
  color: #3B4250;
  max-width: 52ch;
}

.spread--flyer-design .flyer__card {
  min-width: 0;
  background: var(--paper);
  padding: 14px;
  box-shadow: 0 24px 50px rgba(42, 50, 63, .35);
}

.spread--flyer-design .flyer__card img {
  width: 100%;
  aspect-ratio: 1 / 1.414;
  object-fit: cover;
}

.spread--flyer-design.spread--no-image .flyer__grid { grid-template-columns: minmax(0, 1fr); }
.spread--flyer-design.spread--no-image .flyer__words { max-width: 760px; }

@media (max-width: 759px) {
  .spread--flyer-design .flyer__grid { grid-template-columns: minmax(0, 1fr); }
  .spread--flyer-design .flyer__card { width: 100%; max-width: 320px; }
}

/* Logo Design, ten millimetres. On slate deep. The image large and square,
   a size ladder under it from shopfront to favicon, and the words beside. */
.spread--logo-design {
  background: var(--slate-deep);
  padding: clamp(56px, 9vw, 130px) 0;
}

.spread--logo-design .logo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.spread--logo-design .logo__visual,
.spread--logo-design .logo__words { min-width: 0; }

.spread--logo-design .logo__mark {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--slate);
}

.spread--logo-design .logo__mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The ladder wraps rather than scroll if a screen is ever narrower than its
   true sizes; at 375 it fits on one line. */
.spread--logo-design .logo__ladder {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px clamp(14px, 2.2vw, 28px);
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--hair);
}

.spread--logo-design .logo__ladder figure {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.spread--logo-design .logo__ladder img {
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.spread--logo-design .logo__ladder figcaption {
  font-size: 13px;
  line-height: 1.3;
  color: var(--paper-dim);
}

.spread--logo-design .spread__name {
  font-size: clamp(38px, 6.9vw, 100px);
  line-height: .95;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
}

.spread--logo-design.spread--no-image .logo__grid { grid-template-columns: minmax(0, 1fr); }
.spread--logo-design.spread--no-image .logo__words { max-width: 760px; }

@media (max-width: 900px) {
  .spread--logo-design .logo__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .spread--logo-design .logo__visual { max-width: 560px; }
}

/* Social Media Design, the feed. On paper. The words on the left and one
   image across a three by two grid of square tiles on the right. Each tile
   is a window: its ::before is the whole grid's size, offset to the tile's
   place, so the image covers the grid as one picture at any ratio. */
.spread--social-media-design .social__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.spread--social-media-design .social__words { min-width: 0; }

.spread--social-media-design .spread__name {
  font-size: clamp(38px, 6.6vw, 96px);
  line-height: .95;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
}

.spread--social-media-design .social__feed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.spread--social-media-design .social__feed span {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--slate-deep);
}

.spread--social-media-design .social__feed span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(300% + 16px);
  height: calc(200% + 8px);
  background-image: var(--spread-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.spread--social-media-design .social__feed span:nth-child(3n + 2)::before { left: calc(-100% - 8px); }
.spread--social-media-design .social__feed span:nth-child(3n)::before { left: calc(-200% - 16px); }
.spread--social-media-design .social__feed span:nth-child(n + 4)::before { top: calc(-100% - 8px); }

.spread--social-media-design.spread--no-image .social__grid { grid-template-columns: minmax(0, 1fr); }
.spread--social-media-design.spread--no-image .social__words { max-width: 760px; }

@media (max-width: 900px) {
  .spread--social-media-design .social__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Motion Design, the filmstrip. Five 4:5 frames edge to edge, each a step
   further along the same image, then the name and tagline on the left and
   the rest on the right. Below 760px three frames remain. */
.spread--motion-design { padding: clamp(56px, 8vw, 110px) 0 clamp(56px, 9vw, 130px); }

.spread--motion-design .motion__strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.spread--motion-design .motion__strip span {
  display: block;
  aspect-ratio: 4 / 5;
  background-color: var(--slate-deep);
  background-image: var(--spread-img);
  background-size: cover;
  background-repeat: no-repeat;
}

.spread--motion-design .motion__strip span:nth-child(1) { background-position: 10% 50%; }
.spread--motion-design .motion__strip span:nth-child(2) { background-position: 25% 50%; }
.spread--motion-design .motion__strip span:nth-child(3) { background-position: 40% 50%; }
.spread--motion-design .motion__strip span:nth-child(4) { background-position: 55% 50%; }
.spread--motion-design .motion__strip span:nth-child(5) { background-position: 70% 50%; }

.spread--motion-design .motion__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5vw, 72px);
}

.spread--motion-design .motion__head,
.spread--motion-design .motion__body { min-width: 0; }

.spread--motion-design .spread__name {
  font-size: clamp(38px, 7.2vw, 104px);
  line-height: .95;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
}

@media (max-width: 900px) {
  .spread--motion-design .motion__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (max-width: 759px) {
  .spread--motion-design .motion__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spread--motion-design .motion__strip span:nth-child(n + 4) { display: none; }
}