/* Pivot Point — the design. Every page loads this after assets/site.css.

   One design across all six pages (2026-09-30 review: the home page and the inner
   pages read as two designs stitched together). Same header, same grounds, same
   cards, same contact block and footer everywhere; only each page's opening
   composition differs.

   THE IDEA: the illustrations are paper cut-outs, so the interface is paper too.
   - Every ground has a surface: a fine grain (strongest on navy and steel, faint on
     cream), a soft glow lit behind its main artwork, and slightly deeper edges.
   - There is one light, from the top-left. Every card, frame, button and cut-out
     casts the same family of shadow down and to the right: a thin light edge, a
     tight shadow close in, a soft one further out (--lift). Cut-out images get the
     same through drop-shadow (--cut), so they float just above the surface.
   - Amber is in the interface, not only inside the art: folder tabs, stat numbers,
     card numbers, link underlines, hovers, the Enquire hover.

   PALETTE — the logo's four colours, amber, and a lit and a deep step of each ground:
     navy  #0E1B2F   steel #538BC3   ink #0F223D   white #FFFFFF   amber #E8A33D
   Contrast, measured: white on navy 17.4, amber on navy 8.00, amber on ink 7.40,
   ink on amber 7.40, ink on white 16, ink on steel 4.44 (large text only), navy on
   steel 4.85. Amber on white is 2.16 and on steel 1.66, so amber never carries text
   on those two: there it is a fill under ink text, or a line, never type.

   HARD RULE for grounds: always set background-color; gradients and grain go in
   background-image on top of it. drawer.js's tabs and the covered-file dimming
   read the painted section, and a gradient alone computes to transparent. */

:root {
  --navy: #0E1B2F;
  --steel: #538BC3;
  --ink: #0F223D;
  --white: #FFFFFF;
  --amber: #E8A33D;
  /* tonal range: a lit and a deep step of each ground (about 10–15%) */
  --navy-lit: #1B3050;
  --navy-deep: #08111F;
  --steel-lit: #7DAEDF;
  --steel-deep: #3F70A6;
  --cream: #F7F4EE;
  --sand: #EFEAE1;
  --ink-soft: rgba(15, 34, 61, .74);

  --sans: 'Archivo', Arial, sans-serif;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --hdr: 76px;                               /* the fixed header's height */
  --gutter: clamp(20px, 5vw, 72px);
  --line: 1px solid rgba(15, 34, 61, .14);

  /* One light, top-left. Retuned per ground below: on navy the far shadow needs
     more weight to read, on steel it takes the steel's own deep blue. */
  --lift: inset 1px 1px 0 rgba(255, 255, 255, .75), 1px 2px 2px rgba(10, 18, 34, .16), 10px 18px 32px -10px rgba(10, 18, 34, .30);
  --lift-up: inset 1px 1px 0 rgba(255, 255, 255, .75), 2px 4px 4px rgba(10, 18, 34, .14), 18px 32px 52px -14px rgba(10, 18, 34, .38);
  --lift-press: inset 1px 1px 0 rgba(255, 255, 255, .75), 1px 1px 1px rgba(10, 18, 34, .24);
  --cut: drop-shadow(-1px -1px 0 rgba(255, 255, 255, .35)) drop-shadow(1px 2px 1.5px rgba(10, 18, 34, .30)) drop-shadow(10px 18px 16px rgba(10, 18, 34, .26));

  /* Paper grain: light fibres and dark pores from two noise fields, near-zero mean
     so the ground keeps its colour. No image request, no decode. */
  --grain-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.6 0 0 0 -1.4'/%3E%3C/filter%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 0 0 0 1.2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23a)' opacity='.4'/%3E%3Crect width='220' height='220' filter='url(%23b)' opacity='.42'/%3E%3C/svg%3E");
  --grain-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.6 0 0 0 -1.4'/%3E%3C/filter%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 0 0 0 1.2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23a)' opacity='.3'/%3E%3Crect width='220' height='220' filter='url(%23b)' opacity='.2'/%3E%3C/svg%3E");

  /* the archive drawer (home page): the tab's height, the radius of a folder's
     shoulders, and how far each tab steps along from the one before */
  --tab-h: 38px;
  --file-r: 22px;
  --tab-step: clamp(150px, 17vw, 290px);
}

html { background: var(--navy); scroll-padding-top: calc(var(--hdr) + 16px); }
body { background: var(--navy); color: var(--ink); }
::selection { background: var(--amber); color: var(--ink); }
.pp-page { overflow-x: clip; }
a:focus-visible, button:focus-visible, video:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
}

/* --- grounds ---------------------------------------------------------------------- */

.blk--navy, .pp-voice {
  background-color: var(--navy);
  background-image:
    var(--grain-strong),
    radial-gradient(62% 58% at var(--glow-x, 50%) var(--glow-y, 40%), rgba(56, 92, 142, .5), rgba(56, 92, 142, 0) 72%),
    radial-gradient(135% 115% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(2, 6, 14, .5) 100%);
  color: var(--white);
  --lift: inset 1px 1px 0 rgba(255, 255, 255, .12), 1px 2px 2px rgba(0, 0, 0, .35), 12px 22px 40px -12px rgba(0, 0, 0, .62);
  --lift-up: inset 1px 1px 0 rgba(255, 255, 255, .12), 2px 4px 4px rgba(0, 0, 0, .3), 20px 34px 56px -14px rgba(0, 0, 0, .7);
  --lift-press: inset 1px 1px 0 rgba(255, 255, 255, .12), 1px 1px 1px rgba(0, 0, 0, .45);
  --cut: drop-shadow(-1px -1px 0 rgba(255, 255, 255, .16)) drop-shadow(1px 2px 1.5px rgba(0, 0, 0, .45)) drop-shadow(12px 20px 20px rgba(0, 0, 0, .45));
}
.blk--steel, .pp-welcome {
  background-color: var(--steel);
  background-image:
    var(--grain-strong),
    radial-gradient(62% 60% at var(--glow-x, 55%) var(--glow-y, 40%), rgba(158, 200, 242, .6), rgba(158, 200, 242, 0) 72%),
    radial-gradient(135% 118% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(22, 50, 94, .34) 100%);
  color: var(--ink);
  --lift: inset 1px 1px 0 rgba(255, 255, 255, .75), 1px 2px 2px rgba(12, 32, 66, .26), 12px 20px 36px -10px rgba(12, 32, 66, .46);
  --lift-up: inset 1px 1px 0 rgba(255, 255, 255, .75), 2px 4px 4px rgba(12, 32, 66, .22), 20px 34px 54px -14px rgba(12, 32, 66, .52);
  --lift-press: inset 1px 1px 0 rgba(255, 255, 255, .75), 1px 1px 1px rgba(12, 32, 66, .34);
  --cut: drop-shadow(-1px -1px 0 rgba(255, 255, 255, .35)) drop-shadow(1px 2px 1.5px rgba(12, 32, 66, .38)) drop-shadow(12px 20px 18px rgba(12, 32, 66, .36));
}
.blk--white, .sec--cream {
  background-color: var(--cream);
  background-image:
    var(--grain-soft),
    radial-gradient(62% 56% at var(--glow-x, 30%) var(--glow-y, 22%), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%),
    radial-gradient(135% 118% at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(112, 86, 48, .10) 100%);
  color: var(--ink);
}
.sec--soft {
  background-color: var(--sand);
  background-image:
    var(--grain-soft),
    radial-gradient(62% 60% at var(--glow-x, 50%) var(--glow-y, 30%), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%),
    radial-gradient(135% 118% at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(112, 86, 48, .12) 100%);
  color: var(--ink);
}

/* A faint halftone dot corner, in the heroes and the footer: printed dots that
   thin out away from the corner. */
.pp-welcome::after,
.pp-page-hero::after,
.pp-footer::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: min(62vw, 560px);
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle, var(--dot, rgba(15, 34, 61, .32)) 0 1.7px, transparent 2.3px) 0 0 / 12px 12px;
  -webkit-mask-image: radial-gradient(circle at var(--dot-at, 0 100%), #000 0, rgba(0, 0, 0, .55) 32%, transparent 70%);
          mask-image: radial-gradient(circle at var(--dot-at, 0 100%), #000 0, rgba(0, 0, 0, .55) 32%, transparent 70%);
}
.pp-welcome::after, .pp-page-hero::after { left: 0; bottom: 0; }
.blk--navy.pp-page-hero { --dot: rgba(255, 255, 255, .12); }
.pp-footer::before { right: 0; bottom: 0; --dot-at: 100% 100%; width: min(70vw, 460px); }

/* --- type ------------------------------------------------------------------------- */

.pp-serif { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
/* Small type on steel fails contrast (ink on steel is 4.44), so it rides a paper chip. */
.blk--steel .pp-eyebrow,
.pp-welcome .pp-eyebrow {
  display: block;
  width: fit-content;
  padding: 8px 14px 7px;
  background: var(--white);
  color: var(--ink);
  border-radius: 999px;
  box-shadow: var(--lift);
}
.blk--navy .pp-eyebrow, .pp-voice .pp-eyebrow { color: var(--amber); }
.blk--white .pp-eyebrow, .sec--cream .pp-eyebrow, .sec--soft .pp-eyebrow { color: var(--ink); }

/* Vertical labels: a section's name set up its left edge, the way a folder is
   labelled on its spine. Horizontal again on a phone. */
.pp-vlabel {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

/* Links in running copy: an amber underline; on hover the word is marked in amber
   like a highlighter, ink on amber (7.40). */
.pp-link {
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  border-radius: 3px;
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.pp-link:hover {
  background-color: var(--amber);
  box-shadow: 0 0 0 4px var(--amber);
  color: var(--ink);
  text-decoration-color: transparent;
}

/* --- header (every page) ----------------------------------------------------------- */

.pp-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--white);
  background-color: var(--navy);
  background-image: var(--grain-strong), linear-gradient(180deg, rgba(30, 52, 86, .55), rgba(14, 27, 47, 0));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07), 0 14px 30px -18px rgba(0, 0, 0, .8);
}
.pp-header-bar {
  max-width: 1480px;
  height: var(--hdr);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.pp-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font: 800 24px/1 var(--sans);
  letter-spacing: -.05em;
  white-space: nowrap;
}
.pp-logo span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background-color: var(--steel);
  background-image: var(--grain-strong);
  color: var(--white);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .35), 1px 2px 3px rgba(0, 0, 0, .35);
}
.pp-header nav { display: flex; gap: clamp(18px, 2.6vw, 40px); }
.pp-header nav a {
  padding: 10px 0;
  font: 600 13px/1 var(--sans);
  text-decoration: underline 2px transparent;
  text-underline-offset: 8px;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.pp-header nav a:hover,
.pp-header nav a[aria-current="page"] { text-decoration-color: var(--amber); }
.pp-header nav a:hover { color: var(--amber); }
.pp-enquire {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: 700 13px/1 var(--sans);
  white-space: nowrap;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .9), 1px 2px 2px rgba(0, 0, 0, .35), 8px 14px 24px -10px rgba(0, 0, 0, .7);
  transition: background-color .2s ease, transform .2s ease;
}
.pp-enquire span { font-size: 17px; line-height: 0; }
.pp-enquire:hover,
.pp-enquire[aria-current="page"] { background: var(--amber); color: var(--ink); }
.pp-enquire:hover { transform: translateY(-1px); }

/* --- buttons and links ------------------------------------------------------------- */

/* One button: a paper tab lifted off the page, amber under the finger. */
.pp-button,
.pp-opening-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-height: 50px;
  padding: 12px 22px;
  border: 0;
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font: 700 15px/1.2 var(--sans);
  cursor: pointer;
  box-shadow: var(--lift);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.pp-button span, .pp-opening-button span { font-size: 20px; line-height: 1; }
.pp-button:hover, .pp-opening-button:hover { background: var(--amber); color: var(--ink); transform: translateY(-2px); box-shadow: var(--lift-up); }
.pp-button:active, .pp-opening-button:active { transform: translateY(1px); box-shadow: var(--lift-press); }

/* The quieter link: text with an amber rule under it. */
.pp-opening-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  min-height: 44px;
  padding: 8px 0;
  border-bottom: 2px solid var(--amber);
  font-size: 15px;
  font-weight: 700;
  transition: border-width .15s ease, color .2s ease;
}
.pp-opening-link span { font-size: 22px; line-height: 1; transition: transform .2s ease; }
.pp-opening-link:hover { color: var(--amber); }
.pp-opening-link:hover span { transform: translate(3px, -3px); }

/* --- cards, frames, and the art that breaks out of them ------------------------------ */

.pp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 14px clamp(22px, 2.4vw, 30px);
  background-color: var(--white);
  background-image: linear-gradient(155deg, #FFFFFF 0%, #FAF7F1 100%);
  color: var(--ink);
  border: var(--line);
  border-radius: 20px;
  box-shadow: var(--lift);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}
a.pp-card:hover { transform: translateY(-6px); box-shadow: var(--lift-up); }
.pp-card h3 {
  margin: 0 0 10px;
  font: 800 clamp(22px, 1.9vw, 30px)/1.06 var(--sans);
  letter-spacing: -.035em;
}
.pp-card p { font-size: 16px; line-height: 1.65; margin: 0; color: var(--ink-soft); text-wrap: pretty; }
.pp-card > div:last-child { padding: 0 clamp(8px, 1vw, 14px); }

/* The art panel: a steel well pressed into the card. The cut-out stands on the
   well's floor and rises out through its top edge — every one the same way, on the
   home page and on the Services and About pages alike — clipped at the well's sides
   and floor so nothing trails out sideways, free only above. */
.pp-card-num--art {
  position: relative;
  /* the well is wide and the art's box is squarer than any piece of art (1.55 vs
     the camera's 1.51), so every piece is sized by its height and every one rises
     the same share of the well out of its top, whatever the card's width */
  aspect-ratio: 2.3;
  margin: 0 0 clamp(18px, 2vw, 24px);
  border-radius: 14px;
  background-color: var(--steel);
  background-image:
    var(--grain-strong),
    radial-gradient(70% 80% at 35% 25%, rgba(165, 205, 245, .65), rgba(165, 205, 245, 0) 75%),
    radial-gradient(120% 120% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(22, 50, 94, .35) 100%);
  box-shadow: inset 1px 2px 6px rgba(12, 32, 66, .42), inset -1px -1px 0 rgba(255, 255, 255, .35);
  --cut: drop-shadow(-1px -1px 0 rgba(255, 255, 255, .35)) drop-shadow(1px 2px 1.5px rgba(12, 32, 66, .4)) drop-shadow(10px 16px 14px rgba(12, 32, 66, .38));
}
.pp-card-num--art img {
  position: absolute;
  left: 7%;
  bottom: 6%;
  width: 86%;
  height: auto;
  aspect-ratio: 1.55;
  max-width: none;
  object-fit: contain;
  object-position: 50% 100%;
  filter: var(--cut);
  clip-path: inset(-60% -8% -8% -8%);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
a.pp-card:hover .pp-card-num--art img { transform: translateY(-8px) rotate(-1.5deg); }
.pp-card-num--art span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
  font: 800 15px/1 var(--sans);
  letter-spacing: -.02em;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), 1px 2px 2px rgba(12, 32, 66, .3), 4px 8px 14px -4px rgba(12, 32, 66, .45);
}

/* --- home: opening ------------------------------------------------------------------ */

.pp-home section { position: relative; z-index: 10; }
.pp-opening { position: relative; isolation: isolate; }
.pp-opening :is(h1, h2, p, figure) { margin: 0; }
.pp-opening-art img { display: block; width: 100%; height: auto; }

.pp-welcome {
  --glow-x: 72%;
  --glow-y: 48%;
  padding: calc(var(--hdr) + clamp(24px, 5vh, 56px)) var(--gutter) calc(27px + var(--tab-h) + var(--file-r));
  overflow: hidden;
}
.pp-welcome-inner {
  position: relative;
  max-width: 1310px;
  min-height: min(600px, 72vh);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
}
.pp-welcome-copy { position: relative; z-index: 1; padding: 10px 0 34px; }
.pp-welcome .pp-opening-label { font-size: clamp(17px, 1.5vw, 22px); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.pp-welcome h1 {
  margin: 18px 0 36px;
  font: 800 clamp(84px, 11.2vw, 172px)/.84 var(--sans);
  letter-spacing: -.065em;
  color: var(--ink);
}
/* "Welcome to" in the serif, set small against the heavy name: the page's first
   piece of type contrast. */
.pp-welcome .pp-meet {
  display: block;
  margin-bottom: .12em;
  font: italic 400 .36em/1 var(--serif);
  letter-spacing: -.01em;
}
.pp-title-dot { color: var(--white); }
/* The art lies across the end of the name: the phone's corner comes down over the
   last letters, as a paper cut-out would on a pasted-up page. The hand is cropped
   flat at the wrist, so the picture runs off the right edge of the screen. */
.pp-welcome-art {
  position: relative;
  z-index: 2;
  width: auto;
  justify-self: stretch;
  margin: 0 calc(-1 * max(var(--gutter), (100vw - 1310px) / 2)) 0 -36% !important;
  pointer-events: none;
  transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -8px), 0);
}
.pp-welcome-art img { width: 100%; max-height: min(640px, 72vh); object-fit: contain; object-position: right center; filter: var(--cut); }
.pp-welcome-rule { max-width: 1310px; margin: 6px auto 0; display: flex; align-items: center; gap: 12px; }
.pp-welcome-rule span { height: 2px; background: var(--white); flex: 1; opacity: .9; }
.pp-welcome-rule i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--white); }
.blk--navy .pp-welcome-rule i, .pp-voice .pp-welcome-rule i { background: var(--amber); }

/* --- home: our voice, some of our work, the founders --------------------------------- */

.pp-voice {
  --glow-x: 30%;
  --glow-y: 14%;
  margin: 0;
  padding: calc(var(--hdr) + clamp(28px, 5vh, 56px)) max(var(--gutter), calc(50% - 640px)) clamp(80px, 9vw, 120px);
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
  column-gap: clamp(40px, 6.5vw, 100px);
  align-items: center;
}
/* the one full photographed scene: a print laid on the navy, turned a touch */
.pp-voice-art {
  padding: 10px;
  background: #F4EFE4;
  border-radius: 6px;
  transform: rotate(-2deg);
  box-shadow: var(--lift);
}
.pp-voice-art img { border-radius: 2px; }
.pp-voice h2 {
  font: 800 clamp(44px, 4.8vw, 76px)/.98 var(--sans);
  letter-spacing: -.045em;
  max-width: 13ch;
  text-wrap: balance;
}
.pp-voice h2 em {
  font: italic 400 1.08em/1 var(--serif);
  letter-spacing: -.01em;
  color: var(--amber);
}
.pp-voice-copy > p { font-size: 18px; line-height: 1.7; max-width: 44ch; margin: 28px 0 0; color: rgba(255, 255, 255, .9); }

.pp-voice > .pp-ourwork,
.pp-voice > .pp-voice-bridge,
.pp-voice > .pp-founders,
.pp-voice > .pp-founders-close { grid-column: 1 / -1; justify-self: center; }

/* Some of Our Work: the reel, straight under the claim it proves. */
.pp-ourwork {
  width: min(100%, 1180px);
  margin-top: clamp(72px, 10vh, 128px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 44px);
  align-items: end;
}
.pp-ourwork-title {
  grid-column: 1 / -1;
  margin: 0 0 clamp(22px, 3vw, 36px) !important;
  font: 800 clamp(44px, 5.6vw, 88px)/.92 var(--sans);
  letter-spacing: -.05em;
}
.pp-ourwork-title .pp-kicker {
  display: block;
  font: italic 400 .5em/1 var(--serif);
  letter-spacing: 0;
  color: var(--amber);
  margin-bottom: .1em;
}
.pp-ourwork .pp-vlabel {
  align-self: stretch;
  color: var(--amber);
  font: 600 11px/1 var(--sans);
  letter-spacing: .34em;
  text-transform: uppercase;
  text-align: right;
}
.pp-reel { position: relative; width: 100%; }
.pp-reel video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ink);
  border-radius: 18px;
  box-shadow: var(--lift);
}
.pp-reel-sound {
  position: absolute;
  right: clamp(12px, 1.6vw, 22px);
  bottom: clamp(12px, 1.6vw, 22px);
  padding: 11px 16px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: 700 11px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 1px 1px 0 #fff, 1px 2px 2px rgba(0, 0, 0, .35), 6px 12px 22px -8px rgba(0, 0, 0, .6);
  transition: background-color .2s ease, transform .2s ease;
}
.pp-reel-sound:hover, .pp-reel-sound[aria-pressed="true"] { background: var(--amber); }
.pp-reel-sound:hover { transform: translateY(-2px); }

.pp-voice-bridge { width: min(100%, 1100px); margin-top: clamp(80px, 11vh, 140px); text-align: center; }
.pp-voice-lead { font-size: 18px; line-height: 1.6; margin: 0 0 clamp(10px, 1.4vh, 16px) !important; color: rgba(255, 255, 255, .86); }
.pp-voice-belief {
  max-width: 24ch;
  margin: 0 auto !important;
  font: 400 clamp(36px, min(4.4vw, 7vh), 68px)/1.02 var(--serif);
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* The two founders: each on a sheet of navy paper laid on the navy, turned a little
   towards the other. Name, then the paper arrow (motion.js) drawing down to the
   face, then the face, large, and what each brings. */
.pp-founders {
  width: min(100%, 1120px);
  margin-top: clamp(36px, 6vh, 64px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
}
.pp-founder {
  --pw: min(32vh, 300px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(28px, 3.4vw, 44px) clamp(20px, 2.6vw, 36px) clamp(28px, 3vw, 40px);
  border-radius: 24px;
  background-color: var(--navy-lit);
  background-image:
    var(--grain-strong),
    radial-gradient(70% 60% at 50% 55%, rgba(83, 139, 195, .32), rgba(83, 139, 195, 0) 72%);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: var(--lift);
  transform: rotate(-1deg);
}
.pp-founder + .pp-founder { transform: rotate(1deg); }
.pp-founder-name {
  font: 800 clamp(32px, min(3.2vw, 5vh), 50px)/.95 var(--sans);
  letter-spacing: -.045em;
  color: var(--white);
}
.pp-founder-name .pp-surname { display: block; font: italic 400 .86em/1.05 var(--serif); letter-spacing: 0; color: var(--amber); }
.pp-founder-name + .pp-founder-photo { margin-top: 18px; }
.pp-founder-photo { margin: 0 0 clamp(10px, 1.6vh, 18px) !important; transition: opacity .45s ease, transform .7s cubic-bezier(.2, 1.35, .4, 1); }
.pp-founder-photo img { width: min(100%, var(--pw)); height: auto; margin: 0 auto; filter: var(--cut); }
.pp-founder-photo.is-waiting { opacity: 0; transform: translateY(-12px) scale(.9) rotate(-3deg); }
.pp-founder + .pp-founder .pp-founder-photo.is-waiting { transform: translateY(-12px) scale(.9) rotate(3deg); }
.pp-founder p { max-width: 40ch; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .88); text-wrap: balance; }
.pp-founder-arrow {
  display: block;
  height: calc(.5 * var(--pw));
  width: auto;
  margin: clamp(6px, 1vh, 12px) auto clamp(2px, .6vh, 8px);
  overflow: visible;
  pointer-events: none;
}
.pp-founders-close { width: min(100%, 760px); margin-top: clamp(40px, 6vh, 72px); text-align: center; }
.pp-founders-close .pp-welcome-rule { max-width: 200px; margin: 0 auto clamp(16px, 2.2vh, 24px); }
.pp-founders-close p { font-size: 18px; line-height: 1.6; text-wrap: balance; }
.pp-founders-close em { font: italic 400 1.4em/1.2 var(--serif); letter-spacing: 0; color: var(--white); }
.pp-founders-close .pp-founders-together { margin-top: clamp(10px, 1.6vh, 16px); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.pp-founders-close .pp-opening-link { margin-top: clamp(22px, 3.4vh, 34px); min-width: 170px; }

/* --- home: clients --------------------------------------------------------------------- */

.pp-clients {
  padding: calc(var(--hdr) + clamp(22px, 4vh, 48px)) 0 calc(var(--tab-h) + var(--file-r) + clamp(28px, 5vh, 56px));
  text-align: center;
}
.pp-clients .pp-eyebrow { margin: 0 auto clamp(10px, 2vh, 20px); }
.pp-clients-title {
  margin: 0 auto clamp(8px, 2vh, 20px) !important;
  font: 800 clamp(34px, 4vw, 60px)/1 var(--sans);
  letter-spacing: -.045em;
}
.pp-clients-title em { font: italic 400 1.05em/1 var(--serif); letter-spacing: 0; }
.marquee-wrapper {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* room for the chips' shadows, which fall down and to the right */
  padding: 22px 0 46px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: clamp(22px, 3vw, 48px);
  padding-left: clamp(22px, 3vw, 48px);
  animation: pp-marquee 48s linear infinite;
}
.marquee-wrapper:hover .marquee-track { animation-play-state: paused; }
@keyframes pp-marquee { to { transform: translateX(-50%); } }
.brand-chip {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(176px, min(19vw, 26vh), 270px);
  height: clamp(92px, min(10vw, 13.5vh), 140px);
  overflow: hidden;
  background: var(--white);
  border: var(--line);
  border-radius: 18px;
  box-shadow: var(--lift);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}
.brand-chip:nth-child(odd) { transform: rotate(-1.2deg); }
.brand-chip:nth-child(even) { transform: rotate(1deg); }
.brand-chip:hover { transform: translateY(-5px) rotate(0); box-shadow: var(--lift-up), 0 0 0 3px var(--amber); }
/* the five card files cover the chip (each carries its own ground and margin); the
   two marks supplied as logos alone sit contained on the paper */
.brand-logo { width: 100%; height: 100%; object-fit: cover; }
.brand-chip--mark .brand-logo { object-fit: contain; padding: 16% 15%; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; padding: 0 var(--gutter); } .marquee-track > [aria-hidden] { display: none; } }

/* --- home: services ------------------------------------------------------------------- */

.pp-services { --glow-x: 50%; --glow-y: 30%; padding: clamp(110px, 12vw, 170px) var(--gutter) clamp(72px, 8vw, 120px); }
.pp-grid {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(22px, 2.6vw, 36px);
}

/* --- home: results ---------------------------------------------------------------------- */

/* Navy, so the figures can be amber (8.00). Each brand's own tile is pinned over the
   corner of its figure, the way a clipping is paper-clipped to a note. */
.pp-results {
  --glow-x: 50%;
  --glow-y: 50%;
  padding: clamp(84px, 10vw, 140px) var(--gutter) clamp(84px, 10vw, 130px);
}
.pp-results-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(24px, 4vw, 64px);
}
.pp-results .pp-vlabel { color: var(--amber); font: 600 11px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; }
.pp-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pp-stats li {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(36px, 4vw, 56px) clamp(20px, 3vw, 44px) 0;
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.pp-stat-num {
  display: block;
  font: 800 clamp(66px, 8.2vw, 136px)/.86 var(--sans);
  letter-spacing: -.06em;
  color: var(--amber);
  text-shadow: -1px -1px 0 rgba(255, 255, 255, .12), 2px 4px 2px rgba(0, 0, 0, .35), 10px 18px 30px rgba(0, 0, 0, .45);
}
.pp-stat-metric {
  display: block;
  margin-top: 14px;
  font: italic 400 clamp(26px, 2.4vw, 36px)/1.05 var(--serif);
  color: var(--white);
}
.pp-stat-brand {
  display: block;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
}
.pp-stat-metric + .pp-stat-brand { margin-top: 26px; }
.pp-stat-brand i { display: block; margin-top: 4px; font-style: normal; font-weight: 400; font-size: 14px; color: rgba(255, 255, 255, .74); }
.pp-stat-logo {
  position: absolute;
  z-index: 2;
  top: 0;
  right: clamp(8px, 2vw, 36px);
  width: clamp(88px, 8.4vw, 124px);
  height: auto;
  aspect-ratio: 1024 / 590;
  object-fit: cover;
  border-radius: 10px;
  transform: rotate(5deg);
  box-shadow: var(--lift);
}
.pp-stats li:nth-child(2) .pp-stat-logo { transform: rotate(-4deg); }

/* --- home: selected archives (the case deck) ------------------------------------------- */

/* no position here: the drawer makes every file sticky, and a stronger rule would
   turn its --file-top into a relative offset that drags the deck up over the files
   before it */
.scroll-reveal-wrapper { height: 400vh; }
.scroll-reveal-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: calc(var(--hdr) + 12px) var(--gutter) 40px;
}
.scroll-reveal-header { text-align: center; margin-bottom: clamp(24px, 4vh, 40px); }
.scroll-reveal-header h2 { font: 800 clamp(40px, 5.4vw, 88px)/1 var(--sans); letter-spacing: -.05em; }
.scroll-reveal-header h2 em { font: italic 400 1.04em/1 var(--serif); letter-spacing: 0; }
.scroll-reveal-header .pp-eyebrow { margin: 14px auto 0; }
.pp-swipe-hint { display: none; }
.scroll-reveal-container {
  display: flex;
  gap: clamp(14px, 1.6vw, 22px);
  flex: 1;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}
.reveal-card {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 20px;
  background: var(--white);
  box-shadow: var(--lift);
  will-change: transform;
  transition: box-shadow .3s ease;
}
.reveal-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.reveal-card:hover { box-shadow: var(--lift-up); }
.reveal-card:hover > img { transform: scale(1.04); }
.reveal-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  height: 42%;
  padding: 26px 20px;
  background: linear-gradient(180deg, rgba(15, 34, 61, 0) 0%, rgba(15, 34, 61, .9) 60%, #0F223D 100%);
}
.reveal-number {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
  font: 800 14px/1 var(--sans);
}
.reveal-title { margin: 0; font: 800 clamp(24px, 2.6vw, 44px)/1.02 var(--sans); letter-spacing: -.04em; color: var(--white); }

/* --- testimonial: quote, patch, film (home and testimonials.html) ---------------------- */

.pp-words {
  --glow-x: 72%;
  --glow-y: 50%;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(72px, 8vw, 120px) max(var(--gutter), calc(50% - 660px));
}
.pp-words-copy { display: flex; flex-direction: column; align-items: flex-start; }
.pp-words-copy .pp-eyebrow { margin-bottom: 26px; }
.pp-quote {
  margin: 0;
  max-width: 24ch;
  font: 400 clamp(32px, 3.4vw, 54px)/1.08 var(--serif);
  letter-spacing: -.005em;
  text-wrap: pretty;
}
.pp-quote em { font-style: italic; color: var(--amber); }
.blk--white .pp-quote em, .sec--cream .pp-quote em { color: inherit; text-decoration: underline 3px var(--amber); text-underline-offset: 6px; }
/* The attribution patch: a paper label pinned under the quote, turned a touch. */
.pp-quote-patch {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 20px);
  margin: clamp(28px, 3vw, 44px) 0 0 !important;
  padding: 10px clamp(20px, 2vw, 28px) 10px 10px;
  background: var(--white);
  color: var(--ink);
  border-radius: 16px;
  transform: rotate(-1.5deg);
  box-shadow: var(--lift);
}
.pp-quote-patch img {
  flex: none;
  width: clamp(76px, 7vw, 96px);
  height: clamp(46px, 4.2vw, 58px);
  object-fit: cover;
  border-radius: 9px;
}
.pp-quote-patch figcaption { display: grid; gap: 4px; }
.pp-quote-patch strong { font-size: clamp(17px, 1.4vw, 21px); font-weight: 800; letter-spacing: -.02em; }
.pp-quote-patch span { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.pp-quote-patch:not(:has(img)) { padding-left: clamp(20px, 2vw, 28px); }
/* a logo supplied as a mark alone (Anokha Estates) sits contained, not cropped */
.pp-quote-patch .pp-quote-mark { object-fit: contain; padding: 4px; background: var(--navy); }
/* the amber tab on the patch's edge */
.pp-quote-patch::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -9px;
  width: 54px;
  height: 18px;
  margin-left: -27px;
  border-radius: 3px;
  background: rgba(232, 163, 61, .85);
  transform: rotate(3deg);
  box-shadow: 1px 2px 3px rgba(0, 0, 0, .15);
}
.pp-quote-patch { position: relative; }
.pp-testimonial-video { display: flex; align-items: center; justify-content: center; margin: 0; }
.pp-testimonial-video video {
  width: 100%;
  max-width: min(340px, 100%);
  aspect-ratio: 9 / 16;
  max-height: min(76vh, 600px);
  border-radius: 20px;
  background: var(--ink);
  transform: rotate(1.5deg);
  box-shadow: var(--lift);
}

/* --- contact block and footer (every page) --------------------------------------------- */

.pp-contact {
  --glow-x: 50%;
  --glow-y: 30%;
  padding: clamp(80px, 9vw, 130px) var(--gutter) clamp(40px, 4vw, 56px);
}
.pp-contact-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: clamp(48px, 6vw, 88px); }
.pp-contact-head .pp-eyebrow { margin-bottom: clamp(16px, 2vw, 26px); }
.pp-contact-title {
  max-width: 14ch;
  font: 800 clamp(46px, 6.6vw, 110px)/.92 var(--sans);
  letter-spacing: -.055em;
  text-wrap: balance;
}
.pp-contact-title em { display: block; font: italic 400 1.02em/1 var(--serif); letter-spacing: -.01em; }
.pp-foot-grid {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 28px clamp(24px, 4vw, 64px);
  padding-top: clamp(26px, 2.6vw, 36px);
  border-top: 1px solid rgba(15, 34, 61, .28);
}
.pp-foot-grid .pp-eyebrow, .pp-direct .pp-eyebrow, .pp-feature-copy .pp-eyebrow { margin-bottom: 14px; font-size: 11px; font-weight: 600; letter-spacing: .3em; line-height: 1.2; }
.pp-foot-grid a, .pp-foot-grid p { font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; }
.pp-foot-call { display: grid; gap: 10px; align-content: start; }
.pp-foot-call a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; width: fit-content; }
.pp-foot-call b { font: italic 400 1.1em/1 var(--serif); letter-spacing: 0; }
.pp-footer { padding: 0 var(--gutter) clamp(28px, 3vw, 40px); position: relative; }
.blk--white + .pp-footer { padding-top: clamp(40px, 5vw, 64px); }
.pp-foot-base {
  max-width: 1480px;
  margin: 0 auto;
  padding-top: clamp(18px, 1.8vw, 24px);
  border-top: 1px solid rgba(15, 34, 61, .28);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.pp-foot-base .pp-logo { color: var(--ink); font-size: 22px; }

/* --- inner pages: the opening ----------------------------------------------------------- */

.pp-page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--hdr) + clamp(36px, 5vw, 72px)) var(--gutter) clamp(28px, 3vw, 44px);
  --glow-x: 70%;
  --glow-y: 50%;
}
.pp-page-hero-inner {
  position: relative;
  max-width: 1310px;
  min-height: min(520px, 62vh);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.pp-page-hero-copy { position: relative; z-index: 1; }
.pp-page-hero h1 {
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  font: 800 clamp(64px, 10vw, 156px)/.86 var(--sans);
  letter-spacing: -.065em;
}
.pp-page-hero h1 em { display: block; font: italic 400 .62em/1 var(--serif); letter-spacing: -.01em; }
.pp-page-hero.blk--navy h1 em { color: var(--amber); }
/* the art comes in over the end of the title, as on the home page */
.pp-page-hero .pp-opening-art {
  position: relative;
  z-index: 2;
  margin-left: -18% !important;
  pointer-events: none;
  transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -8px), 0);
}
.pp-page-hero .pp-opening-art img { width: 100%; max-height: min(560px, 64vh); object-fit: contain; filter: var(--cut); }
.pp-page-hero .pp-welcome-rule { position: relative; z-index: 3; margin-top: clamp(18px, 2vw, 30px); }
.pp-hero--plain .pp-welcome-rule :is(span, i) { background: var(--ink); }
.pp-hero--plain .pp-welcome-rule i { background: var(--amber); }
.blk--steel.pp-page-hero .pp-welcome-rule i { background: var(--white); }

/* About us: the two of them, back to back, standing on the rule at the foot of the
   opening (the photograph is cut flat at the bottom), large, over the end of the title. */
.pp-hero--about { padding-bottom: 0; }
.pp-hero--about .pp-page-hero-inner { align-items: end; min-height: min(640px, 78vh); }
.pp-hero--about .pp-page-hero-copy { align-self: center; padding-bottom: 8vh; }
.pp-hero--about h1 em { display: inline; font-size: .74em; margin-left: .08em; }
/* clear of the title: the client wants distance between the two here */
.pp-hero--about .pp-opening-art { margin-left: clamp(32px, 5vw, 80px) !important; align-self: end; }
.pp-hero--about .pp-opening-art img { max-height: min(700px, 78vh); object-position: 50% 100%; }
.pp-hero--about .pp-welcome-rule { margin-top: 0; padding-bottom: clamp(28px, 3vw, 44px); }

/* Services: the collage, big, over the title. */
.pp-hero--services .pp-page-hero-inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.pp-hero--services .pp-opening-art img { max-height: min(600px, 70vh); }

/* Testimonials: the hand holds its phone up out of a steel disc. */
.pp-hero--disc .pp-page-hero-inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
.pp-hero--disc h1 { font-size: clamp(60px, 8.2vw, 132px); }
.pp-hero--disc .pp-opening-art {
  justify-self: center;
  width: min(100%, 470px);
  margin-left: 0 !important;
  aspect-ratio: 1;
  display: grid;
  place-items: end center;
}
.pp-hero--disc .pp-opening-art::before {
  content: '';
  position: absolute;
  inset: 12% 4% 0;
  border-radius: 50%;
  background-color: var(--steel);
  background-image: var(--grain-strong), radial-gradient(70% 70% at 35% 30%, rgba(165, 205, 245, .6), rgba(165, 205, 245, 0) 75%);
  box-shadow: var(--lift);
  z-index: -1;
}
.pp-hero--disc .pp-opening-art img { width: 100%; max-height: none; clip-path: inset(-40% -20% 0 -20% round 0 0 50% 50%); }

/* Contact: the corded phone — the voice block's scene — printed and laid on the steel. */
.pp-hero--call .pp-page-hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); }
.pp-hero--call .pp-opening-art { padding: 10px; background: #F4EFE4; border-radius: 6px; transform: rotate(2deg) translate3d(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -8px), 0); box-shadow: var(--lift); margin-left: 0 !important; }
.pp-hero--call .pp-opening-art img { filter: none; border-radius: 2px; max-height: none; }
.pp-hero--call h1 { font-size: clamp(52px, 6.6vw, 104px); }

/* --- inner pages: long-form entries (services.html, studio.html) ------------------------ */

.pp-features { padding: clamp(96px, 10vw, 150px) var(--gutter) clamp(80px, 9vw, 140px); }
.pp-feature {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 112px);
  align-items: start;
  scroll-margin-top: calc(var(--hdr) + 60px);
}
.pp-feature + .pp-feature {
  margin-top: clamp(80px, 9vw, 140px);
  padding-top: clamp(80px, 9vw, 140px);
  border-top: 1px solid rgba(15, 34, 61, .2);
  scroll-margin-top: calc(var(--hdr) + 60px - clamp(80px, 9vw, 140px));
}
.pp-feature-art { position: sticky; top: calc(var(--hdr) + 80px); }
.pp-feature-art .pp-card-num--art { margin: 0; }
/* the founders' photographs are cut flat at the bottom: each stands on its well's
   floor, head and shoulders out through the top */
.pp-feature-art--portrait .pp-card-num--art { aspect-ratio: 1; }
.pp-feature-art--portrait .pp-card-num--art img { bottom: 0; left: 4%; width: 92%; height: 128%; aspect-ratio: auto; clip-path: inset(-60% -8% 0 -8%); }
.pp-feature-copy { max-width: 64ch; }
.pp-feature-copy h2 { font: 800 clamp(38px, 4vw, 64px)/.98 var(--sans); letter-spacing: -.05em; }
.pp-feature-num { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 50%; background: var(--amber); color: var(--ink); font: 800 15px/1 var(--sans); box-shadow: var(--lift); }
.pp-feature-role { margin-top: 16px; }
.pp-feature-copy .pp-feature-lead {
  margin: clamp(20px, 2vw, 28px) 0 clamp(24px, 2.6vw, 34px) !important;
  font: 400 clamp(28px, 2.8vw, 44px)/1.08 var(--serif);
  letter-spacing: -.005em;
}
.pp-feature-copy p { font-size: 17.5px; line-height: 1.75; margin: 0 0 1em; text-wrap: pretty; }
.pp-feature-copy > p:last-child { margin-bottom: 0; }
.pp-feature-list {
  list-style: none;
  margin: clamp(26px, 3vw, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.pp-feature-list li { padding: 20px 22px 22px; background: var(--white); border: var(--line); border-radius: 16px; box-shadow: var(--lift); }
.pp-feature-list h3 { margin: 0 0 8px; font: 800 20px/1.2 var(--sans); letter-spacing: -.02em; }
.pp-feature-list h3::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--amber); vertical-align: .1em; }
.pp-feature-list p { font-size: 16px; line-height: 1.65; margin: 0; }

/* --- testimonials.html ---------------------------------------------------------------- */

.pp-films { padding: clamp(40px, 5vw, 80px) 0; }
.pp-films .pp-words { padding-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(48px, 6vw, 96px); }
@media (min-width: 821px) { .pp-words--flip > .pp-testimonial-video { order: -1; } .pp-words--flip .pp-testimonial-video video { transform: rotate(-1.5deg); } }
.pp-reviews { --glow-x: 50%; --glow-y: 30%; padding: clamp(80px, 8vw, 120px) var(--gutter); }
.pp-reviews-inner { max-width: 1400px; margin: 0 auto; }
.pp-reviews-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: clamp(36px, 4vw, 56px); }
.pp-reviews-head h2 { font: 800 clamp(40px, 4.6vw, 72px)/1 var(--sans); letter-spacing: -.05em; }
.pp-reviews-head h2 em { font: italic 400 1.04em/1 var(--serif); letter-spacing: 0; color: var(--amber); }
.pp-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(22px, 2.6vw, 36px);
  align-items: start;
}
.pp-review {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(24px, 2.6vw, 34px);
  background-color: var(--white);
  background-image: linear-gradient(155deg, #FFFFFF 0%, #FAF7F1 100%);
  color: var(--ink);
  border-radius: 20px;
  box-shadow: var(--lift);
}
.pp-review:nth-child(3n + 1) { transform: rotate(-.8deg); }
.pp-review:nth-child(3n + 2) { transform: rotate(.6deg); margin-top: 28px; }
.pp-review:nth-child(3n) { transform: rotate(-.4deg); }
.pp-review-who { display: flex; align-items: center; gap: 14px; }
.pp-review-photo { flex: none; width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: 50% 35%; border: 3px solid var(--white); box-shadow: 1px 2px 2px rgba(0, 0, 0, .3), 4px 8px 14px -4px rgba(0, 0, 0, .4); }
.pp-review-logo { flex: none; width: 112px; height: 66px; object-fit: cover; border-radius: 9px; box-shadow: 1px 2px 2px rgba(10, 18, 34, .18); }
.pp-review blockquote { margin: 0; font: 400 clamp(20px, 1.6vw, 23px)/1.42 var(--serif); text-wrap: pretty; }
.pp-review blockquote p { margin: 0; }
.pp-review blockquote p + p { margin-top: .8em; }
.pp-review figcaption { margin-top: auto; padding-top: 18px; border-top: 2px solid var(--amber); display: grid; gap: 4px; }
.pp-review figcaption strong { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.pp-review figcaption span { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }

/* --- work.html ------------------------------------------------------------------------ */

.pp-cases { --glow-x: 50%; --glow-y: 20%; padding: clamp(90px, 10vw, 150px) var(--gutter) clamp(80px, 9vw, 130px); }
.glass-grid {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(24px, 2.6vw, 36px);
}
.glass-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 0 clamp(26px, 2.6vw, 34px);
  overflow: hidden;
  background-color: var(--white);
  background-image: linear-gradient(155deg, #FFFFFF 0%, #FAF7F1 100%);
  color: var(--ink);
  border-radius: 20px;
  box-shadow: var(--lift);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}
.glass-card:hover { transform: translateY(-6px); box-shadow: var(--lift-up); }
.glass-card > :not(.case-logo) { margin-left: clamp(24px, 2.6vw, 34px); margin-right: clamp(24px, 2.6vw, 34px); }
.case-logo { margin: 0 0 clamp(22px, 2.2vw, 30px); box-shadow: 0 1px 0 rgba(15, 34, 61, .1); }
.case-logo img { width: 100%; height: clamp(116px, 11vw, 150px); object-fit: cover; }
.case-index { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.case-index b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--amber); color: var(--ink); font: 800 13px/1 var(--sans); letter-spacing: 0; }
.glass-card h2 { margin: 0 0 16px; font: 800 clamp(30px, 2.6vw, 38px)/1 var(--sans); letter-spacing: -.045em; }
.glass-card > p { font-size: 16.5px; line-height: 1.7; margin-bottom: 28px; color: var(--ink-soft); }
.case-stat { display: flex; gap: 28px; margin-bottom: 32px; padding-top: 18px; border-top: 2px solid var(--amber); }
.case-stat-num { font: 800 34px/1 var(--sans); letter-spacing: -.04em; }
.case-stat-label { margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.glass-btn { margin-top: auto; align-self: flex-start; }

/* the case study, opened: a sheet of paper over the page */
.glass-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 17, 31, .55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.glass-modal-overlay.active { opacity: 1; pointer-events: auto; }
.glass-modal {
  position: relative;
  width: min(92%, 860px);
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(28px, 5vw, 64px);
  background-color: var(--cream);
  background-image: var(--grain-soft), radial-gradient(70% 40% at 30% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%);
  color: var(--ink);
  border-radius: 22px;
  box-shadow: inset 1px 1px 0 #fff, 2px 4px 6px rgba(0, 0, 0, .2), 24px 40px 80px -20px rgba(0, 0, 0, .6);
  transform: translateY(30px) scale(.97);
  opacity: 0;
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.1), opacity .35s ease;
}
.glass-modal-overlay.active .glass-modal { transform: none; opacity: 1; }
.modal-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -12px -12px 0 12px;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--lift);
  transition: background-color .2s ease;
}
.modal-close:hover { background: var(--amber); }
.glass-modal #modal-title { margin: 0 0 24px; font: 800 clamp(38px, 5.4vw, 64px)/.95 var(--sans); letter-spacing: -.05em; }
#modal-desc { font-size: 17.5px; line-height: 1.75; margin-bottom: 36px; }
#modal-desc h4 { margin: 34px 0 12px; font: 800 22px/1.2 var(--sans); letter-spacing: -.02em; }
#modal-desc h4::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 10px; border-radius: 50%; background: var(--amber); vertical-align: .05em; }
#modal-desc p, #modal-desc li { color: var(--ink); }
#modal-desc strong { font-weight: 800; }
#modal-desc ul { padding-left: 0; list-style: none; }
#modal-desc li { position: relative; padding-left: 26px; }
#modal-desc li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 10px; height: 2px; background: var(--amber); }
#modal-stats { display: flex; gap: 40px; }
#modal-stats[hidden] { display: none; }
.cs-meta, .cs-facts {
  display: grid;
  margin: 0 0 32px;
  overflow: hidden;
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--lift);
}
.cs-meta { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.cs-meta > div, .cs-facts > div { padding: 16px 18px; box-shadow: -1px -1px 0 rgba(15, 34, 61, .1); }
.cs-meta dt, .cs-facts dt { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.cs-meta dd { margin: 6px 0 0; font-size: 16px; line-height: 1.5; }
.cs-more { margin: 0 0 28px; border-block: 1px solid rgba(15, 34, 61, .18); }
.cs-more + .cs-more { margin-top: -28px; border-top: 0; }
.cs-more > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0; cursor: pointer; }
.cs-more > summary::-webkit-details-marker { display: none; }
.cs-more > summary h4 { margin: 14px 0 !important; }
.cs-more > summary::after {
  content: '';
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 12px no-repeat, var(--white);
  box-shadow: var(--lift);
  transition: transform .25s ease, background-color .2s ease;
}
.cs-more > summary:hover::after { background-color: var(--amber); }
.cs-more[open] > summary::after { transform: rotate(45deg); }
.cs-more > :not(summary):last-child { margin-bottom: 20px !important; }
.cs-more::details-content { block-size: 0; overflow: clip; transition: block-size .35s ease, content-visibility .35s allow-discrete; }
.cs-more[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { .cs-more { interpolate-size: allow-keywords; } }
@property --fill { syntax: '<number>'; inherits: false; initial-value: 0; }
.cs-numbers { margin: 4px 0 32px; }
.cs-caption { margin: 0 0 18px !important; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cs-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 30px; }
.cs-hero-stats > div { padding: 20px; border-radius: 16px; background: var(--white); box-shadow: var(--lift); }
.cs-hero-stats strong { display: block; font: 800 clamp(36px, 4.2vw, 52px)/1 var(--sans); letter-spacing: -.05em; }
.cs-hero-stats span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; }
.cs-hero-stats > div:has(.cs-key) { background-color: var(--navy); background-image: var(--grain-strong); }
.cs-hero-stats > div:has(.cs-key) strong { color: var(--amber); }
.cs-hero-stats > div:has(.cs-key) span { color: var(--white); }
.cs-ring-stat { display: flex; align-items: center; gap: 14px; }
.cs-hero-stats .cs-ring {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: conic-gradient(var(--ink) calc(var(--fill) * 1%), rgba(15, 34, 61, .12) 0);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
          mask: radial-gradient(circle, transparent 54%, #000 55%);
  transition: --fill 1.2s cubic-bezier(.16, 1, .3, 1);
}
.cs-ring.is-grown { --fill: var(--p); }
.cs-chart { margin: 0 0 28px; }
.cs-chart figcaption { margin-bottom: 14px; font: 800 16px/1.3 var(--sans); }
.cs-bar + .cs-bar { margin-top: 14px; }
.cs-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 7px; font-size: 15px; line-height: 1.4; }
.cs-bar-head b { flex: none; font: 800 21px/1 var(--sans); letter-spacing: -.02em; }
.cs-bar-track { height: 16px; border-radius: 999px; background: rgba(15, 34, 61, .1); box-shadow: inset 1px 1px 2px rgba(15, 34, 61, .2); overflow: hidden; }
.cs-bar-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--steel); transition: width 1.1s cubic-bezier(.16, 1, .3, 1); }
.cs-bar--key .cs-bar-track i { background: var(--amber); }
.cs-bar.is-grown .cs-bar-track i { width: var(--w); }
.cs-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.cs-facts dd { margin: 6px 0 0; font: 800 21px/1.2 var(--sans); letter-spacing: -.02em; }
.cs-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; align-items: start; margin-bottom: 24px; }
.cs-posts .ig-embed { margin: 0; min-height: 360px; display: grid; place-items: center; background: var(--white); border-radius: 14px; box-shadow: var(--lift); }
.cs-posts .ig-embed a { font-weight: 700; }
.cs-posts .instagram-media { min-width: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 14px !important; }
.cs-video { margin: 0 0 24px; overflow: hidden; background: #000; border-radius: 16px; box-shadow: var(--lift); }
.cs-video video { width: 100%; height: auto; aspect-ratio: 16 / 9; }
body.modal-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .cs-more::details-content, .cs-more > summary::after, .cs-bar-track i, .cs-hero-stats .cs-ring { transition: none; } }

/* --- contact.html ----------------------------------------------------------------------- */

.pp-enquiry { padding: clamp(80px, 9vw, 140px) var(--gutter); }
.pp-enquiry-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.pp-form {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.6vw, 32px);
  padding: clamp(26px, 3.4vw, 48px);
  background-color: var(--white);
  background-image: linear-gradient(155deg, #FFFFFF 0%, #FAF7F1 100%);
  border-radius: 22px;
  box-shadow: var(--lift);
}
.pp-form h2, .pp-direct h2 { font: 800 clamp(30px, 3vw, 44px)/1 var(--sans); letter-spacing: -.045em; }
.pp-form label { display: block; }
.pp-form label > span { display: block; margin-bottom: 10px; }
.pp-form input, .pp-form textarea {
  width: 100%;
  padding: 14px 16px;
  font: 400 17px/1.5 var(--sans);
  color: var(--ink);
  background: var(--cream);
  border: 1px solid rgba(15, 34, 61, .16);
  border-radius: 12px;
  box-shadow: inset 1px 2px 3px rgba(15, 34, 61, .1);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pp-form input:focus, .pp-form textarea:focus { outline: none; border-color: var(--amber); box-shadow: inset 1px 2px 3px rgba(15, 34, 61, .1), 0 0 0 3px rgba(232, 163, 61, .45); }
.pp-form textarea { resize: vertical; min-height: 150px; }
.pp-form-send { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pp-form [data-sent] { display: none; font-size: 15px; }
.pp-direct { display: grid; gap: clamp(26px, 3vw, 40px); position: sticky; top: calc(var(--hdr) + 40px); }
.pp-direct > div { display: grid; gap: 10px; }
.pp-direct a, .pp-direct p { font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1.4; }
.pp-direct a { width: fit-content; }
.pp-direct b { font: italic 400 1.1em/1 var(--serif); letter-spacing: 0; margin-right: 10px; }

/* --- the archive drawer -----------------------------------------------------------------
   The landing page only: every top-level section of index.html is a file in a drawer,
   [data-file] in the markup, carrying the label for its tab. Each file after the first
   is cut as a folder — a labelled tab standing up from its top edge and rounded
   shoulders — and overlaps the file before it by the tab and one shoulder, so that
   file shows beside the tab. assets/drawer.js adds the motion: each file settles and
   rests a moment, then the next slides over it.

   The shape uses neither a mask nor clip-path, which would cut off card shadows and the
   tab itself. The tab strip is a transparent top border with the section's own
   background clipped to the padding box below it; the shoulders are elliptical outer
   radii (R across, R + tab down) whose inner radius, less the border, comes out a round
   R. The tab is ::before inside that strip — an amber index tab, ink lettering (7.40) —
   and ::after is the shadow the file casts on the one behind. */
body { counter-reset: file; }
[data-file] {
  counter-increment: file;
  position: relative;
  isolation: isolate;
}
[data-file] ~ [data-file] {
  /* --rest-before is the room for the pause before this file slides in (drawer.js) */
  margin-top: calc(var(--rest-before, 0px) - var(--tab-h) - var(--file-r));
  border-top: var(--tab-h) solid transparent;
  border-radius: var(--file-r) var(--file-r) 0 0 / calc(var(--file-r) + var(--tab-h)) calc(var(--file-r) + var(--tab-h)) 0 0;
  background-clip: padding-box !important;
  overflow: visible;
}
[data-file] ~ [data-file]::before {
  all: unset;
  content: counter(file, decimal-leading-zero) "\2003" attr(data-file);
  content: counter(file, decimal-leading-zero) "\2003" attr(data-file) / "";
  position: absolute;
  z-index: 3;
  top: calc(-1 * var(--tab-h));
  left: var(--tab-x, 5%);
  box-sizing: border-box;
  height: calc(var(--tab-h) + 1px);
  display: flex;
  align-items: center;
  padding: 2px 22px 0;
  border-radius: 14px 14px 0 0;
  background-color: var(--amber);
  background-image: var(--grain-strong), linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .45), 0 -8px 16px -10px rgba(8, 14, 26, .45);
  font: 700 11px/1 'Archivo', Arial, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  pointer-events: none;
}
[data-file] ~ [data-file]::after {
  all: unset;
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
  background: linear-gradient(to top, rgba(8, 14, 26, .18), rgba(8, 14, 26, 0));
  pointer-events: none;
}
/* A file without a tab (the close, data-no-tab): no tab strip at all, so only its
   shoulders overlap the file before it. */
[data-file][data-no-tab] { --tab-h: 0px; }
[data-file][data-no-tab]::before { content: none; }
/* The footer is the back of the drawer. It scrolls up over files still held, so it
   paints above them (index.html lifts every section to 10). flow-root because the
   footer has no top padding: without it the base row's top margin collapses through
   and leaves a see-through gap above it. */
footer { position: relative; z-index: 10; isolation: isolate; display: flow-root; }
/* Tabs step along the drawer the way real folder tabs do, four positions. */
[data-file]:nth-of-type(4n + 2) { --tab-x: 5%; }
[data-file]:nth-of-type(4n + 3) { --tab-x: calc(5% + var(--tab-step)); }
[data-file]:nth-of-type(4n)     { --tab-x: calc(5% + 2 * var(--tab-step)); }
[data-file]:nth-of-type(4n + 1) { --tab-x: calc(5% + 3 * var(--tab-step)); }

/* In motion (drawer.js sets .drawer-on, never under reduced motion): each file sticks
   where it stops fitting — at the top when it is shorter than the screen, or with its
   foot on the bottom edge when it is taller, so a long file is read to the end before
   the next one covers it (--file-top). A file being covered sinks back and dims; once
   fully covered it is let loose into the flow again, where it is off screen, so only
   the two or three files in play are ever held. */
.drawer-on [data-file] {
  position: sticky;
  top: var(--file-top, 0px);
}
.drawer-on [data-file].is-loose { position: relative; }
.drawer-on [data-file].is-covered {
  transform: scale(calc(1 - .06 * var(--cover, 0)));
  transform-origin: 50% var(--file-origin, 50%);
  filter: brightness(calc(1 - .5 * var(--cover, 0)));
  will-change: transform, filter;
}

/* --- phones and narrow screens -----------------------------------------------------------
   Over 90% of visitors are on a phone, so every block below has a phone arrangement of
   its own rather than a squeezed desktop one. */

@media (max-width: 1080px) {
  .pp-header nav { gap: 20px; }
  .pp-stats { grid-template-columns: minmax(0, 1fr); }
  .pp-stats li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); padding: 32px 0 34px; }
  .pp-stats li:first-child { border-top: 0; padding-top: 8px; }
  .pp-stat-logo { top: 30px; right: 0; }
  .pp-stats li:first-child .pp-stat-logo { top: 6px; }
}

@media (max-width: 820px) {
  :root { --hdr: 94px; }
  .pp-header-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 54px 40px;
    gap: 0 12px;
    height: auto;
    padding: 0 16px;
  }
  .pp-logo { grid-area: 1 / 1; }
  .pp-enquire { grid-area: 1 / 2; justify-self: end; }
  .pp-header nav {
    grid-area: 2 / 1 / 3 / 3;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
  .pp-header nav a { font-size: 12.5px; padding: 13px 0; text-underline-offset: 6px; }
  .pp-logo { font-size: 21px; gap: 9px; }
  .pp-logo span { width: 25px; height: 25px; font-size: 21px; }
  .pp-enquire { padding: 9px 14px; font-size: 12.5px; gap: 10px; }

  /* home: opening. The name first, then the art lying across its last line and
     running off the right edge, then the button. */
  .pp-welcome { padding: calc(var(--hdr) + 26px) 20px calc(22px + var(--tab-h) + var(--file-r)); }
  .pp-welcome-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pp-welcome-copy { display: contents; }
  .pp-welcome .pp-opening-label { order: 1; font-size: 17px; }
  .pp-welcome h1 { order: 2; margin: 14px 0 0; font-size: clamp(76px, 23vw, 128px); }
  .pp-welcome-art { order: 3; width: 100%; margin: -3vw -20px 0 auto !important; }
  .pp-welcome-art img { max-height: none; }
  .pp-welcome .pp-opening-button { order: 4; justify-self: start; margin-top: 4px; }
  .pp-welcome-rule { margin-top: 22px; }

  /* home: voice. The claim first, then the print. */
  .pp-voice { grid-template-columns: minmax(0, 1fr); padding: calc(var(--hdr) + 36px) 20px 72px; }
  .pp-voice-copy { grid-row: 1; }
  .pp-voice h2 { font-size: clamp(44px, 12.4vw, 64px); }
  .pp-voice-copy > p { font-size: 17px; margin-top: 20px; }
  .pp-voice-art { margin: 36px 6px 0 !important; }
  .pp-ourwork { margin-top: 72px; grid-template-columns: minmax(0, 1fr); }
  .pp-ourwork .pp-vlabel { display: none; }
  .pp-ourwork-title { font-size: clamp(44px, 12.4vw, 64px); }
  .pp-reel { margin: 0 -8px; width: auto; }
  .pp-reel video { border-radius: 14px; }
  .pp-voice-bridge { margin-top: 80px; }
  .pp-voice-lead { font-size: 17px; }
  .pp-voice-belief { font-size: clamp(34px, 10vw, 46px); }
  .pp-founders { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 36px; }
  .pp-founder { --pw: min(66vw, 300px); padding: 30px 22px 32px; }
  .pp-founder-name { font-size: 38px; }
  .pp-founder p { font-size: 17px; }
  .pp-founders-close p { font-size: 17px; line-height: 1.65; }

  /* home: clients */
  .pp-clients-title { padding: 0 20px; }
  .brand-chip { width: 172px; height: 92px; }

  /* home: services — compact cards, the art still out through the top */
  .pp-services { padding: 96px 20px 72px; }
  .pp-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }

  /* home: results */
  .pp-results { padding: 80px 20px 72px; }
  .pp-results-inner { grid-template-columns: minmax(0, 1fr); }
  .pp-results .pp-vlabel { writing-mode: horizontal-tb; transform: none; margin-bottom: 20px; }
  .pp-stat-num { font-size: clamp(76px, 24vw, 112px); }
  .pp-stat-logo { width: 104px; }

  /* home: the case deck becomes a row you swipe, one card and the edge of the next */
  #work.scroll-reveal-wrapper { height: auto; }
  #work .scroll-reveal-sticky { position: relative; height: auto; padding: 88px 0 64px; }
  .scroll-reveal-header { padding: 0 20px; }
  .pp-swipe-hint { display: inline; }
  .pp-scroll-hint { display: none; }
  #work .scroll-reveal-container {
    flex-direction: row;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 10px 20px 44px;
    scroll-padding: 0 20px;
    scrollbar-width: none;
  }
  #work .scroll-reveal-container::-webkit-scrollbar { display: none; }
  #work .reveal-card { flex: 0 0 min(76vw, 340px); aspect-ratio: 4 / 5; scroll-snap-align: start; }

  /* testimonial */
  .pp-words { grid-template-columns: minmax(0, 1fr); padding: 80px 20px; gap: 40px; }
  .pp-quote { font-size: clamp(32px, 9vw, 42px); }
  .pp-testimonial-video video { max-width: min(300px, 82vw); }

  /* contact block */
  .pp-contact { padding: 84px 20px 40px; }
  .pp-contact-title { font-size: clamp(50px, 14.4vw, 76px); }
  .pp-foot-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .pp-foot-grid a, .pp-foot-grid p { font-size: 21px; }
  .pp-footer { padding: 0 20px 28px; }

  /* inner openings: title, then the art below it, overlapping its last line */
  .pp-page-hero { padding: calc(var(--hdr) + 32px) 20px 26px; }
  .pp-page-hero .pp-page-hero-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pp-page-hero h1 { font-size: clamp(64px, 19vw, 104px); }
  .pp-page-hero .pp-opening-art { margin: -4vw 0 0 auto !important; width: 92%; }
  .pp-page-hero .pp-opening-art img { max-height: 58vh; }
  .pp-hero--about .pp-page-hero-copy { padding-bottom: 0; }
  .pp-hero--about .pp-opening-art { width: 100%; margin: 32px auto 0 !important; }
  .pp-hero--about .pp-opening-art img { max-height: 64vh; }
  .pp-hero--disc .pp-opening-art { width: min(86%, 380px); margin: 12px auto 0 !important; }
  .pp-hero--call .pp-opening-art { width: 94%; margin: 28px auto 0 !important; }

  .pp-features { padding: 72px 20px; }
  .pp-feature { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pp-feature-art { position: static; width: min(100%, 460px); margin-top: 56px; }
  .pp-feature-copy h2 { font-size: clamp(38px, 10.6vw, 52px); }
  .pp-feature-copy p { font-size: 17px; }
  .pp-feature-copy .pp-feature-lead { font-size: clamp(28px, 8vw, 36px); }
  .pp-feature-list { grid-template-columns: minmax(0, 1fr); }

  .pp-reviews { padding: 80px 20px; }
  .pp-review:nth-child(n) { transform: none; margin-top: 0; }

  .pp-cases { padding: 72px 20px; }

  .glass-modal { width: 100%; max-height: 92dvh; margin-top: auto; border-radius: 22px 22px 0 0; padding: 28px 20px 40px; }
  .glass-modal-overlay { align-items: flex-end; }
  .cs-meta { grid-template-columns: minmax(0, 1fr); }
  .cs-hero-stats { grid-template-columns: minmax(0, 1fr); }
  .cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pp-enquiry { padding: 72px 20px; }
  .pp-enquiry-inner { grid-template-columns: minmax(0, 1fr); }
  .pp-direct { position: static; }

  /* the drawer: smaller tabs, alternately left and right */
  :root { --tab-h: 30px; --file-r: 16px; }
  [data-file] ~ [data-file]::before { padding: 2px 16px 0; border-radius: 12px 12px 0 0; font-size: 10px; letter-spacing: .16em; }
  [data-file]:nth-of-type(n) { --tab-x: 16px; }
  [data-file]:nth-of-type(2n + 1)::before { left: auto; right: 16px; }
}

@media (max-width: 380px) {
  .pp-header nav a { font-size: 11.5px; }
  .pp-logo { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-card, .brand-chip, .pp-card-num--art img, .reveal-card > img, .pp-button, .pp-opening-button { transition: none; }
  a.pp-card:hover, a.pp-card:hover .pp-card-num--art img, .reveal-card:hover > img { transform: none; }
  .pp-welcome-art, .pp-page-hero .pp-opening-art { transform: none; }
  .pp-hero--call .pp-opening-art { transform: rotate(2deg); }
}