/* ===========================================================================
   premium.css — shared layout engine for the three Premium profile templates
   ---------------------------------------------------------------------------
   Loaded after tokens.css and base.css. Every value here comes from a token;
   nothing below invents a colour, a radius or a shadow.

   Two structural decisions drive the whole file:

   1. The page lives inside `.frame`, which is a *container query context*.
      The viewport switcher changes the frame's max-width, and because every
      inner layout below asks `@container frame (min-width: …)` rather than
      `@media`, the whole page genuinely re-flows into its tablet and phone
      layouts inside the preview. A media query would keep measuring the
      browser window and the preview would show the desktop layout squeezed
      into a phone-shaped box, which is worse than no preview at all.

   2. Nothing repeats its neighbour's shape. Hero is an asymmetric split,
      About is an offset portrait plus a stats bento, Services is a
      deliberately uneven bento, Work is true masonry plus a stepped case
      list, Brands is a marquee, Reviews is a snap rail of tilted cards,
      Contact is a form beside a card. The style stays constant — 8–12px
      radii, hairline borders, soft shadows, backdrop blur, line icons — and
      only the geometry changes.

   Sections
     1  Page shell and preview frame
     2  Layout primitives
     3  Buttons, pills, icons
     4  Top bar and navigation
     5  Mobile nav panel
     6  Hero
     7  About and the stats bento
     8  Services bento
     9  Work — masonry and case studies
    10  Trusted brands marquee
    11  Testimonials
    12  Contact
    13  Footer
    14  Toast
    15  Persona tuning hooks
    16  Motion, focus and print
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1 — PAGE SHELL AND PREVIEW FRAME
   --------------------------------------------------------------------------- */

html {
  /* Anchor navigation. base.css already resets this to `auto` under
     prefers-reduced-motion, so the smooth scroll is guarded. */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--pm-header-h) + 1rem);
}

body.pm {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

/* The stage is the desk the preview sits on. At desktop it is invisible —
   the page is full bleed. In the two capped previews it pulls back and turns
   a shade darker so the frame reads as a device on a surface. */
.stage {
  min-height: 100vh;
  padding: 0;
  transition: padding var(--duration-slow) var(--ease-spring),
              background-color var(--duration-base) var(--ease-out);
}

[data-viewport="tablet"] .stage,
[data-viewport="mobile"] .stage {
  padding: clamp(1rem, 3vw, 2.5rem) var(--space-4);
  background: var(--color-bg-sunken);
}

.frame {
  width: 100%;
  max-width: var(--pm-width);
  margin-inline: auto;
  background: var(--color-bg);

  /* The query context the entire page measures itself against. */
  container-type: inline-size;
  container-name: frame;

  /* `clip`, never `hidden`. `hidden` would turn this into a scroll container
     and the sticky top bar would stop sticking to the window. */
  overflow: clip;

  /* max-width is deliberately NOT transitioned. Chrome wedges a max-width
     transition whose endpoints come from different `var()` declarations: the
     first switch animates, then the computed value freezes and later switches
     never move off it. The stage padding, border radius and shadow still
     animate, so the frame still reads as a device being picked up — the width
     itself just snaps, which is also how a real device rotation behaves. */
  transition: border-radius var(--duration-slow) var(--ease-spring),
              box-shadow var(--duration-slow) var(--ease-out);
}

[data-viewport="tablet"] .frame { max-width: var(--pm-width-tablet); }
[data-viewport="mobile"] .frame { max-width: var(--pm-width-mobile); }

[data-viewport="tablet"] .frame,
[data-viewport="mobile"] .frame {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--pm-radius-frame);
  box-shadow: var(--shadow-float);
}


/* ---------------------------------------------------------------------------
   2 — LAYOUT PRIMITIVES
   --------------------------------------------------------------------------- */

/* The inlined icon sprite is markup, not content. */
.sprite { display: none; }

.wrap {
  width: 100%;
  max-width: var(--pm-read);
  margin-inline: auto;
  padding-inline: var(--pm-gutter);
}

.sect {
  position: relative;
  padding-block: var(--pm-section-y);
}

.sect--sunken { background: var(--color-bg-sunken); }

.sect--hairline { border-top: 1px solid var(--color-border); }

/* Section head. Three arrangements so consecutive sections do not announce
   themselves the same way twice. */
.shead { margin-bottom: clamp(2rem, 1.2rem + 2.4cqi, 3.25rem); }
.shead--center { text-align: center; margin-inline: auto; max-width: 44rem; }

.shead--split {
  display: grid;
  gap: var(--space-4);
  align-items: end;
}

@container frame (min-width: 52rem) {
  .shead--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-10);
  }
  .shead--split .shead__sub { margin-bottom: 0.35rem; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: 0.3rem 0.7rem 0.3rem 0.5rem;
  border: 1px solid var(--color-accent-soft-border);
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
}

.shead__title {
  margin: 0;
  font-size: var(--pm-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.shead__sub {
  margin: var(--space-3) 0 0;
  max-width: 46ch;
  color: var(--color-text-muted);
  font-size: var(--pm-lead);
  line-height: var(--leading-relaxed);
}

.shead--center .shead__sub { margin-inline: auto; }

/* Accented word inside a heading. <em> is used for the emphasis it really
   is, and the italic is removed rather than a <span> being invented. */
.ink {
  font-style: normal;
  color: var(--color-accent-text);
}

/* Conditional rendering: any optional field that ends up with no content
   collapses instead of leaving a gap. premium.js also hides whole blocks
   whose children all went away. */
.opt:empty { display: none !important; }


/* ---------------------------------------------------------------------------
   3 — BUTTONS, PILLS, ICONS
   --------------------------------------------------------------------------- */

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}
.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 1.5rem; height: 1.5rem; }
.icon--xl { width: 2rem; height: 2rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.7rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring),
              box-shadow var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.btn--lg { padding: 0.9rem 1.5rem; font-size: var(--text-base); }
.btn--sm { padding: 0.5rem 0.85rem; font-size: var(--text-xs); }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--accent-gradient);
  color: var(--color-text-on-accent);
  box-shadow: var(--accent-shadow);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--accent-shadow-lg);
}
.btn--primary:active { transform: translateY(0); }

.btn--wa {
  background: var(--whatsapp-500);
  color: var(--white);
  box-shadow: 0 8px 18px -8px rgb(var(--rgb-whatsapp-500) / 0.55);
}
.btn--wa:hover {
  background: var(--whatsapp-600);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgb(var(--rgb-whatsapp-500) / 0.6);
}
.btn--wa:active { transform: translateY(0); }

.btn--ghost {
  background: var(--color-surface-translucent);
  backdrop-filter: blur(10px);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-accent);
  color: var(--color-accent-text);
  box-shadow: var(--shadow-md);
}
.btn--ghost:active { transform: translateY(0); }

.btn--quiet {
  background: var(--color-surface-muted);
  color: var(--color-text);
}
.btn--quiet:hover { background: var(--color-accent-soft); color: var(--color-accent-text); }

/* Square icon-only control used across the top bar and the footer dock. */
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-spring);
}
.iconbtn:hover {
  color: var(--color-accent-text);
  border-color: var(--color-border-accent);
  background: var(--color-accent-soft);
  transform: translateY(-1px);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}


/* ---------------------------------------------------------------------------
   4 — TOP BAR AND NAVIGATION
   --------------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--pm-header-h);
  padding-inline: var(--pm-gutter);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-translucent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

.topbar__mark {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1.5px var(--accent-line);
}

.topbar__name {
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topnav { display: none; margin-inline: auto; }

.topnav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.topnav__link {
  position: relative;
  display: block;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.topnav__link:hover { color: var(--color-text); background: var(--color-surface-muted); }

/* Scroll-spy state. premium.js writes aria-current on the link whose section
   is in view, so the styling hangs off the accessibility state rather than a
   parallel `.is-active` class that screen readers would never hear about. */
.topnav__link[aria-current="true"] {
  color: var(--color-accent-text);
  background: var(--color-accent-soft);
}

/* Owner tools cluster — viewport switcher, accent picker, theme toggle. */
.owner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.viewport-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.vp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius-xs);
  color: var(--color-text-subtle);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.vp:hover { color: var(--color-text); }
.vp[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-accent-text);
  box-shadow: var(--shadow-xs);
}

/* A real phone has no second viewport to preview, so the switcher is removed
   rather than left on screen doing nothing. Both queries are intentionally
   `@media`: they ask about the actual device, not the simulated frame. */
@media (hover: none) and (pointer: coarse) {
  .viewport-switch { display: none; }
}
@media (max-width: 47.9375rem) {
  .viewport-switch { display: none; }
}

/* Accent picker */
.accent { position: relative; }

.accent__pop {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  z-index: var(--z-overlay);
  width: 14.5rem;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--pm-radius);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-xl);
}
.accent__pop[hidden] { display: none; }

.accent__title {
  margin: 0 0 var(--space-3);
  color: var(--color-text-subtle);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.accent__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
}

.accent__swatch {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--sw);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgb(var(--rgb-slate-900) / 0.14);
  transition: transform var(--duration-fast) var(--ease-spring);
}
.accent__swatch:hover { transform: scale(1.14); }
.accent__swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--color-surface-raised), 0 0 0 4px var(--sw);
}

.accent__custom {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.accent__custom input[type="color"] {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: none;
  cursor: pointer;
}

.topbar__cta { display: none; }
.topbar__burger { display: inline-flex; }

/* Nav links and the header CTA only appear once the frame is wide enough to
   hold them beside the owner tools. Below that they live in the panel. */
@container frame (min-width: 60rem) {
  .topnav { display: block; }
  .topbar__burger { display: none; }
  .topbar__cta { display: inline-flex; }
}

@container frame (max-width: 30rem) {
  .topbar__name { display: none; }
}


/* ---------------------------------------------------------------------------
   5 — MOBILE NAV PANEL
   --------------------------------------------------------------------------- */

.navpanel {
  position: sticky;
  top: var(--pm-header-h);
  z-index: var(--z-overlay);
  padding: var(--space-4) var(--pm-gutter) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.navpanel[hidden] { display: none; }

.navpanel__list { display: grid; gap: 2px; }

.navpanel__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}
.navpanel__link:hover { background: var(--color-surface-muted); }
.navpanel__link[aria-current="true"] {
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}
.navpanel__link .icon { color: var(--color-text-subtle); }

.navpanel__cta { margin-top: var(--space-4); }

@container frame (min-width: 60rem) {
  .navpanel { display: none !important; }
}


/* ---------------------------------------------------------------------------
   6 — HERO
   Asymmetric split: copy on the left, a tilted portrait card on the right
   with satellite chips floating around it. No video, by instruction — the
   depth comes from layered translucent surfaces and a pointer-driven tilt.
   --------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(2.75rem, 1.4rem + 5cqi, 6rem) var(--pm-section-y);
  overflow: clip;
}

.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: clip;
}

.blob {
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(70px);
  opacity: 0.55;
}
.blob--a {
  top: -14%;
  right: -8%;
  width: min(34rem, 60cqi);
  aspect-ratio: 1;
  background: var(--accent-glow);
  animation: drift-a 19s var(--ease-in-out) infinite alternate;
}
.blob--b {
  bottom: -22%;
  left: -12%;
  width: min(28rem, 52cqi);
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--color-accent-secondary) 28%, transparent);
  animation: drift-b 23s var(--ease-in-out) infinite alternate;
}

/* A faint ruled plane behind the hero. It is what gives the floating cards
   something to float above. */
.grid-fade {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--color-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-border) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  opacity: 0.7;
}

.hero__wrap {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 3cqi, 4rem);
  align-items: center;
}

@container frame (min-width: 58rem) {
  .hero__wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0.35rem 0.85rem 0.35rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-translucent);
  backdrop-filter: blur(10px);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-success);
}
.dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-success);
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}

.hero__title {
  margin: 0;
  font-size: var(--pm-display);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tighter);
  text-wrap: balance;
}

.hero__lead {
  margin: var(--space-5) 0 0;
  max-width: 48ch;
  color: var(--color-text-muted);
  font-size: var(--pm-lead);
  line-height: var(--leading-relaxed);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-8) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.hero__proof b {
  display: block;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}
.hero__proof span {
  color: var(--color-text-subtle);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* --- the 3D portrait --- */
.hero__visual {
  position: relative;
  perspective: var(--pm-perspective);
}

.hero__card {
  position: relative;
  border-radius: var(--pm-radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-float), 0 40px 80px -40px var(--accent-glow);
  overflow: clip;

  /* JS writes --rx/--ry from pointer position; the resting state is the
     token tilt so the card already looks dimensional before anyone moves. */
  --rx: calc(var(--pm-tilt) * 0.25);
  --ry: calc(var(--pm-tilt) * -0.6);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.hero__card:hover { box-shadow: var(--shadow-float), 0 50px 90px -40px var(--accent-glow); }

.hero__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.hero__plate {
  position: absolute;
  inset: auto var(--space-4) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgb(var(--rgb-white) / 0.22);
  border-radius: var(--pm-radius);
  background: rgb(15 23 42 / 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--white);
  transform: translateZ(45px);
}
.hero__plate b { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.hero__plate span { font-size: var(--text-2xs); opacity: 0.8; }
.hero__plate .icon { color: var(--white); opacity: 0.9; }

/* Satellite chips. They sit outside the card and lift on the Z axis, which
   is what sells the depth — a flat badge pinned to a corner does not. */
.chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-translucent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.chip .icon { color: var(--color-accent-text); }
.chip--1 { top: 8%; left: -6%; animation: float-y 7s var(--ease-in-out) infinite; }
.chip--2 { top: 44%; right: -7%; animation: float-y-sm 5.5s var(--ease-in-out) infinite 0.5s; }
.chip--3 { bottom: 26%; left: -4%; animation: float-y-sm 6.5s var(--ease-in-out) infinite 1s; }

/* Inside a narrow frame the chips would hang off the edge, so they tuck in. */
@container frame (max-width: 42rem) {
  .chip--1 { left: 2%; }
  .chip--2 { right: 2%; }
  .chip--3 { left: 4%; }
}


/* ---------------------------------------------------------------------------
   7 — ABOUT AND THE STATS BENTO
   Offset portrait beside the story, then a four-cell bento where one cell is
   deliberately twice the size of its neighbours.
   --------------------------------------------------------------------------- */

.about__top {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3cqi, 3.5rem);
  align-items: start;
}

@container frame (min-width: 56rem) {
  .about__top { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
}

.about__figure {
  position: relative;
  margin: 0;
}

.about__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--pm-radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
}

/* The offset frame behind the portrait. Decorative only.

   The offset is capped to just under the page gutter. At two-column widths it
   lands in the grid gutter and the full 24px shows; at one-column widths the
   figure spans the whole wrap, so an uncapped offset would poke past the page
   edge and give the entire page a few pixels of sideways scroll. */
.about__figure::before {
  content: "";
  position: absolute;
  --fig-offset: min(var(--space-6), calc(var(--pm-gutter) - 0.25rem));
  inset: var(--fig-offset) calc(var(--fig-offset) * -1) calc(var(--fig-offset) * -1) var(--fig-offset);
  border: 1px solid var(--accent-line);
  border-radius: var(--pm-radius-lg);
  background: var(--accent-wash);
  z-index: -1;
}

.about__note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--pm-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.about__note .icon { color: var(--color-accent-text); }

.about__body p {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--pm-lead);
  line-height: var(--leading-relaxed);
}
.about__body p:first-of-type {
  color: var(--color-text);
  font-size: calc(var(--pm-lead) * 1.08);
}
.about__body p:last-child { margin-bottom: 0; }

.about__values {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
}

@container frame (min-width: 34rem) {
  .about__values { grid-template-columns: 1fr 1fr; }
}

.about__value {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.about__value .icon {
  margin-top: 0.1rem;
  padding: 0.3rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}
.about__value b { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.about__value span { color: var(--color-text-subtle); font-size: var(--text-xs); line-height: var(--leading-snug); }

/* --- quick stats bento --- */
.stats {
  display: grid;
  gap: var(--space-4);
  margin-top: clamp(2.5rem, 1.5rem + 3cqi, 4rem);
  grid-template-columns: 1fr;
}

@container frame (min-width: 34rem) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container frame (min-width: 56rem) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* The lead statistic takes two columns and both rows; the rest orbit it. */
  .stat--lead { grid-column: span 2; grid-row: span 2; }
  .stat--wide { grid-column: span 2; }
}

.stat {
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--pm-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  overflow: clip;
  transition: transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.stat:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-lg);
}

.stat__num {
  display: block;
  font-size: clamp(1.9rem, 1.2rem + 2.2cqi, 3rem);
  font-weight: var(--weight-extrabold);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
}
.stat__label {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.stat--lead {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  background: var(--accent-gradient);
  border-color: transparent;
  color: var(--color-text-on-accent);
  box-shadow: var(--accent-shadow);
}
.stat--lead .stat__num { font-size: clamp(2.4rem, 1.4rem + 3.4cqi, 4rem); }
.stat--lead .stat__label { color: rgb(var(--rgb-white) / 0.82); font-size: var(--text-sm); }
.stat--lead:hover { box-shadow: var(--accent-shadow-lg); }

.stat__ghost {
  position: absolute;
  right: -0.75rem;
  bottom: -0.75rem;
  width: 6.5rem;
  height: 6.5rem;
  color: currentColor;
  opacity: 0.12;
  pointer-events: none;
}


/* ---------------------------------------------------------------------------
   8 — SERVICES BENTO
   Seven tiles on a four-column grid: one 2×2 flagship, one 2×1 wide tile,
   four single cells and a 2×1 enquiry tile closing the block. The grid is
   intentionally uneven — an even 3×2 would read as a price table.
   --------------------------------------------------------------------------- */

.bento {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@container frame (min-width: 34rem) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__cell--flag,
  .bento__cell--wide,
  .bento__cell--ask { grid-column: span 2; }
}

@container frame (min-width: 58rem) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bento__cell--flag { grid-column: span 2; grid-row: span 2; }
  .bento__cell--wide { grid-column: span 2; }
  .bento__cell--ask  { grid-column: span 2; }
}

.bento__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--pm-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  overflow: clip;
  transition: transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.bento__cell:hover {
  transform: translateY(-5px);
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-xl);
}

/* The accent wash that sweeps in from the corner on hover. */
.bento__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 70% at 100% 0%, var(--accent-wash) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
  pointer-events: none;
}
.bento__cell:hover::after { opacity: 1; }

.bento__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-accent-soft-border);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.bento__title {
  margin: 0;
  font-size: var(--pm-h3);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.bento__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* Starting price is optional per service — the markup simply omits it and
   nothing collapses, because the footer row is only rendered when present. */
.bento__price {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}
.bento__price b {
  color: var(--color-accent-text);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.bento__cell--flag {
  padding: clamp(1.5rem, 1rem + 1.4cqi, 2.25rem);
  background: var(--color-surface-raised);
  border-color: var(--color-border-strong);
}
.bento__cell--flag .bento__title { font-size: clamp(1.35rem, 1rem + 1.4cqi, 1.9rem); }
.bento__cell--flag .bento__text { font-size: var(--pm-lead); }

/* The watermark glyph that makes the flagship tile feel like a poster. */
.bento__watermark {
  position: absolute;
  right: -2rem;
  bottom: -2.5rem;
  width: 13rem;
  height: 13rem;
  color: var(--color-accent-text);
  opacity: 0.07;
  pointer-events: none;
}

.bento__list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
}
.bento__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.bento__list .icon { margin-top: 0.15rem; color: var(--color-accent-text); }

.bento__cell--ask {
  align-items: flex-start;
  justify-content: center;
  border-style: dashed;
  background: var(--color-bg-sunken);
  box-shadow: none;
}
.bento__cell--ask:hover { box-shadow: var(--shadow-md); }


/* ---------------------------------------------------------------------------
   9 — WORK: MASONRY AND CASE STUDIES
   Real masonry via CSS columns, so each photograph keeps its own aspect ratio
   and the three personas' galleries look like three different bodies of work.
   Below it, a stepped case list — a different shape again, so the section
   does not read as one grid stacked on another.
   --------------------------------------------------------------------------- */

.masonry {
  columns: 1;
  column-gap: var(--space-4);
}

@container frame (min-width: 34rem) { .masonry { columns: 2; } }
@container frame (min-width: 62rem) { .masonry { columns: 3; } }

.mcard {
  position: relative;
  break-inside: avoid;
  margin: 0 0 var(--space-4);
  border-radius: var(--pm-radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  overflow: clip;
  transition: transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-base) var(--ease-out);
}
.mcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }

.mcard img {
  width: 100%;
  height: auto;
  transition: transform var(--duration-slower) var(--ease-out);
}
.mcard:hover img { transform: scale(1.04); }

.mcard__cap {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4) var(--space-4);
  background: linear-gradient(to top, rgb(15 23 42 / 0.82) 0%, rgb(15 23 42 / 0) 100%);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.mcard:hover .mcard__cap,
.mcard:focus-within .mcard__cap { opacity: 1; transform: none; }

.mcard__cap .icon { color: var(--white); opacity: 0.85; }

/* --- stepped case studies --- */
.cases {
  display: grid;
  gap: var(--space-4);
  margin: clamp(2.5rem, 1.5rem + 3cqi, 4rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.case {
  position: relative;
  display: grid;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--pm-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.case:hover {
  transform: translateX(4px);
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-lg);
}

/* Each row steps a little further in than the one above, which is what makes
   this read as a sequence rather than three identical bars. */
@container frame (min-width: 56rem) {
  .case {
    grid-template-columns: 3.25rem 10rem minmax(0, 1fr) auto 1.5rem;
    gap: var(--space-5);
  }
  .case:nth-child(2) { margin-left: var(--space-6); }
  .case:nth-child(3) { margin-left: calc(var(--space-6) * 2); }
}

.case__no {
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-text);
  letter-spacing: var(--tracking-tight);
}

.case__thumb {
  border-radius: var(--radius-md);
  overflow: clip;
  border: 1px solid var(--color-border);
}
.case__thumb img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.case__title {
  margin: 0;
  font-size: var(--pm-h3);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.case__text {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.case__metric {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-accent-soft-border);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  text-align: center;
  white-space: nowrap;
}
.case__metric b {
  display: block;
  color: var(--color-accent-text);
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
}
.case__metric span { color: var(--color-text-subtle); font-size: var(--text-2xs); }

.case__go {
  color: var(--color-text-subtle);
  transition: color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-spring);
}
.case:hover .case__go { color: var(--color-accent-text); transform: translate(2px, -2px); }

/* Stretched link: the whole row is the hit area, but only the title is in
   the tab order, so keyboard users get one stop per case rather than five. */
.case__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}


/* ---------------------------------------------------------------------------
   10 — TRUSTED BRANDS MARQUEE
   Local SVG wordmarks, greyscale at rest, colour on hover.
   --------------------------------------------------------------------------- */

.brands { padding-block: clamp(2.5rem, 1.6rem + 2.6cqi, 4.5rem); }

.brands__head {
  margin: 0 0 var(--space-6);
  text-align: center;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.marquee {
  position: relative;
  overflow: clip;
  mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(2rem, 1.2rem + 2.4cqi, 3.5rem);
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__logo {
  flex: none;
  height: 2.25rem;
  width: auto;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-spring);
}
.marquee__logo:hover { filter: none; opacity: 1; transform: translateY(-3px); }

/* Dark mode: the wordmarks are drawn in dark ink, so they are inverted
   rather than redrawn in a second colourway. */
[data-theme="dark"] .marquee__logo { filter: grayscale(1) invert(1) brightness(1.6); }
[data-theme="dark"] .marquee__logo:hover { filter: invert(1) brightness(1.3); }

/* An endless scroll with no way to stop it is a motion-sensitivity problem,
   so without animation the track simply wraps into a static row. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    row-gap: var(--space-5);
  }
}


/* ---------------------------------------------------------------------------
   11 — TESTIMONIALS
   A scroll-snap rail of cards, each with two rotated ghost cards stacked
   behind it. The stack is drawn with pseudo-elements so the overlap costs no
   markup and the rail keeps native scrolling, swipe and keyboard paging.
   --------------------------------------------------------------------------- */

.voices__rail {
  display: flex;
  gap: var(--space-5);
  /* Generous padding so the rotated ghost cards are not clipped by the
     scroll container's own edges. */
  padding: var(--space-5) var(--pm-gutter) var(--space-8);
  margin-inline: calc(var(--pm-gutter) * -1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pm-gutter);
  scrollbar-width: none;
  perspective: var(--pm-perspective);
}
.voices__rail::-webkit-scrollbar { display: none; }

.voice {
  position: relative;
  flex: 0 0 min(23rem, 82cqi);
  scroll-snap-align: start;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--pm-radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  transform-style: preserve-3d;
  transition: transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-base) var(--ease-out);
}

.voice::before,
.voice::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-border);
  border-radius: inherit;
  background: var(--color-surface-muted);
  z-index: -1;
  transition: transform var(--duration-base) var(--ease-spring);
}
.voice::before { transform: rotate(-3deg) translateZ(-40px) scale(0.985); }
.voice::after  { transform: rotate(2.2deg) translateZ(-80px) scale(0.97); opacity: 0.7; }

.voice:hover { transform: translateY(-6px) rotateX(2deg); box-shadow: var(--shadow-xl); }
.voice:hover::before { transform: rotate(-5.5deg) translateZ(-40px) scale(0.985); }
.voice:hover::after  { transform: rotate(4deg) translateZ(-80px) scale(0.97); }

.voice__quote {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-accent-text);
  opacity: 0.14;
}

.voice__stars { display: flex; gap: 2px; margin-bottom: var(--space-4); }
.voice__stars .icon { width: 1rem; height: 1rem; color: var(--amber-400); }

.voice__text {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.voice__by {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.voice__by img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1.5px var(--accent-line);
}
.voice__by b { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.voice__by span { color: var(--color-text-subtle); font-size: var(--text-xs); }

.voices__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.voices__dots { display: flex; gap: var(--space-2); margin-right: auto; }

.voices__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  cursor: pointer;
  transition: width var(--duration-base) var(--ease-spring),
              background-color var(--duration-base) var(--ease-out);
}
.voices__dot[aria-current="true"] {
  width: 1.5rem;
  background: var(--color-accent);
}


/* ---------------------------------------------------------------------------
   12 — CONTACT
   Form on the left, a direct WhatsApp card on the right. The form is UI only;
   the page says so in plain words rather than pretending to send.
   --------------------------------------------------------------------------- */

.contact__grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2cqi, 2.5rem);
  align-items: start;
}

@container frame (min-width: 56rem) {
  .contact__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
}

.card {
  padding: clamp(1.5rem, 1rem + 1.4cqi, 2.25rem);
  border: 1px solid var(--color-border);
  border-radius: var(--pm-radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.form { display: grid; gap: var(--space-4); }

.form__row { display: grid; gap: var(--space-4); }

@container frame (min-width: 34rem) {
  .form__row { grid-template-columns: 1fr 1fr; }
}

.field { display: grid; gap: var(--space-2); }

.field__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}
.field__label i { font-style: normal; color: var(--color-danger-text); }

.field__input,
.field__select,
.field__area {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-sm);
  background: var(--color-field);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.field__area { min-height: 7.5rem; resize: vertical; }

.field__input:focus,
.field__select:focus,
.field__area:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.field__input::placeholder,
.field__area::placeholder { color: var(--color-text-subtle); }

.field__error {
  color: var(--color-danger-text);
  font-size: var(--text-2xs);
}
.field__error:empty { display: none; }

.field[data-invalid="true"] .field__input,
.field[data-invalid="true"] .field__select,
.field[data-invalid="true"] .field__area {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
}

.form__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
}
.form__note .icon { margin-top: 0.05rem; width: 0.9rem; height: 0.9rem; }

.contact__direct { display: grid; gap: var(--space-4); }

.wa-card {
  position: relative;
  padding: clamp(1.5rem, 1rem + 1.4cqi, 2rem);
  border: 1px solid var(--color-border);
  border-radius: var(--pm-radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  overflow: clip;
}
.wa-card::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -30%;
  width: 18rem;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: rgb(var(--rgb-whatsapp-500) / 0.14);
  filter: blur(40px);
  pointer-events: none;
}
.wa-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: rgb(var(--rgb-whatsapp-500) / 0.14);
  color: var(--whatsapp-600);
}
.wa-card h3 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--pm-h3);
  font-weight: var(--weight-semibold);
}
.wa-card p {
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.detail-list { display: grid; gap: var(--space-3); margin: 0; }

.detail {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--pm-radius);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-spring);
}
.detail:hover { border-color: var(--color-border-accent); transform: translateY(-2px); }
.detail .icon { color: var(--color-accent-text); }
.detail b { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.detail span { color: var(--color-text-subtle); font-size: var(--text-2xs); }


/* ---------------------------------------------------------------------------
   13 — FOOTER
   Social dock, the two document downloads, the NFC quick-share badge.
   --------------------------------------------------------------------------- */

.pfoot {
  position: relative;
  padding-block: clamp(2.5rem, 1.6rem + 2.8cqi, 4.5rem) var(--space-8);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-sunken);
  overflow: clip;
}

.pfoot__top {
  display: grid;
  gap: clamp(2rem, 1.2rem + 2.4cqi, 3rem);
  align-items: center;
  text-align: center;
  justify-items: center;
}

@container frame (min-width: 58rem) {
  .pfoot__top {
    grid-template-columns: minmax(0, 1fr) auto;
    text-align: left;
    justify-items: start;
  }
}

.pfoot__title {
  margin: 0;
  font-size: var(--pm-h2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.pfoot__sub {
  margin: var(--space-3) 0 0;
  max-width: 42ch;
  color: var(--color-text-muted);
  font-size: var(--pm-lead);
}

/* The NFC quick-share badge. It shares the card; it does not sell one. */
.nfc {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--pm-radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  text-align: left;
  transition: transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.nfc:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-xl), 0 18px 40px -22px var(--accent-glow);
}

.nfc__disc {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background: var(--accent-gradient);
  color: var(--color-text-on-accent);
  box-shadow: var(--accent-shadow);
}
.nfc__disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--color-accent);
  animation: pulse-ring 2.8s var(--ease-out) infinite;
}
.nfc__meta b { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.nfc__meta span { color: var(--color-text-subtle); font-size: var(--text-xs); }

.pfoot__mid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: clamp(2rem, 1.2rem + 2.4cqi, 3rem);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-border);
}

.dock {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  margin-right: auto;
}

@container frame (max-width: 44rem) {
  .pfoot__mid { justify-content: center; }
  .dock { margin-right: 0; justify-content: center; }
}

.dock__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-spring);
}
.dock__link:hover {
  color: var(--color-accent-text);
  border-color: var(--color-border-accent);
  background: var(--color-accent-soft);
  transform: translateY(-3px);
}

.pfoot__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}
.pfoot__bottom p { margin: 0; }
.pfoot__by { display: inline-flex; align-items: center; gap: var(--space-2); }
.pfoot__by a { color: var(--color-accent-text); font-weight: var(--weight-medium); }


/* ---------------------------------------------------------------------------
   14 — TOAST
   --------------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: calc(100vw - 2rem);
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  transform: translate(-50%, 1rem);
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-spring);
}
.toast.is-open { opacity: 1; transform: translate(-50%, 0); }


/* ---------------------------------------------------------------------------
   15 — PERSONA TUNING HOOKS
   The three templates share this stylesheet and differ only in typography
   hierarchy, accent usage and gallery ratio — exactly the axes the brief
   allows. Each page sets one class on <body>.
   --------------------------------------------------------------------------- */

/* Freelancer — engineering voice: heavy, tight, uppercase eyebrows. */
.pm--dev .hero__title { font-weight: var(--weight-extrabold); letter-spacing: -0.035em; }
.pm--dev .eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-widest); }
.pm--dev .shead__title { letter-spacing: var(--tracking-tight); }

/* Photographer — editorial voice: lighter display weight, airy tracking,
   Title Case labels and a taller gallery rhythm. */
.pm--photo .hero__title { font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.pm--photo .shead__title { font-weight: var(--weight-semibold); letter-spacing: 0; }
.pm--photo .eyebrow { letter-spacing: var(--tracking-wide); }
.pm--photo .stat__num,
.pm--photo .case__no { font-weight: var(--weight-bold); }
@container frame (min-width: 62rem) {
  .pm--photo .masonry { columns: 3; column-gap: var(--space-5); }
}

/* Influencer — social voice: the loudest hierarchy of the three. */
.pm--reel .hero__title { font-weight: var(--weight-extrabold); letter-spacing: -0.045em; }
.pm--reel .shead__title { font-weight: var(--weight-extrabold); letter-spacing: -0.03em; }
.pm--reel .eyebrow { letter-spacing: var(--tracking-normal); }
.pm--reel .stat__num { letter-spacing: -0.05em; }


/* ---------------------------------------------------------------------------
   16 — MOTION, FOCUS AND PRINT
   --------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  .blob,
  .chip,
  .dot::after,
  .nfc__disc::after { animation: none; }

  .hero__card { transform: none; }

  .voice::before,
  .voice::after { transform: none; opacity: 0; }

  .voices__rail { scroll-behavior: auto; }
}

@media print {
  .topbar,
  .navpanel,
  .owner,
  .toast,
  .hero__glow,
  .voices__controls { display: none !important; }

  .frame { max-width: none; box-shadow: none; border: 0; }
  .sect { padding-block: var(--space-6); break-inside: avoid; }
}