/* ============================================================
   Kingsbury & Marshall — site styles
   ============================================================ */

@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #FBF7F0;
  --border: #D8DCE6;
  --ink: #0B1B3A;
  --black: #0B1B3A;
  --white: #FFFFFF;
  --brand: #4F7FFF;
  --brand-dark: #3B68E8;
  --navy: #0B1B3A;
  --navy-muted: #5C6B87;

  --font-serif: "Satoshi", Helvetica, Arial, sans-serif;
  --font-sans: "Satoshi", Helvetica, Arial, sans-serif;
  --font-editorial: "Satoshi", Helvetica, Arial, sans-serif;

  --gap: 16px;
  --side: 48px;
  --max: 1329px;
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--black);
  font-family: var(--font-editorial);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------------- Header ---------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--cream);
}

.header-inner { position: relative; }

.header-inner {
  width: 100%;
  padding: 0 var(--side);
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo-img { height: 26px; width: auto; display: block; }

.header-right {
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* Flyout nav: pinned to the burger's left edge, unfurls leftward as it opens */
.flyout-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .45s cubic-bezier(.65,0,.35,1), opacity .3s ease, margin-right .45s cubic-bezier(.65,0,.35,1);
}
.flyout-nav.is-open {
  max-width: 480px;
  opacity: 1;
  margin-right: 32px;
  transition: max-width .45s cubic-bezier(.65,0,.35,1) .05s, opacity .35s ease .1s, margin-right .45s cubic-bezier(.65,0,.35,1) .05s;
}

.flyout-nav a {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--black);
  position: relative;
  padding-bottom: 2px;
}

.flyout-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right .25s ease;
}
.flyout-nav a:hover::after { right: 0; }

.menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 32px; height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.menu-icon {
  position: relative;
  width: 22px;
  height: 14px;
}
.menu-icon .bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--black);
  transition: top .3s ease, transform .3s ease;
}
.menu-icon .bar:nth-child(1) { top: 0; }
.menu-icon .bar:nth-child(2) { top: 100%; margin-top: -1.5px; }

.menu-btn.is-open .menu-icon .bar:nth-child(1) { top: 50%; margin-top: -0.75px; transform: rotate(45deg); }
.menu-btn.is-open .menu-icon .bar:nth-child(2) { top: 50%; margin-top: -0.75px; transform: rotate(-45deg); }

/* ---------------- Hero ---------------- */

.hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: calc(100vh - 76px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: default;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  padding: 0 var(--side);
}

.hero-heading {
  position: relative;
  z-index: 2;
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.025em;
  font-size: clamp(60px, 5.8vw, 88px);
  line-height: 1.08;
  text-wrap: balance;
  color: var(--black);
  margin: 0;
}

/* sits the headline + CTA a little above centre */
.hero { padding-bottom: 9vh; }

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 44px;
  animation: hero-cta-in .7s ease .35s both;
}
.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 32px;
  border-radius: 100px;
  background: var(--brand);
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: .01em;
  box-shadow: 0 10px 28px rgba(79, 127, 255, .28);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.hero-cta-btn:hover {
  background: var(--brand-dark);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(79, 127, 255, .36);
}
.hero-cta-btn span { transition: transform .2s ease; }
.hero-cta-btn:hover span { transform: translateX(3px); }
.hero-cta-note {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--navy-muted);
}
@keyframes hero-cta-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.motion-off .hero-cta { animation: none; }
@media (prefers-reduced-motion: reduce) { .hero-cta { animation: none; } }

/* ---------------- Hero mouse trail gallery ---------------- */

.hero-trail {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.trail-img {
  position: absolute;
  width: 160px;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(11, 27, 58, .22);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.55) rotate(var(--rot, 0deg));
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.trail-img.is-in {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(var(--rot, 0deg));
}
.trail-img.is-out {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8) rotate(var(--rot, 0deg));
  transition: opacity .5s ease, transform .5s ease;
}

.accent {
  color: var(--brand);
}

/* ---------------- Grid / cards ---------------- */

.grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--side) var(--gap);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

/* service cards (s1–s4) zig-zag down the mosaic so no two sit side by side */
.grid-mixed {
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "s1 s1 m3 m3"
    "s1 s1 m3 m3"
    "m4 m4 s2 s2"
    "m4 m4 s2 s2"
    "s3 s3 m1 m2"
    "s3 s3 m6 m7"
    "m5 m5 s4 s4"
    "m5 m5 s4 s4";
}

[data-area="m1"] { grid-area: m1; }
[data-area="m2"] { grid-area: m2; }
[data-area="m3"] { grid-area: m3; }
[data-area="m4"] { grid-area: m4; }
[data-area="m5"] { grid-area: m5; }
[data-area="m6"] { grid-area: m6; }
[data-area="m7"] { grid-area: m7; }
[data-area="s1"] { grid-area: s1; }
[data-area="s2"] { grid-area: s2; }
[data-area="s3"] { grid-area: s3; }
[data-area="s4"] { grid-area: s4; }

.card--small { aspect-ratio: 1 / 1; }
.card--tall  { aspect-ratio: 1 / 1; }
.card--big   { aspect-ratio: 1 / 1; }

.grid-2x1 { grid-template-columns: 1fr 1fr; }
.grid-2x1 .card--big { aspect-ratio: 1 / 1; }

.card {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--ink);
  isolation: isolate;
}

.card > img,
.card > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}

.card:hover > img,
.card:hover > picture > img,
.card:hover .split-img img { transform: scale(1.06); }

.split-img {
  position: absolute;
  inset: 0;
  display: flex;
}
.split-img img {
  position: relative;
  inset: auto;
  width: 50%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}
.split-img img:first-child { object-position: left center; }
.split-img img:last-child { object-position: right center; border-left: 6px solid var(--cream); }

.card-scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  z-index: 1;
}
.card-scrim--full { height: 100%; background: rgba(0,0,0,.42); }

[data-variant="dark-pattern"] { background: var(--ink); }
[data-variant="dark-pattern"] .card-scrim--full { background: rgba(0,0,0,.2); }

[data-variant="cta-brand"] { background: var(--brand); }

.card-top, .card-bottom, .card-center {
  position: relative;
  z-index: 2;
  padding: 24px;
  color: var(--white);
}

.card-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
}

.card-bottom--center { text-align: center; }

.card-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
}

.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--white);
  flex-shrink: 0;
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.card-title {
  margin: 8px 0 6px;
  font-weight: 500;
  color: var(--white);
}
.card-title--sans {
  font-family: var(--font-editorial);
  font-size: 26px;
  line-height: 1.22;
}
.card--small .card-title--sm { font-size: 19px; }
.card-title--serif {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1.2;
}
.card-title--cta { font-size: 32px; margin: 0; }

.card-byline {
  font-family: var(--font-editorial);
  font-size: 14px;
  opacity: .85;
  margin: 0 0 14px;
}
.card-byline--inline {
  display: block;
  font-size: 13px;
  margin-top: 4px;
  opacity: .8;
}

.card-cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.5);
  padding-bottom: 2px;
  transition: border-color .2s ease;
}
.card:hover .card-cta { border-color: var(--white); }

.card--cta .card-title--cta { color: var(--white); }

/* ---------------- Work detail pages ---------------- */

.work-detail {
  max-width: var(--max);
  margin: 0 auto;
  padding: 64px var(--side) 96px;
}

.work-back {
  display: inline-block;
  margin-bottom: 32px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy-muted);
}
.work-back:hover { color: var(--brand); }

.work-detail-eyebrow {
  display: block;
  color: var(--brand);
  font-weight: 500;
}

.work-detail-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 44px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--black);
  margin: 10px 0 6px;
}

.work-detail-sub {
  font-family: var(--font-editorial);
  font-size: 17px;
  color: var(--navy-muted);
  margin: 0 0 36px;
}

.work-detail-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 40px;
}
.work-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-detail-body {
  max-width: 700px;
}
.work-detail-body p {
  font-family: var(--font-editorial);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 20px;
}

@media (max-width: 980px) {
  .work-detail { padding: 48px 24px 72px; }
  .work-detail-title { font-size: 32px; }
  .work-detail-image { aspect-ratio: 4 / 3; margin-bottom: 28px; }
}

/* ---------------- Service characters (simple studio backdrop) ---------------- */

.card--room,
.room-hero {
  background: radial-gradient(120% 95% at 50% 38%, var(--bd-1) 0%, var(--bd-2) 48%, var(--bd-3) 100%);
}
[data-room="web"]       { --bd-1: #3B4B68; --bd-2: #28344D; --bd-3: #161E2E; } /* navy */
[data-room="marketing"] { --bd-1: #6B2E3A; --bd-2: #4A1F29; --bd-3: #2A1117; } /* maroon */
[data-room="ai"]        { --bd-1: #2F5A48; --bd-2: #1F3F33; --bd-3: #11251D; } /* dark green */
[data-room="digital"]   { --bd-1: #4E3566; --bd-2: #362448; --bd-3: #1E1429; } /* plum */

.room3d {
  position: absolute;
  inset: 0;
}
.room3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* service page hero: the same character, wider frame */
.room-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 40px;
}

.service-list {
  list-style: none;
  margin: 8px 0 32px;
  padding: 0;
  border-top: 1px solid var(--border);
}
.service-list li {
  font-family: var(--font-editorial);
  font-size: 17px;
  color: var(--ink);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.service-list-heading {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy-muted);
  margin: 36px 0 8px;
}
.service-cta {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 100px;
  background: var(--brand);
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .02em;
  transition: background .2s ease;
}
.service-cta:hover { background: var(--brand-dark); }



/* tile video: rests on its first frame, plays while the card is hovered */
.card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* light photos need more shade behind white captions */
.card-scrim--strong { height: 100%; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.25) 70%, rgba(0,0,0,.1)); }

/* ---------------- Blog text tiles ---------------- */

.card--text[data-tone="cream"] { background: #F3EBDD; }
.card--text[data-tone="sky"]   { background: #DCE6FF; }
.card--text[data-tone="blue"]  { background: var(--brand); }
.card--text[data-tone="navy"]  { background: var(--navy); }

.card--text[data-tone="cream"] .card-top,
.card--text[data-tone="cream"] .card-bottom,
.card--text[data-tone="cream"] .card-title,
.card--text[data-tone="sky"] .card-top,
.card--text[data-tone="sky"] .card-bottom,
.card--text[data-tone="sky"] .card-title { color: var(--ink); }
.card--text[data-tone="cream"] .dot,
.card--text[data-tone="sky"] .dot { background: var(--ink); }
.card--text[data-tone="cream"] .card-cta,
.card--text[data-tone="sky"] .card-cta { color: var(--ink); border-bottom-color: rgba(11, 27, 58, .4); }
.card--text[data-tone="cream"]:hover .card-cta,
.card--text[data-tone="sky"]:hover .card-cta { border-color: var(--ink); }

.card--text.card--big .card-title { font-size: 34px; line-height: 1.15; max-width: 82%; }

/* ---------------- Founder tiles + About page ---------------- */

.card--founder { background: var(--brand); }
.founder-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 56px;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .9);
  background: var(--brand);
}

.founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 0 40px;
}
.founder-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
}
.founder-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.founder-photo .founder-fallback { font-size: 80px; }
.founder-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 24px;
  color: var(--ink);
  margin: 0 0 4px;
}
.founder-role {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 10px;
}
.founder-bio {
  font-family: var(--font-editorial);
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy-muted);
  margin: 0;
}

/* ---------------- Article pages ---------------- */

.article-body h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  color: var(--ink);
  margin: 40px 0 12px;
}
.article-body ul {
  margin: 0 0 20px;
  padding-left: 22px;
}
.article-body li {
  font-family: var(--font-editorial);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 6px;
}
.article-body a:not(.service-cta):not(.sp-pill) {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-body .service-cta { margin-top: 20px; }

@media (max-width: 560px) {
  .founders { grid-template-columns: 1fr; }
  .card--text.card--big .card-title { font-size: 26px; }
}

/* ---------------- Subpages (work, services, guides, about, consultancy) ---------------- */

.sp { padding-bottom: 48px; }

.sp-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--side);
  padding-right: var(--side);
}

/* hero */
.sp-hero { padding-top: 56px; padding-bottom: 72px; }
.sp-hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 64px;
  align-items: stretch;
}
.sp-hero-text { display: flex; flex-direction: column; min-width: 0; }
.sp-hero--split .sp-meta { margin-top: auto; }
.sp-hero--split .sp-lede { margin-bottom: 48px; }

.sp-back {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy-muted);
  margin-bottom: 56px;
  transition: color .2s ease;
}
.sp-back:hover { color: var(--brand); }

.sp-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
}
.sp-eyebrow .dot { background: var(--brand); }
.sp-eyebrow--light { color: var(--white); }
.sp-eyebrow--light .dot { background: var(--white); }

.sp-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(44px, 5.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.sp-title--long { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.08; letter-spacing: -0.02em; }

.sp-lede {
  font-family: var(--font-sans);
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.45;
  color: var(--navy-muted);
  max-width: 620px;
  margin: 24px 0 0;
}

.sp-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 56px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.sp-meta dt {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy-muted);
}
.sp-meta dd {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
}
.sp-meta a,
.sp-prose a,
.sp-faq a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* hero media (photo, video or a service character) */
.sp-media {
  position: relative;
  margin: 0;
  height: min(72vh, 700px);
  min-height: 420px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink);
}
.sp-media img,
.sp-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-media.room-hero { aspect-ratio: auto; margin: 0; }

/* numbered sections: sticky label left, content right */
.sp-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 48px;
  padding-top: 64px;
  padding-bottom: 64px;
  position: relative;
}
.sp-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--side);
  right: var(--side);
  border-top: 1px solid var(--border);
}
.sp-label {
  position: sticky;
  top: 96px;
  align-self: start;
  display: flex;
  gap: 14px;
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.sp-num { color: var(--brand); }
.sp-content { min-width: 0; }

.sp-h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 2.9vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 760px;
}
.sp-prose { max-width: 680px; }
.sp-prose p {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 18px;
}
.sp-prose p:last-child { margin-bottom: 0; }

.sp-subhead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy-muted);
  margin: 40px 0 4px;
}

/* cards */
.sp-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.sp-card {
  position: relative;
  display: block;
  padding: 28px 28px 30px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.sp-card-num {
  display: block;
  margin-bottom: 28px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--brand);
}
.sp-card h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 8px;
}
.sp-card p {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--navy-muted);
  margin: 0;
}
.sp-card--link:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(11, 27, 58, .08);
}
.sp-card-arrow {
  position: absolute;
  top: 26px;
  right: 28px;
  font-size: 18px;
  color: var(--brand);
  transition: transform .25s ease;
}
.sp-card--link:hover .sp-card-arrow { transform: translateX(4px); }

/* steps */
.sp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 48px;
}
.sp-step { border-top: 2px solid var(--ink); padding-top: 18px; }
.sp-step-num {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand);
  margin-bottom: 18px;
}
.sp-step h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 21px;
  color: var(--ink);
  margin: 0 0 8px;
}
.sp-step p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy-muted);
  margin: 0;
}

/* checklist */
.sp-checks { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.sp-checks li {
  position: relative;
  padding: 18px 0 18px 44px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
}
.sp-checks li:first-child { border-top: 1px solid var(--border); }
.sp-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* FAQ */
.sp-faqs { max-width: 760px; border-top: 1px solid var(--border); }
.sp-faq { border-bottom: 1px solid var(--border); }
.sp-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 19px;
  color: var(--ink);
}
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary:hover { color: var(--brand); }
.sp-faq-icon { position: relative; flex-shrink: 0; width: 14px; height: 14px; }
.sp-faq-icon::before,
.sp-faq-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
  background: currentColor;
  transition: transform .3s ease;
}
.sp-faq-icon::after { transform: rotate(90deg); }
.sp-faq[open] .sp-faq-icon::after { transform: rotate(0deg); }
.sp-faq p {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--navy-muted);
  margin: -6px 0 24px;
  max-width: 660px;
}

/* gallery */
.sp-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  padding-top: 8px;
  padding-bottom: 64px;
}
.sp-gallery figure { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; }
.sp-gallery img { width: 100%; height: 100%; object-fit: cover; }

/* related tiles (reuse the homepage .card) */
.sp-related { padding-top: 64px; padding-bottom: var(--gap); position: relative; }
.sp-related::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--side);
  right: var(--side);
  border-top: 1px solid var(--border);
}
.sp-related-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(26px, 2.4vw, 34px);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 28px;
}
.sp-related-grid { display: grid; gap: var(--gap); }
.sp-related-grid--1 { grid-template-columns: 1fr; }
.sp-related-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-related-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-related-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-related-grid .card { aspect-ratio: 4 / 5; }
.sp-related-grid--1 .card { aspect-ratio: 21 / 9; }
.sp-related-grid--2 .card { aspect-ratio: 4 / 3; }
.sp-related-grid--4 .card { aspect-ratio: 3 / 4; }
.sp-related-grid--4 .card-title--sans { font-size: 22px; }

/* next-page band */
.sp-next {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 440px;
  margin-top: var(--gap);
  padding: 44px;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  background-color: var(--ink);
}
.sp-next > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.sp-next:hover > img { transform: scale(1.04); }
.sp-next-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.15) 65%, rgba(0,0,0,.05));
}
.sp-next-text { display: flex; flex-direction: column; position: relative; z-index: 1; }
.sp-next-text .sp-eyebrow { margin-bottom: 14px; }
.sp-next-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.sp-next-cta {
  align-self: flex-start;
  margin-top: 22px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.5);
  padding-bottom: 2px;
  transition: border-color .2s ease;
}
.sp-next:hover .sp-next-cta { border-color: var(--white); }

.sp-next.sp-next--room { aspect-ratio: auto; margin-bottom: 0; }
.sp-next-char {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 55%;
}

/* guide pages */
.sp-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 48px;
  padding-top: 64px;
  padding-bottom: 72px;
  position: relative;
}
.sp-article::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--side);
  right: var(--side);
  border-top: 1px solid var(--border);
}
.sp-toc { position: sticky; top: 96px; align-self: start; }
.sp-toc-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 6px 0 16px;
}
.sp-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.sp-toc li { counter-increment: toc; margin: 0; }
.sp-toc a {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--navy-muted);
  transition: color .2s ease;
}
.sp-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--brand); font-size: 13px; padding-top: 1px; }
.sp-toc a:hover { color: var(--ink); }

.sp-article-body { max-width: 700px; }
.sp-article-body > p:first-child {
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 28px;
}
.sp-article-body p {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 20px;
}
.sp-article-body h2 { font-size: 26px; margin: 48px 0 14px; scroll-margin-top: 96px; }
.sp-article-body li { font-size: 18px; }

.sp-callout {
  position: relative;
  margin-top: 56px;
  padding: 40px;
  border-radius: 16px;
  color: var(--white);
}
.sp-callout.room-hero { aspect-ratio: auto; width: auto; margin-bottom: 0; }
.sp-callout .sp-eyebrow { margin-bottom: 14px; }
.sp-callout-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.sp-callout-text {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
  max-width: 520px;
  margin: 0 0 26px;
}
.sp-pill {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 100px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .01em;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sp-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.2); }

/* about: client list */
.sp-list-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.sp-list-links a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24px;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  transition: color .2s ease, padding .3s ease;
}
.sp-list-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color .2s ease;
}
.sp-list-meta { font-family: var(--font-sans); font-size: 16px; color: var(--navy-muted); }
.sp-list-arrow { color: var(--brand); font-size: 20px; transition: transform .25s ease; }
.sp-list-links a:hover .sp-list-name { color: var(--brand); }
.sp-list-links a:hover .sp-list-arrow { transform: translateX(4px); }

.sp .founders { margin: 0; }
.sp .founder-name { font-size: 24px; }

@media (max-width: 980px) {
  .sp-hero { padding-top: 32px; padding-bottom: 48px; }
  .sp-hero--split { grid-template-columns: 1fr; gap: 40px; }
  .sp-hero--split .sp-lede { margin-bottom: 0; }
  .sp-back { margin-bottom: 32px; }
  .sp-meta { margin-top: 36px; }
  .sp-media { height: auto; min-height: 0; aspect-ratio: 4 / 5; max-height: 80vh; }
  .sp-media.room-hero { aspect-ratio: 1 / 1; }
  .sp-section, .sp-article { grid-template-columns: 1fr; gap: 28px; padding-top: 48px; padding-bottom: 48px; }
  .sp-label, .sp-toc { position: static; }
  .sp-toc { display: none; }
  .sp-related-grid--3, .sp-related-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-related-grid--1 .card { aspect-ratio: 4 / 3; }
  .sp-next { min-height: 340px; padding: 28px; }
  .sp-next-char { width: 100%; opacity: .9; }
  .sp-next--room .sp-next-char { bottom: 30%; }
}

@media (max-width: 560px) {
  .sp-meta { grid-template-columns: 1fr; gap: 16px; }
  .sp-cards, .sp-steps, .sp-gallery { grid-template-columns: 1fr; }
  .sp-related-grid--2, .sp-related-grid--3, .sp-related-grid--4 { grid-template-columns: 1fr; }
  .sp-related-grid .card, .sp-related-grid--4 .card { aspect-ratio: 4 / 5; }
  .sp-list-links a { grid-template-columns: minmax(0, 1fr) 24px; }
  .sp-list-meta { display: none; }
  .sp-callout { padding: 28px; }
  .sp-next--room { min-height: 420px; }
}

/* ---------------- Footer ---------------- */

.site-footer {
  background: var(--navy);
  color: var(--white);
  margin-top: var(--gap);
}

.footer-inner {
  max-width: 1425px;
  margin: 0 auto;
  padding: 56px var(--side) 40px;
  display: flex;
  gap: 96px;
  flex-wrap: wrap;
}

.footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 140px; }
.footer-col--motion { margin-left: auto; align-items: flex-start; }

.footer-heading {
  font-family: var(--font-editorial);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 6px;
  opacity: .85;
}

.footer-col a {
  font-family: var(--font-editorial);
  font-size: 14px;
  opacity: .95;
}
.footer-col a:hover { text-decoration: underline; }

.motion-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.motion-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
  background: none;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 100px;
  padding: 6px 16px;
  cursor: pointer;
}
.motion-btn.is-active { background: rgba(255,255,255,.15); border-color: var(--white); }

.footer-copyright {
  font-family: var(--font-editorial);
  font-size: 13px;
  opacity: .8;
  margin: 0;
}
.footer-legal { max-width: 1425px; margin: 0 auto; padding: 0 var(--side) 32px; }

/* ---------------- Scroll-in ---------------- */

.card, .hero-heading {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.card.is-visible, .hero-heading.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------- Responsive ---------------- */

@media (max-width: 980px) {
  .hero-content { padding: 0 24px; }
  .hero-heading { font-size: clamp(38px, 7.4vw, 60px); line-height: 1.1; }
  .hero-cta { margin-top: 32px; }
  .hero-cta-btn { padding: 16px 26px; font-size: 16px; }

  :root { --side: 24px; }

  .grid { grid-template-columns: 1fr; }

  .grid-mixed {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "s1 s1"
      "m3 m3"
      "m4 m4"
      "s2 s2"
      "m1 m2"
      "s3 s3"
      "m6 m7"
      "m5 m5"
      "s4 s4";
  }

  .grid-2x1 { grid-template-columns: 1fr; }

  .footer-inner { gap: 40px; padding: 40px 24px 32px; }
  .footer-col--motion { margin-left: 0; }
}

@media (max-width: 560px) {
  .grid-mixed {
    grid-template-columns: 1fr;
    grid-template-areas:
      "s1"
      "m3"
      "m4"
      "s2"
      "m1"
      "m2"
      "s3"
      "m6"
      "m7"
      "m5"
      "s4";
  }
  .card-title--sans { font-size: 21px; }
  .card-title--serif { font-size: 24px; }

  .logo-img { height: 20px; }

  /* Below this width even a shrunk logo + 3 links won't fit inline, so the
     nav drops into a full-width panel under the header instead of spilling
     left in place. */
  .flyout-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-width: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-height: 0;
    opacity: 1;
    background: var(--cream);
    /* no border or shadow while closed, or a hairline shows under the header */
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: max-height .4s cubic-bezier(.65,0,.35,1), border-color .2s ease, box-shadow .2s ease;
  }
  .flyout-nav.is-open {
    border-bottom-color: var(--border);
    box-shadow: 0 12px 24px rgba(11,27,58,.08);
    max-height: 220px;
    margin-right: 0;
    transition: max-height .4s cubic-bezier(.65,0,.35,1);
  }
  .flyout-nav a {
    width: 100%;
    padding: 16px 24px;
    font-size: 14px;
  }
  .flyout-nav a::after { display: none; }
}

/* ============================================================
   Marketing tour: the marketing bot walks through a real feed
   (service-marketing.html, tour.js)
   ============================================================ */
.tour { padding-top: 0; padding-bottom: 72px; }
.tour-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  padding: 64px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}
.tour-guide { display: flex; flex-direction: column; min-width: 0; }
.tour-chat { display: flex; gap: 20px; align-items: flex-start; margin-top: 12px; }
.tour-bot { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.tour-steps { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 190px; }
.tour-steps li { display: none; }
.tour-steps li.is-on { display: block; animation: tour-in .35s ease both; }
.tour-steps p {
  margin: 0;
  padding: 22px 26px;
  border-radius: 4px 20px 20px 20px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--font-sans);
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.45;
}
@keyframes tour-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tour-nav { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding-left: 92px; }
.tour-nav button {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.tour-back { background: transparent; color: var(--white); border: 1px solid rgba(255, 255, 255, .35); }
.tour-back:disabled { opacity: .3; cursor: default; }
.tour-next { background: var(--white); color: var(--ink); border: 1px solid var(--white); }
.tour-next:hover { background: var(--brand); border-color: var(--brand); color: var(--white); }
.tour-dots { display: flex; gap: 8px; margin: 0 auto 0 8px; }
.tour-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: background .2s ease; }
.tour-dots span.is-on { background: var(--brand); }
.tour-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.tour-go {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--white);
  transition: background .2s ease, box-shadow .3s ease;
}
.tour-go:hover { background: var(--brand-dark); }
.tour-panel[data-show="end"] .tour-go { box-shadow: 0 0 0 6px rgba(79, 127, 255, .3); }
.tour-alt { font-family: var(--font-sans); font-size: 15px; color: rgba(255, 255, 255, .7); transition: color .2s ease; }
.tour-alt:hover { color: var(--white); }

/* the phone */
.tour-stage { display: flex; justify-content: center; min-width: 0; }
.ig-phone {
  position: relative;
  width: 360px;
  max-width: 100%;
  padding: 18px 14px 0;
  border: 8px solid #1c2c4d;
  border-radius: 44px;
  background: #fff;
  color: #111;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .4);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.ig-top { text-align: center; font-weight: 600; font-size: 15px; padding: 2px 0 14px; }
.ig-profile, .ig-bio, .ig-grid { transition: opacity .35s ease, box-shadow .35s ease; }
.ig-profile { display: flex; align-items: center; gap: 16px; padding: 4px 6px; border-radius: 12px; }
.ig-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #d62976;
}
.ig-profile strong { display: block; font-size: 15px; }
.ig-profile span { font-size: 13px; color: #737373; }
.ig-bio { margin: 10px 0 14px; padding: 4px 6px; font-size: 13px; line-height: 1.4; color: #262626; border-radius: 12px; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 -14px; }
.ig-home { display: block; width: 120px; height: 5px; margin: 14px auto 10px; border-radius: 999px; background: #111; }
.ig-tile { position: relative; padding: 0; border: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #eee; cursor: pointer; }
.ig-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ig-tile:hover img, .ig-tile:focus-visible img { transform: scale(1.05); }
.ig-multi { position: absolute; top: 7px; right: 7px; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 2px; box-shadow: 3px -3px 0 -1px rgba(255, 255, 255, .85); }

/* what each step points at */
.tour-panel[data-show="profile"] .ig-grid,
.tour-panel[data-show="grid"] .ig-profile,
.tour-panel[data-show="grid"] .ig-bio { opacity: .25; }
.tour-panel[data-show="profile"] .ig-profile,
.tour-panel[data-show="profile"] .ig-bio { box-shadow: 0 0 0 2px var(--brand); }
.tour-panel[data-show="grid"] .ig-grid { box-shadow: 0 0 0 3px var(--brand); }

.ig-card {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  padding: 20px;
  border-radius: 22px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  box-shadow: 0 -12px 48px rgba(11, 27, 58, .28);
  transform: translateY(125%);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.tour-panel[data-show="approve"] .ig-approve,
.tour-panel[data-show="report"] .ig-report { transform: none; }
.ig-card-title { margin: 0; font-weight: 500; font-size: 18px; }
.ig-card-sub { margin: 4px 0 0; font-size: 13px; color: var(--navy-muted); }
.ig-card ul { list-style: none; margin: 12px 0 0; padding: 0; }
.ig-card li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid #eef0f4; font-size: 14px; }
.ig-card li em { margin-left: auto; padding: 4px 12px; border: 1px solid var(--brand); border-radius: 999px; font-style: normal; font-size: 12px; color: var(--brand); }
.ig-card li em.ok { border-color: transparent; background: #e7f6ed; color: #1b7a43; }
.ig-thumb { flex: none; width: 32px; height: 40px; border-radius: 4px; background-size: cover; background-position: center; }
.ig-card-btn { display: block; margin-top: 12px; padding: 11px; border-radius: 999px; background: var(--ink); color: var(--white); text-align: center; font-size: 14px; }
.ig-bars { display: flex; align-items: flex-end; gap: 10px; height: 96px; margin: 16px 0 12px; }
.ig-bars span { flex: 1; height: calc(var(--h) * 100%); border-radius: 6px 6px 2px 2px; background: var(--brand); }
.ig-bar-labels { display: flex; gap: 10px; margin: -4px 0 12px; }
.ig-bar-labels span { flex: 1; text-align: center; font-size: 11px; color: var(--navy-muted); }
.ig-card-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--navy-muted); }

/* a post, opened */
.ig-sheet { width: min(440px, 92vw); max-height: 92vh; padding: 0; border: 0; border-radius: 18px; background: #fff; overflow: auto; }
.ig-sheet::backdrop { background: rgba(11, 27, 58, .75); }
.ig-sheet-body { position: relative; }
.ig-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ig-slides::-webkit-scrollbar { display: none; }
.ig-slides img { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; scroll-snap-align: start; }
.ig-caption { margin: 0; padding: 16px 18px 22px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #262626; }
.ig-close, .ig-arrow {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.ig-close { top: 10px; right: 10px; }
.ig-arrow { top: calc((min(440px, 92vw) * 1.25) / 2 - 18px); }
.ig-arrow--prev { left: 10px; }
.ig-arrow--next { right: 10px; }

@media (max-width: 980px) {
  /* one column, and the phone straight under what the bot says, so Next changes something you can see */
  .tour-panel { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 44px 32px; }
  .tour-guide { display: contents; }
  .tour-guide > .sp-eyebrow { order: 1; }
  .tour-chat { order: 2; }
  .tour-nav { order: 3; }
  .tour-stage { order: 4; margin-top: 36px; }
  .tour-cta { order: 5; margin-top: 40px; }
  .tour-steps { min-height: 150px; }
}
@media (max-width: 560px) {
  .tour-panel { padding: 32px 18px; border-radius: 12px; }
  .tour-chat { gap: 12px; }
  .tour-bot { width: 52px; height: 52px; }
  .tour-nav { padding-left: 0; }
  .tour-cta { flex-direction: column; align-items: flex-start; }
  .ig-phone { border-width: 6px; border-radius: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-steps li.is-on { animation: none; }
  .ig-card, .ig-tile img, .ig-profile, .ig-bio, .ig-grid { transition: none; }
}

/* ---------------- Book a consultation (book.html) ---------------- */

.bk-hero { align-items: start; }
.bk-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px;
  box-shadow: 0 18px 50px rgba(11, 27, 58, .07);
}
.bk-form { display: flex; flex-direction: column; gap: 20px; }
.bk-card [hidden] { display: none; }
.bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bk-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bk-field > span,
.bk-group legend {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
}
.bk-field em { font-style: normal; color: var(--navy-muted); font-weight: 400; }
.bk-field input,
.bk-field select,
.bk-field textarea {
  width: 100%;
  font: 400 16px/1.4 var(--font-sans);
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 14px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.bk-field textarea { resize: vertical; min-height: 110px; }
.bk-field input:focus,
.bk-field select:focus,
.bk-field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(79, 127, 255, .18);
}
.bk-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.bk-group legend { padding: 0; margin-bottom: 10px; }
.bk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-chip { position: relative; cursor: pointer; }
.bk-chip input { position: absolute; opacity: 0; pointer-events: none; }
.bk-chip span {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 100px;
  font: 500 14px/1 var(--font-sans);
  color: var(--ink);
  background: var(--white);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.bk-chip:hover span { border-color: var(--brand); }
.bk-chip input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--white); }
.bk-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(79, 127, 255, .3); }
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bk-error {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #FDECEC;
  color: #A32020;
  font: 400 14px/1.4 var(--font-sans);
}
.bk-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 30px;
  border: 0;
  border-radius: 100px;
  background: var(--brand);
  color: var(--white);
  font: 500 16px/1 var(--font-sans);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.bk-submit:hover { background: var(--brand-dark); transform: translateY(-1px); }
.bk-submit:disabled { opacity: .7; cursor: wait; transform: none; }
.bk-small { margin: -6px 0 0; font: 400 13px/1.4 var(--font-sans); color: var(--navy-muted); }
.bk-done { padding: 12px 0; }
.bk-done .sp-lede { margin-top: 16px; }

@media (max-width: 980px) {
  .bk-card { padding: 28px 22px; }
  .bk-hero .sp-meta { margin-top: 32px; }
}
@media (max-width: 560px) {
  .bk-row { grid-template-columns: 1fr; }
  .bk-submit { align-self: stretch; justify-content: center; }
}

/* ================================================================
   Service pages as tile mosaics (sv-*): the homepage's language —
   big square-cornered tiles, little text, a way to book
   ================================================================ */

.sv-wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--side); }
.sv-block { margin-top: 96px; }

/* hero: one wide tile, character on the right */
.sv-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  min-height: min(78vh, 720px);
  aspect-ratio: auto;
  margin: 8px 0 0;
  border-radius: 0;
  color: var(--white);
}
.sv-hero-char { position: relative; order: 2; min-height: 320px; }
.sv-hero-text {
  order: 1;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 56px;
}
.sv-back {
  position: absolute;
  top: 40px; left: 56px;
  font: 500 13px/1 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  transition: color .2s ease;
}
.sv-back:hover { color: var(--white); }
.sv-title {
  margin: 0;
  font: 500 clamp(56px, 7.4vw, 112px)/.98 var(--font-sans);
  letter-spacing: -0.035em;
}
.sv-lede {
  max-width: 520px;
  margin: 24px 0 0;
  font: 400 clamp(18px, 1.5vw, 22px)/1.45 var(--font-sans);
  color: rgba(255,255,255,.82);
}
.sv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 36px; }

.sv-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 28px;
  border-radius: 100px;
  background: var(--brand);
  color: var(--white);
  font: 500 16px/1 var(--font-sans);
  transition: background .2s ease, transform .2s ease;
}
.sv-btn:hover { background: var(--brand-dark); transform: translateY(-1px); }
.sv-btn span { transition: transform .2s ease; }
.sv-btn:hover span { transform: translateX(3px); }
.sv-btn--light { background: var(--white); color: var(--ink); }
.sv-btn--light:hover { background: var(--cream); }
.sv-link {
  font: 500 14px/1 var(--font-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.5);
  padding-bottom: 3px;
}
.sv-link:hover { border-color: var(--white); }

/* section heads */
.sv-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 32px;
  margin-bottom: 28px;
}
.sv-head .sp-eyebrow { flex-basis: 100%; margin: 0; }
.sv-h2 {
  margin: 0;
  max-width: 820px;
  font: 500 clamp(32px, 3.4vw, 52px)/1.06 var(--font-sans);
  letter-spacing: -0.025em;
  color: var(--ink);
}
.sv-headlink {
  font: 500 13px/1 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}
.sv-headlink:hover { color: var(--brand); border-color: var(--brand); }

/* what you get: bento of tiles */
.sv-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.sv-tile {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--border);
  transition: transform .3s ease, box-shadow .3s ease;
}
.sv-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(11, 27, 58, .08); }
.sv-num { font: 500 14px/1 var(--font-sans); color: var(--brand); letter-spacing: .04em; }
.sv-tile h3 {
  margin: auto 0 10px;
  padding-top: 40px;
  font: 500 24px/1.18 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sv-tile p { margin: 0; font: 400 15px/1.5 var(--font-sans); color: var(--navy-muted); }
.sv-tile--statement {
  grid-column: span 2;
  justify-content: space-between;
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}
.sv-tile--statement:hover { transform: none; box-shadow: none; }
.sv-tile--statement p:first-child {
  font: 500 clamp(26px, 2.4vw, 36px)/1.15 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--white);
}
.sv-tile--statement .sv-small { max-width: 520px; font-size: 16px; color: rgba(255,255,255,.85); }

/* proof: work tiles, same cards as the homepage */
.sv-work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.sv-work .card { aspect-ratio: 4 / 5; }

/* how it works: one navy panel */
.sv-process { padding: 48px; background: var(--ink); color: var(--white); }
.sv-steps {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.sv-steps li { border-top: 1px solid rgba(255,255,255,.22); padding-top: 22px; }
.sv-step-num {
  display: block;
  font: 500 clamp(48px, 4.6vw, 72px)/1 var(--font-sans);
  letter-spacing: -0.03em;
  color: var(--brand);
}
.sv-steps h3 { margin: 22px 0 8px; font: 500 21px/1.2 var(--font-sans); }
.sv-steps p { margin: 0; font: 400 15px/1.5 var(--font-sans); color: rgba(255,255,255,.72); }

/* sound familiar + questions, side by side */
.sv-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); }
.sv-fit {
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
  padding: 44px;
  color: var(--white);
}
.sv-fit ul { list-style: none; margin: 24px 0 0; padding: 0; }
.sv-fit li {
  position: relative;
  padding: 18px 0 18px 34px;
  border-top: 1px solid rgba(255,255,255,.18);
  font: 500 clamp(18px, 1.5vw, 22px)/1.35 var(--font-sans);
}
.sv-fit li::before {
  content: "";
  position: absolute;
  left: 0; top: 24px;
  width: 16px; height: 9px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(-45deg);
}
.sv-questions { padding: 44px; background: var(--white); border: 1px solid var(--border); }
.sv-questions .sp-eyebrow { margin-bottom: 8px; }
.sv-faq { border-bottom: 1px solid var(--border); }
.sv-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  font: 500 18px/1.3 var(--font-sans);
  color: var(--ink);
}
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary:hover { color: var(--brand); }
.sv-faq-icon { position: relative; flex-shrink: 0; width: 14px; height: 14px; }
.sv-faq-icon::before, .sv-faq-icon::after {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 14px; height: 2px; background: currentColor; transition: transform .3s ease;
}
.sv-faq-icon::after { transform: rotate(90deg); }
.sv-faq[open] .sv-faq-icon::after { transform: rotate(0deg); }
.sv-faq p { margin: 0 0 20px; font: 400 16px/1.55 var(--font-sans); color: var(--navy-muted); max-width: 560px; }

/* close: book tile + next service */
.sv-close { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); }
.sv-cta {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 440px;
  padding: 48px;
  background: var(--brand);
  color: var(--white);
}
.sv-cta h2 {
  margin: 18px 0 14px;
  max-width: 640px;
  font: 500 clamp(36px, 3.8vw, 60px)/1.02 var(--font-sans);
  letter-spacing: -0.03em;
}
.sv-cta p:not(.sp-eyebrow) { margin: 0 0 32px; max-width: 460px; font: 400 18px/1.45 var(--font-sans); color: rgba(255,255,255,.88); }
.sv-next { aspect-ratio: auto; min-height: 440px; }

/* scroll-in, same feel as the homepage cards */
.sv-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease, box-shadow .3s ease; }
.sv-reveal.is-visible { opacity: 1; transform: translateY(0); }
.sv-tile.sv-reveal.is-visible:hover { transform: translateY(-3px); }
.motion-off .sv-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sv-reveal { opacity: 1; transform: none; } }

@media (max-width: 980px) {
  .sv-block { margin-top: 64px; }
  .sv-hero { grid-template-columns: 1fr; min-height: 0; }
  .sv-hero-char { order: 1; aspect-ratio: 4 / 3; min-height: 0; }
  .sv-hero-text { order: 2; padding: 0 28px 36px; }
  .sv-back { position: static; align-self: flex-start; margin-bottom: 28px; }
  .sv-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-tile { min-height: 230px; padding: 24px; }
  .sv-work { grid-template-columns: 1fr 1fr; }
  .sv-process { padding: 36px 28px; }
  .sv-steps { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .sv-pair, .sv-close { grid-template-columns: 1fr; }
  .sv-fit, .sv-questions, .sv-cta { padding: 32px 28px; }
  .sv-cta { min-height: 0; }
  .sv-next { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .sv-bento, .sv-work, .sv-steps { grid-template-columns: 1fr; }
  .sv-tile--statement { grid-column: auto; }
  .sv-tile { min-height: 0; }
  .sv-tile h3 { padding-top: 28px; }
  .sv-actions { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ================================================================
   Nav: Services button + the four bots panel
   ================================================================ */

.nav-services-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 2px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--black);
}
.nav-services-btn:hover, .nav-services-btn.is-open { color: var(--brand); }
.nav-caret {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s ease;
}
.nav-services-btn.is-open .nav-caret { transform: translateY(1px) rotate(-135deg); }

.nav-services {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: 39;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 24px 48px rgba(11, 27, 58, .10);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .35s cubic-bezier(.22,1,.36,1), visibility 0s linear .35s;
}
.nav-services.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .25s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.nav-services-inner { max-width: var(--max); margin: 0 auto; padding: 12px var(--side) 28px; }
.nav-bots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }

.nav-bot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  color: var(--white);
  opacity: 0;
  transform: translateY(18px) scale(.96);
  transition: opacity .35s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
/* the bots pop out one after another */
.nav-services.is-open .nav-bot {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 60ms + 60ms);
}
.nav-bot-stage { position: absolute; inset: 12% 0 16%; }
.nav-bot-text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.nav-bot-name { font: 500 20px/1.2 var(--font-sans); }
.nav-bot-tag { font: 400 13px/1.35 var(--font-sans); opacity: .78; }
.nav-bot::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  transition: border-color .2s ease;
}
.nav-bot:hover::after { border-color: rgba(255,255,255,.55); }
.nav-services-book {
  display: inline-block;
  margin-top: 18px;
  font: 500 14px/1 var(--font-sans);
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}
.nav-services-book:hover { color: var(--brand); border-color: var(--brand); }

.motion-off .nav-bot, .motion-off .nav-services { transition: none; }
@media (prefers-reduced-motion: reduce) { .nav-bot, .nav-services { transition: none; } }

@media (max-width: 980px) {
  .nav-bots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-services-inner { padding: 8px 24px 20px; }
  .nav-services-btn { width: 100%; justify-content: space-between; padding: 16px 24px; }
  .nav-bot { aspect-ratio: 1 / 1; }
  .nav-bot-name { font-size: 16px; }
  .nav-bot-tag { display: none; }
  .nav-bot-text { padding: 12px 14px; }
}

/* ================================================================
   Our Work (work.html)
   ================================================================ */

.wk-head { padding-top: 48px; padding-bottom: 40px; }
.wk-title {
  margin: 0;
  max-width: 980px;
  font: 500 clamp(44px, 6vw, 92px)/1 var(--font-sans);
  letter-spacing: -0.035em;
  color: var(--ink);
}
.wk-intro {
  max-width: 640px;
  margin: 24px 0 0;
  font: 400 clamp(18px, 1.5vw, 22px)/1.45 var(--font-sans);
  color: var(--navy-muted);
}
.wk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.wk-card { aspect-ratio: 5 / 4; }
.wk-card .card-bottom { padding: 32px; }
.wk-name { margin: 0 0 10px; font: 500 clamp(30px, 2.8vw, 44px)/1.05 var(--font-sans); letter-spacing: -0.02em; color: var(--white); }
.wk-lede { margin: 0 0 22px; max-width: 460px; font: 400 16px/1.45 var(--font-sans); color: rgba(255,255,255,.85); }
.wk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.wk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-chip {
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 100px;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white);
  backdrop-filter: blur(4px);
}
.sv-cta--wide { min-height: 380px; }

@media (max-width: 980px) {
  .wk-head { padding-top: 32px; }
  .wk-grid { grid-template-columns: 1fr; }
  .wk-card { aspect-ratio: 4 / 5; }
  .wk-card .card-bottom { padding: 24px; }
}

/* ---------------- You are here ---------------- */

.nav-here {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 28px;
  font: 500 13px/1 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy-muted);
  white-space: nowrap;
  transition: opacity .2s ease;
}
.nav-here strong { font-weight: 500; color: var(--ink); }
.nav-here-sep { color: var(--border); }
.nav-open .nav-here { opacity: 0; pointer-events: none; position: absolute; }

.flyout-nav a.is-current,
.nav-services-btn.is-current { color: var(--brand); }
.flyout-nav a.is-current::after { right: 0; }

.nav-bot.is-current::after { border-color: var(--white); }
.nav-bot.is-current .nav-bot-name::after {
  content: "You're here";
  display: inline-block;
  margin-left: 10px;
  padding: 4px 8px;
  border-radius: 100px;
  background: var(--white);
  color: var(--ink);
  font: 500 10px/1 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: 3px;
}

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(11, 27, 58, .28);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.nav-scrim.is-on { opacity: 1; visibility: visible; transition: opacity .3s ease; }

@media (max-width: 700px) {
  .nav-here { display: none; }
}

/* ================================================================
   Shared tile blocks for case studies, guides, about, consultancy
   ================================================================ */

.sv-block--tight { margin-top: var(--gap); }

/* hero as two tiles: title on dark, photo beside it */
.ph-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--gap);
  min-height: min(78vh, 740px);
  margin-top: 8px;
}
.ph-text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 56px;
  background: var(--ink);
  color: var(--white);
}
.ph-media { position: relative; overflow: hidden; background: var(--ink); min-height: 320px; }
.ph-media > img, .ph-media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1);
}
.ph-hero:hover .ph-media > img { transform: scale(1.03); }
.ph-title {
  margin: 0;
  font: 500 clamp(44px, 5.6vw, 92px)/1 var(--font-sans);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.ph-hero .sv-lede { max-width: 600px; }
.ph-chips { margin-top: 28px; }

/* fact tiles */
.facts { display: grid; gap: var(--gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fact { padding: 26px 28px; background: var(--white); border: 1px solid var(--border); }
.fact-k { margin: 0 0 10px; font: 500 12px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--navy-muted); }
.fact-v { margin: 0; font: 500 20px/1.3 var(--font-sans); color: var(--ink); }
.fact-v a { color: var(--brand); }

/* a white tile of prose, paired with a statement tile */
.sv-prose-tile p:not(.sp-eyebrow) { margin: 18px 0 0; font: 400 18px/1.65 var(--font-sans); color: var(--ink); max-width: 600px; }
.sv-pair .sv-tile--statement { grid-column: auto; min-height: 0; padding: 44px; }
.sv-pair .sv-tile--statement .sp-eyebrow { margin-bottom: 20px; }

/* steps that aren't always four */
.sv-steps--1 { grid-template-columns: 1fr; }
.sv-steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* photo mosaic */
.mosaic { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mosaic--1 { grid-template-columns: 1fr; }
.mosaic--3 { grid-template-columns: 2fr 1fr 1fr; }
.mosaic figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.mosaic--1 figure { aspect-ratio: 21 / 9; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.mosaic figure:hover img { transform: scale(1.04); }

/* generic tile grid (homepage cards) */
.tile-grid { display: grid; gap: var(--gap); }
.tile-grid--1 { grid-template-columns: 1fr; }
.tile-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile-grid > .card { aspect-ratio: 4 / 5; }
.tile-grid--1 > .card { aspect-ratio: 21 / 9; }
.tile-grid--2 > .card { aspect-ratio: 4 / 3; }
.tile-grid--4 > .card { aspect-ratio: 3 / 4; }
.tile-grid--4 .card-title--sans { font-size: 22px; }

/* coloured tiles in the service colours */
.sv-tile--room { border: 0; color: var(--white); }
.sv-tile--room .sv-num { color: rgba(255,255,255,.7); }
.sv-tile--room h3 { color: var(--white); }
.sv-tile--room p { color: rgba(255,255,255,.8); margin-bottom: 20px; }
.sv-tile--room .card-cta { align-self: flex-start; }

/* guides: contents | article | help, using the full width */
.gd-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 720px) minmax(260px, 1fr);
  gap: 56px;
  align-items: start;
  justify-content: space-between;
}
.gd-toc { position: sticky; top: 100px; }
.gd-toc ol { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: toc; }
.gd-toc li { counter-increment: toc; }
.gd-toc a {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
  font: 400 15px/1.4 var(--font-sans);
  color: var(--navy-muted);
  transition: color .2s ease;
}
.gd-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--brand); font-size: 13px; padding-top: 1px; }
.gd-toc a:hover { color: var(--ink); }
.gd-body > p:first-child { font-size: 22px; line-height: 1.55; color: var(--ink); margin: 0 0 28px; }
.gd-body p { font: 400 18px/1.75 var(--font-sans); color: var(--ink); margin: 0 0 20px; }
.gd-body h2 { font-size: 28px; margin: 52px 0 14px; scroll-margin-top: 100px; letter-spacing: -0.015em; }
.gd-body li { font-size: 18px; }
.gd-aside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: var(--gap); }
.gd-bot { aspect-ratio: 1 / 1; }
.gd-book { padding: 28px; background: var(--brand); color: var(--white); }
.gd-book-title { margin: 0 0 6px; font: 500 22px/1.2 var(--font-sans); }
.gd-book p:not(.gd-book-title) { margin: 0 0 20px; font: 400 15px/1.45 var(--font-sans); color: rgba(255,255,255,.88); }
.gd-book .sv-btn { background: var(--white); color: var(--ink); padding: 14px 22px; font-size: 15px; }

/* about: founders */
.fd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.fd { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); }
.fd-photo { aspect-ratio: 4 / 3; border: 0; }
.fd-photo > img { object-position: center 30%; }
.fd-photo .founder-fallback { font-size: 96px; }
.fd-bio { margin: 0; padding: 28px 32px 34px; font: 400 17px/1.65 var(--font-sans); color: var(--ink); }

@media (max-width: 980px) {
  .ph-hero { grid-template-columns: 1fr; min-height: 0; }
  .ph-media { order: -1; aspect-ratio: 4 / 3; min-height: 0; }
  .ph-text { padding: 28px 24px 32px; }
  .facts, .facts--3 { grid-template-columns: 1fr 1fr; }
  .sv-pair .sv-tile--statement { padding: 32px 28px; }
  .sv-steps--3 { grid-template-columns: 1fr; }
  .mosaic, .mosaic--3 { grid-template-columns: 1fr; }
  .tile-grid--3, .tile-grid--4 { grid-template-columns: 1fr 1fr; }
  .gd-layout { grid-template-columns: 1fr; gap: 36px; }
  .gd-toc, .gd-aside { position: static; }
  .gd-bot { aspect-ratio: 16 / 9; }
  .fd-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .facts, .facts--3, .tile-grid--2, .tile-grid--3, .tile-grid--4, .sv-steps--2 { grid-template-columns: 1fr; }
  .tile-grid > .card, .tile-grid--2 > .card { aspect-ratio: 4 / 5; }
  .tile-grid--1 > .card { aspect-ratio: 4 / 3; }
}
.sv-tile--statement p.sp-eyebrow:first-child { font: 500 13px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.sv-tile--statement .st-big {
  margin: 0 0 20px;
  font: 500 clamp(26px, 2.4vw, 38px)/1.15 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--white);
}
/* the back link sits at the top of the hero tile; the rest stays at the bottom */
.ph-text .sv-back { position: static; margin-bottom: auto; padding-bottom: 40px; align-self: flex-start; }
.ph-title--long { font-size: clamp(36px, 4vw, 62px); line-height: 1.04; }
.sv-bento--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .sv-bento--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sv-bento--3 { grid-template-columns: 1fr; } }
.sv-tile.sv-tile--room { background: radial-gradient(120% 95% at 50% 38%, var(--bd-1) 0%, var(--bd-2) 48%, var(--bd-3) 100%); }

/* ================================================================
   Inner pages in the homepage's language (pg-*): one big line,
   then the same tiles as the homepage, and nothing boxed
   ================================================================ */

.pg-hero { min-height: min(68vh, 640px); padding-bottom: 6vh; }
.pg-kicker {
  margin: 0 0 22px;
  font: 500 14px/1 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand);
}
.pg-hero .hero-heading { font-size: clamp(48px, 5.4vw, 84px); }

/* the bot + what's included */
.pg-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-bot { grid-column: span 2; aspect-ratio: 1 / 1; }
.pg-bot .pg-bot-title { font-size: clamp(34px, 3.2vw, 48px); line-height: 1.05; }
.pg-bot .card-byline { max-width: 420px; font-size: 16px; }
.pg-included { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; padding: 24px 8px 24px 40px; }
.pg-label { margin: 0 0 18px; font: 500 13px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--navy-muted); }
.pg-included ul { list-style: none; margin: 0; padding: 0; }
.pg-included li { padding: 18px 0; border-top: 1px solid var(--border); }
.pg-included li:last-child { border-bottom: 1px solid var(--border); }
.pg-included h3 { margin: 0 0 4px; font: 500 clamp(20px, 1.7vw, 26px)/1.2 var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.pg-included p { margin: 0; font: 400 15px/1.45 var(--font-sans); color: var(--navy-muted); }

/* proof: the same big squares as the homepage's work grid */
.pg-proof .card { aspect-ratio: 1 / 1; }

/* how we work: four photos in a row */
.pg-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-steps .card { aspect-ratio: 3 / 4; }
.pg-steps .card-title--sans { font-size: 24px; }
.pg-step-text { margin-bottom: 0; }

/* close: a wide blue tile, the next bot, one more photo */
.pg-close { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-close > .card { aspect-ratio: 1 / 1; }
.pg-close > .pg-cta { grid-column: span 2; aspect-ratio: 2 / 1; border-color: var(--brand); }
.pg-cta-title { margin: 8px 0 10px; max-width: 560px; font: 500 clamp(30px, 3vw, 46px)/1.05 var(--font-sans); letter-spacing: -0.025em; color: var(--white); }

/* good to know: plain text, no boxes */
.pg-questions { max-width: var(--max); margin: 56px auto 24px; padding: 0 var(--side); }
.pg-questions-title { margin: 0 0 28px; font: 500 28px/1.2 var(--font-sans); letter-spacing: -0.015em; color: var(--ink); }
.pg-qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; }
.pg-qa h3 { margin: 0 0 8px; font: 500 18px/1.35 var(--font-sans); color: var(--ink); }
.pg-qa p { margin: 0; max-width: 560px; font: 400 16px/1.6 var(--font-sans); color: var(--navy-muted); }

@media (max-width: 980px) {
  .pg-hero { min-height: 0; padding: 72px 0 64px; }
  .pg-top, .pg-close { grid-template-columns: 1fr 1fr; }
  .pg-included { padding: 24px 4px; }
  .pg-steps { grid-template-columns: 1fr 1fr; }
  .pg-close > .pg-cta { aspect-ratio: auto; min-height: 280px; }
  .pg-qa-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) {
  .pg-hero .hero-heading { font-size: clamp(36px, 10vw, 48px); }
  .pg-steps .card { aspect-ratio: 4 / 5; }
}
/* small tiles: the homepage's small-card title size, and a deeper shade so white text reads on light photos */
.pg-close > .card:not(.pg-cta) .card-title--sans { font-size: 21px; }
.pg-close > .card:not(.pg-cta):not(.card--room) .card-scrim { height: 100%; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.25) 70%, rgba(0,0,0,.1)); }
@media (max-width: 560px) {
  .pg-steps, .pg-close { grid-template-columns: 1fr; }
  .pg-steps .card, .pg-close > .card { aspect-ratio: 4 / 3; }
  .pg-close > .pg-cta { grid-column: auto; }
}

/* ---------------- tile pages: no hero, straight into tiles ---------------- */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main.sp > .grid:first-child, main.sp > .sr-only + .grid { padding-top: 8px; }

/* close: blue booking tile (2 wide) + one tile, or the booking tile on its own */
.pg-close { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-close--solo { grid-template-columns: 1fr; }
.pg-close--solo > .pg-cta { grid-column: auto; aspect-ratio: 3 / 1; }

/* text beside the lead tile */
.pg-para { margin: 0 0 16px; max-width: 560px; font: 400 17px/1.6 var(--font-sans); color: var(--ink); }
.pg-para--lead { font: 500 clamp(22px, 2vw, 30px)/1.25 var(--font-sans); letter-spacing: -0.015em; margin-bottom: 28px; }
.pg-included .pg-para + .pg-label, .pg-included .pg-para + .pg-para + .pg-label { margin-top: 20px; }
.pg-included li a { color: var(--ink); }
.pg-included li a:hover { color: var(--brand); }
.pg-meta { margin: 20px 0 0; font: 500 14px/1.4 var(--font-sans); letter-spacing: .02em; color: var(--navy-muted); }
.pg-meta a { color: var(--brand); }
.pg-guide-title { font-size: clamp(30px, 2.8vw, 44px); line-height: 1.08; }

/* two big squares: statement tile + photos, or the founders */
.pg-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-pair > * { aspect-ratio: 1 / 1; }
.pg-photo { margin: 0; overflow: hidden; border: 1px solid var(--border); }
.pg-photo img { width: 100%; height: 100%; object-fit: cover; }
.pg-type { border-color: var(--brand); }
.pg-type-big { margin: 0 0 14px; max-width: 540px; font: 500 clamp(28px, 2.8vw, 44px)/1.08 var(--font-sans); letter-spacing: -0.025em; color: var(--white); }
.pg-type .card-byline { max-width: 520px; font-size: 16px; }
.pg-founder .founder-fallback { font-size: 120px; }

/* Our Work: the four projects as big squares */
.pg-work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-work .wk-card { aspect-ratio: 1 / 1; }

/* guides: article with the service bot beside it */
.pg-article {
  max-width: var(--max);
  margin: 56px auto 40px;
  padding: 0 var(--side);
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(260px, 360px);
  justify-content: space-between;
  gap: 56px;
  align-items: start;
}
.pg-aside { position: sticky; top: 100px; }
.pg-aside .card { aspect-ratio: 1 / 1; }

@media (max-width: 980px) {
  .pg-close { grid-template-columns: 1fr 1fr; }
  .pg-close > .pg-cta { grid-column: span 2; }
  .pg-close--solo > .pg-cta { grid-column: auto; aspect-ratio: auto; min-height: 280px; }
  .pg-pair, .pg-work { grid-template-columns: 1fr; }
  .pg-article { grid-template-columns: 1fr; gap: 32px; }
  .pg-aside { position: static; }
  .pg-aside .card { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .pg-close { grid-template-columns: 1fr; }
  .pg-close > .pg-cta { grid-column: auto; }
  .pg-work .wk-card { aspect-ratio: 4 / 5; }
}
/* case studies: the blue tile and the client's photos as squares, never stretched */
.pg-pair--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-pair--1 { grid-template-columns: 1fr; }
.pg-pair--1 > .pg-type { aspect-ratio: 3 / 1; }
@media (max-width: 980px) {
  .pg-pair--3 { grid-template-columns: 1fr; }
  .pg-pair--1 > .pg-type { aspect-ratio: auto; min-height: 320px; }
}
.pg-close > * { min-width: 0; }
@media (max-width: 560px) {
  .pg-close > .pg-cta { aspect-ratio: auto; min-height: 260px; }
}
/* booking page: the form sits beside the photo tile */
.pg-top .bk-card { box-shadow: none; }
.pg-top .pg-included:has(.bk-card) { justify-content: flex-start; padding-top: 0; padding-bottom: 0; }
@media (min-width: 981px) { .bk-lead { position: sticky; top: 92px; align-self: start; } }
.pg-top .bk-card { border-radius: 0; }

/* the service bots along the bottom of each page */
.pg-services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-services--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-services > .card { aspect-ratio: 1 / 1; }
.pg-services--4 .card-title--sans { font-size: 22px; }
.pg-questions + .pg-services { margin-top: 24px; }
@media (max-width: 980px) { .pg-services, .pg-services--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pg-services, .pg-services--4 { grid-template-columns: 1fr; } .pg-services > .card { aspect-ratio: 4 / 3; } }
.nav-here-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav-here-link:hover, .nav-here-link:focus-visible { color: var(--brand); border-bottom-color: currentColor; outline: none; }
.pg-pair--3 .pg-type-big { font-size: clamp(22px, 1.9vw, 30px); }
.pg-pair--3 .pg-type .card-byline { font-size: 14px; }

/* ---------------- Claude sales skills shop (skills.html, skills-thanks.html) ---------------- */

.sk-price { margin: 0; font: 500 30px/1 var(--font-sans); letter-spacing: -0.02em; color: var(--ink); }
.sk-form { margin: 0; }
.sk-buy {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border: 0; border-radius: 999px;
  background: var(--brand); color: var(--white);
  font: 500 15px/1 var(--font-sans); letter-spacing: .01em;
  cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.sk-buy:hover { background: var(--brand-dark); transform: translateY(-1px); }
.sk-buy:disabled { opacity: .7; cursor: progress; transform: none; }
.sk-buy--light { background: var(--white); color: var(--ink); }
.sk-buy--light:hover { background: #EEF2FF; }
.sk-form-error { margin: 10px 0 0; font: 400 14px/1.4 var(--font-sans); color: #B42318; }
.sk-buy--light + .sk-form-error, .sk-suite-card .sk-form-error { color: var(--white); }

/* the bundle: a wide blue tile */
.sk-suite { grid-template-columns: 1fr; }
.sk-suite-card { display: flex; flex-direction: column; justify-content: flex-end; min-height: 360px; padding: 88px 40px 40px; color: var(--white); border-color: var(--brand); }
.sk-suite-body { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.sk-suite-title { margin: 0 0 12px; font: 500 clamp(36px, 4vw, 60px)/1.02 var(--font-sans); letter-spacing: -0.03em; color: var(--white); }
.sk-suite-text { margin: 0 0 22px; max-width: 620px; font: 400 17px/1.55 var(--font-sans); color: rgba(255,255,255,.88); }
.sk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-chip { padding: 7px 13px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; font: 500 13px/1 var(--font-sans); color: var(--white); }
.sk-suite-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; flex-shrink: 0; }
.sk-suite-buy .sk-price { color: var(--white); font-size: 40px; }

/* one card per skill */
.sk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sk-card {
  display: flex; flex-direction: column; min-height: 320px; padding: 28px;
  background: var(--white); border: 1px solid var(--border);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.sk-card:hover { border-color: #B9C8F5; box-shadow: 0 14px 34px rgba(11,27,58,.07); }
.sk-card-eyebrow { margin: 0 0 22px; font: 500 12px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--navy-muted); }
.sk-card--start .sk-card-eyebrow { color: var(--brand); }
.sk-card-title { margin: 0 0 10px; font: 500 clamp(22px, 1.9vw, 28px)/1.15 var(--font-sans); letter-spacing: -0.015em; color: var(--ink); }
.sk-card-text { margin: 0 0 28px; font: 400 16px/1.55 var(--font-sans); color: var(--navy-muted); }
.sk-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sk-card--help { background: var(--navy); border-color: var(--navy); }
.sk-card--help .sk-card-eyebrow { color: rgba(255,255,255,.7); }
.sk-card--help .sk-card-title { color: var(--white); }
.sk-card--help .sk-card-text { color: rgba(255,255,255,.78); }
.sk-help-cta { margin-top: auto; align-self: flex-start; }
.sk-card--help:hover { border-color: var(--brand); }

/* thank-you page */
.sk-thanks-lead { border-color: var(--brand); }
.sk-order .pg-label { margin-bottom: 14px; }
.sk-status { margin: 0; font: 400 17px/1.55 var(--font-sans); color: var(--navy-muted); }
.sk-status.is-error { color: #B42318; }
.sk-downloads { list-style: none; margin: 0 0 18px; padding: 0; }
.sk-downloads li { border-top: 1px solid var(--border); }
.sk-downloads li:last-child { border-bottom: 1px solid var(--border); }
.sk-download { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font: 500 clamp(19px, 1.6vw, 24px)/1.2 var(--font-sans); color: var(--ink); }
.sk-download-go { flex-shrink: 0; padding: 10px 18px; border-radius: 999px; background: var(--brand); color: var(--white); font: 500 14px/1 var(--font-sans); transition: background .2s ease; }
.sk-download:hover .sk-download-go { background: var(--brand-dark); }
.sk-note { margin: 0; font: 400 15px/1.5 var(--font-sans); color: var(--navy-muted); }
.sk-install { max-width: var(--max); margin: 56px auto 24px; padding: 0 var(--side); }
.sk-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 64px; counter-reset: sk; }
.sk-steps li { counter-increment: sk; padding-top: 18px; border-top: 2px solid var(--ink); }
.sk-steps li::before { content: counter(sk); display: block; margin-bottom: 14px; font: 500 40px/1 var(--font-sans); color: var(--brand); }
.sk-steps h3 { margin: 0 0 8px; font: 500 20px/1.3 var(--font-sans); color: var(--ink); }
.sk-steps p { margin: 0; font: 400 16px/1.6 var(--font-sans); color: var(--navy-muted); }
.sk-prompt { position: relative; margin-top: 14px; padding: 16px 18px 52px; background: #F3EFE7; border-radius: 12px; }
.sk-prompt p { color: var(--ink); font-size: 15px; }
.sk-copy { position: absolute; right: 12px; bottom: 12px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--white); font: 500 13px/1 var(--font-sans); color: var(--ink); cursor: pointer; }
.sk-copy:hover { border-color: var(--brand); color: var(--brand); }

@media (max-width: 980px) {
  .sk-grid { grid-template-columns: 1fr 1fr; }
  .sk-suite-body { flex-direction: column; align-items: flex-start; gap: 28px; }
  .sk-suite-buy { align-items: flex-start; }
  .sk-steps { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .sk-grid { grid-template-columns: 1fr; }
  .sk-card { min-height: 0; }
  .sk-suite-card { padding: 72px 24px 28px; min-height: 0; }
}
.sk-saving { margin: -8px 0 0; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.16); font: 500 13px/1 var(--font-sans); color: var(--white); }

/* ---------------- skill pages (skill-*.html) ---------------- */

.sk-product { border-color: var(--brand); }
.sk-product .card-bottom { display: flex; flex-direction: column; }
.sk-product-buy { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.sk-product-buy .sk-price { color: var(--white); font-size: 40px; }
.sk-product-alt { margin: 18px 0 0; font: 400 14px/1.5 var(--font-sans); color: rgba(255,255,255,.82); }
.sk-product-alt a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

.sk-section { max-width: var(--max); margin: 56px auto 24px; padding: 0 var(--side); }
.sk-shots { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.sk-shots--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sk-shot { margin: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--white); box-shadow: 0 24px 60px rgba(11,27,58,.10); }
.sk-shot-bar { display: flex; gap: 7px; padding: 12px 14px; background: #EFEBE3; border-bottom: 1px solid var(--border); }
.sk-shot-bar span { width: 11px; height: 11px; border-radius: 50%; background: #D5CFC4; }
.sk-shot img { display: block; width: 100%; height: auto; }
.sk-shot-note { margin: 14px 0 0; font: 400 14px/1.5 var(--font-sans); color: var(--navy-muted); }

.sk-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 64px; }
.sk-try-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sk-try-list li {
  align-self: flex-start; max-width: 100%;
  padding: 12px 16px; border-radius: 16px 16px 16px 4px;
  background: var(--white); border: 1px solid var(--border);
  font: 500 16px/1.4 var(--font-sans); color: var(--ink);
}
.sk-facts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }

.sk-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sk-card-title a { color: inherit; }
.sk-card-title a:hover { color: var(--brand); }
.sk-card-more { align-self: flex-start; margin: -12px 0 24px; font: 500 14px/1.4 var(--font-sans); color: var(--brand); }
.sk-card-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.sk-card--link { color: inherit; }
.sk-card--link .sk-card-more { margin: auto 0 0; }

@media (max-width: 980px) {
  .sk-shots--two { grid-template-columns: 1fr; }
  .sk-details { grid-template-columns: 1fr; gap: 40px; }
  .sk-grid--four { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .sk-facts-grid { grid-template-columns: 1fr; gap: 20px; }
  .sk-grid--four { grid-template-columns: 1fr; }
  .sk-product-buy .sk-price { font-size: 32px; }
}
/* the product tile stacks: real screenshot on top, name, price and Buy underneath (never overlapping) */
.sk-product { display: flex; flex-direction: column; }
.sk-product .sk-product-shot {
  position: relative; inset: auto; z-index: 1; flex: 0 1 auto; min-height: 0;
  width: auto; height: auto; aspect-ratio: 3 / 2; max-height: 48%; margin: 64px 24px 0;
  object-fit: cover; object-position: left top;
  border-radius: 10px; box-shadow: 0 18px 40px rgba(11,27,58,.35);
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.sk-product .card-bottom { position: relative; margin-top: auto; }
.sk-product:hover .sk-product-shot { transform: translateY(-4px); }
@media (max-width: 980px) {
  .sk-product { aspect-ratio: auto; }
  .sk-product .sk-product-shot { max-height: none; aspect-ratio: 16 / 10; margin-top: 60px; }
}

/* live skill demos on skill-*.html: the real skill page in a window frame */
.sk-demo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sk-demo-open { font: 500 14px/1.4 var(--font-sans); color: var(--brand); }
.sk-demo-open:hover { text-decoration: underline; text-underline-offset: 3px; }
.sk-demo { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #FBF7F0; box-shadow: 0 24px 60px rgba(11,27,58,.10); }
.sk-demo .sk-shot-bar { align-items: center; }
.sk-demo .sk-shot-bar em { margin-left: 8px; font: 500 12px/1 var(--font-sans); font-style: normal; color: var(--navy-muted); letter-spacing: .02em; }
.sk-demo-frame { display: block; width: 100%; aspect-ratio: 1448 / 1086; border: 0; background: #FBF7F0; }
.sk-demo--chat .sk-demo-frame { aspect-ratio: auto; height: 680px; }
.sk-demo-mobile { display: none; }
@media (max-width: 700px) {
  .sk-demo:not(.sk-demo--chat), .sk-demo-open { display: none; }
  .sk-demo-mobile { display: block; position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
  .sk-demo-mobile img { display: block; width: 100%; height: auto; }
  .sk-demo-mobile > span { position: absolute; left: 12px; bottom: 12px; padding: 10px 16px; border-radius: 999px; background: var(--brand); color: var(--white); font: 500 14px/1 var(--font-sans); box-shadow: 0 8px 20px rgba(11,27,58,.25); }
  .sk-demo--chat .sk-demo-frame { height: 560px; }
}

/* the skills shop as a section of the Digital Products page */
.sk-shop-intro { margin-top: 72px; scroll-margin-top: 90px; }
.sk-shop-intro .sp-eyebrow { margin-bottom: 14px; }
.sk-shop-title { margin: 0 0 14px; font: 500 clamp(32px, 3.6vw, 52px)/1.05 var(--font-sans); letter-spacing: -0.025em; color: var(--ink); }
.sk-shop-lede { margin: 0; max-width: 720px; font: 400 18px/1.6 var(--font-sans); color: var(--navy-muted); }
#suite { scroll-margin-top: 90px; }
.sk-product .card-top .eyebrow a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.5); }
.sk-product .card-top .eyebrow a:hover { text-decoration-color: var(--white); }
.sk-product .card-top { z-index: 3; }

/* skill pages: "Good for" as cards, each topped with a small piece of the skill's own interface */
.sk-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.sk-feat { display: flex; flex-direction: column; padding: var(--gap); background: var(--white); border: 1px solid var(--border); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.sk-feat:hover { border-color: #B9C8F5; box-shadow: 0 12px 28px rgba(11,27,58,.07); transform: translateY(-2px); }
.sk-feat-snip { display: flex; align-items: center; min-height: 74px; margin-bottom: 14px; padding: 12px; background: #F6F3EC; border-radius: 10px; overflow: hidden; }
.sk-feat h3 { margin: 0 0 6px; font: 500 18px/1.25 var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.sk-feat p { margin: 0; font: 400 14.5px/1.5 var(--font-sans); color: var(--navy-muted); }

.sn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sn-chip { padding: 5px 10px; border-radius: 999px; background: var(--white); border: 1px solid var(--border); font: 500 12px/1.2 var(--font-sans); color: var(--ink); }
.sn-pill { padding: 5px 10px; border-radius: 999px; font: 700 11.5px/1.2 var(--font-sans); letter-spacing: .02em; }
.sn-good { background: #E3F4EA; color: #1F7A4D; }
.sn-warn { background: #FFF1D6; color: #8A5A00; }
.sn-mute { background: #E9ECF2; color: #4A5872; }
.sn-plain { background: transparent; color: var(--navy-muted); font-weight: 500; padding-left: 2px; }
.sn-google { background: #FDE7E4; color: #C0392B; }
.sn-m365 { background: #E5ECFF; color: #2B4FB3; }
.sn-bad { color: #C0392B; }
.sn-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font: 500 12px/1 var(--font-sans); color: var(--ink); }
.sn-flow span { padding: 6px 8px; border-radius: 6px; background: var(--white); border: 1px solid var(--border); }
.sn-flow span:first-child { background: var(--brand); border-color: var(--brand); color: var(--white); }
.sn-flow i { font-style: normal; color: var(--navy-muted); }
.sn-cols { display: flex; flex-wrap: wrap; gap: 4px; }
.sn-cols span { padding: 6px 9px; border-radius: 5px; font: 600 11px/1.2 var(--font-sans); color: var(--white); background: var(--navy); white-space: nowrap; }
.sn-file { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sn-file-icon { flex: none; width: 26px; height: 32px; border-radius: 4px; background: var(--white); border: 1px solid var(--border); box-shadow: inset 0 -8px 0 var(--brand); }
.sn-file b { display: block; font: 600 12.5px/1.3 var(--font-sans); color: var(--ink); overflow-wrap: anywhere; }
.sn-file small, .sn-line small, .sn-stat small, .sn-dots small, .sn-bars small, .sn-change small { font: 500 11px/1.3 var(--font-sans); color: var(--navy-muted); }
.sn-line { display: flex; flex-direction: column; gap: 4px; }
.sn-line small { letter-spacing: .06em; text-transform: uppercase; color: var(--brand); font-weight: 700; }
.sn-line span { font: 500 13px/1.35 var(--font-sans); color: var(--ink); }
.sn-stat { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sn-stat b { font: 500 30px/1 var(--font-sans); letter-spacing: -0.02em; color: var(--ink); }
.sn-stat b small { font-size: 13px; color: var(--navy-muted); }
.sn-stat.sn-bad b { color: #C0392B; }
.sn-dots { display: flex; flex-wrap: wrap; gap: 14px; }
.sn-dotgroup { display: flex; flex-direction: column; gap: 6px; }
.sn-dotgroup small { color: #d97757; }
.sn-dotgroup > span { display: flex; gap: 5px; }
.sn-dotgroup i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #d97757; }
.sn-dotgroup i.on { background: #d97757; }
.sn-bars { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.sn-bars span { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 8px; }
.sn-bars i { height: 6px; border-radius: 999px; background: var(--brand); }
.sn-change { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sn-change b { font: 500 30px/1 var(--font-sans); letter-spacing: -0.02em; }
.sn-change .sn-good { background: none; color: #2B4FB3; }
.sn-change i { font-style: normal; color: var(--navy-muted); }

@media (max-width: 560px) { .sk-feats { grid-template-columns: 1fr; } }
/* when the text column is narrow, one card per row with the snippet beside the words */
.pg-top .pg-included { container-type: inline-size; }
@container (max-width: 520px) {
  .sk-feats { grid-template-columns: 1fr; }
}
@container (min-width: 380px) and (max-width: 520px) {
  .sk-feat { display: grid; grid-template-columns: 46% 1fr; grid-template-rows: auto 1fr; column-gap: 14px; }
  .sk-feat-snip { grid-row: 1 / span 2; margin-bottom: 0; }
  .sk-feat h3 { margin-top: 2px; }
}

/* skill pages: the words column lines up with the product tile, intro level with its top,
   last row of cards level with its bottom (same edges as the tiles in the grid) */
.pg-top .pg-included:has(.sk-feats) { padding-block: 0; justify-content: space-between; }
@media (max-width: 980px) { .pg-top .pg-included:has(.sk-feats) { padding-block: 24px 0; } }
/* the product tile grows with the words beside it, so both columns share top and bottom edges at every width */
.pg-top:has(.sk-feats) > .sk-product { aspect-ratio: auto; align-self: stretch; }
.pg-top:has(.sk-feats) > .sk-product .sk-product-shot { flex: 1 1 0; aspect-ratio: auto; max-height: none; min-height: 180px; margin-bottom: 8px; }
@media (max-width: 980px) { .pg-top:has(.sk-feats) > .sk-product .sk-product-shot { flex: none; aspect-ratio: 16 / 10; min-height: 0; } }

/* ================================================================
   Referral programme (/refer): unlisted, mobile-first, one job:
   get the reader to tap "Message Sam on WhatsApp".
   Tiles follow the homepage: square corners, brand blue / navy / white.
   ================================================================ */
.page-refer { --rf-muted: #3A475F; }
.page-refer .sp { padding-bottom: 0; }

/* header joins the blue hero: one solid blue block at the top */
.page-refer .site-header { background: var(--brand-dark); }
.page-refer .rf-logo { color: var(--white); }
.page-refer .rf-logo span { color: #C9D7FF; }
.page-refer .menu-icon .bar { background: var(--white); }
.page-refer .flyout-nav a, .page-refer .nav-services-btn { color: var(--white); }
.page-refer .nav-services-btn:hover, .page-refer .nav-services-btn.is-open { color: #C9D7FF; }
.page-refer .menu-btn:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
@media (max-width: 560px) {
  .page-refer .flyout-nav { background: var(--brand-dark); }
  .page-refer .flyout-nav.is-open { border-bottom-color: rgba(255, 255, 255, .2); }
}
.rf-logo { font: 500 28px/1 var(--font-sans); letter-spacing: -0.01em; color: var(--navy); }
.rf-logo span { color: var(--brand); }

/* WhatsApp button: white on brand-dark passes WCAG AA at this size */
.rf-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 16px 28px;
  border-radius: 100px;
  background: var(--brand-dark);
  color: var(--white);
  font: 500 18px/1.2 var(--font-sans);
  text-align: center;
  box-shadow: 0 8px 24px rgba(59, 104, 232, .28);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.rf-wa:hover { background: var(--brand); transform: translateY(-2px); }
.rf-wa-icon { width: 22px; height: 22px; flex-shrink: 0; }
.rf-wa--light { background: var(--white); color: var(--ink); box-shadow: 0 10px 30px rgba(11, 27, 58, .2); }
.rf-wa--light .rf-wa-icon { color: #1FA855; }
.rf-wa--light:hover { background: var(--cream); color: var(--ink); }
.rf-wa:focus-visible, .rf-btn:focus-visible, .page-refer .sp-faq summary:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}
.rf-hero .rf-wa:focus-visible, .rf-final .rf-wa:focus-visible, .rf-final .rf-btn:focus-visible { outline-color: var(--white); }

/* hero: full-bleed blue, straight under the blue header */
.rf-hero-wrap { max-width: none; padding: 0; }
.rf-hero {
  padding: 56px max(var(--side), calc((100% - var(--max)) / 2 + var(--side))) 88px;
  background: var(--brand-dark); /* white body text needs brand-dark for AA contrast */
  color: var(--white);
}
.rf-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  font: 500 13px/1 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rf-title {
  margin: 0;
  font: 500 clamp(40px, 5.6vw, 80px)/1.03 var(--font-sans);
  letter-spacing: -0.03em;
  max-width: 15ch;
}
.rf-lede { margin: 20px 0 32px; font: 400 clamp(19px, 1.6vw, 22px)/1.45 var(--font-sans); max-width: 30ch; }

.rf-chat {
  width: 100%;
  max-width: 360px;
  padding: 18px 16px 20px;
  background: #EFE9DF;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(11, 27, 58, .3);
  color: var(--ink);
  transform: rotate(2deg);
}
.rf-chat p { margin: 0; }
.rf-chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px !important; border-bottom: 1px solid rgba(11, 27, 58, .1); font: 500 15px/1.2 var(--font-sans); }
.rf-chat-head small { display: block; font-size: 13px; font-weight: 400; color: var(--rf-muted); }
.rf-chat-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-dark); color: var(--white); font-size: 15px; }
.rf-bubble {
  width: fit-content;
  max-width: 85%;
  margin-top: 8px !important;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  background: var(--white);
  font: 400 15px/1.4 var(--font-sans);
  box-shadow: 0 1px 1px rgba(11, 27, 58, .08);
}
.rf-bubble--me { margin-left: auto; border-radius: 16px 16px 4px 16px; background: #D9FDD3; }
.rf-bubble--pay { display: flex; align-items: center; gap: 10px; margin-top: 14px !important; }
.rf-bubble--pay small { display: block; font-size: 13px; color: var(--rf-muted); }
.rf-pay-tick { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #1FA855; color: var(--white); font-size: 15px; flex-shrink: 0; }

/* sections */
.rf-block { padding-top: 72px; }
.rf-h2 { margin: 0 0 28px; font: 500 clamp(30px, 3.4vw, 48px)/1.08 var(--font-sans); letter-spacing: -0.025em; color: var(--ink); }
.rf-intro { margin: -12px 0 28px; max-width: 46ch; font: 400 18px/1.55 var(--font-sans); color: var(--rf-muted); }
.rf-cta-row { margin-top: 32px; }

/* how it works: one wide tile per step, words left and a little mockup right (stacked on phones) */
.rf-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.rf-step {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 48px 56px;
  border: 1px solid var(--border);
}
.rf-step-num {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 28px;
  border-radius: 50%;
  font: 500 24px/1 var(--font-sans);
}
.rf-step h3 { margin: 0 0 12px; font: 500 clamp(28px, 2.8vw, 40px)/1.08 var(--font-sans); letter-spacing: -0.025em; }
.rf-step-text p { margin: 0 0 12px; max-width: 46ch; font: 400 18px/1.5 var(--font-sans); }
.rf-step-text p:last-child { margin-bottom: 0; }
.rf-step-visual { display: flex; justify-content: center; }
.rf-step--blue { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--white); }
.rf-step--blue .rf-wa:focus-visible { outline-color: var(--white); }
.rf-step--blue .rf-step-num { background: var(--white); color: var(--brand-dark); }
.rf-step--blue .rf-step-text p { color: var(--white); }
.rf-step-num--bonus { font-size: 30px; }

/* step 2 graphic: you -> business owner -> K&M */
.rf-flow { display: flex; align-items: flex-start; justify-content: center; gap: 6px; width: 100%; max-width: 440px; }
.rf-flow-node { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 0; }
.rf-flow-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--white);
  color: var(--brand-dark);
  box-shadow: 0 14px 30px rgba(11, 27, 58, .22);
  font: 500 22px/1 var(--font-sans);
}
.rf-flow-icon svg { width: 34px; height: 34px; }
.rf-flow-icon i { font-style: normal; color: var(--brand); }
.rf-flow-node--km .rf-flow-icon { white-space: nowrap; letter-spacing: -0.02em; }
.rf-flow-node--km .rf-flow-icon { background: #EAF0FF; }
.rf-flow-node b { font: 500 16px/1.2 var(--font-sans); }
.rf-flow-node small { font: 400 14px/1.35 var(--font-sans); color: rgba(255, 255, 255, .9); }
.rf-flow-arrow { flex: 0 0 28px; height: 2px; margin-top: 38px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.8) 0 5px, transparent 5px 9px); position: relative; }
.rf-flow-arrow::after { content: ""; position: absolute; right: -2px; top: -4px; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); }

/* mockups */
.rf-mock { width: 100%; max-width: 360px; background: var(--white); color: var(--ink); border-radius: 18px; box-shadow: 0 20px 50px rgba(11, 27, 58, .18); }
.rf-mock p { margin: 0; }
.rf-notes { display: grid; gap: 10px; width: 100%; max-width: 380px; }
.rf-note { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; font: 400 15px/1.3 var(--font-sans); }
.rf-note b { display: block; font-weight: 500; }
.rf-note small { display: block; font-size: 14px; color: var(--rf-muted); }
.rf-note em { margin-left: auto; align-self: flex-start; font-style: normal; font-size: 13px; color: var(--rf-muted); white-space: nowrap; }
.rf-note-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #1FA855; color: var(--white); font: 500 19px/1 var(--font-sans); flex-shrink: 0; }
.rf-note--old { opacity: .9; transform: scale(.96); }
.rf-profile { overflow: hidden; transform: rotate(1deg); }
.rf-profile-banner { height: 64px; background: linear-gradient(120deg, var(--brand-dark), var(--brand)); }
.rf-profile-body { position: relative; padding: 0 20px 20px; }
.rf-profile-avatar { display: grid; place-items: center; width: 68px; height: 68px; margin-top: -34px; border: 4px solid var(--white); border-radius: 50%; background: var(--cream); color: var(--rf-muted); font: 500 14px/1 var(--font-sans); }
.rf-profile-name { margin: 10px 0 16px !important; font: 500 19px/1.25 var(--font-sans); }
.rf-profile-name small, .rf-profile-job small { display: block; font-size: 14px; font-weight: 400; color: var(--rf-muted); }
.rf-profile-label { padding-top: 14px; border-top: 1px solid var(--border); font: 500 15px/1 var(--font-sans); }
.rf-profile-job { display: flex; gap: 12px; margin-top: 12px; font: 400 15px/1.35 var(--font-sans); }
.rf-profile-job b { font-weight: 500; }
.rf-profile-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: var(--brand-dark); color: var(--white); font: 500 13px/1 var(--font-sans); flex-shrink: 0; }
.rf-profile-rec { margin-top: 14px !important; padding: 10px 12px; border-radius: 10px; background: #EAF0FF; color: var(--brand-dark); font: 400 13.5px/1.35 var(--font-sans); }
.rf-profile-rec b { font-weight: 500; }

/* who could you ask: photo tiles */
.rf-who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.rf-who-tile { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink); }
.rf-who-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rf-who-tile::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); }
.rf-who-tile figcaption, .rf-who-tile > span {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 1;
  font: 500 19px/1.2 var(--font-sans);
  color: var(--white);
}
.rf-who-tile--blue { background: var(--brand-dark); }
.rf-who-tile--blue::after { display: none; }
.rf-who-tile--blue > span { font-size: 22px; }

/* why do it */
.rf-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.rf-why-tile { padding: 28px; background: var(--white); border: 1px solid var(--border); }
.rf-icon { width: 36px; height: 36px; color: var(--brand); }
.rf-why-tile h3 { margin: 20px 0 8px; font: 500 22px/1.2 var(--font-sans); color: var(--ink); }
.rf-why-tile p { margin: 0; font: 400 16.5px/1.55 var(--font-sans); color: var(--rf-muted); }
.rf-small { margin: 20px 0 0; max-width: 60ch; font: 400 16px/1.55 var(--font-sans); color: var(--rf-muted); }

/* final call to action + share, one navy tile */
.rf-final { margin-bottom: 64px; padding: 72px 48px; background: var(--brand-dark); color: var(--white); text-align: center; }
.rf-final-title { margin: 0 auto 32px; max-width: 17ch; font: 500 clamp(30px, 3.6vw, 52px)/1.08 var(--font-sans); letter-spacing: -0.025em; }
.rf-share { margin: 56px auto 0; padding-top: 32px; max-width: 520px; border-top: 1px solid rgba(255, 255, 255, .16); }
.rf-share p { margin: 0 0 18px; font: 400 17px/1.5 var(--font-sans); color: var(--white); }
.rf-share-btns { display: flex; justify-content: center; gap: 12px; }
.rf-btn {
  min-height: 48px;
  padding: 12px 26px;
  border: 1.5px solid rgba(255, 255, 255, .7);
  border-radius: 100px;
  background: transparent;
  color: var(--white);
  font: 500 16px/1 var(--font-sans);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.rf-btn:hover { background: var(--white); color: var(--brand-dark); }
.rf-btn[hidden] { display: none; }
.rf-status { display: block; min-height: 20px; margin-top: 12px; font: 500 14px/1.4 var(--font-sans); color: var(--white); word-break: break-all; }

/* sticky WhatsApp bar on phones; hidden while another WhatsApp button is on screen */
.rf-bar { display: none; }
@media (max-width: 767px) {
  .page-refer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .rf-bar {
    display: block;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 30;
    transition: transform .25s ease, opacity .25s ease;
  }
  .rf-bar.is-hidden { transform: translateY(calc(100% + 24px)); opacity: 0; }
  .rf-wa--bar {
    width: 100%;
    background: #25D366; /* WhatsApp green; dark text, as white on this green is only 2:1 */
    color: var(--ink);
    box-shadow: 0 10px 28px rgba(11, 27, 58, .3);
  }
  .rf-wa--bar:hover { background: #20BD5A; }
  .rf-wa--bar:focus-visible { outline-color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .rf-bar, .rf-wa { transition: none; } }

@media (max-width: 980px) {
  .rf-logo { font-size: 24px; }
  .rf-hero { padding: 40px var(--side) 64px; }
  .rf-step { grid-template-columns: 1fr; gap: 32px; padding: 40px 32px; }
    .rf-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf-why { grid-template-columns: 1fr; }
  .rf-final { padding: 56px 24px; }
}
@media (max-width: 560px) {
  .rf-hero { padding: 28px 20px 48px; }
  .rf-title { font-size: 40px; }
  .rf-flow-icon { width: 64px; height: 64px; }
  .rf-flow-icon svg { width: 28px; height: 28px; }
  .rf-flow-node--km .rf-flow-icon { font-size: 18px; }
  .rf-flow-arrow { flex-basis: 18px; margin-top: 32px; }
  .rf-flow-node b { font-size: 15px; }
  .rf-flow-node small { font-size: 13px; }
  .rf-lede { font-size: 19px; margin-bottom: 28px; }
  .rf-chat { transform: rotate(1.5deg); max-width: 330px; }
  .rf-block { padding-top: 56px; }
  .rf-h2 { font-size: 30px; margin-bottom: 22px; }
  .rf-step { padding: 32px 20px 36px; gap: 28px; }
    .rf-step-num { width: 44px; height: 44px; margin-bottom: 20px; font-size: 20px; }
  .rf-step h3 { font-size: 27px; }
  .rf-step-text p { font-size: 17px; }
  .rf-mock { max-width: 320px; }
  .rf-who-tile figcaption, .rf-who-tile > span { left: 14px; right: 14px; bottom: 12px; font-size: 16px; }
  .rf-who-tile--blue > span { font-size: 18px; }
  .rf-why { gap: 10px; }
  .rf-why-tile { display: grid; grid-template-columns: 36px 1fr; column-gap: 16px; padding: 20px; }
  .rf-why-tile .rf-icon { grid-row: span 2; width: 32px; height: 32px; }
  .rf-why-tile h3 { margin: 2px 0 4px; font-size: 20px; }
  .rf-wa { padding: 16px 18px; font-size: 17px; }
  .rf-hero .rf-wa, .rf-cta-row .rf-wa, .rf-final .rf-wa { width: 100%; }
  .rf-final { margin-bottom: 40px; padding: 48px 20px; }
  .rf-share-btns .rf-btn { flex: 1 1 0; }
}

/* ---------------- Homepage, 13 Oct 2026: the fact tile, the phone layout, the tracing lines ---------------- */

/* A blue tile where each fact types itself in, a word lights up, then the next (13 Oct 2026). */
.card--fact { background: var(--brand); border-color: var(--brand); }
.card--fact .card-top .eyebrow { color: var(--white); }
.fact-typer { position: absolute; left: 24px; right: 24px; top: 70px; margin: 0; font: 500 clamp(30px, 3.4vw, 54px)/1.08 var(--font-sans); letter-spacing: -0.03em; color: var(--white); text-wrap: balance; }
.typer mark { background: none; color: inherit; position: relative; z-index: 0; }
.typer mark::before { content: ""; position: absolute; left: -0.08em; right: -0.08em; top: 0.12em; bottom: 0.02em; z-index: -1; border-radius: 0.12em; transform-origin: left center; transform: scaleX(0); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.typer mark.is-lit::before, .motion-off .typer mark::before { transform: scaleX(1); }
.fact-typer mark::before { background: rgba(255,255,255,.26); }
.typer .caret { display: inline-block; width: 0.06em; height: 0.9em; margin-left: 0.04em; vertical-align: -0.08em; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .typer mark::before { transform: scaleX(1); } .typer .caret { display: none; } }

/* Lines that trace round a tile as it scrolls past (script.js). */
.card-trace { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.card-trace path { fill: none; stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; }
.motion-off .card-trace { display: none; }
@media (prefers-reduced-motion: reduce) { .card-trace { display: none; } }

/* Phones: two columns, in the order that tells the story; the big ones full width. */
@media (max-width: 560px) {
  .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 14px 14px; }
  .tiles > section { display: contents; }
  .tiles .card { grid-area: auto !important; grid-column: span 1; aspect-ratio: 1 / 1 !important; margin: 0; }
  .tiles [data-m="consult"], .tiles [data-m="bellway"], .tiles [data-m="fact"], .tiles [data-m="budget"], .tiles [data-m="amante"] { grid-column: 1 / -1 !important; aspect-ratio: 5 / 4 !important; }
  .tiles [data-m="consult"] { order: 1; }
  .tiles [data-m="bot-web"] { order: 2; }
  .tiles [data-m="bot-marketing"] { order: 3; }
  .tiles [data-m="bot-ai"] { order: 4; }
  .tiles [data-m="bot-digital"] { order: 5; }
  .tiles [data-m="bellway"] { order: 6; }
  .tiles [data-m="sam"] { order: 7; }
  .tiles [data-m="oscar"] { order: 8; }
  .tiles [data-m="sos"] { order: 9; }
  .tiles [data-m="seo"] { order: 10; }
  .tiles [data-m="fact"] { order: 11; }
  .tiles [data-m="loyalty"] { order: 12; }
  .tiles [data-m="app"] { order: 13; }
  .tiles [data-m="budget"] { order: 14; }
  .tiles [data-m="amante"] { order: 15; }
  .tiles [data-m="website"] { order: 16; }
  .tiles [data-m="inbox"] { order: 17; }
  /* The half tiles: the title only, a little smaller. */
  .tiles .card:not([data-m="consult"]):not([data-m="bellway"]):not([data-m="fact"]):not([data-m="budget"]):not([data-m="amante"]):not([data-m="social"]):not([data-m="bots"]) .card-byline { display: none; }
  .tiles .card:not([data-m="consult"]):not([data-m="bellway"]):not([data-m="fact"]):not([data-m="budget"]):not([data-m="amante"]):not([data-m="social"]):not([data-m="bots"]) .card-top,
  .tiles .card:not([data-m="consult"]):not([data-m="bellway"]):not([data-m="fact"]):not([data-m="budget"]):not([data-m="amante"]):not([data-m="social"]):not([data-m="bots"]) .card-bottom { padding: 12px; }
  .tiles .card:not([data-m="consult"]):not([data-m="bellway"]):not([data-m="fact"]):not([data-m="budget"]):not([data-m="amante"]):not([data-m="social"]):not([data-m="bots"]) .card-title { font-size: 16px !important; line-height: 1.2; }
  .tiles .card:not([data-m="consult"]):not([data-m="bellway"]):not([data-m="fact"]):not([data-m="budget"]):not([data-m="amante"]):not([data-m="social"]):not([data-m="bots"]) .eyebrow { font-size: 10px; }
  .tiles .card:not([data-m="consult"]):not([data-m="bellway"]):not([data-m="fact"]):not([data-m="budget"]):not([data-m="amante"]):not([data-m="social"]):not([data-m="bots"]) .card-cta { font-size: 11px; }
  .fact-typer { font-size: 28px; top: 56px; left: 18px; right: 18px; }
}

/* Posted for you (13 Oct 2026): flat navy like K&M's own Instagram; each logo draws itself as a white line, fills, then gives way. */
.grid-3up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-3up > .card { aspect-ratio: 1 / 1; }
.card--social { background: #0A1F44; border-color: #0A1F44; }
.card--social .typer mark::before { background: var(--brand); }
.social-logos { position: absolute; left: 50%; top: 40%; width: 32%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.social-logos svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; animation: logo-show 7.5s linear infinite; animation-delay: calc(var(--i) * 2.5s); }
.social-logos path { fill: rgba(255,255,255,0); stroke: var(--white); stroke-width: 0.22; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: logo-draw 7.5s cubic-bezier(.6,0,.2,1) infinite; animation-delay: calc(var(--i) * 2.5s); }
@keyframes logo-show { 0% { opacity: 1; } 31% { opacity: 1; } 33.3% { opacity: 0; } 100% { opacity: 0; } }
@keyframes logo-draw {
  0% { stroke-dashoffset: 1; fill: rgba(255,255,255,0); transform: scale(.94); transform-origin: 50% 50%; }
  14% { stroke-dashoffset: 0; fill: rgba(255,255,255,0); transform: scale(1); }
  20% { stroke-dashoffset: 0; fill: rgba(255,255,255,1); }
  29% { stroke-dashoffset: 0; fill: rgba(255,255,255,1); transform: scale(1); }
  33% { stroke-dashoffset: 0; fill: rgba(255,255,255,0); transform: scale(1.04); }
  100% { stroke-dashoffset: 1; fill: rgba(255,255,255,0); }
}
.motion-off .social-logos svg, .motion-off .social-logos path { animation: none; }
.motion-off .social-logos svg:first-child { opacity: 1; }
.motion-off .social-logos svg:first-child path { stroke-dashoffset: 0; fill: #fff; }
@media (prefers-reduced-motion: reduce) { .social-logos svg, .social-logos path { animation: none; } .social-logos svg:first-child { opacity: 1; } .social-logos svg:first-child path { stroke-dashoffset: 0; fill: #fff; } }
@media (max-width: 980px) { .grid-3up { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .tiles [data-m="social"] { grid-column: 1 / -1 !important; aspect-ratio: 5 / 4 !important; order: 11; }
  .tiles [data-m="loyalty"] { order: 12; }
  .tiles [data-m="app"] { order: 13; }
  .tiles [data-m="fact"] { order: 14; }
  .tiles [data-m="budget"] { order: 15; }
  .tiles [data-m="amante"] { order: 16; }
  .tiles [data-m="website"] { order: 17; }
  .tiles [data-m="inbox"] { order: 18; }
  .tiles [data-m="social"] .card-byline { display: block !important; }
  .tiles [data-m="social"] .card-title { font-size: 24px !important; }
  .social-logos { width: 26%; top: 37%; }
}

/* ---------------- The menu (21 Oct 2026, Oscar picked the side drawer): a cream panel slides in from the right ---------------- */
.flyout-nav { display: none !important; }
:root { --dw: min(520px, 88vw); --ease-sheet: cubic-bezier(.32,.72,0,1); }
html { scrollbar-gutter: stable; }
html.km-lock { overflow: hidden; }
.km-scrim { position: fixed; inset: 0; z-index: 41; background: rgba(11,27,58,.32); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.km-scrim.is-on { opacity: 1; visibility: visible; transition: opacity .55s ease, visibility 0s; }
.km-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 42; width: var(--dw); display: flex; flex-direction: column; background: var(--cream); color: var(--ink); box-shadow: -40px 0 80px -40px rgba(11,27,58,.45); transform: translate3d(100%,0,0); visibility: hidden; will-change: transform; touch-action: pan-y; overscroll-behavior: contain;
  transition: transform .5s var(--ease-sheet), visibility 0s linear .5s; }
.km-drawer.is-open { transform: translate3d(0,0,0); visibility: visible; transition: transform .7s var(--ease-sheet), visibility 0s; }
.km-drawer.is-dragging, .km-scrim.is-dragging { transition: none; }
.km-drawer-in { flex: 1; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 76px 40px max(32px, env(safe-area-inset-bottom)); }
/* the X sits exactly where the menu button is, and draws itself from two flat lines as the panel arrives */
.km-drawer-x { position: absolute; top: 20px; right: calc(var(--side) - 2px); z-index: 1; width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; transition: background .2s; }
.km-drawer-x:hover { background: rgba(11,27,58,.06); }
.km-drawer-x:focus:not(:focus-visible) { outline: none; }
.km-drawer-x span { position: absolute; left: 7px; right: 7px; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--ink); transition: transform .5s var(--ease-sheet); }
.km-drawer-x span:first-child { transform: translateY(-4px); }
.km-drawer-x span:last-child { transform: translateY(4px); }
.km-drawer.is-open .km-drawer-x span:first-child { transform: rotate(45deg); transition-delay: .18s; }
.km-drawer.is-open .km-drawer-x span:last-child { transform: rotate(-45deg); transition-delay: .18s; }
/* each row drifts in after the panel, one after another; on the way out they just fade together */
.km-drawer-in > *, .km-drawer-svc, .km-drawer-links a { opacity: 0; transform: translate3d(28px,0,0); transition: opacity .2s ease, transform 0s linear .2s; }
.km-drawer-in > .km-drawer-svcs, .km-drawer-in > .km-drawer-links { opacity: 1; transform: none; transition: none; }
.km-drawer.is-open .km-drawer-in > *, .km-drawer.is-open .km-drawer-svc, .km-drawer.is-open .km-drawer-links a { opacity: 1; transform: none; transition: opacity .5s ease, transform .75s var(--ease-sheet); transition-delay: calc(.1s + var(--i, 0) * .035s); }
.km-drawer-label { margin: 0 0 8px; font: 500 12px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--navy-muted); }
.km-drawer-label--more { margin-top: 26px; }
.km-drawer-svc { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; padding: 10px 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--border); }
.km-drawer-ph { display: block; width: 96px; height: 72px; overflow: hidden; background: #ece6db; }
.km-drawer-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-sheet); }
.km-drawer-svc b { display: block; font: 500 19px/1.2 var(--font-sans); transition: color .25s; }
.km-drawer-svc small { display: block; margin-top: 4px; font: 400 14px/1.35 var(--font-sans); color: var(--navy-muted); }
.km-drawer-svc::after { content: '\2192'; position: absolute; right: 2px; top: 50%; color: var(--brand); font: 400 18px/1 var(--font-sans); opacity: 0; transform: translate3d(-8px,-50%,0); transition: opacity .25s, transform .35s var(--ease-sheet); }
.km-drawer-links a { display: block; padding: 5px 0; color: var(--ink); text-decoration: none; font: 500 32px/1.15 var(--font-sans); letter-spacing: -.03em; }
.km-drawer-links a span { display: inline-block; transition: transform .35s var(--ease-sheet), color .25s; }
@media (hover: hover) {
  .km-drawer-svc:hover b { color: var(--brand); }
  .km-drawer-svc:hover img { transform: scale(1.08); }
  .km-drawer-svc:hover::after { opacity: 1; transform: translate3d(0,-50%,0); }
  .km-drawer-links a:hover span { transform: translate3d(10px,0,0); color: var(--brand); }
}
.km-drawer-svc:active, .km-drawer-links a:active { opacity: .6; }
.km-drawer-svc.is-current b, .km-drawer-links a.is-current span { color: var(--brand); }
.km-drawer-links a.is-current span::after { content: "&"; margin-left: .18em; font-size: .6em; vertical-align: .35em; }
.km-drawer-foot { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.km-drawer-book { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; background: var(--brand); color: var(--white); text-decoration: none; font: 500 16px/1 var(--font-sans); transition: background .2s, transform .25s var(--ease-sheet); }
.km-drawer-book:hover { background: var(--brand-dark); transform: translate3d(0,-2px,0); }
.km-drawer-mail { color: var(--navy-muted); text-decoration: none; font: 400 15px/1.3 var(--font-sans); }
.km-drawer-mail:hover { color: var(--ink); }
@media (max-width: 560px) {
  .km-drawer-in { padding: 72px 24px max(24px, env(safe-area-inset-bottom)); }
  .km-drawer-x { top: 20px; right: calc(var(--side) - 2px); }
  .km-drawer-svc { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 10px 0; }
  .km-drawer-ph { width: 76px; height: 60px; }
  .km-drawer-svc b { font-size: 17px; }
  .km-drawer-svc small { font-size: 13px; }
  .km-drawer-links a { font-size: 28px; }
  .km-drawer-label--more { margin-top: 24px; }
}
@media (max-height: 760px) and (min-width: 561px) { .km-drawer-in { padding-top: 68px; } .km-drawer-svc { padding: 8px 0; } .km-drawer-links a { font-size: 28px; } .km-drawer-label--more { margin-top: 22px; } }
/* arriving from the menu on another page: the panel and the dimming are drawn before the page paints, then slide away */
html.km-arrive body::before { content: ''; position: fixed; inset: 0; z-index: 1000; background: rgba(11,27,58,.32); }
html.km-arrive body::after { content: ''; position: fixed; top: 0; right: 0; bottom: 0; width: var(--dw); z-index: 1001; background: var(--cream); }
.km-drawer.km-instant, .km-drawer.km-instant *, .km-scrim.km-instant { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .km-drawer, .km-drawer *, .km-scrim { transition: none !important; } }
.motion-off .km-drawer, .motion-off .km-drawer *, .motion-off .km-scrim { transition: none !important; }

/* ---------------- The four services in one square (13 Oct 2026) ---------------- */
.bots-quad { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; padding: 8px; background: var(--cream); border-color: transparent; }
.bot-mini { position: relative; display: block; overflow: hidden; text-decoration: none; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.bot-mini:hover { transform: translateY(-3px); }
.bot-mini .card-trace { z-index: 2; }
.bot-mini .room3d { position: absolute; inset: 0 0 16% 0; }
.bot-mini-name { position: absolute; left: 16px; bottom: 34px; font: 500 clamp(17px, 1.6vw, 24px)/1.1 var(--font-sans); letter-spacing: -0.015em; color: var(--white); }
.bot-mini-go { position: absolute; left: 16px; bottom: 14px; font: 500 11px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8); border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 2px; }
/* The mosaic without the three single bots: SOS and the fact, the founders and guides by the budget guide, Amante by Posted for you. */
.grid-mixed { grid-template-areas: "m3 m3 m4 m4" "m3 m3 m4 m4" "m5 m5 m1 m2" "m5 m5 m6 m7" "sc sc s4 s4" "sc sc s4 s4" !important; }
[data-area="sc"] { grid-area: sc; }
@media (max-width: 980px) {
  .grid-mixed { grid-template-areas: "m3 m3" "m4 m4" "m1 m2" "m6 m7" "m5 m5" "s4 s4" "sc sc" !important; }
}
@media (max-width: 560px) {
  .tiles [data-m="bots"] { grid-column: 1 / -1 !important; aspect-ratio: 1 / 1 !important; order: 2; padding: 0; gap: 10px; background: transparent; }
  .bot-mini-name { font-size: 15px; left: 12px; bottom: 28px; }
  .bot-mini-go { left: 12px; bottom: 11px; font-size: 10px; }
}
/* The untyped rest of a typed line: there, holding its place, but not seen. */
.typer .ghost { visibility: hidden; }
.typer .caret { width: 0; margin: 0; background: none; position: relative; }
.typer .caret::after { content: ""; position: absolute; left: 0.03em; top: 0; bottom: 0; width: 0.06em; background: currentColor; }

/* Phones, 13 Oct 2026 (later): every tile a true square, full width or half; never more than two rows of halves in a run. */
@media (max-width: 560px) {
  .tiles [data-m="consult"], .tiles [data-m="bots"], .tiles [data-m="bellway"], .tiles [data-m="social"], .tiles [data-m="fact"], .tiles [data-m="amante"], .tiles [data-m="budget"] { grid-column: 1 / -1 !important; aspect-ratio: 1 / 1 !important; }
  .tiles [data-m="consult"] { order: 1; }
  .tiles [data-m="bots"] { order: 2; }
  .tiles [data-m="bellway"] { order: 3; }
  .tiles [data-m="social"] { order: 4; }
  .tiles [data-m="sam"] { order: 5; }
  .tiles [data-m="oscar"] { order: 6; }
  .tiles [data-m="budget"] { order: 7; }
  .tiles [data-m="sos"] { order: 8; }
  .tiles [data-m="seo"] { order: 9; }
  .tiles [data-m="amante"] { order: 10; }
  .tiles [data-m="fact"] { order: 11; }
  .tiles [data-m="loyalty"] { order: 12; }
  .tiles [data-m="app"] { order: 13; }
  .tiles [data-m="website"] { order: 14; }
  .tiles [data-m="inbox"] { order: 15; }
  /* The four bots in K&M's own navy and blue, set like a chequerboard. */
  .tiles .bot-mini[data-room="web"], .tiles .bot-mini[data-room="digital"] { --bd-1: #1D3A70; --bd-2: #10295A; --bd-3: #0A1F44; }
  .tiles .bot-mini[data-room="marketing"], .tiles .bot-mini[data-room="ai"] { --bd-1: #7FA2FF; --bd-2: #4F7FFF; --bd-3: #3463E6; }
  .fact-typer { font-size: 32px; top: 64px; }
}
/* Typing fixes (13 Oct 2026, later): the caret is a plain inline span, so a word can never break where the caret sits;
   the lit word is painted as a background on each line it sits on, so a word that wraps lights cleanly. */
.typer .caret { display: inline; }
.typer mark { --hl: rgba(255,255,255,.26); padding: 0 .08em; margin: 0 -.08em; border-radius: .12em; background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 85% / 0% 82%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .45s cubic-bezier(.2,.8,.2,1); }
.typer mark::before { content: none; }
.typer mark.is-lit, .motion-off .typer mark { background-size: 100% 82%; }
.card--social .typer mark { --hl: var(--brand); }
@media (prefers-reduced-motion: reduce) { .typer mark { background-size: 100% 82%; } }
/* Legibility on bright photos (13 Oct 2026, later): a soft shade behind the label at the top, a deeper one under the words at the bottom. */
.tiles .card:has(> img, > video) .card-top { padding-bottom: 56px; background: linear-gradient(to bottom, rgba(0,0,0,.42), rgba(0,0,0,0)); }
.tiles .card:has(> img, > video) .card-scrim { height: 70%; background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.45) 45%, rgba(0,0,0,0)); }
.tiles .card:has(> img, > video) .card-top, .tiles .card:has(> img, > video) .card-bottom { text-shadow: 0 1px 14px rgba(0,0,0,.35); }
/* The four bots in K&M navy and blue everywhere, as on phones. */
.bots-quad .bot-mini[data-room="web"], .bots-quad .bot-mini[data-room="digital"] { --bd-1: #1D3A70; --bd-2: #10295A; --bd-3: #0A1F44; }
.bots-quad .bot-mini[data-room="marketing"], .bots-quad .bot-mini[data-room="ai"] { --bd-1: #7FA2FF; --bd-2: #4F7FFF; --bd-3: #3463E6; }

/* ---------------- Client flicker + photo services (14 Oct 2026): no bots; web design flicks through the clients ---------------- */
.flick { position: absolute; inset: 0; }
.flick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity .9s ease; }
.flick img.is-on { opacity: 1; }
.flick-names { display: grid; }
.flick-names > * { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.flick-names > .is-on { opacity: 1; transform: none; pointer-events: auto; }
.flick-card .flick-names a { color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 2px; justify-self: start; }
.flick-card .card-bottom a.card-cta { text-decoration: none; }
/* homepage quad: photo minis with a dark wash so the names read */
.svc-mini { background: var(--ink); }
.svc-mini > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-mini::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.15) 60%, rgba(0,0,0,.25)); pointer-events: none; }
.svc-mini .bot-mini-name, .svc-mini .bot-mini-go, .svc-mini-client { z-index: 2; }
.svc-mini-client { position: absolute; left: 16px; top: 14px; right: 12px; font: 500 11px/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.9); }
@media (max-width: 560px) { .svc-mini-client { left: 12px; top: 11px; font-size: 9.5px; } }

/* ---------------- Web design page, rebuilt 14 Oct 2026: a flicking client photo beside one big line, then the live sites one at a time ---------------- */
.wd-open { grid-template-columns: 1fr 1fr; padding-top: 8px; }
.wd-photo, .wd-line { aspect-ratio: 1 / 1; }
.wd-photo .flick img { object-position: center; }
.wd-photo .card-scrim { height: 30%; top: 0; bottom: auto; background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0)); }
.wd-photo .flick-names a { font-size: 13px; }
.wd-line { background: var(--ink); }
.wd-line .card-bottom { padding: clamp(28px, 3.4vw, 52px); }
.wd-title { margin: 0 0 20px; max-width: 12ch; font: 500 clamp(40px, 4.6vw, 74px)/1.02 var(--font-sans); letter-spacing: -0.035em; color: var(--white); }
.wd-sub { margin: 0 0 32px; max-width: 34ch; font: 400 clamp(16px, 1.25vw, 19px)/1.5 var(--font-sans); color: rgba(255,255,255,.72); }
.wd-btn { display: inline-block; padding: 16px 28px; border-radius: 999px; background: var(--white); color: var(--ink); font: 500 13px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: background .25s ease, color .25s ease; }
.wd-btn:hover { background: var(--brand); color: var(--white); }

.wd-work-row { grid-template-columns: 1fr; }
.wd-work { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; padding: clamp(40px, 5vw, 80px); background: var(--ink); }
.wd-phone { justify-self: center; height: min(78vh, 720px); aspect-ratio: 390 / 844; border-radius: 34px; overflow: hidden; background: #000;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.14); transition: opacity .25s ease; }
.wd-phone video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wd-info { position: relative; z-index: 2; color: var(--white); transition: opacity .25s ease; }
/* switching (15 Oct 2026, Oscar: it reloaded, jogged up and showed black): two screens stacked in the phone. The next
   site loads behind the current one while it plays, then the two cross fade in place. Nothing slides, nothing loads on show. */
.wd-phone { position: relative; background: #fff; }
.wd-phone video { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.wd-phone video.is-front { opacity: 1; z-index: 1; }
.wd-eyebrow, .wd-desc, .wd-visit { transition: opacity .35s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.wd-work.is-leaving .wd-eyebrow, .wd-work.is-leaving .wd-desc, .wd-work.is-leaving .wd-visit,
.wd-work.is-arriving:not(.is-typed) .wd-desc, .wd-work.is-arriving:not(.is-typed) .wd-visit { opacity: 0; transform: translateY(10px); }
.wd-name { min-height: 1.02em; }
.wd-name.is-typing::after { content: ''; display: inline-block; width: 3px; height: .82em; margin-left: 6px; vertical-align: -0.04em; background: var(--brand); animation: wd-caret .9s steps(1) infinite; }
@keyframes wd-caret { 50% { opacity: 0; } }
.wd-eyebrow { margin: 0 0 18px; color: rgba(255,255,255,.65); }
.wd-name { margin: 0 0 14px; font: 500 clamp(36px, 4vw, 64px)/1.02 var(--font-sans); letter-spacing: -0.035em; color: var(--white); }
.wd-desc { margin: 0 0 22px; max-width: 34ch; font: 400 clamp(16px, 1.25vw, 19px)/1.5 var(--font-sans); color: rgba(255,255,255,.72); }
.wd-visit { display: inline-block; font: 500 13px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 3px; }
.wd-visit:hover { border-color: var(--white); }
.wd-tabs { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; max-width: 460px; }
.wd-tab { position: relative; padding: 14px 0; border: 0; border-top: 1px solid rgba(255,255,255,.16); background: none; text-align: left; cursor: pointer;
  font: 500 15px/1.2 var(--font-sans); color: rgba(255,255,255,.5); transition: color .2s ease; }
.wd-tab:hover, .wd-tab.is-on { color: var(--white); }
.wd-tab i { position: absolute; left: 0; right: 0; top: -1px; height: 2px; border-radius: 2px; background: var(--white); transform-origin: left; transform: scaleX(0); will-change: transform; }
.wd-tab.is-on i { transform: scaleX(var(--p, 0)); }

@media (max-width: 980px) {
  .wd-work { grid-template-columns: 1fr; gap: 36px; }
  .wd-phone { height: min(70vh, 640px); }
}
@media (max-width: 560px) {
  .wd-open { grid-template-columns: 1fr; }
  .wd-photo { aspect-ratio: 4 / 5; }
  .wd-line { aspect-ratio: auto; min-height: 380px; }
  .wd-line .card-bottom { padding: 28px 24px 30px; }
  .wd-work { padding: 32px 20px 28px; }
  .wd-phone { height: 520px; border-radius: 28px; }
  .wd-tabs { margin-top: 32px; gap: 0 18px; }
  .wd-tab { font-size: 14px; }
}
/* 14 Oct 2026 (later): desktop keeps the two squares; on phones the words sit over the rotating photo in one tile */
.wd-photo .wd-hero-shade { display: none; }
@media (max-width: 560px) {
  .wd-open { display: grid; grid-template-columns: 1fr; }
  .wd-photo, .wd-line { grid-area: 1 / 1; aspect-ratio: 4 / 5; min-height: 0; }
  .wd-photo .wd-hero-shade { display: block; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(6,14,32,.88), rgba(6,14,32,.55) 55%, rgba(6,14,32,.15) 80%, rgba(6,14,32,.4)); }
  .wd-line { z-index: 2; background: transparent; border-color: transparent; pointer-events: none; }
  .wd-line .card-top { display: none; }
  .wd-line .card-bottom { padding: 22px; }
  .wd-line .wd-btn { pointer-events: auto; }
  .wd-photo .card-top { z-index: 3; }
  .wd-title { font-size: clamp(36px, 10.5vw, 46px); margin-bottom: 14px; }
  .wd-sub { display: none; } /* Oscar, 14 Oct 2026: on phones just the line and the button, so more of the photo shows */
  .wd-title { margin-bottom: 22px; }
}
@media (max-width: 560px) { .wd-hero-shade { background: linear-gradient(to top, rgba(6,14,32,.88), rgba(6,14,32,.55) 55%, rgba(6,14,32,.15) 80%, rgba(6,14,32,.4)); } }

/* 14 Oct 2026 (later): desktop keeps the two squares; on phones the words sit over the rotating photo in one tile */
.wd-photo .wd-hero-shade { display: none; }
@media (max-width: 560px) {
  .wd-open { display: grid; grid-template-columns: 1fr; }
  .wd-photo, .wd-line { grid-area: 1 / 1; aspect-ratio: 4 / 5; min-height: 0; }
  .wd-photo .wd-hero-shade { display: block; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(6,14,32,.88), rgba(6,14,32,.55) 55%, rgba(6,14,32,.15) 80%, rgba(6,14,32,.4)); }
  .wd-line { z-index: 2; background: transparent; border-color: transparent; pointer-events: none; }
  .wd-line .card-top { display: none; }
  .wd-line .card-bottom { padding: 22px; }
  .wd-line .wd-btn { pointer-events: auto; }
  .wd-photo .card-top { z-index: 3; }
  .wd-title { font-size: clamp(36px, 10.5vw, 46px); margin-bottom: 14px; }
  .wd-sub { margin-bottom: 22px; font-size: 15px; }
}
@media (max-width: 560px) { .wd-hero-shade { background: linear-gradient(to top, rgba(6,14,32,.88), rgba(6,14,32,.55) 55%, rgba(6,14,32,.15) 80%, rgba(6,14,32,.4)); } }

/* ---------------- Good to know (14 Oct 2026): each question lights up word by word as it scrolls in, then its answer rises ---------------- */
.gtk { max-width: var(--max); margin: 72px auto 40px; padding: 0 var(--side); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; }
.gtk-title { position: sticky; top: 110px; align-self: start; margin: 0; font: 500 clamp(30px, 3vw, 46px)/1.05 var(--font-sans); letter-spacing: -0.03em; color: var(--ink); }
.gtk-item { display: grid; grid-template-columns: 56px 1fr; gap: 0 12px; padding: 34px 0 38px; border-top: 1px solid var(--border); }
.gtk-item:last-child { border-bottom: 1px solid var(--border); }
.gtk-n { padding-top: 10px; font: 500 13px/1 var(--font-sans); letter-spacing: .08em; color: var(--brand); }
.gtk-q { margin: 0 0 16px; font: 500 clamp(24px, 2.4vw, 38px)/1.15 var(--font-sans); letter-spacing: -0.025em; color: var(--ink); }
.gtk-q span { opacity: var(--lit, 1); transition: opacity .25s linear; }
.gtk-a { margin: 0; max-width: 58ch; font: 400 clamp(16px, 1.2vw, 18px)/1.6 var(--font-sans); color: var(--navy-muted); }
.gtk.is-live .gtk-q span { --lit: .16; }
.gtk.is-live .gtk-q span.on { --lit: 1; }
.gtk.is-live .gtk-a { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.gtk.is-live .gtk-item.done .gtk-a { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .gtk { grid-template-columns: 1fr; gap: 8px; margin-top: 56px; }
  .gtk-title { position: static; margin-bottom: 16px; }
  .gtk-item { grid-template-columns: 1fr; padding: 26px 0 30px; }
  .gtk-n { padding: 0 0 12px; }
}

/* ---------------- More services (14 Oct 2026): big type rows on navy; on a mouse the service's photo follows the pointer ---------------- */
.ms { position: relative; margin: 56px 0 0; padding: clamp(48px, 6vw, 96px) var(--side); background: var(--ink); overflow: hidden; }
.ms-label { max-width: var(--max); margin: 0 auto 28px; font: 500 13px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.ms-rows { max-width: var(--max); margin: 0 auto; }
.ms-row { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 60px; align-items: baseline; gap: 24px; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.14); color: var(--white); text-decoration: none; }
.ms-row:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.ms-name { font: 500 clamp(40px, 6.4vw, 104px)/1 var(--font-sans); letter-spacing: -0.045em; transition: transform .5s cubic-bezier(.16,1,.3,1), color .3s ease; }
.ms-tag { font: 400 16px/1.4 var(--font-sans); color: rgba(255,255,255,.6); transition: color .3s ease; }
.ms-arrow { justify-self: end; font: 400 clamp(28px, 3vw, 44px)/1 var(--font-sans); transition: transform .5s cubic-bezier(.16,1,.3,1), color .3s ease; }
.ms-thumb { display: none; }
.ms-rows:hover .ms-row .ms-name { color: rgba(255,255,255,.35); }
.ms-rows .ms-row:hover .ms-name { color: var(--white); transform: translateX(18px); }
.ms-row:hover .ms-tag { color: var(--white); }
.ms-row:hover .ms-arrow { color: var(--brand); transform: translateX(-6px) rotate(-45deg); }
.ms-float { position: absolute; z-index: 1; left: 0; top: 0; width: clamp(220px, 22vw, 340px); aspect-ratio: 4 / 5; object-fit: cover; pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(.85) rotate(-3deg); transition: opacity .35s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.ms.is-hover .ms-float { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
@media (max-width: 760px) {
  .ms-row { grid-template-columns: 72px 1fr 28px; grid-template-rows: auto auto; align-items: center; gap: 4px 16px; padding: 18px 0; }
  .ms-thumb { display: block; grid-row: span 2; width: 72px; height: 72px; object-fit: cover; }
  .ms-name { font-size: clamp(30px, 8.6vw, 40px); }
  .ms-tag { grid-column: 2; font-size: 14px; }
  .ms-arrow { grid-column: 3; grid-row: 1 / span 2; font-size: 24px; }
  .ms-float { display: none; }
}

/* ---------------- Good to know, one at a time (14 Oct 2026, option B): a navy tile types each question in ---------------- */
.gk-row { grid-template-columns: 1fr; margin-top: 32px; }
.gk { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; min-height: 440px; padding: clamp(40px, 5vw, 80px); background: var(--ink); color: var(--white); }
.gk-eye { margin: 0 0 18px; font-weight: 500; color: rgba(255,255,255,.6); }
.gk-q { margin: 0 0 20px; min-height: 2.12em; font: 500 clamp(32px, 3.6vw, 56px)/1.06 var(--font-sans); letter-spacing: -0.03em; color: var(--white); }
.gk-q.is-typing::after { content: ''; display: inline-block; width: 3px; height: .8em; margin-left: 6px; vertical-align: -0.04em; background: var(--brand); animation: wd-caret .9s steps(1) infinite; }
.gk-a { margin: 0; max-width: 46ch; font: 400 clamp(16px, 1.3vw, 18px)/1.55 var(--font-sans); color: rgba(255,255,255,.75); transition: opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.gk.is-typing .gk-a { opacity: 0; transform: translateY(10px); }
.gk-tab { position: relative; display: block; width: 100%; padding: 16px 0; border: 0; border-top: 1px solid rgba(255,255,255,.16); background: none; text-align: left; cursor: pointer;
  font: 500 16px/1.3 var(--font-sans); color: rgba(255,255,255,.5); transition: color .2s ease; }
.gk-tab.is-on, .gk-tab:hover { color: var(--white); }
.gk-tab i { position: absolute; left: 0; right: 0; top: -1px; height: 2px; border-radius: 2px; background: var(--white); transform-origin: left; transform: scaleX(0); }
.gk-tab.is-on i { animation: gk-fill var(--gk-ms, 7s) linear forwards; }
.gk.is-paused .gk-tab.is-on i { animation-play-state: paused; }
@keyframes gk-fill { to { transform: scaleX(1); } }
@media (max-width: 760px) {
  .gk { grid-template-columns: 1fr; gap: 28px; min-height: 0; padding: 32px 22px 24px; }
  .gk-q { font-size: clamp(28px, 8vw, 36px); min-height: 3.2em; }
  .gk-tab { font-size: 15px; padding: 14px 0; }
}

/* ---------------- Services mosaic (14 Oct 2026, option A): one big photo, the rest small, a blue booking tile ---------------- */
.sm { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 32px; }
.sm > .card { aspect-ratio: 1 / 1; }
.sm > .sm-big { grid-column: span 2; grid-row: span 2; }
.sm > .sm-help { border-color: var(--brand); }
.sm > .sm-help--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.sm .card-title--sans { font-size: 24px; }
.sm > .sm-big .card-title--sans { font-size: clamp(28px, 2.6vw, 40px); }
@media (max-width: 760px) {
  .sm { grid-template-columns: 1fr 1fr; }
  .sm > .sm-big, .sm > .sm-help--wide { grid-column: span 2; grid-row: auto; }
  .sm > .sm-help--wide { aspect-ratio: 2 / 1; }
  .sm .card-title--sans { font-size: 19px; }
  .sm .card-byline { display: none; }
  .sm > .sm-big .card-title--sans { font-size: 28px; }
  .sm > .sm-big .card-byline { display: block; }
  .sm .card-top, .sm .card-bottom { padding: 16px; }
}

/* ---------------- Marketing page (14 Oct 2026): the Posted for you tile, with three real posts fanned out ---------------- */
.mk2-row { grid-template-columns: 1fr; }
.mk2-posted { aspect-ratio: 21 / 9; border-color: var(--brand); }
.mk2-posted .card-bottom { right: 50%; padding: clamp(28px, 3.4vw, 52px); }
.mk2-title { margin: 8px 0 12px; max-width: 16ch; font: 500 clamp(30px, 3.2vw, 52px)/1.04 var(--font-sans); letter-spacing: -0.03em; color: var(--white); }
.mk2-fan { position: absolute; z-index: 1; right: 6%; top: 50%; width: 46%; height: 82%; transform: translateY(-50%); }
.mk2-fan img { position: absolute; top: 50%; left: 50%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; box-shadow: 0 24px 50px rgba(6,14,32,.35);
  transform: translate(calc(-50% + (var(--i) - 1) * 62%), -50%) rotate(calc((var(--i) - 1) * 6deg)); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.mk2-fan img:nth-child(2) { z-index: 2; }
.mk2-posted:hover .mk2-fan img { transform: translate(calc(-50% + (var(--i) - 1) * 72%), -52%) rotate(calc((var(--i) - 1) * 8deg)); }
@media (max-width: 760px) {
  .mk2-posted { aspect-ratio: auto; min-height: 560px; }
  .mk2-posted .card-bottom { right: 0; padding: 24px; }
  .mk2-fan { left: 0; right: 0; top: 64px; width: auto; height: 230px; transform: none; }
  .mk2-title { font-size: clamp(28px, 8vw, 36px); }
}
/* Marketing opener: the posts are 4:5 with their own words, so show each whole on a stone ground, never cropped or written over */
.mk-open .wd-photo { background: #E9E2D6; }
.mk-open .wd-photo .flick img { inset: 7% auto 7% 50%; width: auto; height: 86%; aspect-ratio: 4 / 5; transform: translateX(-50%); object-fit: cover; box-shadow: 0 24px 60px rgba(11,27,58,.22); }
.mk-open .wd-photo .card-top .dot { background: var(--ink); }
.mk-open .wd-photo .card-top { color: var(--ink); }
.mk2-posted .card-bottom { right: 54%; }
.mk2-title { font-size: clamp(28px, 2.8vw, 46px); }
.mk2-fan { right: 4%; width: 42%; }
@media (max-width: 560px) {
  .mk-open { grid-template-columns: 1fr; }
  .mk-open .wd-photo, .mk-open .wd-line { grid-area: auto; }
  .mk-open .wd-photo { aspect-ratio: 1 / 1; }
  .mk-open .wd-photo .wd-hero-shade { display: none; }
  .mk-open .wd-line { aspect-ratio: auto; min-height: 430px; background: var(--ink); border-color: var(--border); pointer-events: auto; }
  .mk-open .wd-line .card-top { display: flex; }
  .mk-open .wd-sub { display: block; }
  .mk2-posted .card-bottom { right: 0; }
  .mk2-fan { right: 0; width: auto; }
}
/* Web design opener (14 Oct 2026, Oscar: "too much dark blue"): the words square is the homepage's light sky tile on a computer */
@media (min-width: 561px) {
  .wd-line--sky { background: #DCE6FF; border-color: #DCE6FF; }
  .wd-line--sky .card-top, .wd-line--sky .wd-title { color: var(--ink); }
  .wd-line--sky .dot { background: var(--ink); }
  .wd-line--sky .wd-sub { color: var(--navy-muted); }
  .wd-line--sky .wd-btn { background: var(--ink); color: var(--white); }
  .wd-line--sky .wd-btn:hover { background: var(--brand); }
}
/* Web design close (14 Oct 2026): the booking square beside a cream square of plain facts */
.wdc { grid-template-columns: 1fr 1fr; margin-top: 32px; }
.wdc > .card { aspect-ratio: 1 / 1; }
.wdc > .pg-cta { border-color: var(--brand); }
.wdc-info { background: #F3EBDD; border-color: #F3EBDD; }
.wdc-info .card-top { color: var(--ink); }
.wdc-info .dot { background: var(--ink); }
.wdc-lines { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(24px, 3vw, 48px); }
.wdc-lines p { margin: 0; padding: 18px 0; border-top: 1px solid rgba(11,27,58,.14); font: 500 clamp(19px, 1.7vw, 26px)/1.3 var(--font-sans); letter-spacing: -0.015em; color: var(--ink); }
@media (max-width: 760px) {
  .wdc { grid-template-columns: 1fr; }
  .wdc > .pg-cta { aspect-ratio: auto; min-height: 280px; }
  .wdc > .wdc-info { aspect-ratio: auto; min-height: 0; }
  .wdc-lines { position: relative; padding: 64px 22px 12px; }
  .wdc-lines p { font-size: 19px; }
}

/* Site player (15 Oct 2026, Oscar: the side jumped on every switch). The text is centred beside the phone, so any change
   in its height moved the lot. Names now stay on one line and the description keeps room for three, so nothing moves. */
.wd-name { white-space: nowrap; font-size: clamp(30px, 3.4vw, 50px); }
.wd-desc { min-height: 4.5em; }
@media (max-width: 560px) { .wd-name { font-size: clamp(26px, 7.6vw, 34px); } .wd-desc { min-height: 6em; } .wd-eyebrow { line-height: 1.35; min-height: 2.7em; } }

/* Homepage, 15 Oct 2026 (Oscar): the four services big at the top; the client tiles are gone, the Web Design page shows the work now. */
.grid-svc { grid-template-columns: 1fr 1fr; }
.grid-svc .card { aspect-ratio: 1 / 1; }
.svc-card .card-title { font-size: clamp(30px, 3vw, 48px); }
.svc-card .flick img { object-position: center 30%; }
.grid-mixed { grid-template-areas: "m4 m4 m1 m2" "m4 m4 m6 m7" "m5 m5 sc sc" "m5 m5 sc sc" !important; }
@media (max-width: 980px) {
  .grid-mixed { grid-template-areas: "m4 m4" "m1 m2" "m6 m7" "m5 m5" "sc sc" !important; }
}
@media (max-width: 560px) {
  .tiles .svc-card, .tiles [data-m="loyalty"] { grid-column: 1 / -1 !important; aspect-ratio: 1 / 1 !important; }
  #services .svc-card .card-byline { display: block !important; }
  #services .svc-card .card-title { font-size: 30px !important; }
  #services .svc-card .card-top, #services .svc-card .card-bottom { padding: 20px !important; }
  #services .svc-card .eyebrow { font-size: 12px !important; }
  #services .svc-card .card-cta { font-size: 12px !important; }
  .tiles [data-m="svc-web"] { order: 1; }
  .tiles [data-m="svc-marketing"] { order: 2; }
  .tiles [data-m="svc-ai"] { order: 3; }
  .tiles [data-m="svc-digital"] { order: 4; }
  .tiles [data-m="consult"] { order: 5; }
  .tiles [data-m="sam"] { order: 6; }
  .tiles [data-m="oscar"] { order: 7; }
  .tiles [data-m="social"] { order: 8; }
  .tiles [data-m="seo"] { order: 9; }
  .tiles [data-m="app"] { order: 10; }
  .tiles [data-m="fact"] { order: 11; }
  .tiles [data-m="budget"] { order: 12; }
  .tiles [data-m="loyalty"] { order: 13; }
  #work [data-m="loyalty"] .card-byline { display: block !important; }
  #work [data-m="loyalty"] .card-title { font-size: 24px !important; }
  #work [data-m="loyalty"] .card-top, #work [data-m="loyalty"] .card-bottom { padding: 20px !important; }
  .tiles [data-m="website"] { order: 14; }
  .tiles [data-m="inbox"] { order: 15; }
}

/* The desk monitor (15 Oct 2026): the photo straightened and cut square in src/desk/composite.py, which also prints
   where the screen sits. Only the screen changes: the next site wipes down over the last, like a page loading. */
.desk-stage { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.card:hover .desk-stage { transform: scale(1.06); }
.desk-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flick.desk-screen { inset: auto; left: 14.889%; top: 18.737%; width: 70.847%; height: 40.446%; overflow: hidden; background: #0b0b0b; }
.desk-screen::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), inset 0 0 8px rgba(0,0,0,.3); }
.flick.desk-screen img { object-position: top center; opacity: 1; z-index: 1; clip-path: inset(0 0 100% 0); transition: clip-path 0s linear 1.1s; }
.flick.desk-screen img.is-on { z-index: 2; clip-path: inset(0 0 0 0); transition: clip-path 1s cubic-bezier(.65,0,.35,1); }


/* Every page change fades into the next instead of blanking and reloading (16 Oct 2026, Oscar: "feels like a new tab").
   Chrome and Safari 18.2+; other browsers just change page as before. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease; }
}

/* Clear top bar (19 Oct 2026, Oscar: "lucid", you can't see the bar): no strip and no pill, just the name on the left
   and the menu button on the right, staying put as you scroll. Over dark parts of the page (photos, navy) the name
   turns white with the ampersand still blue, and the menu lines turn white; script.js checks what's behind it. */
.site-header { background: transparent; }
.site-header .nav-here { display: none; }
.logo { position: relative; }
.logo-img { transition: opacity .25s ease; }
.logo-img--light { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
.site-header .menu-icon .bar { transition: top .3s ease, transform .3s ease, background-color .25s ease; }
body.hdr-dark-l .logo-img:not(.logo-img--light) { opacity: 0; }
body.hdr-dark-l .logo-img--light { opacity: 1; }
body.hdr-dark-r .site-header .menu-icon .bar { background: #fff; }
.page-refer .site-header { background: var(--brand-dark); }
/* Phones (19 Oct 2026, Oscar: "doesn't look right on the phone"): with no bar at all, page text slid straight under
   the name and the two read as one jumble. So on a phone the bar is solid cream, the same colour as the page, with
   the name and button navy and the blue ampersand (Oscar tried see-through and preferred it solid). */
@media (max-width: 560px) {
  .site-header { background: var(--cream); }
  body.hdr-dark-l .logo-img:not(.logo-img--light) { opacity: 1; }
  body.hdr-dark-l .logo-img--light { opacity: 0; }
  body.hdr-dark-r .site-header .menu-icon .bar { background: var(--black); }
  .page-refer .site-header { background: var(--brand-dark); }
}

/* Dusk sky with a live starling murmuration (flock.js): home AI Automation tile and the AI page lock screen */
.km-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #4d4585 0%, #7d6aa8 26%, #b38bb4 52%, #dca7b2 74%, #f4c6a9 100%); }
.km-sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.km-hills { position: absolute; left: -2%; right: -2%; bottom: 0; height: 16%; background: no-repeat bottom / 100% 100%
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath fill='%231e1529' d='M0 70 Q8 52 16 66 Q22 40 34 58 Q40 46 48 60 Q58 30 70 56 Q78 44 86 62 Q96 50 104 64 Q118 36 132 60 Q140 48 150 66 Q160 56 168 68 Q180 42 194 64 Q204 52 214 66 Q228 34 244 60 Q252 50 262 64 Q274 46 286 66 Q296 54 306 68 Q320 40 334 62 Q342 52 352 66 Q364 44 378 62 Q388 54 400 66 V120 H0Z'/%3E%3C/svg%3E"); }