/* Work section. Generated by studio/sitegen/build.py, do not edit by hand. */

.wback { margin: 0 0 22px; font-size: 0.94rem; }
.wback a { color: var(--muted); }
.wback a:hover { color: var(--blue); }

.wtag { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px; margin-bottom: 16px; }
.wtag.concept { background: var(--blue-tint); color: var(--blue-600); }
.wtag.client { background: var(--ink); color: #fff; }

.wbrand h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: -0.03em; }

.wfacts { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.wfacts span { display: flex; flex-direction: column; gap: 3px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 15px; font-size: 0.92rem; }
.wfacts b { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted); }

.wcase { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin: 38px 0 0; }
.wcase h3 { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 10px; }
.wcase p { margin: 0; font-size: 1.02rem; line-height: 1.62; }

/* The honesty line. Never style this so quietly that it reads as fine print: it is the
   sentence that keeps every claim on this page true. */
.wdisclaim { margin: 30px 0 0; padding: 15px 18px; border-left: 3px solid var(--blue);
  background: rgba(27, 124, 255, 0.05); border-radius: 0 12px 12px 0;
  font-size: 0.94rem; color: #3d4048; max-width: 74ch; }

.wgroup { margin: 52px 0 0; }
.wgroup > h2 { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--line);
  margin: 0 0 24px; }

.mails { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
/* min-width:0 is load-bearing. A grid track sized 1fr still floors at the item's min-content
   width, and the item contains a 600px-wide iframe, so without this every card forces its
   track to 600px and the whole page scrolls sideways on a phone. overflow:hidden on .frame
   clips the paint but does not change the track sizing. */
.mail { margin: 0; min-width: 0; }
.mail figcaption { font-size: 0.86rem; font-weight: 600; margin-bottom: 9px; }

/* The email renders at its real 600px width and is scaled to fit the column, so this is the
   layout that actually sends rather than a reflowed approximation of it. */
.frame { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  height: 660px; position: relative; }
.frame iframe { width: 600px; height: 1600px; border: 0; display: block;
  transform: scale(var(--s, 0.55)); transform-origin: 0 0; }
.frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 54px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.94));
  pointer-events: none; }
.mail__full { display: inline-block; margin-top: 9px; font-size: 0.84rem; color: var(--muted); }
.mail__full:hover { color: var(--blue); }

/* ---- the live email on the home page ----
   Deliberately NOT the .frame treatment used on the case pages. There the iframe is made as
   tall as its content so the whole email is visible at a glance; here the frame is fixed and
   the iframe keeps its own scrollbar, because a visitor scrolling a real email inside the
   page is the entire argument the section is making.

   Kept deliberately short. The first version of this band ran about 1900px tall with a
   nine-tile thumbnail grid under it, which made the same point the strip above already
   makes and pushed the rest of the page off the bottom of the world. One email, one
   paragraph, one line of brand links. */
.wlive { display: grid; gap: clamp(22px, 3.5vw, 46px); align-items: center;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr); margin: clamp(28px, 4vw, 46px) 0 0; }
.wlive__stage { background: #fff; border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; box-shadow: 0 26px 54px -36px rgba(12,13,16,.48); }
.wlive__chrome { display: flex; align-items: center; gap: 5px; padding: 9px 12px;
  border-bottom: 1px solid var(--line); background: #FBFAF8; }
.wlive__chrome i { width: 8px; height: 8px; border-radius: 50%; background: rgba(12,13,16,.14); }
.wlive__chrome em { margin-left: 7px; font-style: normal; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.wlive__frame { height: 380px; overflow: hidden; }
.wlive__frame iframe { width: 600px; height: calc(380px / var(--s, 0.53)); border: 0; display: block;
  transform: scale(var(--s, 0.53)); transform-origin: 0 0; }
.wlive__say h3 { font-family: var(--display); font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  letter-spacing: -0.025em; line-height: 1.12; }
.wlive__say > p { margin: 13px 0 0; color: #45484f; font-size: 0.98rem; max-width: 48ch; }

.wlive__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 20px 0 0 !important; }
.wlive__count { font-size: 0.88rem; color: var(--muted); }

@media (max-width: 820px) {
  .wlive { grid-template-columns: 1fr; gap: 22px; }
  .wlive__stage { max-width: 320px; margin-inline: auto; }
  .wlive__say { text-align: center; }
  .wlive__say > p { margin-inline: auto; }
  .wnames, .wlive__cta { justify-content: center; }
}

/* ---- the email rail ----
   Every email, full bleed, dragged or scrolled sideways.

   A real scroll container, not an overflow:hidden box driven only by mouse drag. Trackpad,
   wheel, touch and keyboard all work on their own; the pointer drag in main.js is added on
   top for people who expect to be able to grab it. The scrollbar is hidden because the row
   running off both edges is affordance enough, and the hint line says so in words. */
.wrail__hint { text-align: center; margin: 0 0 14px; font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); }
.wrail { width: 100vw; margin-left: calc(50% - 50vw); overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none; cursor: grab;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.wrail::-webkit-scrollbar { display: none; }
.wrail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.wrail.is-dragging .wrail__card { pointer-events: none; }
.wrail:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.wrail__row { display: flex; gap: 10px; width: max-content; padding: 6px 22px 20px; }

.wrail__card { position: relative; flex: 0 0 auto; width: 236px; display: block;
  border-radius: 13px; overflow: hidden; border: 1px solid var(--line); background: #fff;
  scroll-snap-align: center; box-shadow: 0 10px 26px -14px rgba(12,13,16,.35);
  transition: box-shadow .22s var(--ease), border-color .22s var(--ease); }
.wrail__card:hover { border-color: var(--blue); box-shadow: 0 22px 44px -18px rgba(12,13,16,.42); }
.wrail__card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* The window. Each shot is the whole email, so this is a short viewport onto a tall image
   with its own scrollbar: the visitor reads all of it without leaving the page. That is the
   one thing the old crop could not do.
   The card itself is deliberately NOT the scroller. A transform on hover would make it the
   containing block for the label below, and a scrolling anchor moves its own focus ring. */
.wrail__win { display: block; height: 315px; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(12,13,16,.28) transparent;
  /* No overscroll containment: reaching the end of an email should carry on down the page
     rather than trapping the wheel inside a 315px box. */
  overscroll-behavior-y: auto; }
.wrail__win img { display: block; width: 100%; height: auto; }
.wrail__win::-webkit-scrollbar { width: 5px; }
.wrail__win::-webkit-scrollbar-thumb { background: rgba(12,13,16,.26); border-radius: 3px; }
.wrail__win::-webkit-scrollbar-thumb:hover { background: var(--blue); }
.wrail__win::-webkit-scrollbar-track { background: transparent; }
.wrail.is-dragging .wrail__win { overflow-y: hidden; }

/* The label stays out of the way until you want it. Fifty-three permanent captions is
   noise; one that appears under the cursor is an answer to the question being asked. */
/* Sits on the card, not inside the window, so it stays put while the email scrolls past
   behind it. pointer-events off so it never eats a scroll aimed at the email. */
.wrail__meta { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column;
  gap: 1px; padding: 22px 13px 11px; color: #fff; transform: translateY(101%);
  pointer-events: none;
  background: linear-gradient(to top, rgba(12,13,16,.93), rgba(12,13,16,.72) 62%, transparent);
  transition: transform .24s var(--ease); }
.wrail__meta b { font-size: 0.85rem; font-weight: 700; letter-spacing: -0.01em; }
.wrail__meta span { font-size: 0.72rem; opacity: .78; }
.wrail__card:hover .wrail__meta, .wrail__card:focus-visible .wrail__meta { transform: none; }

.wrail__foot { display: flex; flex-direction: column; align-items: center; gap: 16px;
  margin: clamp(20px, 3vw, 32px) auto 0; max-width: 60ch; text-align: center; }
.wrail__foot span { color: var(--muted); font-size: 0.94rem; }
.wrail__foot b { color: var(--ink); }

@media (max-width: 640px) {
  .wrail__row { gap: 8px; padding: 6px 14px 16px; }
  .wrail__card { width: 190px; }
  .wrail__win { height: 260px; }
}
/* Touch already scrolls this natively, and a hover label is meaningless without a pointer. */
@media (hover: none) {
  .wrail__meta { transform: none; padding-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .wrail { scroll-behavior: auto; scroll-snap-type: none; }
  .wrail__card, .wrail__meta { transition: none; }
  .wrail__card:hover { transform: none; }
}

/* ---- the proof strip ----
   Real emails, full bleed, faded at both edges so it reads as a slice of something larger
   than the page. Odd and even rotate opposite ways so the row looks laid down by hand
   rather than set in a grid; hovering straightens the one under the cursor and lifts it,
   which is what makes it obvious the whole row is clickable. */
.wstrip { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden;
  padding: 10px 0 clamp(30px, 4vw, 46px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.wstrip__row { display: flex; gap: 15px; justify-content: center; min-width: max-content;
  padding: 14px 20px; }
.wstrip a { flex: 0 0 auto; display: block; border-radius: 10px;
  transition: transform .2s var(--ease); }
/* Explicit height and object-fit are load-bearing. The shots are now full-length emails, so
   without these a 152px-wide card inherits the whole 2000px and the strip becomes 760px tall. */
.wstrip img { display: block; width: 152px; height: 203px; object-fit: cover;
  object-position: top center; border-radius: 10px; border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(12,13,16,.13); background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.wstrip a:nth-child(odd) { transform: rotate(-1.5deg); }
.wstrip a:nth-child(even) { transform: rotate(1.5deg); }
.wstrip a:hover { transform: translateY(-8px) rotate(0deg); }
.wstrip a:hover img { border-color: var(--blue); box-shadow: 0 20px 40px rgba(12,13,16,.22); }
.wstrip a:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

/* ---- section head ----
   A quiet small-caps label over a full-width rule, so the section reads as an index rather
   than as another headline competing with the one above it. */
.wband-head { display: flex; gap: 14px; align-items: baseline; justify-content: space-between;
  padding-bottom: 13px; border-bottom: 1px solid var(--line);
  margin: clamp(34px, 4.5vw, 56px) 0 16px; }
.wband-head h2 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; }
.wcount { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.04em; }
.wband-note { color: var(--muted); max-width: 74ch; margin: 0 0 26px; font-size: 0.95rem; }

/* ---- brand cards ---- */
.wgrid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.wcard { display: block; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; color: inherit;
  transition: border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease); }
.wcard:hover { border-color: var(--blue); transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(12,13,16,.14); }
.wcard:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.wcbody { display: block; padding: 20px 22px 22px; }
.wsector { display: block; color: var(--muted); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 9px; }
.wname { display: block; font-family: var(--display); font-size: 1.28rem; font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: 8px; }
.wflow { display: block; font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.wmeta { display: flex; justify-content: space-between; gap: 10px; margin-top: 15px;
  padding-top: 13px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); }
.wmeta span:first-child { color: var(--blue); font-weight: 600; }

/* The fan. Three real emails, top-anchored so each shows its header and hero and the rest
   bleeds off the bottom, which reads as work continuing rather than as a crop. */
.wpeek { display: block; position: relative; height: 214px; overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(162deg, #F7F5F0, #E7E3DA); }
/* Same reason as the strip: the source is the whole email, so the height is pinned here and
   the rest is cropped off the bottom, which is the effect this wanted anyway. */
.wpeek img { position: absolute; top: 22px; left: 50%; width: 47%; height: 260px;
  object-fit: cover; object-position: top center; border-radius: 6px;
  box-shadow: 0 7px 20px rgba(12,13,16,.24);
  transition: transform .34s cubic-bezier(.2,.7,.3,1), opacity .34s; }
.wpeek .p1 { transform: translateX(-50%); z-index: 3; }
.wpeek .p2 { transform: translateX(-92%) rotate(-8deg); z-index: 2; opacity: .82; }
.wpeek .p3 { transform: translateX(-8%) rotate(8deg); z-index: 1; opacity: .82; }
.wcard:hover .wpeek .p1 { transform: translateX(-50%) translateY(-9px); }
.wcard:hover .wpeek .p2 { transform: translateX(-105%) translateY(-3px) rotate(-12deg); opacity: 1; }
.wcard:hover .wpeek .p3 { transform: translateX(5%) translateY(-3px) rotate(12deg); opacity: 1; }
/* Two emails only: balance the pair around the centre rather than leaving a gap. */
.wpeek.two .p1 { transform: translateX(-26%) rotate(5deg); }
.wpeek.two .p2 { transform: translateX(-74%) rotate(-5deg); opacity: .92; }
.wcard:hover .wpeek.two .p1 { transform: translateX(-20%) translateY(-7px) rotate(8deg); }
.wcard:hover .wpeek.two .p2 { transform: translateX(-82%) translateY(-7px) rotate(-8deg); opacity: 1; }

/* The brand with the most work gets the wide slot, so the grid opens on something with
   weight instead of nine identical rectangles. */
.wcard.featured { grid-column: 1 / -1; display: grid; align-items: stretch;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.wcard.featured .wpeek { height: 100%; min-height: 290px; border-bottom: 0;
  border-right: 1px solid var(--line); }
.wcard.featured .wpeek img { top: 34px; width: 41%; }
.wcard.featured .wcbody { align-self: center; padding: 30px 34px; }
.wcard.featured .wname { font-size: 1.7rem; }
.wcard.featured .wflow { font-size: 1rem; }

.wmore { margin: 24px 0 0; text-align: center; }
.wmore a { font-family: var(--display); font-weight: 600; color: var(--blue);
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: border-color .18s var(--ease); }
.wmore a:hover { border-bottom-color: var(--blue); }

@media (max-width: 700px) {
  .wstrip img { width: 112px; }
  .wcard.featured { grid-template-columns: 1fr; }
  .wcard.featured .wpeek { min-height: 210px; border-right: 0;
    border-bottom: 1px solid var(--line); }
  .wcard.featured .wcbody { padding: 22px; }
  .wcard.featured .wname { font-size: 1.35rem; }
}
/* Everything here animates on hover or transform only, so this turns all of it off in
   one place for anyone who has asked the OS not to move things. */
@media (prefers-reduced-motion: reduce) {
  .wstrip a, .wstrip img, .wcard, .wpeek img { transition: none; }
  .wstrip a:hover, .wcard:hover { transform: none; }
  .wcard:hover .wpeek img { transform: inherit; }
}

/* ---- work index ---- */
.windex h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); max-width: 20ch; letter-spacing: -0.03em; }
.windex .lede { max-width: 62ch; margin-top: 20px; }
.windex__count { margin: 26px 0 0; font-size: 1.05rem; }
.windex__note { margin-top: 34px; }

.wtiles { display: grid; gap: 20px; margin: 34px 0 0;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.wtile { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.wtile:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(12,13,16,.11); }
.wtile__shot { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bone);
  border-bottom: 1px solid var(--line); }
.wtile__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.wtile__meta { display: flex; flex-direction: column; gap: 3px; padding: 15px 17px 17px; }
.wtile__meta b { font-family: var(--display); font-size: 1.06rem; letter-spacing: -0.015em; }
.wtile__meta span { font-size: 0.87rem; color: var(--muted); }
.wtile__n { color: var(--blue) !important; font-weight: 600; }

/* ---- the close ---- */
.wclose { background: var(--ink); color: #fff; padding: clamp(52px, 8vw, 92px) 0;
  margin-top: clamp(56px, 8vw, 96px); }
.wclose h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); max-width: 010ch; letter-spacing: -0.025em;
  max-width: 22ch; }
.wclose__body { margin: 20px 0 26px; max-width: 60ch; color: rgba(255,255,255,.76);
  font-size: 1.03rem; }
.wclose .eyebrow { color: var(--blue); }
.wclose__back { margin: 20px 0 0; font-size: 0.92rem; }
.wclose__back a { color: rgba(255,255,255,.66); text-decoration: underline; }
.wclose__back a:hover { color: #fff; }

@media (max-width: 640px) {
  .frame { height: 520px; }
  .mails { grid-template-columns: 1fr; }
  .wtiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 13px; }
  .wfacts span { padding: 9px 12px; font-size: 0.86rem; }
}