/* ============================================================================
   THE-PROCESS SECTION
   ----------------------------------------------------------------------------
   The overview + CTA that lands after a project page finishes: what the project
   was, and a way through to the full process breakdown on amanda-design.com.

   Built to Amanda's sketch. Column ratios are the sketch's own, read off its
   1920 canvas — 45/55 for the shot and the meta block, 19/81 for the decisions
   heading and its three cards.

   Requires pf-chrome.css to be loaded first: every size below resolves against
   the --pf-* tokens declared there.
   ========================================================================== */
.pf-process {
  display: block;
  margin: 0;
  padding-block: clamp(64px, 7vw, 132px) clamp(64px, 7vw, 130px);
  background: var(--pf-paper);
  color: var(--pf-ink);
  font-family: var(--pf-font);
  letter-spacing: var(--pf-tr-body);
}

.pf-process__wrap {
  width: 100%;
  max-width: calc(1720px + clamp(20px, 5.2vw, 100px) * 2);
  margin-inline: auto;
  padding-inline: clamp(20px, 5.2vw, 100px);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 118px);
}

/* Two lines because the markup says two lines, not because a width cap happens
   to break it there. */
.pf-process__head {
  margin: 0;
  text-align: center;
  font-size: var(--pf-fs-h1);
  font-weight: var(--pf-fw-medium);
  line-height: var(--pf-lh-tight);
  letter-spacing: var(--pf-tr-display);
  color: inherit;
}
.pf-process__line { display: block; }

/* ---- the shot + the meta block ------------------------------------------- */
.pf-process__top {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: clamp(32px, 3.4vw, 62px);
  align-items: center;
}

/* The preview, and the whole of it is the link through to the case study.
   7:4 is the images' own ratio (700x400), so nothing is cropped -- Amanda:
   "please keep the aspect ratio of the image".

   The outline is load-bearing rather than decorative: most of these previews
   are white-ish at the edges and the section behind them is white, so without
   it the thumbnail has no boundary at all. */
.pf-process__shot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 7 / 4;
  border: 1.5px solid var(--pf-ink);
  background: var(--pf-shot);
  overflow: hidden;
}
.pf-process__shot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* At rest it sits back: softened and a little faded. Hovering brings it
     into focus, up to full opacity, and pushes it in slightly -- the same
     move the other-work thumbnails make on the homepage.

     The rest state is ALREADY scaled past the frame. A blur samples beyond
     the element's edges, so an unscaled blurred image feathers out along all
     four sides and the outline ends up wrapping a soft grey halo. 1.03 on a
     ~500px box is ~7px of bleed each side, comfortably more than the 4px
     radius needs, and it is why the zoom runs 1.03 -> 1.075 rather than
     1 -> 1.045: the eye still reads a 4.5% push. */
  opacity: 0.75;
  filter: blur(4px);
  transform: scale(1.03);
  transition:
    opacity 0.5s var(--pf-ease),
    filter 0.5s var(--pf-ease),
    transform 0.6s var(--pf-ease);
  will-change: transform, filter;
}
.pf-process__shot:hover .pf-process__shot-img,
.pf-process__shot:focus-visible .pf-process__shot-img {
  opacity: 1;
  filter: blur(0);
  transform: scale(1.075);
}
.pf-process__shot:focus-visible { outline: 2px solid var(--pf-ink); outline-offset: 4px; }

/* ---- the CTA ----
   v3's own .cta__btn / .cta__btn--solid, declaration for declaration (see
   css/v3.css:1227-1244). Amanda: "The see the full process button is different
   too here. Please keep it similar to the one we have in the homepage as well.
   CONSISTENCY!!!!"

   The tokens are spelled out rather than read from :root, because this file
   loads on five pages that do not take v3's global stylesheet. The values are
   v3's: --black #111111 (Amanda's brand black), --white #fff, --fw-medium 500.

   Deliberately dropped from the previous build: the translateY(-3px) lift and
   the box-shadow on hover. v3's button does not do that -- it INVERTS, which is
   what the 1.5px border is there for at rest. Matching it is the whole point. */
.pf-process__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin: 0;
  padding: 0.85em 1.5em;
  border: 1.5px solid #111111;
  border-radius: 0;
  background: #111111;
  color: #ffffff;
  font-family: var(--pf-font);
  font-size: clamp(15px, 1.1vw, 20px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* It sits ON the thumbnail, above the absolutely-positioned image, and it is
   a <span> rather than an <a> -- the thumbnail around it is the link, and a
   link inside a link is invalid. So every state below keys off the THUMBNAIL
   being hovered or focused, not the button itself: the button is not a
   separate target and must never behave like one. */
.pf-process__shot .pf-process__cta { position: relative; z-index: 1; }
.pf-process__shot:hover .pf-process__cta,
.pf-process__shot:focus-visible .pf-process__cta { background: #ffffff; color: #111111; }
.pf-process__arrow {
  width: 1.6em;
  height: auto;
  flex: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-process__shot:hover .pf-process__arrow,
.pf-process__shot:focus-visible .pf-process__arrow { transform: translateX(5px); }

.pf-process__meta { display: flex; flex-direction: column; gap: clamp(16px, 1.5vw, 26px); }

.pf-process__title {
  margin: 0;
  font-size: var(--pf-fs-h4);
  font-weight: var(--pf-fw-medium);
  line-height: var(--pf-lh-tight);
  letter-spacing: var(--pf-tr-heading);
  color: inherit;
}

.pf-process__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-pill {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid var(--pf-ink);
  border-radius: 999px;
  font-size: var(--pf-fs-body-sm);
  font-weight: var(--pf-fw-regular);
  line-height: 1.2;
  letter-spacing: var(--pf-tr-body);
  white-space: nowrap;
  color: inherit;
}

.pf-process__desc {
  max-width: 62ch;
  margin: 0;
  font-size: var(--pf-fs-body-lg);
  font-weight: var(--pf-fw-regular);
  line-height: var(--pf-lh-normal);
  letter-spacing: var(--pf-tr-body);
  color: inherit;
}

.pf-process__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 26px);
  margin: clamp(8px, 1vw, 18px) 0 0;
  padding: 0;
}
.pf-fact { display: flex; flex-direction: column; gap: 6px; }
.pf-fact dt {
  margin: 0;
  font-size: var(--pf-fs-eyebrow);
  font-weight: var(--pf-fw-semibold);
  line-height: var(--pf-lh-label);
  letter-spacing: var(--pf-tr-wide);
  text-transform: uppercase;
  color: var(--pf-muted);
}
.pf-fact dd {
  margin: 0;
  font-size: var(--pf-fs-body);
  font-weight: var(--pf-fw-regular);
  line-height: var(--pf-lh-normal);
  letter-spacing: var(--pf-tr-body);
  color: inherit;
}

/* ---- the three decisions ------------------------------------------------- */
/* The heading sits ABOVE the cards now, not in a column beside them -- Amanda:
   "putting the headline to the top of the decisions instead". It used to be a
   24/76 split, which forced the sentence into a 300px column and cost a wrap
   argument every time the copy changed. Stacked, the heading has the full
   width and the cards have it too, which is also what lets the row take four
   cards without crushing them. */
.pf-process__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 2.6vw, 44px);
  align-items: center;
}

.pf-process__decisions {
  margin: 0;
  text-align: center;
  font-size: var(--pf-fs-h5);
  font-weight: var(--pf-fw-medium);
  line-height: var(--pf-lh-snug);
  letter-spacing: var(--pf-tr-snug);
  color: inherit;
}

/* auto-fit, not a fixed three: the number of decisions is per project -- three
   on most, four on Identity -- and the row should take either without a
   per-page override. */
.pf-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: clamp(16px, 1.5vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-card {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.2vw, 22px);
  margin: 0;
  padding: clamp(24px, 2vw, 38px);
  border: 1px solid var(--pf-ink);
  border-radius: 18px;
  background: var(--pf-paper);
}
/* Was an empty circle -- a 56px hole doing nothing but spending attention at
   the top of every card. It holds the card's icon now, and the ring stays as
   the frame around it. */
.pf-card__dot {
  display: grid;
  place-items: center;
  width: clamp(44px, 3vw, 56px);
  height: clamp(44px, 3vw, 56px);
  flex: none;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.pf-card__icon {
  width: 52%;
  height: auto;
  display: block;
}
/* The title is where the decision is actually made legible -- Amanda: "make the
   header a bit longer so you can explain clearer, the body text can be shorter
   because the user might not read it anyway... the user only skim quickly".
   So it runs to a full sentence, and gets balanced wrapping rather than a
   ragged last word on its own line. */
.pf-card__title {
  margin: 0;
  text-wrap: balance;
  font-size: var(--pf-fs-h5);
  font-weight: var(--pf-fw-semibold);
  line-height: var(--pf-lh-snug);
  letter-spacing: var(--pf-tr-snug);
  color: inherit;
}
/* One decision per project can be set dark, so the row has a lead rather than
   four equal voices. Everything inside it inherits the flipped colour: the
   icon strokes currentColor and the ring is drawn in it too. */
.pf-card--lead {
  background: var(--pf-ink);
  border-color: var(--pf-ink);
  color: var(--pf-paper);
}

.pf-card__body {
  margin: 0;
  font-size: var(--pf-fs-body);
  font-weight: var(--pf-fw-regular);
  line-height: var(--pf-lh-normal);
  letter-spacing: var(--pf-tr-body);
  color: inherit;
}

/* ---- narrow ------------------------------------------------------------- */
/* .pf-process__top used to be in this rule too, going 45/55 to an even 50/50.
   Amanda: "the thumbnail should be placed above the project desc, not side by
   side" -- two equal columns was still side-by-side and worse than 45/55 for
   getting there, so it now skips straight to one column at 700px below
   instead of pit-stopping here. */
@media (max-width: 1000px) {
  .pf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  /* One column. The thumbnail (.pf-process__shot) is already first in DOM
     order, ahead of .pf-process__meta, so this alone stacks it above the
     copy with no markup change. */
  .pf-process__top { grid-template-columns: minmax(0, 1fr); }
  .pf-process__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-cards { grid-template-columns: minmax(0, 1fr); }
}

/* v3's own breakpoint for this button (css/v3.css:1252-1258): it centres its
   label on a phone rather than going full-width. */
@media (max-width: 480px) {
  .pf-process__cta { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-process__cta, .pf-process__arrow { transition-duration: 0.01ms; }
  /* The blur and the fade still apply, they just arrive at once. The rest
     state keeps its 1.03 so the outline never wraps a feathered edge. */
  .pf-process__shot-img { transition-duration: 0.01ms; }
  .pf-process__shot:hover .pf-process__shot-img { transform: scale(1.03); }
}

/* ============================================================================
   THE COVER
   ----------------------------------------------------------------------------
   The-process section and the footer arrive as a sheet sliding in from the
   right over the end of the page.

   IT DOES NOT EXTEND THE PAGE. Amanda: "Once the respective pages reach the end
   of the page, they should stop scrolling... the page reach end of the section ->
   stop scrolling -> instead, the-process section appears." So .pf-outro--live is
   position: fixed and out of flow entirely: the host page's scrollHeight is
   exactly what it was before this chrome existed. An earlier build pinned a
   sticky panel against a slack spacer and scrubbed the slide against scroll
   position, which added ~1.9 viewports of document and is what she is
   describing as "scrolling endlessly". None of that machinery is here --
   .pf-outro__panel, .pf-outro__slack, --pf-vh, --pf-pin, --pf-sweep and
   --pf-tail are all gone, along with the negative margin and the tail band.

   IT RUNS ON ITS OWN CLOCK, not on scroll. "WITHOUT SCROLL-DRIVEN. So, just
   immediate effect, intro and outro." One CSS transition, 0.9s each way.

   The overlay scrolls internally -- the-process plus the footer is about two
   screens -- and overscroll-behavior: contain stops that scroll chaining back to
   the page underneath once it bottoms out. That is why no overflow lock is
   needed on body or html, which matters: several of these pages have their own
   position: sticky elements that an overflow lock on body would silently break.

   The default state is FLAT: ordinary content at the end of the page. pf-outro.js
   ADDS .pf-outro--live once it has checked it can run. No JS, reduced motion, or
   a viewport under 900px, and the section is simply the last thing on the page --
   never a fixed sheet parked off-screen where nobody can reach it.
   ========================================================================== */
.pf-outro {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
}
.pf-outro__sheet {
  position: relative;
  margin: 0;
  padding: 0;
  background: var(--pf-paper);
}

.pf-outro--live {
  position: fixed;
  inset: 0;
  z-index: 900;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Opaque in its own right, not just via the sheet inside it. A transparent
     overlay lets the host page show through anywhere the sheet does not reach --
     during a rubber-band overscroll, or if its content ever comes up shorter
     than the viewport. That is the seam that put a project page's own footer on
     top of the site footer.

     It is the FOOTER's black rather than paper, because the only edge a reader
     can actually bounce past is the bottom one, and the bottom of the sheet is
     the black .contact block. Overscrolling there now reveals more of the same
     black instead of a white flash. The sheet's own white starts at the top,
     where .pf-process paints it. */
  background: #111111;
  transform: translateX(100%);
  will-change: transform;
  /* NO transition here. Adding .pf-outro--live is what first sets the
     translateX(100%), and a transition on this rule would ANIMATE that initial
     parking -- the sheet would be seen sliding off to the right on page load,
     from a start frame where it covers the whole page. The transition arrives a
     frame later, with .pf-outro--armed, once the parked position has been
     committed. Same reflow-then-transition dance the dock menu does. */
  transition: none;
}
.pf-outro--live.pf-outro--armed {
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-outro--live.is-shown { transform: translateX(0); }

/* The leading edge, and ONLY while the sheet is on its way in or out.
   box-shadow with a negative x-offset paints to the LEFT of the box: parked at
   translateX(100%) the box sits just off the right edge, so a shadow declared at
   rest is a permanent 120px vignette down the right of the page underneath --
   which is exactly what it was. Hanging it on .is-shown means it exists only
   while the sheet is over the page, where it reads as the edge of the sheet. */
.pf-outro--live.is-shown { box-shadow: -40px 0 80px rgba(0, 0, 0, 0.28); }

/* While the sheet is up, the host page is scroll-locked, so its own scrollbar
   does not sit there parked at the bottom beside the sheet's. One scrollbar,
   belonging to the sheet, and it ends at the footer -- Amanda: "The end of the
   page should be the main footer."

   On the ROOT only, never on body: overflow on body makes body a scroll
   container, which silently breaks position:sticky, and several of these pages
   depend on it. html's overflow propagates to the viewport on its own, so the
   root alone is enough. pf-outro.js pairs this with a padding-right equal to the
   scrollbar it removes, so the page underneath does not reflow 15px sideways. */
.pf-outro-open { overflow: hidden !important; }

/* The padding compensates every element laid out INSIDE the page, but the dock
   is position:fixed against the viewport, and the viewport is what just got 15px
   wider. So it gets the same compensation as a margin, which for a fixed box
   anchored by `right` pushes it back off the edge by exactly what it gained.
   --pf-scrollbar is written by pf-outro.js at lock time; the 0px fallback is
   what applies on every page and every moment the sheet is not up. */
.pf-outro-open .pf-dock { margin-right: var(--pf-scrollbar, 0px); }

@media (prefers-reduced-motion: reduce) {
  .pf-outro--live.pf-outro--armed { transition-duration: 0.01ms; }
}