/* =====================================================================
   pages.css — styles for Plesner Studio CONTENT SUBPAGES
   Loaded AFTER plesner-studio.css. Reuses the same design tokens
   (--black, --white, --muted, --soft, --hair, --pad, --fh, --fb, --ease).
   Subpages are lightweight: no canvas / GSAP / Lenis. Just fast, readable content.
   ===================================================================== */

/* ---- page scaffold ---- */
.page-body { overflow-x: hidden; }
.page-main { padding-top: clamp(5.5rem, 10vh, 8rem); }   /* clears the fixed sub-header */
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--pad); }
.wrap-narrow { max-width: 760px; }

/* ---- simple static sub-page header (replaces the homepage's animated one) ---- */
.subhead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(0.85rem, 1.5vw, 1.2rem) var(--pad);
  background: color-mix(in srgb, var(--white) 86%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--hair);
}
.subhead-logo { font-family: var(--fh); font-weight: 800; font-size: clamp(1.05rem, 1.5vw, 1.25rem); letter-spacing: -0.045em; line-height: 1; }
.subhead-logo sup { font-size: 0.4em; font-weight: 700; vertical-align: super; margin-left: 0.12em; }
.subhead-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.subhead-nav a { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; position: relative; padding-bottom: 2px; }
.subhead-nav a:not(.subhead-cta)::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--black); transition: width .4s var(--ease); }
.subhead-nav a:not(.subhead-cta):hover::after { width: 100%; }
.subhead-cta {
  padding: 0.55em 1.1em; border-radius: 100px;
  background: var(--black); color: var(--white) !important;
  border: 1.5px solid var(--black); font-weight: 700;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.subhead-cta:hover { background: transparent; color: var(--black) !important; }

/* ---- breadcrumb ---- */
.crumbs { font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.crumbs a { border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); }
.crumbs a:hover { border-bottom-color: currentColor; }
.crumbs span { margin: 0 0.5em; opacity: 0.5; }

/* ---- page hero ---- */
.page-hero { padding: clamp(1rem, 3vh, 2rem) 0 clamp(3rem, 8vh, 6rem); }

/* Split hero: text left, interactive motif right on desktop; stacked on mobile.
   The motif column owns real space instead of hiding under the lead. */
.hero-split { display: grid; gap: clamp(2.25rem, 5vw, 4rem); align-items: center; }
.hero-split .wd-motif, .hero-split .br-motif, .hero-split .seo-motif, .hero-split .pr-motif, .hero-split .fx-motif { margin-top: 0; }
@media (min-width: 900px) {
  .hero-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .hero-split .hs-motif { justify-self: center; }
  .hero-split .wd-motif, .hero-split .seo-motif, .hero-split .pr-motif, .hero-split .fx-motif { max-width: 380px; width: 100%; }
  .hero-split .br-motif { max-width: 280px; width: 100%; }
}
.page-eyebrow { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 1.25rem; }
.page-title { font-family: var(--fh); font-weight: 800; font-size: clamp(2.4rem, 6.5vw, 5rem); line-height: 0.95; letter-spacing: -0.04em; text-transform: uppercase; margin: 0; }
.page-lead { margin-top: clamp(1.5rem, 4vh, 2.25rem); max-width: 60ch; font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.5; color: var(--soft); }

/* ---- generic prose ---- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 { font-family: var(--fh); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.05; margin-top: clamp(2.5rem, 6vh, 4rem); }
.prose h3 { font-family: var(--fh); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -0.02em; margin-top: clamp(1.75rem, 4vh, 2.5rem); }
.prose p, .prose li { font-size: 1.05rem; line-height: 1.65; color: var(--soft); }
.prose strong { color: var(--black); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: 0.5rem; }
.prose a { color: var(--black); font-weight: 500; border-bottom: 1px solid var(--hair); transition: border-color .3s var(--ease); }
.prose a:hover { border-bottom-color: var(--black); }

/* ---- section divider ---- */
.page-section { padding-block: clamp(3.5rem, 9vh, 7rem); }
.page-section + .page-section { border-top: 1px solid var(--hair); }

/* ---- Work listing: featured case row ---- */
.work-listing {
  display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center; color: var(--black);
  border: 1px solid var(--hair); border-radius: 22px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.work-listing:hover { border-color: rgba(127,127,127,0.32); transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,0,0,0.1); }
.wl-media { border-radius: 14px; overflow: hidden; background: #0a1428; aspect-ratio: 4 / 5; }
.wl-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.wl-index { display: block; font-family: var(--fh); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.05em; color: var(--muted); margin-bottom: clamp(0.75rem,2vh,1rem); }
.wl-title { font-family: var(--fh); font-weight: 800; text-transform: uppercase; font-size: clamp(1.8rem,3.6vw,3rem); line-height: 0.98; letter-spacing: -0.03em; margin-bottom: clamp(1rem,2.5vh,1.5rem); }
.wl-desc { font-size: clamp(1rem,1.5vw,1.2rem); line-height: 1.55; color: var(--soft); max-width: 46ch; margin-bottom: clamp(1.25rem,3vh,1.75rem); }
.wl-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: clamp(1.5rem,3.5vh,2rem); }
.wl-tags span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); border: 1px solid var(--hair); border-radius: 100px; padding: 0.4em 0.9em; }
.wl-link { font-family: var(--fh); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(0.95rem,1.3vw,1.1rem); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.work-listing:hover .wl-link { color: var(--accent); }
@media (max-width: 760px) {
  .work-listing { grid-template-columns: 1fr; gap: 1.75rem; }
  .wl-media { aspect-ratio: 16 / 11; }
}
.sec-label { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--black); padding-top: 1.25rem; margin-bottom: clamp(2.5rem, 6vh, 4rem); gap: 1rem; flex-wrap: wrap; }
.sec-label h2 { font-family: var(--fh); font-weight: 800; font-size: clamp(1.5rem, 3.2vw, 2.6rem); letter-spacing: -0.03em; text-transform: uppercase; line-height: 1; }
.sec-label span { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* ---- feature / step grid (service pages) ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.feature { border: 2px solid var(--black); padding: clamp(1.5rem, 2.5vw, 2.25rem); display: flex; flex-direction: column; gap: 0.85rem; }
.feature .f-num { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; color: var(--muted); }
.feature h3 { font-family: var(--fh); font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.45rem); letter-spacing: -0.02em; }
.feature p { font-size: 0.98rem; line-height: 1.6; color: var(--soft); }

/* ---- numbered process list ---- */
.steps { display: flex; flex-direction: column; gap: 0; }
.step { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); padding: clamp(1.5rem, 3.5vh, 2.5rem) 0; border-top: 1px solid var(--hair); }
.step:last-child { border-bottom: 1px solid var(--hair); }
.step-n { font-family: var(--fh); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -0.03em; color: var(--muted); line-height: 1; }
.step-body h3 { font-family: var(--fh); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -0.02em; margin-bottom: 0.6rem; }
.step-body p { font-size: 1rem; line-height: 1.6; color: var(--soft); max-width: 60ch; }

/* ---- pricing / inclusion list ---- */
.checklist { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 2rem; }
.checklist li { position: relative; padding-left: 1.6rem; font-size: 1rem; line-height: 1.5; color: var(--soft); }
.checklist li::before { content: "→"; position: absolute; left: 0; color: var(--black); font-weight: 700; }

/* ---- case study specifics ---- */
.cs-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); border-top: 2px solid var(--black); border-bottom: 1px solid var(--hair); padding: clamp(1.5rem, 3.5vh, 2.25rem) 0; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.cs-meta dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.cs-meta dd { font-size: 1rem; font-weight: 500; line-height: 1.4; }
.cs-hero-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 2px solid var(--black); margin-bottom: clamp(2.5rem, 6vh, 4rem); background: var(--hair); }

/* About — text left, portrait right (clean two-column, no dark band) */
.about-split {
  display: grid;
  grid-template-columns: 1fr clamp(220px, 27%, 320px);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.about-text { min-width: 0; }
.about-portrait {
  margin: 0;
  position: sticky;
  top: clamp(5rem, 12vh, 8rem);
  animation: portraitReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
.about-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.about-portrait figcaption {
  margin-top: clamp(0.9rem, 2vh, 1.25rem);
  font-family: var(--fb);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
@keyframes portraitReveal {
  from { opacity: 0; transform: translateY(28px) scale(0.96); clip-path: inset(8% 8% 8% 8% round 6px); }
  to   { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0% 0% 0% 0% round 6px); }
}
@media (max-width: 820px) {
  .about-split { grid-template-columns: 1fr; gap: clamp(2rem, 5vh, 3rem); }
  .about-portrait { position: static; order: -1; max-width: 340px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .about-portrait { animation: none; }
}
.cs-img { width: 100%; border: 2px solid var(--black); margin-block: clamp(1.5rem, 4vh, 2.5rem); background: var(--hair); display: block; }
.cs-result { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
.cs-result .r-num { font-family: var(--fh); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.04em; line-height: 1; }
.cs-result .r-label { font-size: 0.85rem; color: var(--muted); margin-top: 0.6rem; line-height: 1.4; }
.pullquote { font-family: var(--fh); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.25; letter-spacing: -0.02em; border-left: 3px solid var(--black); padding-left: clamp(1.25rem, 3vw, 2rem); margin-block: clamp(2.5rem, 6vh, 4rem); max-width: 24ch; }
.pullquote cite { display: block; font-family: var(--fb); font-weight: 600; font-size: 0.9rem; font-style: normal; color: var(--muted); margin-top: 1rem; letter-spacing: 0.02em; }

/* ---- highlighted callout band (e.g. AI-search selling point) ---- */
.callout-band { border: 2px solid var(--accent); border-radius: 4px; padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1.5rem, 4vw, 2.75rem); margin-bottom: clamp(2.5rem, 6vh, 4rem); background: rgba(26,79,224,0.06); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.callout-band p { font-family: var(--fh); font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.5rem); line-height: 1.35; letter-spacing: -0.015em; max-width: 60ch; }
.callout-band strong { color: var(--accent); }

/* ---- AI model name grid (editorial figure) ---- */
.ai-models { margin: clamp(2rem, 5vh, 3.25rem) 0; }
.ai-models-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.75rem, 2vw, 1.1rem); }
@media (min-width: 620px) { .ai-models-grid { grid-template-columns: repeat(4, 1fr); } }
.ai-model {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
  text-align: center; padding: clamp(1.1rem, 3vw, 1.6rem) 0.75rem;
  border: 1px solid var(--hair); border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.ai-model:hover { border-color: var(--accent); transform: translateY(-3px); }
.ai-model .m-name { font-family: var(--fh); font-weight: 800; font-size: clamp(1rem, 2.4vw, 1.25rem); letter-spacing: -0.02em; line-height: 1; color: var(--black); }
.ai-model .m-maker { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ai-models figcaption { margin-top: 1rem; font-size: 0.85rem; color: var(--muted); text-align: center; line-height: 1.5; }

/* ---- journal / blog list ---- */
.post-list { display: flex; flex-direction: column; gap: 0; }
.post-row { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: baseline; padding: clamp(1.5rem, 3.5vh, 2.25rem) 0; border-top: 1px solid var(--hair); transition: padding-left .4s var(--ease); }
.post-row:last-child { border-bottom: 1px solid var(--hair); }
.post-row:hover { padding-left: 0.75rem; }
.post-row h2, .post-row h3 { font-family: var(--fh); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 2rem); letter-spacing: -0.03em; line-height: 1.05; }
.post-row p { font-size: 0.98rem; color: var(--soft); margin-top: 0.6rem; max-width: 60ch; line-height: 1.55; }
.post-date { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.post-meta { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(2rem, 5vh, 3rem); }

/* ---- related cards (cross-linking for SEO + navigation) ---- */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
.rel-card { border: 2px solid var(--black); padding: clamp(1.5rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: 0.6rem; transition: transform .4s var(--ease); }
.rel-card:hover { transform: translateY(-4px); }
.rel-card .rc-k { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.rel-card h2, .rel-card h3 { font-family: var(--fh); font-weight: 700; font-size: clamp(1.1rem, 1.8vw, 1.4rem); letter-spacing: -0.02em; }
.rel-card p { font-size: 0.92rem; color: var(--soft); line-height: 1.5; }
.rel-card .rc-go { margin-top: auto; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; }

/* ---- big CTA band ---- */
/* CTA band — always dark (matches the homepage's dark sections), so it stays
   consistent and seamless when the site is toggled to dark mode rather than
   flipping to a jarring white block. */
.cta-band { background: #060606; color: #fff; }
.cta-band .wrap { padding-block: clamp(4rem, 10vh, 8rem); }
.cta-band h2 { font-family: var(--fh); font-weight: 800; font-size: clamp(2rem, 6vw, 4.5rem); line-height: 0.95; letter-spacing: -0.04em; text-transform: uppercase; color: #fff; max-width: 16ch; }
.cta-band p { margin-top: 1.5rem; font-size: clamp(1rem, 1.4vw, 1.2rem); color: rgba(255,255,255,0.75); max-width: 48ch; }
.cta-band .btn-row { margin-top: clamp(2rem, 5vh, 3rem); display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-solid { display: inline-flex; align-items: center; padding: 1em 2em; border-radius: 100px; background: #fff; color: #0a0a0a; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: 2px solid #fff; transition: background-color .3s var(--ease), color .3s var(--ease); }
.btn-solid:hover { background: transparent; color: #fff; }
.btn-ghost { display: inline-flex; align-items: center; padding: 1em 2em; border-radius: 100px; background: transparent; color: #fff; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: 2px solid rgba(255,255,255,0.4); transition: border-color .3s var(--ease); }
.btn-ghost:hover { border-color: #fff; }
.cta-band .cta-audit { margin-top: 1.75rem; font-size: 0.9rem; color: rgba(255,255,255,0.55); max-width: 52ch; }
.cta-band .cta-audit a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.4); transition: text-decoration-color .3s var(--ease); }
.cta-band .cta-audit a:hover { text-decoration-color: #fff; }

/* ---- simple page footer ---- */
.page-footer { border-top: 1px solid var(--hair); }
.page-footer .wrap { padding-block: clamp(3rem, 7vh, 5rem); }
.pf-top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.pf-brand { font-family: var(--fh); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -0.04em; }
.pf-brand sup { font-size: 0.4em; vertical-align: super; }
.pf-tag { color: var(--muted); font-size: 0.95rem; max-width: 32ch; margin-top: 0.75rem; line-height: 1.5; }
.pf-cols { display: flex; gap: clamp(2.5rem, 6vw, 5rem); flex-wrap: wrap; }
.pf-col .pf-h { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.pf-col a { display: block; font-size: 0.95rem; padding: 0.3rem 0; color: var(--soft); transition: color .3s var(--ease); }
.pf-col a:hover { color: var(--black); }
.pf-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--hair); padding-top: 1.75rem; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

/* ---- dropdown menu ---- */
.has-dropdown { position: relative; }
.dd-toggle {
  font-family: var(--fb); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--black);
  background: none; border: none; cursor: pointer; padding: 0 0 2px;
  display: inline-flex; align-items: center; gap: 0.4em;
  position: relative;
}
.dd-toggle::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--black); transition: width .4s var(--ease); }
.has-dropdown:hover .dd-toggle::after,
.has-dropdown.open .dd-toggle::after { width: 100%; }
.dd-caret { font-size: 0.7em; transition: transform .3s var(--ease); }
.has-dropdown.open .dd-caret { transform: rotate(180deg); }

.dd-menu {
  position: absolute; top: calc(100% + 0.85rem); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 190px; display: flex; flex-direction: column;
  background: var(--white); border: 2px solid var(--black);
  padding: 0.4rem; z-index: 60;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.has-dropdown.open .dd-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* little bridge so the cursor can travel from toggle to menu without closing */
.dd-menu::before { content: ""; position: absolute; top: -0.85rem; left: 0; right: 0; height: 0.85rem; }
.dd-menu a {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 0.7rem 0.9rem; white-space: nowrap; color: var(--black);
  transition: background-color .2s var(--ease);
}
.dd-menu a:hover, .dd-menu a:focus-visible { background: var(--black); color: var(--white); outline: none; }

/* ---- mobile burger (hidden on desktop) ---- */
.subhead-burger { display: none; background: none; border: none; cursor: pointer; width: 30px; height: 22px; position: relative; padding: 0; }
.subhead-burger span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--black); transition: transform .35s var(--ease), opacity .25s var(--ease), top .35s var(--ease); }
.subhead-burger span:nth-child(1) { top: 0; }
.subhead-burger span:nth-child(2) { top: 10px; }
.subhead-burger span:nth-child(3) { top: 20px; }
.subhead-burger.active span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.subhead-burger.active span:nth-child(2) { opacity: 0; }
.subhead-burger.active span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

/* ---- mobile slide-down menu ---- */
.sub-mobile {
  position: fixed; top: 0; left: 0; right: 0; z-index: 45;
  display: flex; flex-direction: column; gap: 0.15rem;
  background: var(--white); border-bottom: 2px solid var(--black);
  padding: calc(clamp(3.5rem, 8vh, 5rem) + 1rem) var(--pad) clamp(1.5rem, 4vh, 2.5rem);
  transform: translateY(-100%); transition: transform .4s var(--ease);
}
.sub-mobile.open { transform: translateY(0); }
.sm-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 1rem; }
.sm-label:first-child { margin-top: 0; }
.sub-mobile a { font-family: var(--fh); font-weight: 700; font-size: clamp(1.3rem, 5vw, 1.8rem); letter-spacing: -0.02em; padding: 0.35rem 0; }
.sm-cta { margin-top: 1.25rem; align-self: flex-start; font-family: var(--fb) !important; font-size: 0.85rem !important; font-weight: 600 !important; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.8em 1.6em; border-radius: 100px; background: var(--black); color: var(--white); }

/* ---- responsive ---- */
@media (max-width: 880px) {
  .grid-3, .related, .cs-result { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .cs-meta { grid-template-columns: 1fr 1fr; }
  .checklist { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .subhead-nav { display: none; }
  .subhead-burger { display: block; }
}
@media (max-width: 560px) {
  .cs-meta { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 0.5rem; }
  .post-row { grid-template-columns: 1fr; }
  .post-date { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .post-row, .rel-card, .subhead-cta, .btn-solid, .btn-ghost,
  .dd-menu, .dd-caret, .subhead-burger span, .sub-mobile { transition: none !important; }
}

/* ============================================================
   Scroll-reveal + SEO hero motif (added for sub-page animation)
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease, cubic-bezier(0.16,1,0.3,1)),
              transform 0.7s var(--ease, cubic-bezier(0.16,1,0.3,1));
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* f-num accent underline wipes in as the feature reveals */
.feature { position: relative; }
.feature .f-num { position: relative; display: inline-block; }
.feature .f-num::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: var(--accent, #1A4FE0);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease, cubic-bezier(0.16,1,0.3,1)) 0.25s;
}
.feature.is-in .f-num::after { transform: scaleX(1); }

/* ============================================================
   Interactive hero motifs — one per service page.
   All colours via vars → light/dark automatic. No dependencies.
   ============================================================ */

/* shared hint label */
.motif-hint {
  display: inline-block; margin-top: 0.9rem;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); user-select: none;
}

/* --- SEO: rank-climber ------------------------------------- */
.seo-motif { margin-top: clamp(2rem, 5vh, 3.5rem); max-width: 320px; }
.seo-serp { position: relative; height: 190px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.serp-row {
  position: absolute; left: 0; right: 0; height: 28px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--hair);
  transition: transform 0.55s var(--ease);
  will-change: transform;
}
.serp-bar { height: 8px; border-radius: 2px; background: var(--black); opacity: 0.1; }
.serp-bar.b1 { width: 34%; } .serp-bar.b2 { width: 44%; }
.serp-you .serp-bar { background: var(--accent); opacity: 1; }
.serp-you .serp-tag {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--accent); text-transform: uppercase; margin-left: auto;
}
.serp-you .serp-crown {
  font-size: 0.66rem; font-weight: 800; color: var(--accent);
  opacity: 0; transform: scale(0.6); transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.seo-serp.is-top .serp-crown { opacity: 1; transform: scale(1); }
.seo-serp.is-top .serp-you .serp-bar { animation: serpPulse 0.6s var(--ease) 1; }
@keyframes serpPulse { 50% { transform: scaleX(1.06); } }

/* --- Web design: wireframe → design scrub ------------------- */
/* ---- AI-search motif: an AI answer that recommends *you* ---- */
.ai-motif { margin-top: clamp(2rem, 5vh, 3.5rem); max-width: 320px; }
.ai-chat { position: relative; border: 1.5px solid var(--accent); border-radius: 10px; padding: 16px 16px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ai-q { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.ai-q .ai-bar { height: 8px; border-radius: 2px; background: var(--black); opacity: 0.35; }
.ai-q .ai-bar.q1 { width: 30%; } .ai-q .ai-bar.q2 { width: 22%; }
.ai-q .ai-mark { margin-left: auto; font-family: var(--fh); font-weight: 800; font-size: 0.9rem; color: var(--black); opacity: 0.45; }
.ai-a { padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.ai-line { display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(6px); }
.ai-chat.play .ai-line { animation: aiLine 0.5s var(--ease) forwards; }
.ai-chat.play .l1 { animation-delay: 0.25s; } .ai-chat.play .l2 { animation-delay: 0.75s; }
.ai-chat.play .l3 { animation-delay: 1.25s; } .ai-chat.play .l4 { animation-delay: 1.85s; }
@keyframes aiLine { to { opacity: 1; transform: translateY(0); } }
.ai-line .ai-bar { height: 8px; border-radius: 2px; background: var(--black); opacity: 0.14; }
.ai-line .a1 { width: 78%; } .ai-line .a2 { width: 64%; } .ai-line .a3 { width: 40%; }
.ai-you { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); background: var(--accent); border-radius: 100px; padding: 4px 10px; white-space: nowrap; }
.ai-cursor { width: 8px; height: 14px; background: var(--accent); animation: aiBlink 0.9s steps(1) infinite; }
@keyframes aiBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ai-chat .ai-line, .ai-chat.play .ai-line { animation: none; opacity: 1; transform: none; }
  .ai-cursor { animation: none; }
}

.wd-motif { margin-top: clamp(2rem, 5vh, 3.5rem); max-width: 300px; }
.wd-motif svg { width: 100%; height: auto; display: block; }
.wd-stage { position: relative; cursor: ew-resize; touch-action: none; -webkit-tap-highlight-color: transparent; }
.wd-wire rect { fill: none; stroke: var(--black); stroke-opacity: 0.3; stroke-width: 1.25; stroke-dasharray: 4 3; }
.wd-wire .wd-outer { stroke-dasharray: none; stroke-opacity: 0.25; }
.wd-design .wd-outer { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.wd-design .d-accent { fill: var(--accent); }
.wd-design .d-ink { fill: var(--black); opacity: 0.16; }
.wd-design .d-solid { fill: var(--black); }
.wd-div { stroke: var(--accent); stroke-width: 1.5; }
.wd-handle { fill: var(--accent); }

/* --- Branding: mark iterator -------------------------------- */
.br-motif { margin-top: clamp(2rem, 5vh, 3.5rem); max-width: 220px; }
.br-shuffle {
  display: block; width: 100%; background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.br-shuffle svg { width: 100%; height: auto; display: block; }
.br-shuffle:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 8px; }
.brv { transform-origin: 70px 70px; transition: opacity 0.3s var(--ease), transform 0.55s var(--ease); }
.brv:not(.on) { opacity: 0; transform: scale(0.82) rotate(-8deg); pointer-events: none; }
.brv.on { opacity: 1; transform: scale(1) rotate(0deg); }
.brv .bi { fill: var(--black); } .brv .ba { fill: var(--accent); }
.brv .ri { fill: none; stroke: var(--black); stroke-width: 2.5; }
.brv .ra { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.br-count {
  display: block; margin-top: 0.65rem;
  font-family: var(--fh); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.1em; color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .feature .f-num::after { transform: scaleX(1) !important; transition: none !important; }
  .serp-row, .brv, .serp-you .serp-crown { transition: none !important; }
  .seo-serp.is-top .serp-you .serp-bar { animation: none !important; }
}


/* ============================================================
   PRICING & WEBSITE-FIX  (added with the pricing pages)
   Uses the existing custom properties, so it inverts with the
   dark theme automatically — no separate dark rules needed.
   ============================================================ */

.tiers { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }

.tier {
  border: 2px solid var(--black);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 1rem;
}
.tier .t-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.5rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--hair); padding-bottom: 1rem;
}
.tier .t-num {
  display: block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; color: var(--muted); margin-bottom: 0.4rem;
}
.tier h3 {
  font-family: var(--fh); font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.15;
}
.tier .t-sub {
  display: block; margin-top: 0.35rem;
  font-size: 0.9rem; color: var(--muted);
}
.tier .t-price {
  font-family: var(--fh); font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.03em;
  white-space: nowrap; margin-left: auto;
}
.tier .t-price .t-per {
  font-family: var(--fb); font-weight: 500;
  font-size: 0.85rem; letter-spacing: 0; color: var(--muted);
}
.tier .t-body { color: var(--soft); font-size: 0.98rem; line-height: 1.6; }
.tier .t-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem;
}
.tier .t-list li {
  font-size: 0.9rem; color: var(--soft);
  padding-left: 1.1rem; position: relative;
}
.tier .t-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.tier .t-go {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--accent); justify-self: start;
  border-bottom: 1px solid transparent; transition: border-color .25s var(--ease);
}
.tier .t-go:hover { border-bottom-color: var(--accent); }

/* pay-monthly table */
.pm-table {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 2px solid var(--black);
}
.pm-row {
  display: grid; grid-template-columns: 2fr 1fr 1.3fr 1fr;
  gap: 1rem; padding: 0.9rem 0;
  border-bottom: 1px solid var(--hair);
  font-size: 0.95rem;
}
.pm-row.pm-head {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.pm-row span:last-child { font-weight: 600; }
.pm-note { font-size: 0.95rem; color: var(--soft); }
.ai-note { font-size: 0.95rem; color: var(--soft); margin-top: 1.5rem; }
.ai-note a, .pm-note a { border-bottom: 1px solid var(--accent); color: var(--accent); }

/* pricing hero motif */
.pr-motif { display: grid; gap: 0.9rem; width: 100%; }
.pr-stack { display: grid; gap: 0.6rem; }
.pr-bar {
  display: flex; align-items: center; justify-content: flex-end;
  height: 2.4rem; width: var(--w);
  border: 2px solid var(--black); border-radius: 3px;
  padding-right: 0.7rem;
  transition: width 1.1s var(--ease);
}
.pr-bar em {
  font-family: var(--fh); font-weight: 700; font-style: normal;
  font-size: 0.82rem; letter-spacing: -0.01em;
}
.pr-bar-hi { background: var(--accent); border-color: var(--accent); color: #fff; }

/* website-fix hero motif */
.fx-motif { display: grid; gap: 0.9rem; width: 100%; }
.fx-gauge {
  display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem);
  border: 2px solid var(--black); border-radius: 3px;
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
}
.fx-gauge > span { display: grid; gap: 0.25rem; }
.fx-gauge em {
  font-style: normal; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.fx-gauge b {
  font-family: var(--fh); font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.4rem); letter-spacing: -0.03em; line-height: 1;
}
.fx-old b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.fx-new b { color: var(--accent); }
.fx-arrow { font-size: 1.4rem; color: var(--muted); margin-top: 0.7rem; }

.fx-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.fx-list li {
  font-size: 0.92rem; color: var(--soft); line-height: 1.5;
  padding-left: 1.1rem; position: relative;
}
.fx-list li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* inline price anchor on service pages */
.price-anchor {
  display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
  border-left: 3px solid var(--accent);
  padding: 0.25rem 0 0.25rem 1.1rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.price-anchor .pa-price {
  font-family: var(--fh); font-weight: 800;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem); letter-spacing: -0.03em;
}
.price-anchor .pa-note { font-size: 0.92rem; color: var(--muted); }
.price-anchor a { color: var(--accent); border-bottom: 1px solid var(--accent); font-weight: 600; }

@media (max-width: 800px) {
  .tier .t-list { grid-template-columns: 1fr; }
  .tier .t-price { margin-left: 0; }
  .pm-row { grid-template-columns: 1fr; gap: 0.25rem; padding: 1rem 0; }
  .pm-row.pm-head { display: none; }
  .pm-row span::before {
    content: attr(data-l) " — ";
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pr-bar { transition: none !important; }
}


/* ---- Safari perf: lighten the always-visible sub-page header blur (see plesner-studio.css note) ---- */
html.is-safari .subhead { -webkit-backdrop-filter: saturate(120%) blur(7px); backdrop-filter: saturate(120%) blur(7px); }