/* ==========================================================================
   MishFix v2: the paper desk direction
   Chosen from services-options.html (A2, with C's materials) and carried through the
   site: hand-cut paper sculptures standing in cutting-mat trays, interfaces taped on,
   C's tape, clips, torn paper, pen and stamp used as accents in a few sections.
   Loaded after v2.css; only adds and overrides.
   ========================================================================== */

/* the mini-interfaces are white cards: keep their text ink inside dark tiles */
.pa .doc, .pa .profile, .pa .leads, .pa .week { color: var(--text); }

/* ==========================================================================
   SERVICES (option A base)
   ========================================================================== */
.pa {
  padding: var(--section) 0 calc(var(--section) * 1.1);
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 85% 8%, rgba(95, 208, 220, .22) 0%, rgba(95, 208, 220, 0) 70%),
    radial-gradient(50% 40% at 0% 60%, rgba(13, 154, 171, .1) 0%, rgba(13, 154, 171, 0) 70%),
    var(--paper);
}
.pa-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 140px 20px;
  margin-top: 150px;
}
.pa-tile {
  --mx: 0;
  --my: 0;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  border-radius: 36px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(12, 47, 53, .06), 0 50px 90px -60px rgba(12, 47, 53, .55);
}
.pa-tile--content { grid-column: span 7; background: linear-gradient(165deg, #D6ECEC 0%, #F4F9F9 62%); }
.pa-tile--linkedin { grid-column: span 5; background: linear-gradient(165deg, #FFFFFF 0%, #ECF3F2 100%); }
.pa-tile--leads { grid-column: span 4; background: linear-gradient(170deg, #134148 0%, var(--ink) 70%); color: var(--on-ink); }
.pa-tile--social { grid-column: span 4; background: linear-gradient(165deg, #E4F3F0 0%, #F7FBFA 100%); }
.pa-tile--report { grid-column: span 4; background: linear-gradient(165deg, #0B8494 0%, var(--teal-deeper) 100%); color: #fff; }

.pa-stage { position: relative; height: 300px; }
.pa-tile--leads .pa-stage, .pa-tile--social .pa-stage, .pa-tile--report .pa-stage { height: 250px; }
/* the sculpture is bigger than its stage, so it breaks out of the tile's top edge */
.pa-sculpt {
  position: absolute;
  z-index: 1;
  left: 2%;
  bottom: 0;
  width: auto;
  height: 410px;
  max-width: 62%;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 30px 28px rgba(12, 47, 53, .28));
  transform: translate3d(calc(var(--mx) * -12px), calc(var(--my) * -10px), 0);
  transition: transform 700ms var(--ease-out);
  pointer-events: none;
}
.pa-tile--leads .pa-sculpt, .pa-tile--social .pa-sculpt, .pa-tile--report .pa-sculpt { left: -4%; height: 330px; max-width: 74%; }
.pa-tile--leads .pa-sculpt, .pa-tile--report .pa-sculpt { filter: drop-shadow(0 30px 28px rgba(0, 0, 0, .45)); }
/* the working interface, laid on top like a note on a model */
.pa-layer {
  position: absolute;
  z-index: 2;
  right: 5%;
  bottom: -30px;
  width: min(330px, 56%);
  transform: rotate(-2.5deg) translate3d(calc(var(--mx) * 14px), calc(var(--my) * 12px), 0);
  transition: transform 700ms var(--ease-out);
}
.pa-tile--linkedin .pa-layer { width: min(270px, 56%); transform: rotate(2deg) translate3d(calc(var(--mx) * 14px), calc(var(--my) * 12px), 0); }
.pa-tile--leads .pa-layer, .pa-tile--social .pa-layer, .pa-tile--report .pa-layer { width: 62%; right: 4%; bottom: -24px; }
.pa-layer .doc, .pa-layer .profile, .pa-layer .leads, .pa-layer .week { box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 30px 50px -24px rgba(0, 0, 0, .5); }
.pa-mini-report { padding: 14px; border-radius: var(--r-l); background: var(--ink); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .6); }
.pa-mini-report .bars { height: 90px; }
.pa-mini-report p { margin-top: 8px; color: var(--on-ink-mute); font-size: .6875rem; }
.pa-copy { position: relative; z-index: 3; display: grid; gap: 12px; align-content: start; padding: 54px 36px 34px; }
.pa-copy h3 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); }
.pa-copy p { color: var(--muted); }
.pa-tile--leads .pa-copy p, .pa-tile--report .pa-copy p { color: var(--on-ink-soft); }
.pa-tile--report .pa-copy p { color: rgba(255, 255, 255, .85); }
.pa-tile--leads .link-btn { color: var(--teal-light); }
.pa-copy .link-btn { margin-top: 6px; }

/* entrance: sculptures rise into place, once */
.js .pa-tile:not(.is-live) .pa-sculpt { opacity: 0; transform: translate3d(0, 40px, 0) scale(.94); }
.js .pa-tile:not(.is-live) .pa-layer { opacity: 0; transform: rotate(-6deg) translate3d(0, 30px, 0); }
.pa-tile.is-live .pa-sculpt { transition: opacity 600ms var(--ease-out), transform 1100ms var(--ease-drawer); }
.pa-tile.is-live .pa-layer { transition: opacity 500ms var(--ease-out) 250ms, transform 1000ms var(--ease-drawer) 250ms; }
.pa-tile.is-tilting .pa-sculpt, .pa-tile.is-tilting .pa-layer { transition: transform 500ms var(--ease-out); }

@media (max-width: 1100px) {
  .pa-tile--content, .pa-tile--linkedin { grid-column: span 12; }
  .pa-tile--leads, .pa-tile--social { grid-column: span 6; }
  .pa-tile--report { grid-column: span 12; }
  .pa-tile--report .pa-stage { height: 220px; }
  .pa-tile--report .pa-sculpt { left: 4%; max-width: 40%; }
  .pa-tile--report .pa-layer { width: 46%; }
}
@media (max-width: 700px) {
  .pa-grid { gap: 120px 0; margin-top: 120px; }
  .pa-tile { grid-column: span 12 !important; border-radius: 28px; }
  .pa-stage, .pa-tile--leads .pa-stage, .pa-tile--social .pa-stage, .pa-tile--report .pa-stage { height: 220px; }
  .pa-sculpt, .pa-tile--leads .pa-sculpt, .pa-tile--social .pa-sculpt, .pa-tile--report .pa-sculpt { left: -2%; height: 280px; max-width: 64%; }
  /* the interface steps back so the sculpture stays the hero on a narrow tile */
  .pa-layer, .pa-tile--linkedin .pa-layer, .pa-tile--leads .pa-layer, .pa-tile--social .pa-layer, .pa-tile--report .pa-layer { width: 300px; right: 2%; bottom: -34px; transform: rotate(-2.5deg) scale(.68); transform-origin: 100% 100%; }
  .pa-sculpt, .pa-tile--leads .pa-sculpt, .pa-tile--social .pa-sculpt, .pa-tile--report .pa-sculpt { max-width: 72%; }
  .pa-copy { padding: 44px 22px 26px; }
}

/* ==========================================================================
   SERVICES: PAPER DESK, REFINED (A2)
   Smaller sculptures stand in a recessed tray (cutting-mat grid, spotlight, contact
   shadow); the interfaces sit beside them, taped on. The copy leads again.
   ========================================================================== */
.pa--refined {
  padding-bottom: var(--section);
  background:
    radial-gradient(55% 45% at 92% 0%, rgba(95, 208, 220, .2) 0%, rgba(95, 208, 220, 0) 70%),
    radial-gradient(45% 40% at 0% 75%, rgba(13, 154, 171, .08) 0%, rgba(13, 154, 171, 0) 70%),
    var(--paper);
}
.pa-underline { position: relative; display: inline-block; }
.pa-underline img { position: absolute; left: -3%; bottom: -.16em; width: 106%; height: .26em; object-fit: fill; pointer-events: none; }

.pa--refined .pa-grid { gap: 20px; margin-top: 72px; }
.pa--refined .pa-tile {
  padding: 12px;
  border-radius: 34px;
  transition: transform 450ms var(--ease-out), box-shadow 450ms var(--ease-out);
}
/* the tray: a cutting mat under a soft spotlight */
.pa--refined .pa-stage,
.pa--refined .pa-tile--leads .pa-stage,
.pa--refined .pa-tile--social .pa-stage,
.pa--refined .pa-tile--report .pa-stage {
  --grid: rgba(13, 154, 171, .1);
  --spot: rgba(255, 255, 255, .95);
  height: 290px;
  border-radius: 24px;
  background:
    radial-gradient(65% 85% at 30% 80%, var(--spot) 0%, rgba(255, 255, 255, 0) 64%),
    linear-gradient(var(--grid) 1px, transparent 1px) 11px 11px / 22px 22px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 11px 11px / 22px 22px,
    rgba(13, 154, 171, .05);
  box-shadow: inset 0 2px 4px rgba(12, 47, 53, .07), inset 0 0 0 1px rgba(12, 47, 53, .06);
}
.pa--refined .pa-tile--leads .pa-stage,
.pa--refined .pa-tile--social .pa-stage,
.pa--refined .pa-tile--report .pa-stage { height: 232px; }
.pa--refined .pa-tile--leads .pa-stage,
.pa--refined .pa-tile--report .pa-stage {
  --grid: rgba(255, 255, 255, .07);
  --spot: rgba(95, 208, 220, .3);
  background:
    radial-gradient(65% 85% at 30% 80%, var(--spot) 0%, rgba(95, 208, 220, 0) 64%),
    linear-gradient(var(--grid) 1px, transparent 1px) 11px 11px / 22px 22px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 11px 11px / 22px 22px,
    rgba(0, 0, 0, .16);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
/* contact shadow: the sculpture stands on the mat */
.pa--refined .pa-stage::before {
  content: "";
  position: absolute;
  left: 5%;
  bottom: 14px;
  width: 42%;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(12, 47, 53, .3), rgba(12, 47, 53, 0));
}
.pa--refined .pa-tile--leads .pa-stage::before,
.pa--refined .pa-tile--report .pa-stage::before { background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); }

.pa--refined .pa-sculpt,
.pa--refined .pa-tile--leads .pa-sculpt,
.pa--refined .pa-tile--social .pa-sculpt,
.pa--refined .pa-tile--report .pa-sculpt {
  left: 7%;
  bottom: 22px;
  height: 280px;
  max-width: 44%;
  filter: drop-shadow(0 14px 12px rgba(12, 47, 53, .22));
  transform: none;
}
.pa--refined .pa-tile--leads .pa-sculpt,
.pa--refined .pa-tile--social .pa-sculpt,
.pa--refined .pa-tile--report .pa-sculpt { left: 5%; height: 222px; max-width: 46%; }
.pa--refined .pa-tile--social .pa-sculpt { max-width: 50%; }
.pa--refined .pa-tile--leads .pa-sculpt,
.pa--refined .pa-tile--report .pa-sculpt { filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .4)); }

.pa--refined .pa-layer,
.pa--refined .pa-tile--leads .pa-layer,
.pa--refined .pa-tile--social .pa-layer,
.pa--refined .pa-tile--report .pa-layer {
  right: 6%;
  bottom: 24px;
  width: min(300px, 50%);
  transform: rotate(-1.5deg);
}
.pa--refined .pa-tile--linkedin .pa-layer { width: min(250px, 50%); transform: rotate(1.5deg); }
/* the bottom row lays the interfaces out at full size, then scales them, so nothing clips */
.pa--refined .pa-tile--leads .pa-layer,
.pa--refined .pa-tile--social .pa-layer,
.pa--refined .pa-tile--report .pa-layer { right: 5%; bottom: 20px; width: 300px; transform: rotate(-1.5deg) scale(.8); transform-origin: 100% 100%; }
.pa--refined .pa-tile--social .pa-layer { transform: rotate(1.5deg) scale(.8); }
.pa--refined .pa-layer .doc__comment { display: none; }
.pa-tape { position: absolute; z-index: 3; top: -10px; left: -26px; width: 84px; transform: rotate(-38deg); opacity: .94; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .12)); }
/* taped at a corner, so the tape never sits on the interface's text */
.pa--refined .pa-tile--linkedin .pa-tape { left: auto; right: -26px; transform: rotate(38deg); }
.pa--refined .pa-tile--social .pa-tape,
.pa--refined .pa-tile--leads .pa-tape { left: auto; right: -26px; top: -8px; transform: rotate(36deg); }

.pa--refined .pa-copy { gap: 10px; padding: 28px 24px 22px; }
.pa--refined .pa-copy h3 { font-size: clamp(1.55rem, 1.2rem + .8vw, 2rem); }

/* entrance stays; hover lifts the tile and the sculpture rises a little off the mat */
.pa--refined .pa-tile.is-live .pa-sculpt { transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); }
.pa--refined .pa-tile.is-live .pa-layer { transition: opacity 500ms var(--ease-out) 200ms, transform 700ms var(--ease-out) 200ms; }
@media (hover: hover) and (pointer: fine) {
  .pa--refined .pa-tile:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(12, 47, 53, .06), 0 60px 90px -55px rgba(12, 47, 53, .6); }
  .pa--refined .pa-tile:hover .pa-sculpt { transform: translateY(-8px) rotate(-2deg); transition-delay: 0ms; }
  .pa--refined .pa-tile:hover .pa-layer { transform: rotate(0deg) translateY(-3px); transition-delay: 0ms; }
  .pa--refined .pa-tile--leads:hover .pa-layer,
  .pa--refined .pa-tile--social:hover .pa-layer,
  .pa--refined .pa-tile--report:hover .pa-layer { transform: rotate(0deg) translateY(-3px) scale(.8); }
}

@media (max-width: 1100px) {
  .pa--refined .pa-tile--report .pa-sculpt { max-width: 30%; }
  .pa--refined .pa-tile--report .pa-layer { width: 300px; }
}
@media (max-width: 700px) {
  .pa--refined .pa-grid { gap: 18px; margin-top: 48px; }
  .pa--refined .pa-stage,
  .pa--refined .pa-tile--leads .pa-stage,
  .pa--refined .pa-tile--social .pa-stage,
  .pa--refined .pa-tile--report .pa-stage { height: 220px; }
  .pa--refined .pa-sculpt,
  .pa--refined .pa-tile--leads .pa-sculpt,
  .pa--refined .pa-tile--social .pa-sculpt,
  .pa--refined .pa-tile--report .pa-sculpt { left: 4%; height: 200px; max-width: 48%; }
  .pa--refined .pa-layer,
  .pa--refined .pa-tile--linkedin .pa-layer,
  .pa--refined .pa-tile--leads .pa-layer,
  .pa--refined .pa-tile--social .pa-layer,
  .pa--refined .pa-tile--report .pa-layer { right: 3%; bottom: 16px; width: 270px; transform: rotate(-1.5deg) scale(.66); transform-origin: 100% 100%; }
  .pa--refined .pa-copy { padding: 24px 14px 18px; }
}


/* ==========================================================================
   REDUCED MOTION (services)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pa-sculpt { transform: none !important; }
  .pa--refined .pa-layer { transform: rotate(-1.5deg) !important; }
  .pa--refined .pa-tile--leads .pa-layer, .pa--refined .pa-tile--social .pa-layer, .pa--refined .pa-tile--report .pa-layer { transform: rotate(-1.5deg) scale(.8) !important; }
  .pa--refined .pa-tile:hover { transform: none; }
}

/* ==========================================================================
   SHARED PAPER PIECES
   .tray: a recessed cutting-mat surface under a soft spotlight (light and dark).
   .deco-*: C's materials (tape, clip, pen, crumple), always aria-hidden and decorative.
   ========================================================================== */
.tray {
  --grid: rgba(13, 154, 171, .1);
  --spot: rgba(255, 255, 255, .95);
  position: relative;
  border-radius: 20px;
  background:
    radial-gradient(70% 85% at 50% 75%, var(--spot) 0%, rgba(255, 255, 255, 0) 64%),
    linear-gradient(var(--grid) 1px, transparent 1px) 11px 11px / 22px 22px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 11px 11px / 22px 22px,
    rgba(13, 154, 171, .05);
  box-shadow: inset 0 2px 4px rgba(12, 47, 53, .07), inset 0 0 0 1px rgba(12, 47, 53, .06);
}
.tray--dark {
  --grid: rgba(255, 255, 255, .07);
  --spot: rgba(95, 208, 220, .28);
  background:
    radial-gradient(70% 85% at 50% 75%, var(--spot) 0%, rgba(95, 208, 220, 0) 64%),
    linear-gradient(var(--grid) 1px, transparent 1px) 11px 11px / 22px 22px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 11px 11px / 22px 22px,
    rgba(0, 0, 0, .18);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.paper-obj { display: block; width: auto; filter: drop-shadow(0 8px 8px rgba(12, 47, 53, .22)); pointer-events: none; }
.deco { position: absolute; z-index: 3; height: auto; pointer-events: none; }
.deco-tape { width: 92px; opacity: .94; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .14)); }
.deco-clip { width: 40px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .28)); }
.deco-pen { filter: drop-shadow(0 16px 16px rgba(12, 47, 53, .35)); }
.deco-crumple { filter: drop-shadow(0 12px 12px rgba(12, 47, 53, .3)); }

/* ==========================================================================
   HEADER: paper icons in the mega menu
   ========================================================================== */
.mega__icon--paper { width: 60px; height: 56px; background: none; border-radius: 0; }
.mega__icon--paper img { height: 50px; max-width: 60px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(12, 47, 53, .2)); transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .mega__list a:hover .mega__icon--paper img { transform: translateY(-3px) rotate(-4deg); }
}

/* ==========================================================================
   HERO: the logo's rising stroke, in paper; the photo is taped to the dark desk
   ========================================================================== */
/* the drawn SVG stroke is retired (kept as an HTML comment); the stroke is now paper */
.collage--paper { height: clamp(520px, 44vw, 640px); }
.collage__tray { position: absolute; inset: 7% 0 6% 8%; border-radius: var(--r-xl); }
/* contact shadow under the ribbon */
.collage__tray::after { content: ""; position: absolute; right: 8%; bottom: 7%; width: 58%; height: 34px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.collage__ribbon {
  position: absolute;
  z-index: 1;
  right: 5%;
  bottom: 10%;
  width: auto;
  height: 76%;
  max-width: 70%;
  object-fit: contain;
  filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .5));
}
.collage__snap {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 40%;
  margin: 0;
  padding: 8px 8px 28px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 30px 50px -20px rgba(0, 0, 0, .6);
  transform: rotate(-4deg);
}
.collage__snap > img:last-child { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 60%; }
.collage__snap .deco-tape { left: 50%; top: -15px; width: 86px; transform: translateX(-50%) rotate(3deg); }
.collage--paper .post-card { z-index: 3; left: -2%; top: auto; bottom: 4%; width: min(300px, 62%); }
.collage--paper .anno--hook { z-index: 4; left: 22%; top: auto; bottom: calc(4% + 190px); }
.collage--paper .anno--cut { z-index: 4; right: auto; left: 30%; top: 22%; }
.collage--paper .chip-sched { z-index: 4; right: 0; bottom: -2%; }
.post-card .deco-clip { right: 22px; top: -18px; transform: rotate(6deg); }
/* the settle-in keeps each piece's own rotation */
.is-intro .hero:not(.is-ready) .collage__snap { transform: translateY(28px) rotate(-10deg); }
.is-intro .hero:not(.is-ready) .collage__ribbon { transform: translateY(50px) scale(.94); }
@media (max-width: 960px) {
  .collage--paper { height: clamp(440px, 110vw, 600px); max-width: 560px; }
  .collage__snap { width: 42%; }
  .collage--paper .anno--cut { display: none; }
  .collage--paper .anno--hook { bottom: calc(4% + 180px); left: 8%; }
}
@media (max-width: 520px) {
  .collage--paper .post-card { width: 74%; }
  .collage--paper .anno--hook { display: none; }
  .collage__ribbon { height: 64%; right: 2%; bottom: 22%; }
}

/* ==========================================================================
   MANIFESTO: a torn label and the pen left on the desk
   ========================================================================== */
.manifesto__label {
  padding: 9px 20px 11px 16px;
  margin-left: -16px;
  background: var(--ink);
  color: #fff !important;
  clip-path: polygon(0 6%, 8% 0, 22% 5%, 37% 0, 52% 6%, 67% 1%, 82% 5%, 100% 0, 98% 52%, 100% 100%, 84% 95%, 68% 100%, 52% 94%, 36% 100%, 20% 95%, 6% 100%, 0 94%, 2% 50%);
}
.manifesto__label .ico { --ia: var(--teal-light); }
.manifesto__pin .wrap { position: relative; }
.manifesto__pen { right: var(--gutter); bottom: -6vh; width: min(380px, 30vw); transform: rotate(-14deg); }
@media (max-width: 700px) { .manifesto__pen { width: 180px; bottom: -40px; } }

/* ==========================================================================
   THE DESK: each step's icon is a small paper object on a dark tray
   ========================================================================== */
.dstep__icon.tray { width: 84px; height: 84px; display: grid; place-items: end center; padding-bottom: 8px; border-radius: 22px; }
.dstep__icon .paper-obj { height: 66px; max-width: 72px; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .45)); transition: transform 500ms var(--ease-out); }
.dstep.is-on .dstep__icon.tray { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25), inset 0 0 0 1.5px var(--teal-bright); }
.dstep.is-on .dstep__icon .paper-obj { transform: translateY(-6px) rotate(-3deg); }

/* ==========================================================================
   WHAT WE WRITE: paper tab icons; the stage is a cutting mat; mocks are taped down
   ========================================================================== */
.fmt__tab .paper-obj { flex: none; width: 46px; height: 42px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(12, 47, 53, .22)); transition: transform 300ms var(--ease-out); }
.fmt__tab[aria-selected="true"] .paper-obj { transform: translateY(-3px) rotate(-4deg) scale(1.06); }
.fmt__stage.tray { border-radius: var(--r-xl); }
.fmt__stage.tray::after { content: ""; position: absolute; left: 50%; bottom: 7%; width: 60%; height: 40px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(12, 47, 53, .18), rgba(12, 47, 53, 0)); pointer-events: none; }
.fmt__panel { position: relative; z-index: 1; }
.fmt__panel .mock { position: relative; }
.mock--site::before, .mock--article::before, .mock--mail::before, .mock--case::before, .mock--serp::before, .mock--ghost::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: -26px;
  top: -12px;
  width: 92px;
  height: 46px;
  background: url("../img/svc/collage-tape-2.webp") center / contain no-repeat;
  transform: rotate(-36deg);
  pointer-events: none;
}
.mock--mail { overflow: visible; }
.mock--mail .mail__list { border-radius: var(--r-l) 0 0 var(--r-l); overflow: hidden; }
@media (max-width: 960px) {
  .fmt__tab .paper-obj { width: 30px; height: 28px; }
  .mock--mail .mail__list { border-radius: var(--r-l) var(--r-l) 0 0; }
}

/* ==========================================================================
   ABOUT: the founder as a taped polaroid; the figures get their objects
   ========================================================================== */
.polaroid {
  position: relative;
  align-self: start;
  padding: 8px 8px 26px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 14px 24px -12px rgba(12, 47, 53, .45);
  transform: rotate(-3deg);
}
.abox--person .polaroid img { width: 104px; height: 104px; border-radius: 2px; box-shadow: none; object-fit: cover; }
.abox--person .polaroid .deco-tape { left: 50%; top: -14px; width: 74px; height: auto; border-radius: 0; box-shadow: none; transform: translateX(-50%) rotate(4deg); } /* beats v2's round-avatar rule */
.abox__underline { position: relative; display: inline-block; }
.abox__underline img { position: absolute; left: -6%; bottom: -.02em; width: 112%; height: .2em; object-fit: fill; pointer-events: none; }
.abox--stat { position: relative; overflow: hidden; }
.abox__obj { position: absolute; right: 8px; top: 10px; height: 116px; max-width: 62%; object-fit: contain; }
.abox--teal .abox__obj { filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .35)); }
.abox--map { position: relative; }
.abox__obj--map { right: 18px; top: 16px; height: 120px; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .45)); }
@media (max-width: 640px) { .abox__obj { height: 86px; } .abox__obj--map { height: 70px; } .abox__map-title { padding-right: 96px; } }

/* ==========================================================================
   REVIEWS: pinned up with tape and clips
   ========================================================================== */
.review { position: relative; transform: rotate(var(--r, 0deg)); transition: transform 450ms var(--ease-out), box-shadow 450ms var(--ease-out); }
.review:nth-child(2) { --r: .7deg; }
.review:nth-child(3) { --r: -.6deg; }
.review:nth-child(4) { --r: .5deg; }
.review:nth-child(5) { --r: -.8deg; }
.review .deco-tape { left: 50%; top: -15px; width: 86px; transform: translateX(-50%) rotate(-3deg); }
.review .deco-clip { right: 26px; top: -20px; transform: rotate(8deg); }
/* the wall was CSS columns; with rotated, taped cards Chrome stopped balancing them and stacked
   all five in one column. An explicit grid is predictable: the feature spans two rows on the left,
   the four shorter reviews fill two columns beside it. */
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 22px; align-items: start; columns: auto; padding-top: 14px; }
.wall .review { margin: 0; }
.wall .review--feature { grid-row: span 2; }
@media (max-width: 1000px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall .review--feature { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px) {
  .wall { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
@media (hover: hover) and (pointer: fine) {
  .review:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 20px 40px -24px rgba(12, 47, 53, .45); }
}

/* ==========================================================================
   INSIGHTS: covers are trays with the article's object on them
   ========================================================================== */
.card__cover.tray { display: grid; place-items: end center; padding-bottom: 18px; }
.card__cover.tray::after { content: ""; position: absolute; bottom: 14px; left: 50%; width: 46%; height: 18px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(12, 47, 53, .28), rgba(12, 47, 53, 0)); }
.card__cover.tray--dark { background-color: var(--ink); }
.card__cover.tray--dark::after { background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); }
.card__cover .paper-obj { position: relative; z-index: 1; height: 72%; max-width: 68%; object-fit: contain; transition: transform 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__cover .paper-obj { transform: translateY(-8px) rotate(-3deg); }
}

/* ==========================================================================
   FAQ: the ask card is taped up
   ========================================================================== */
.ask-card { position: relative; }
.ask-card .deco-tape { right: -18px; top: -12px; transform: rotate(34deg); width: 80px; }
@media (max-width: 860px) { .ask-card .deco-tape { right: 8px; } }

/* ==========================================================================
   BRIEF BUILDER: paper service icons; the brief is clipped, with the pen beside it
   ========================================================================== */
.opt__ico--paper { width: 64px; height: 56px; margin-bottom: 4px; background: none !important; border-radius: 0; }
.opt__ico--paper img { height: 56px; max-width: 64px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(12, 47, 53, .2)); transition: transform 300ms var(--ease-out); }
.opt input:checked + .opt__box .opt__ico--paper img { transform: translateY(-4px) rotate(-4deg); }
/* the pen hangs off the sheet; clip keeps sticky working (no scroll container) and stops sideways scroll */
.brief { overflow-x: clip; }
.sheet .deco-clip { left: 34px; top: -24px; width: 44px; transform: rotate(-4deg); z-index: 4; }
/* the pen stands along the sheet's right edge, inside its height, so nothing reaches the next section */
.sheet .deco-pen { right: -96px; top: 30%; bottom: auto; width: 250px; transform: rotate(-56deg); z-index: 4; }
.sheet__rows { padding-right: 34px; } /* the brief's text stays clear of the pen */
.sheet .deco-crumple { left: -60px; bottom: -46px; width: 96px; z-index: 0; }
/* when the brief is ready, it gets stamped */
.sheet__stamp {
  position: absolute;
  right: 120px;
  bottom: 40px;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  background: url("../img/svc/collage-stamp.webp") center / contain no-repeat;
  color: var(--teal-deep);
  font: 700 1.05rem/1 var(--sans);
  opacity: 0;
  transform: rotate(-14deg) scale(1.6);
  pointer-events: none;
}
.sheet.is-ready .sheet__stamp { opacity: .9; transform: rotate(-14deg); transition: opacity 160ms ease-out, transform 360ms cubic-bezier(.2, 1.4, .4, 1); }
@media (max-width: 960px) {
  /* the sheet sits above the form on narrow screens: keep the desk props off the form */
  .sheet .deco-pen, .sheet .deco-crumple { display: none; }
  .sheet__rows { padding-right: 0; }
}

/* ==========================================================================
   CLOSING: the photo is taped to the page and a paper plane leaves it
   ========================================================================== */
.closing__card { overflow: visible; }
.closing__photo { border-radius: var(--r-xl); }
.closing__card::before { border-radius: var(--r-xl); }
.closing .deco-tape--a { left: 6%; top: -18px; transform: rotate(-6deg); width: 110px; }
.closing .deco-tape--b { right: 26%; top: -16px; transform: rotate(5deg); width: 110px; }
.closing__plane { position: absolute; z-index: 3; right: 3%; top: -70px; width: min(270px, 26vw); filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .35)); pointer-events: none; }
.js .closing__card:not(.is-live) .closing__plane { opacity: 0; transform: translate(-70px, 70px) rotate(8deg) scale(.9); }
.closing__card.is-live .closing__plane { transition: opacity 500ms var(--ease-out), transform 1400ms var(--ease-drawer); }
@media (max-width: 700px) { .closing__plane { width: 150px; top: -64px; } }

/* ==========================================================================
   REDUCED MOTION (paper pieces)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .collage__ribbon, .closing__plane { transform: none !important; }
  .collage__snap { transform: rotate(-4deg) !important; }
  .review { transform: rotate(var(--r, 0deg)) !important; }
  .sheet.is-ready .sheet__stamp { transform: rotate(-14deg); transition: opacity 300ms; }
}

/* ==========================================================================
   VIDEO MODE: the site as it would look live
   The concept notice and the footer disclaimer stay in the page but only show with
   ?concept. Switch them on before sharing any public link.
   ========================================================================== */
.notice, .footer__concept { display: none; }
.show-concept .notice { display: block; }
.show-concept .footer__concept { display: block; }

/* ==========================================================================
   ABOUT: EDITORIAL SPREAD (about-options option B, refined)
   An open magazine on the paper ground. The right page swings open once in view; a
   ribbon bookmark hangs from the fold; Damini's portrait sits in a studio circle with a
   small tape across its top-left edge.
   ========================================================================== */
.ab {
  position: relative;
  padding: var(--section) 0 calc(var(--section) * 1.05);
  overflow-x: clip;
  background:
    radial-gradient(55% 60% at 50% 40%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #E1EAE9 0%, var(--paper) 100%);
}
.ab .wrap { position: relative; }
.ab-book {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: 6px;
  perspective: 2600px;
  /* page stack under and beside the open spread */
  box-shadow:
    0 3px 0 -1px #F3F6F5, 0 6px 0 -2px #E6ECEB, 0 9px 0 -3px #DCE3E2, 0 12px 0 -4px #D3DBDA,
    -3px 2px 0 -1px #EEF2F1, 3px 2px 0 -1px #EEF2F1,
    0 2px 4px rgba(0, 0, 0, .06), 0 80px 120px -60px rgba(12, 47, 53, .65);
}
/* paper with a little grain */
.ab-page {
  position: relative;
  padding: clamp(32px, 4.4vw, 72px) clamp(26px, 4.4vw, 72px) clamp(40px, 5vw, 76px);
  background-color: #FDFDFC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.18 0 0 0 0 0.2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ab-page--left { border-radius: 6px 0 0 6px; background-color: #FCFCFB; }
.ab-page--right { border-radius: 0 6px 6px 0; transform-origin: 0 50%; }
/* the fold: shade on both sides of the spine */
.ab-page--left::after,
.ab-page--right::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 70px;
  pointer-events: none;
}
.ab-page--left::after { right: 0; background: linear-gradient(90deg, rgba(12, 47, 53, 0), rgba(12, 47, 53, .07) 70%, rgba(12, 47, 53, .2)); }
.ab-page--right::before { left: 0; background: linear-gradient(270deg, rgba(12, 47, 53, 0), rgba(12, 47, 53, .06) 70%, rgba(12, 47, 53, .16)); }

/* ribbon bookmark: lies in the fold and hangs out of the bottom */
.ab-ribbon {
  position: absolute;
  z-index: 3;
  left: calc(50% + 26px);
  top: -6px;
  width: 24px;
  height: calc(100% + 64px);
  background: linear-gradient(90deg, #087380 0%, #0D9AAB 45%, #0B8494 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 14px), 0 100%);
  box-shadow: 2px 0 4px rgba(0, 0, 0, .12);
  /* only the top lip and the tail show; the length under the page is hidden behind it */
  mask-image: linear-gradient(180deg, #000 0, #000 10px, transparent 10px, transparent calc(100% - 70px), #000 calc(100% - 70px));
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 10px, transparent 10px, transparent calc(100% - 70px), #000 calc(100% - 70px));
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .18));
}
.ab-clip { right: 28px; top: -22px; width: 42px; rotate: 8deg; z-index: 4; }
.ab-pen { right: -2%; bottom: calc(var(--section) * -.55); width: min(360px, 28vw); rotate: -16deg; z-index: 0; }

.ab-folio { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 34px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--muted); font: italic 400 .98rem/1.2 var(--serif); }
.ab-title { font-size: clamp(2.1rem, 1.1rem + 2.6vw, 3.7rem); line-height: 1.14; letter-spacing: -.03em; }
.ab-body { margin-top: 26px; color: var(--text-soft); font: 400 1.2rem/1.65 var(--serif); }
.ab-body::first-letter { float: left; margin: .08em .06em 0 0; color: var(--teal-deep); font: 400 4.2em/.78 var(--serif); }

/* Damini: a studio portrait in a circle, a small tape across its top-left edge */
.ab-contrib { display: flex; align-items: center; gap: 26px; margin-top: 38px; padding: 24px 0; border-block: 1px solid var(--line); }
.ab-portrait { position: relative; flex: none; width: 156px; height: 156px; }
.ab-portrait__img { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 5px #fff, 0 0 0 6.5px rgba(13, 154, 171, .35), 0 24px 34px -16px rgba(12, 47, 53, .55); }
.ab-portrait__tape { left: -14px; top: 12px; width: 62px; rotate: -42deg; z-index: 2; }
.ab-contrib__label { color: var(--teal-deep); font-size: .8125rem; font-weight: 700; }
.ab-contrib__name { margin-top: 2px; font: 450 clamp(1.6rem, 1.3rem + .8vw, 2.1rem)/1.05 var(--serif); letter-spacing: -.015em; }
.ab-contrib__role { margin: 4px 0 10px; color: var(--muted); font-size: .9375rem; }
.ab-reviewed { margin-top: 26px; }
.ab-reviewed p { color: var(--muted); font-size: .875rem; }
.ab-reviewed ul { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 8px; color: var(--text-soft); font: italic 400 1.2rem/1.5 var(--serif); }

.ab-photo { margin: 0; }
.ab-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 40% 45%; border-radius: 2px; }
.ab-photo figcaption { margin-top: 10px; color: var(--muted); font: italic 400 .95rem/1.4 var(--serif); }
.ab-pull { position: relative; margin: 26px 0 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--teal); }
.ab-pull p { font: italic 400 clamp(1.25rem, 1rem + .7vw, 1.6rem)/1.3 var(--serif); letter-spacing: -.01em; }
.ab-pull p::before { content: "\201C"; }
.ab-pull p::after { content: "\201D"; }
.ab-pull footer { margin-top: 8px; color: var(--muted); font-size: .875rem; }
.ab-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.ab-numbers li { display: grid; justify-items: center; align-content: end; gap: 2px; min-height: 186px; padding: 14px 10px 16px; border-radius: 16px; text-align: center; }
.ab-numbers img { height: 80px; max-width: 90%; object-fit: contain; margin-bottom: 10px; transition: transform 500ms var(--ease-out); }
.ab-numbers strong { font: 450 clamp(1.4rem, 1rem + .9vw, 1.9rem)/1 var(--serif); letter-spacing: -.02em; }
.ab-numbers span { color: var(--muted); font-size: .8125rem; line-height: 1.35; }
@media (hover: hover) and (pointer: fine) {
  .ab-numbers li:hover img { transform: translateY(-6px) rotate(-3deg); }
}

/* the right page swings open once, from the spine */
.js .ab-book:not(.is-live) .ab-page--right { transform: rotateY(-62deg); opacity: 0; }
.js .ab-book:not(.is-live) .ab-ribbon { translate: 0 -30px; opacity: 0; }
.ab-book.is-live .ab-page--right { transition: transform 1300ms var(--ease-drawer), opacity 400ms var(--ease-out); }
.ab-book.is-live .ab-ribbon { transition: translate 900ms var(--ease-drawer) 700ms, opacity 300ms var(--ease-out) 700ms; }

@media (max-width: 960px) {
  .ab-book { grid-template-columns: minmax(0, 1fr); }
  .ab-page--left, .ab-page--right { border-radius: 6px; }
  .ab-page--left::after, .ab-page--right::before, .ab-ribbon { display: none; }
  .ab-page--right { padding-top: 0; }
  .ab-page--right .ab-folio { padding-top: 26px; border-top: 1px solid var(--line); }
  .ab-pen { display: none; }
  .js .ab-book:not(.is-live) .ab-page--right { transform: translateY(20px); }
}
@media (max-width: 560px) {
  .ab-contrib { flex-direction: column; align-items: flex-start; }
  .ab-portrait { width: 132px; height: 132px; }
  .ab-folio span:last-child { display: none; }
  .ab-numbers { grid-template-columns: minmax(0, 1fr); }
  .ab-numbers li { grid-template-columns: 90px minmax(0, 1fr); justify-items: start; align-items: center; min-height: 0; text-align: left; }
  .ab-numbers img { grid-row: span 2; height: 64px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ab-book:not(.is-live) .ab-page--right { transform: none; }
  .js .ab-book:not(.is-live) .ab-ribbon { translate: none; }
}

/* ==========================================================================
   HOW WE WORK (the desk)
   Wide screens: diorama stepper over a scroll-snap carousel of stages.
   Phones: the dioramas on a paper path that draws as you scroll.
   ========================================================================== */
.how {
  padding: var(--section) 0;
  overflow-x: clip;
  background:
    radial-gradient(50% 40% at 88% 6%, rgba(95, 208, 220, .14) 0%, rgba(95, 208, 220, 0) 70%),
    #fff;
}
.how__narrow { display: none; }
@media (max-width: 900px) {
  .how__wide { display: none; }
  .how__narrow { display: block; }
}

/* ---------- shared: dioramas and the taped stage sheets ---------- */
.dio { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(12, 47, 53, .28)); }
.st-sheet {
  position: relative;
  padding: 22px 20px 18px;
  border-radius: 3px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 22px 34px -20px rgba(12, 47, 53, .45);
  rotate: 1.4deg;
}
.st-sheet__tape { left: -24px; top: -10px; width: 86px; rotate: -36deg; }
.st-sheet__clip { right: 22px; top: -22px; rotate: 8deg; }
.st-sheet .tag { margin-top: 12px; }
.st-brief { display: grid; gap: 8px; margin: 0; }
.st-brief div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--line-strong); }
.st-brief dt { color: var(--muted); font-size: .72rem; font-weight: 700; }
.st-brief dd { font-size: .875rem; }
.st-text { color: var(--text-soft); font-size: .875rem; line-height: 1.6; }
.st-text--edit s { color: #8C9698; text-decoration: none; background: linear-gradient(var(--teal), var(--teal)) no-repeat 0 60% / 100% 2px; }
.st-text--edit b { padding: 0 .1em; border-radius: 3px; background: var(--teal-wash); color: var(--teal-deeper); font-weight: 500; }
.st-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.st-week span { display: flex; flex-direction: column; gap: 3px; min-height: 92px; padding: 8px 6px; border: 1px dashed var(--line-strong); border-radius: 10px; font-size: .7rem; line-height: 1.3; }
.st-week b { color: var(--muted); }
.st-week em { font-style: normal; }
.st-week .is-post { border: 0; background: var(--teal-deep); color: #fff; }
.st-week .is-post b { color: rgba(255, 255, 255, .8); }
.st-week .is-post strong { font-size: .78rem; }
.st-week .is-soft { border-color: transparent; background: var(--paper); color: var(--muted); font-weight: 600; }
.st-bars { display: flex; align-items: flex-end; gap: 6px; height: 104px; border-bottom: 1px solid var(--line); }
.st-bars i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--teal), var(--teal-wash)); }
.st-next { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 10px; border-radius: 10px; background: var(--teal-wash); color: var(--teal-deeper); font-size: .8rem; font-weight: 600; }

/* ---------- wide: the stepper and the carousel ---------- */
.dc-rail { position: relative; margin: 6px 0 28px; }
.dc-rail__line { position: absolute; left: 10%; right: 10%; top: 46px; height: 3px; border-radius: 3px; background: var(--line); }
.dc-rail__line span { display: block; height: 100%; border-radius: inherit; background: var(--teal); transform-origin: 0 50%; transform: scaleX(var(--prog, 0)); transition: transform 450ms var(--ease-in-out); }
.dc-tabs { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dc-tab { display: grid; justify-items: center; gap: 10px; color: var(--muted); font-size: .9375rem; font-weight: 600; transition: color 200ms var(--ease-out); }
.dc-tab__art { display: grid; place-items: center; width: 94px; height: 94px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 12px 22px -16px rgba(12, 47, 53, .45); transition: box-shadow 250ms var(--ease-out), background-color 250ms var(--ease-out); }
.dc-tab__art img { height: 74px; transition: transform 350ms var(--ease-out); }
.dc-tab[aria-selected="true"] { color: var(--text); }
.dc-tab[aria-selected="true"] .dc-tab__art { background: #fff; box-shadow: 0 0 0 3px var(--teal), 0 18px 30px -16px rgba(12, 47, 53, .5); }
.dc-tab[aria-selected="true"] .dc-tab__art img { transform: translateY(-5px) scale(1.07); }
@media (hover: hover) and (pointer: fine) {
  .dc-tab[aria-selected="false"]:hover .dc-tab__art img { transform: translateY(-3px); }
}
.dc-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: 32px;
}
.dc-track::-webkit-scrollbar { display: none; }
.dc-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 40px;
  align-items: center;
  padding: 26px 40px 26px 26px;
  border-radius: 32px;
  background: var(--paper);
}
.dc-slide__art { display: grid; place-items: center; min-height: 420px; border-radius: 26px; }
.dc-slide__art .dio { height: 74%; }
.dc-n { color: var(--teal-deep); font-size: .875rem; font-weight: 700; }
.dc-slide h3 { margin: 6px 0 12px; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); }
.dc-slide__body > p:not(.dc-n) { max-width: 46ch; color: var(--muted); }
.dc-slide .st-sheet { max-width: 460px; margin-top: 26px; }
.dc-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.dc-arrow { display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid var(--line-strong); border-radius: 50%; color: var(--text); transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out); }
.dc-arrow:active { transform: scale(.94); }
.dc-arrow:disabled { opacity: .35; cursor: default; }
.dc-count { min-width: 56px; color: var(--muted); font-weight: 600; text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .dc-arrow:not(:disabled):hover { border-color: var(--text); }
}

/* ---------- phones: the paper path ---------- */
.da-path { position: relative; margin-top: 30px; }
.da-path__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.da-path__base { fill: none; stroke: rgba(13, 154, 171, .35); stroke-width: 2.5; stroke-dasharray: 1 11; stroke-linecap: round; }
.da-path__line { fill: none; stroke: var(--teal); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.da-plane {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 48px;
  height: auto;
  margin: -18px 0 0 -24px;
  filter: drop-shadow(0 12px 10px rgba(12, 47, 53, .3));
  transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--a, 0deg));
  pointer-events: none;
  will-change: transform;
}
.da-stops { position: relative; display: grid; gap: 34px; }
.da-stop { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: start; }
/* flex, not grid: a percentage height only resolves inside a definite flex container here */
.da-stop__art { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 120px; }
.da-stop__art .dio { height: 100%; }
.da-stop__art::after { content: ""; position: absolute; bottom: -6px; left: 50%; width: 70%; height: 18px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(12, 47, 53, .25), rgba(12, 47, 53, 0)); z-index: -1; }
.da-stop__n { color: var(--teal-deep); font-size: .875rem; font-weight: 700; }
.da-stop h3 { margin: 4px 0 8px; font-size: clamp(1.3rem, 1.1rem + .5vw, 1.55rem); }
.da-stop p { color: var(--muted); font-size: .94rem; }
.da-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 7px 12px; border-radius: 999px; background: #fff; color: var(--teal-deeper); font-size: .78rem; font-weight: 600; box-shadow: 0 0 0 1px var(--line), 0 10px 18px -12px rgba(12, 47, 53, .4); }
.da-chip s { color: var(--muted); text-decoration-color: var(--teal); text-decoration-thickness: 2px; }
@media (min-width: 600px) {
  .da-stops { gap: 48px; }
  .da-stop { grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: center; }
  .da-stop__art { height: 170px; }
  .da-stop__body { max-width: 52ch; }
  .da-plane { width: 60px; margin: -22px 0 0 -30px; }
}
/* each diorama lands when the path reaches it */
.js .da-stop:not(.is-reached) .dio { opacity: .25; scale: .9; translate: 0 14px; }
.da-stop .dio { transition: opacity 500ms var(--ease-out), scale 700ms var(--ease-drawer), translate 700ms var(--ease-drawer); }
.js .da-stop:not(.is-reached) .da-chip { opacity: 0; translate: 0 6px; }
.da-chip { transition: opacity 400ms var(--ease-out) 200ms, translate 500ms var(--ease-out) 200ms; }

@media (prefers-reduced-motion: reduce) {
  .js .da-stop:not(.is-reached) .dio { scale: 1; translate: none; }
  .dc-track { scroll-behavior: auto; }
}

/* ==========================================================================
   WHAT WE WRITE: the diorama rack
   ========================================================================== */
.fa-pane[hidden] { display: none; }
html:has(.fa-sheet[open]) { overflow: hidden; }
.fa {
  --rack-pad: max(var(--gutter), calc((100% - var(--wrap)) / 2)); /* % of the rack, so a scrollbar doesn't shift it */
  padding: var(--section) 0 calc(var(--section) * .8);
  overflow-x: clip;
  background:
    radial-gradient(45% 50% at 90% 0%, rgba(95, 208, 220, .2) 0%, rgba(95, 208, 220, 0) 70%),
    var(--paper);
}
.fa-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.fa-head .head { margin-bottom: 0; }
.fa-ctrl { display: flex; flex: none; gap: 10px; padding-bottom: 6px; }
.fa-rack {
  margin-top: clamp(32px, 4vw, 52px);
  padding: 14px 0 44px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rack-pad);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.fa-rack::-webkit-scrollbar { display: none; }
.fa-cards { display: flex; gap: 18px; width: max-content; margin: 0; padding: 0 var(--rack-pad); list-style: none; }
.fa-card { flex: none; width: clamp(264px, 23vw, 318px); scroll-snap-align: start; }
.fa-card__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 3 / 4.25;
  padding: 26px 24px;
  overflow: hidden;
  border-radius: 28px;
  background: var(--bg);
  color: var(--fg);
  text-align: left;
  box-shadow: 0 0 0 1px rgba(12, 47, 53, .06), 0 34px 50px -38px rgba(12, 47, 53, .7);
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.fa-card__btn:active { transform: scale(.98); }
.fa-card__k { color: var(--soft); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; }
.fa-card__t { margin-top: 12px; font: 400 clamp(1.6rem, 1.3rem + .7vw, 1.95rem)/1.05 var(--serif); letter-spacing: -.02em; }
.fa-card__s { max-width: 24ch; margin-top: 10px; color: var(--soft); font-size: .9375rem; line-height: 1.4; }
.fa-card__art {
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: 72%;
  height: auto;
  translate: -50% 0;
  filter: drop-shadow(0 26px 22px rgba(12, 47, 53, .38));
  transition: transform 500ms var(--ease-out);
}
.fa-card:nth-child(n+6) .fa-card__art { filter: drop-shadow(0 26px 24px rgba(0, 0, 0, .5)); }
.fa-card__plus {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--fg);
  color: var(--bg);
  transition: transform 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .fa-card__btn:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(12, 47, 53, .06), 0 44px 60px -38px rgba(12, 47, 53, .8); }
  .fa-card__btn:hover .fa-card__art { transform: translateY(-8px) rotate(-3deg) scale(1.04); }
  .fa-card__btn:hover .fa-card__plus { transform: rotate(90deg); }
}
.fa-progress { position: relative; height: 3px; border-radius: 3px; background: var(--line); }
.fa-progress span { position: absolute; top: 0; left: var(--l, 0%); width: var(--w, 30%); height: 100%; border-radius: inherit; background: var(--teal); }

/* the sheet: a centred card on wide screens, a bottom sheet on phones */
.fa-sheet {
  width: min(1120px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 40px 120px -30px rgba(12, 47, 53, .7);
  overflow: auto;
  overscroll-behavior: contain;
}
.fa-sheet::backdrop { background: rgba(12, 47, 53, .55); backdrop-filter: blur(4px); }
.fa-sheet[open] { animation: fa-in 320ms var(--ease-out) both; }
.fa-sheet[open]::backdrop { animation: fa-fade 320ms var(--ease-out) both; }
@keyframes fa-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@keyframes fa-fade { from { opacity: 0; } }
.fa-sheet__inner { position: relative; padding: 28px; }
.fa-sheet__close { position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); color: var(--text); transition: transform 160ms var(--ease-out); }
.fa-sheet__close:active { transform: scale(.94); }
.fa-pane { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 34px; align-items: stretch; }
.fa-pane.is-entering { animation: mock-in 380ms var(--ease-out) both; }
.fa-pane__side { padding: 4px 4px 12px; }
.fa-pane__art { display: block; width: 190px; height: auto; margin: -6px 0 14px -8px; filter: drop-shadow(0 22px 20px rgba(12, 47, 53, .35)); }
.fa-pane__k { color: var(--teal-deep); font-size: .875rem; font-weight: 700; }
.fa-pane__t { margin: 6px 0 12px; font-size: clamp(1.8rem, 1.4rem + 1vw, 2.4rem); }
.fa-pane__d { color: var(--muted); }
.fa-gets { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.fa-gets li { display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 600; }
.fa-gets .ico { flex: none; color: var(--teal); }
.fa-pane__sample { display: grid; place-items: center; align-content: center; gap: 18px; min-height: 460px; padding: 44px 28px 32px; border-radius: 22px; }
.fa-pane__sample .mock--paper, .fb-tile__sample .mock--paper { margin-bottom: 16px; }
.fa-pane__sample .mock--paper { margin-bottom: 16px; }
.fa-pane__cap { max-width: 44ch; color: var(--text-soft); font-size: .9375rem; text-align: center; }
.fa-sheet__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }
@media (max-width: 800px) {
  .fa-head { align-items: flex-start; flex-direction: column; }
  .fa-ctrl { display: none; }
  .fa-card { width: 76vw; }
  .fa-sheet { width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 24px 24px 0 0; }
  .fa-sheet[open] { animation-name: fa-up; animation-timing-function: var(--ease-drawer); animation-duration: 420ms; }
  .fa-sheet__inner { padding: 22px 16px 18px; }
  .fa-pane { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .fa-pane__art { width: 116px; margin: 0 0 8px; }
  .fa-pane__sample { min-height: 0; padding: 28px 12px 18px; }
}
@keyframes fa-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  .fa-sheet[open], .fa-sheet[open]::backdrop { animation: fa-fade 200ms linear both; }
}

/* ==========================================================================
   HERO: paper town at dusk
   The whole panorama is anchored to the bottom right and fades up into a background
   matched to its sky, so the headline sits in open sky at any width.
   ========================================================================== */
.hero--c { display: flex; align-items: center; min-height: min(100svh, 900px); background: #001F26; /* the scene's sky */ }
.hc-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hc-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 31, 38, .7) 0%, rgba(0, 31, 38, .35) 36%, rgba(0, 31, 38, 0) 56%),
    linear-gradient(0deg, rgba(0, 31, 38, .5) 0%, rgba(0, 31, 38, 0) 26%);
}
.hc-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: max(100%, 1180px);
  height: auto;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
}
.hc-inner { width: 100%; padding-bottom: clamp(56px, 7vw, 104px); }
.hero--c .hero__copy { max-width: 700px; }
/* the scene comes up out of the dark, slowly, once */
.is-intro .hero--c:not(.is-ready) .hc-bg { opacity: 0; transform: scale(1.06); }
.hero--c.is-ready .hc-bg { transition: opacity 1200ms var(--ease-out), transform 2600ms var(--ease-out); }
/* phones: the scene is a band under the header, and the headline settles onto its hills */
@media (max-width: 900px) {
  .hero--c { display: block; min-height: 0; padding-top: 0; }
  .hc-scene { position: relative; inset: auto; z-index: 0; height: clamp(380px, 52vw, 460px); margin-bottom: -64px; }
  .hc-bg { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 82% 60%; -webkit-mask-image: none; mask-image: none; }
  .hc-scene::after { background: linear-gradient(0deg, #001F26 0%, rgba(0, 31, 38, .82) 30%, rgba(0, 31, 38, 0) 66%); }
  .hc-inner { position: relative; z-index: 1; margin-top: -140px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--c.is-ready .hc-bg { transition-property: opacity; }
}