/* =============================================================================
   Brandname — studio site
   Design system per spec: warm paper base, near-black ink, electric-cobalt
   accent, signal-orange used sparingly, dark sections for weight.
   ===========================================================================*/

/* ---- Tokens -------------------------------------------------------------- */
:root {
  /* Building Blocks logo system — combo A */
  --paper:       #F4EEE1;
  --paper-2:     #EAE2D0;
  --ink:         #16181F;
  --ink-soft:    #5A554A;
  --line:        #D8CFBC;
  --accent:      #2348E6;   /* cobalt          */
  --accent-warm: #FF6A2B;   /* spark orange    */

  /* text on dark (--ink) sections */
  --on-ink:      #F4EEE1;
  --on-ink-soft: #B9B3A6;

  --radius: 14px;
  --radius-sm: 10px;

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --maxw: 1140px;
  --pad: 24px;

  --shadow-card: 0 18px 40px -20px rgba(22, 20, 15, 0.30);
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
[hidden] { display: none !important; }

html {
  /* Match a browser zoom of 110%, which is the size the site is read at. */
  zoom: 1.1;
  scroll-behavior: smooth;
  scroll-padding-top: 68px;
  /* hard-stop at the page top/bottom — no elastic bounce past the header */
  overscroll-behavior-y: none;
}
/* Snapping is handled in JS (main.js) so it only engages on slow, deliberate
   scrolling — CSS scroll-snap can't tell fast flicks from slow scrolls. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  overscroll-behavior-y: none;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- Utilities ----------------------------------------------------------- */
.wrap { max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 0 var(--pad); }
.display { font-family: var(--font-display); line-height: 1.02; letter-spacing: -0.02em; }
.mono {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.accent { color: var(--accent); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 22px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.94rem;
  line-height: 1;
  border: 1.5px solid var(--ink);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); background: var(--accent); border-color: var(--accent); }
.btn:active { transform: translateY(0); }

.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn-block { width: 100%; padding: 15px; font-size: 1rem; }

/* =============================================================================
   ANNOUNCEMENT FLAG
   ===========================================================================*/
.announce {
  background: var(--accent);
  color: #fff;
  font-size: 0.92rem;
  position: relative;
  z-index: 60;
}
.announce .wrap { display: flex; align-items: center; gap: 14px; padding: 11px 24px; min-height: 44px; }
.announce-msg { display: inline-flex; align-items: center; gap: 10px; margin: 0; line-height: 1.4; }
.announce-msg strong { font-weight: 700; }
.announce-msg a { color: #fff; text-decoration: underline; }
.announce-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-warm); flex: 0 0 auto; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); animation: announcePulse 5.6s ease-in-out infinite; }
@keyframes announcePulse { 70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.announce-link {
  margin-left: auto;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--accent);
  background: #fff;
  padding: 7px 14px;
  border-radius: 100px;
  white-space: nowrap;
  transition: transform 0.15s ease;
}
.announce-link:hover { transform: translateY(-1px); }
.announce-link:empty { display: none; }
.announce-close { margin-left: 6px; background: transparent; border: none; color: rgba(255, 255, 255, 0.85); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 4px; flex: 0 0 auto; }
.announce-close:hover { color: #fff; }
.announce-link:empty + .announce-close { margin-left: auto; }
@media (max-width: 620px) {
  .announce { font-size: 0.84rem; }
  /* Let the bar reflow so the CTA pill and the dismiss × never overflow off
     the right edge: message + close stay on row 1, the pill wraps below. */
  .announce .wrap { flex-wrap: wrap; gap: 6px 12px; padding: 10px 16px; }
  .announce-msg { flex: 1 1 auto; }
  .announce-close { order: 2; margin-left: 0; font-size: 1.5rem; padding: 2px 8px; align-self: flex-start; }
  .announce-link { order: 3; flex: 0 0 auto; margin-left: 0; padding: 6px 12px; font-size: 0.8rem; }
  .announce-link:empty + .announce-close { margin-left: auto; }
}

/* =============================================================================
   NAV
   ===========================================================================*/
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 241, 234, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.brand .bmark {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: block;
}
/* tri-colour wordmark: "We" inherits, "Design" cobalt, "Things" spark */
.b-c { color: var(--accent); }
.b-o { color: var(--accent-warm); }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a:not(.btn) {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}
.nav-links a:not(.btn):hover { color: var(--ink); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  width: 42px;
  height: 42px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after { transform: translateY(4px); }
.nav.open .nav-toggle span { background: transparent; }
.nav.open .nav-toggle span::before { transform: translateY(0) rotate(45deg); }
.nav.open .nav-toggle span::after { transform: translateY(-2px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 12px var(--pad) 22px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s ease, opacity 0.22s ease;
  }
  .nav.open .nav-links { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links a:not(.btn) {
    padding: 14px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 1.05rem;
  }
  .nav-links .btn { margin-top: 16px; }
}

/* Big monitors: use more of the screen so the site doesn't sit in a 1140px
   column with empty sides. Full-bleed bands (hero, why, footer) already
   span the viewport; this widens the content rail and lets type/grids grow. */
@media (min-width: 1400px) {
  :root { --maxw: 1320px; --pad: 32px; }
}
@media (min-width: 1680px) {
  :root { --maxw: min(1800px, 92vw); --pad: 40px; }
  .cards, .work-grid, .price-grid { gap: 32px; }
  .feat { gap: 80px; }
  .feat-list { gap: 104px; }
  .sec-head { max-width: 68ch; }
  h2 { max-width: 22ch; }
  section { padding: clamp(100px, 9vw, 168px) 0; }
}

/* =============================================================================
   HERO — type + brand blocks. Same palette as the rest of the site.
   No device mockups.
   ===========================================================================*/
.hero {
  position: relative;
  padding: 12px 0 56px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(620px 320px at 92% -10%, rgba(35, 72, 230, 0.10), transparent 70%),
    radial-gradient(380px 260px at 0% 110%, rgba(255, 106, 43, 0.08), transparent 68%);
}
.hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.hero .eyebrow { margin-bottom: 14px; }

h1.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.1rem + 4.4vw, 7.2rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.96;
  max-width: 11.5em;
  overflow-wrap: break-word;
}
h1.hero-title [data-hero="titleLead"] { display: block; }
h1.hero-title .accent-text { color: var(--accent); }
h1.hero-title em { font-style: italic; }
h1.hero-title u { text-underline-offset: 0.12em; text-decoration-thickness: 0.08em; }

.hero-mark {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  width: min(52vw, 220px);
  margin: 22px 0 8px;
  overflow: visible;
}
.hero-mark span {
  aspect-ratio: 1;
  border-radius: 22%;
  background: var(--accent);
  transform-origin: center;
  will-change: transform;
}
.hero-mark span:nth-child(2) { background: var(--accent-warm); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero-mark { transition: gap 0.9s cubic-bezier(0.45, 0, 0.55, 1); }
  .hero-mark:hover { gap: 44px; }
}

@keyframes mark-in-tl {
  from { opacity: 0; transform: translate(-48%, -48%) scale(0.72) rotate(-10deg); }
  to   { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
}
@keyframes mark-in-tr {
  from { opacity: 0; transform: translate(50%, -52%) scale(0.72) rotate(12deg); }
  to   { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
}
@keyframes mark-in-bl {
  from { opacity: 0; transform: translate(-52%, 48%) scale(0.72) rotate(-12deg); }
  to   { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
}
@keyframes mark-in-br {
  from { opacity: 0; transform: translate(48%, 52%) scale(0.72) rotate(10deg); }
  to   { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
}
@keyframes mark-idle-tl {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  28%      { transform: translate(-30%, -18%) rotate(-8deg) scale(1.03); }
  64%      { transform: translate(-14%, -34%) rotate(5deg) scale(1.05); }
}
@keyframes mark-idle-tr {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  32%      { transform: translate(34%, -22%) rotate(9deg) scale(1.04); }
  68%      { transform: translate(16%, -36%) rotate(-6deg) scale(1.02); }
}
@keyframes mark-idle-bl {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  36%      { transform: translate(-34%, 20%) rotate(-7deg) scale(1.03); }
  70%      { transform: translate(-18%, 32%) rotate(6deg) scale(1.05); }
}
@keyframes mark-idle-br {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  30%      { transform: translate(28%, 24%) rotate(8deg) scale(1.04); }
  66%      { transform: translate(36%, 12%) rotate(-5deg) scale(1.02); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-mark span:nth-child(1) {
    animation: mark-in-tl 1.6s cubic-bezier(0.22, 1, 0.36, 1) both,
               mark-idle-tl 11s ease-in-out 1.7s infinite;
  }
  .hero-mark span:nth-child(2) {
    animation: mark-in-tr 1.7s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both,
               mark-idle-tr 12.4s ease-in-out 1.9s infinite;
  }
  .hero-mark span:nth-child(3) {
    animation: mark-in-bl 1.65s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both,
               mark-idle-bl 13s ease-in-out 1.95s infinite;
  }
  .hero-mark span:nth-child(4) {
    animation: mark-in-br 1.75s 0.28s cubic-bezier(0.22, 1, 0.36, 1) both,
               mark-idle-br 11.6s ease-in-out 2.1s infinite;
  }
}

.hero-sub {
  font-size: clamp(1.12rem, 0.95rem + 0.55vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 54ch;
  line-height: 1.4;
  margin: 18px 0 20px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-note {
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  max-width: 42ch;
  gap: 6px 10px;
}

@media (min-width: 761px) {
  .hero {
    min-height: calc(100svh - 68px + 72px);
    padding: 28px 0 96px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  #main > section.hero:first-child { padding-top: 28px; }
  .hero-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(180px, 0.75fr);
    grid-template-areas:
      "eye  mark"
      "title mark"
      "sub  mark"
      "cta  ."
      "note .";
    column-gap: clamp(16px, 4vw, 56px);
    align-items: start;
    flex: 1 0 auto;
  }
  .hero .eyebrow { grid-area: eye; margin-bottom: 16px; }
  h1.hero-title { grid-area: title; max-width: none; }
  .hero-mark {
    grid-area: mark;
    width: min(100%, 380px);
    gap: 36px;
    margin: 0;
    align-self: center;
  }
  .hero-sub { grid-area: sub; max-width: 48ch; margin: 22px 0 22px; }
  .hero-cta { grid-area: cta; }
  .hero-note { grid-area: note; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  h1.hero-title { font-size: clamp(2.4rem, 4.8vw, 3.5rem); }
  .hero-mark { width: min(100%, 260px); gap: 20px; }
}

@media (min-width: 1400px) {
  .hero { min-height: calc(100svh - 68px + 96px); padding: 36px 0 120px; }
  .hero-mark { width: min(100%, 440px); gap: 34px; }
  .hero-cta .btn { padding: 14px 26px; font-size: 1.02rem; }
}

@media (min-width: 1680px) {
  .hero { min-height: calc(100svh - 68px + 110px); padding: 40px 0 140px; }
  .hero-mark { width: min(100%, 520px); gap: 40px; }
}

/* =============================================================================
   TEXTURES — kept deliberately minimal. The paper sections stay clean paper,
   separated by the hairline dividers. Only the dark sections carry a subtle
   texture so they don't read as flat black.
   ===========================================================================*/

/* Dark "why" section — faint diagonal hatch + a soft accent glow. */
.why { position: relative; overflow: hidden; }
.why::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(640px 360px at 92% -10%, rgba(255, 90, 31, 0.06), transparent 70%),
    repeating-linear-gradient(135deg, rgba(244, 241, 234, 0.035) 0 1px, transparent 1px 12px);
}
.why .wrap { position: relative; z-index: 1; }

/* Footer — dark hatch + accent glow, bookending the "why" section. */
footer { position: relative; overflow: hidden; }
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(560px 300px at 90% 130%, rgba(31, 53, 255, 0.09), transparent 70%),
    repeating-linear-gradient(135deg, rgba(244, 241, 234, 0.03) 0 1px, transparent 1px 12px);
}
footer .wrap { position: relative; z-index: 1; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-soft);
  margin-bottom: 26px;
}
.eyebrow .pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-warm);
  box-shadow: 0 0 0 0 rgba(255, 90, 31, 0.6);
  animation: pulse 5.6s ease-in-out infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(255, 90, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 90, 31, 0); }
}

/* =============================================================================
   TRUST STRIP
   ===========================================================================*/
.strip { background: var(--paper-2); }
.strip .wrap { display: grid; grid-template-columns: repeat(3, 1fr); }
.strip-item { padding: 36px 30px; border-right: 1px solid var(--line); }
.strip-item:first-child { padding-left: 0; }
.strip-item:last-child { border-right: none; padding-right: 0; }
.strip-item .ix { color: var(--accent); margin-bottom: 10px; }
.strip-item h3 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 5px;
}
.strip-item p { font-size: 0.92rem; color: var(--ink-soft); }

@media (max-width: 760px) {
  .strip .wrap { grid-template-columns: 1fr; }
  .strip-item,
  .strip-item:first-child { padding: 22px 0; border-right: none; border-bottom: 1px solid var(--line); }
  .strip-item:last-child { border-bottom: none; }
}

/* =============================================================================
   SECTION SHELL
   ===========================================================================*/
section { padding: clamp(88px, 12vw, 140px) 0; }
/* Every page's first section starts at the same height as the home hero, so
   scrolling to the top lands in the same spot on every page. */
#main > section:first-child { padding-top: clamp(8px, 1.2vw, 16px); }
/* one warm colour throughout — sections are separated by a hairline divider
   (every band after the first) rather than by changing colour. */
#main > * + section, #main > * + .strip { border-top: 1px solid var(--line); }
.sec-head { max-width: 60ch; }
.sec-label { color: var(--accent); margin-bottom: 18px; }
h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  max-width: 20ch;
  overflow-wrap: break-word;
}
.sec-intro { color: var(--ink-soft); max-width: 56ch; margin-top: 22px; font-size: 1.06rem; line-height: 1.62; }

/* =============================================================================
   SERVICES
   ===========================================================================*/
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; }
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 34px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: #c9c2b2;
}
.card .num { color: var(--accent); }
.card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 18px 0 10px;
}
.card p { color: var(--ink-soft); font-size: 0.98rem; }
.card .card-foot {
  margin-top: 20px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.card ul { list-style: none; margin-top: 16px; display: grid; gap: 7px; }
.card li {
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding-left: 18px;
  position: relative;
}
.card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  transform: rotate(45deg);
}
@media (max-width: 880px) { .cards { grid-template-columns: 1fr; } }

/* =============================================================================
   WHY WE COST LESS  (dark section)
   ===========================================================================*/
.why { background: var(--ink); color: var(--on-ink); }
.why h2 { color: var(--on-ink); }
.why .sec-label { color: var(--accent-warm); }
.why .sec-intro { color: var(--on-ink-soft); }

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 0;
  margin-top: 62px;
  border-top: 1px solid rgba(244, 241, 234, 0.14);
}
.why-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 34px 36px 34px 0;
  border-bottom: 1px solid rgba(244, 241, 234, 0.14);
}
.why-item:nth-child(odd) { border-right: 1px solid rgba(244, 241, 234, 0.14); padding-right: 40px; }
.why-item:nth-child(even) { padding-left: 40px; }
.why-item .mk {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(244, 241, 234, 0.08);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  color: var(--accent-warm);
  font-size: 0.9rem;
  font-weight: 500;
}
.why-item h4 { font-family: var(--font-display); font-size: 1.14rem; margin-bottom: 5px; }
.why-item p { color: var(--on-ink-soft); font-size: 0.95rem; }

@media (max-width: 760px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-item,
  .why-item:nth-child(odd),
  .why-item:nth-child(even) { padding: 24px 0; border-right: none; }
}

/* =============================================================================
   PROCESS
   ===========================================================================*/
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 60px; }
.step { position: relative; padding-top: 22px; border-top: 2px solid var(--ink); }
.step .n {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.step h4 { font-family: var(--font-display); font-size: 1.15rem; margin: 10px 0 6px; }
.step p { color: var(--ink-soft); font-size: 0.92rem; }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* =============================================================================
   PORTFOLIO
   ===========================================================================*/
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 60px; }
.work {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.work:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: #c9c2b2; }
.work .thumb {
  position: relative;
  display: grid;
  place-items: center;
}
.work .thumb.is-empty,
.work .thumb.placeholder,
.work .thumb.frame-browser {
  aspect-ratio: 16 / 11;
  overflow: hidden;
}
.work .thumb img { width: 100%; height: auto; display: block; }
.img-fit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  overflow: visible;
  transform: translate(calc(var(--fit-x, 50%) - 50%), calc(var(--fit-y, 50%) - 50%));
  --fit-s: 1;
  --fit-x: 50%;
  --fit-y: 50%;
  --shot-max-h: min(26rem, 68vh);
}
.img-fit img {
  width: auto;
  height: auto;
  max-width: min(100%, calc(var(--fit-s, 1) * 100%));
  max-height: min(var(--shot-max-h), calc(var(--fit-s, 1) * var(--shot-max-h)));
  display: block;
  object-fit: contain;
  object-position: center;
}
.work .thumb .img-fit { --shot-max-h: min(18rem, 56vh); }
.mag-lead .img-fit { --shot-max-h: min(32rem, 70vh); }
.mag-card .img-fit { --shot-max-h: min(16rem, 50vh); }
.project-media .img-fit { --shot-max-h: min(36rem, 72vh); }
.work .thumb.is-empty {
  background:
    radial-gradient(120% 120% at 50% -10%, rgba(255, 255, 255, 0.7), transparent 55%),
    linear-gradient(165deg, #ECE7DD 0%, #D6CDBD 100%);
}
/* generated placeholder when no image is supplied */
.work .thumb.placeholder {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  color: rgba(244, 241, 234, 0.95);
  letter-spacing: -0.02em;
}
.work .thumb.placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  /* a soft, low-frequency sheen — no fine stripes that shimmer/moiré */
  background-image:
    radial-gradient(120% 100% at 85% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 60%);
}
.work .thumb .ph-mark { position: relative; z-index: 1; }
.work .body { padding: 22px; }
.work .tag { color: var(--accent); }
.work h3 { font-family: var(--font-display); font-size: 1.28rem; margin: 10px 0 6px; }
.work p { color: var(--ink-soft); font-size: 0.94rem; }

.work-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 38px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 1px dashed var(--line);
  padding: 9px 14px;
  border-radius: 8px;
}
@media (max-width: 640px) { .work-grid { grid-template-columns: 1fr; } }

/* =============================================================================
   HOME — work showcase as big alternating feature rows
   ===========================================================================*/
.home-work { padding: 100px 0; }
.feat-list { display: flex; flex-direction: column; gap: 88px; margin-top: 64px; }

.feat { position: relative; display: flex; align-items: center; gap: 48px; }
.feat.flip { flex-direction: row-reverse; }
.feat-copy { flex: 0.9 1 0; min-width: 0; }

.feat-media { flex: 1.2 1 0; min-width: 0; display: flex; justify-content: center; }

/* website screenshots sit in a real browser window (chrome bar + dots), sized
   uniformly so every row's window matches — a clean product shot. */
.feat-browser { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 26px 56px -30px rgba(22, 20, 15, 0.5); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.feat:hover .feat-browser { transform: translateY(-4px); box-shadow: 0 34px 66px -30px rgba(22, 20, 15, 0.58); }
.feat-browser-bar { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.feat-browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: #cfc8ba; }
.feat-browser-bar i:first-child { background: var(--accent-warm); }
.feat-screen { aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.feat-screen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; }
/* "No frame" — a clean image with no device chrome */
.feat-media.feat-plain img { width: 100%; display: block; border-radius: 14px; box-shadow: 0 26px 56px -30px rgba(22, 20, 15, 0.5); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.feat:hover .feat-media.feat-plain img { transform: translateY(-4px); box-shadow: 0 34px 66px -30px rgba(22, 20, 15, 0.58); }
/* phone screenshots in a bezel (reuses .pm-phone from the project page) */
.feat-media.is-phone .pm-phone { width: min(270px, 78%); transition: transform 0.25s ease; }
.feat:hover .feat-media.is-phone .pm-phone { transform: translateY(-4px); }
/* SVG illustration fallback when a project has no screenshot */
.feat-media .thumb.placeholder { width: 100%; aspect-ratio: 16 / 11; border-radius: calc(var(--radius) + 2px); display: grid; place-items: center; box-shadow: 0 26px 56px -30px rgba(22, 20, 15, 0.5); }

/* Work page: the real screenshot, whole, on a paper panel. */
.feat-media.feat-shot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 3.2vw, 40px);
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 120% at 50% -10%, rgba(255, 255, 255, 0.75), transparent 60%),
    linear-gradient(165deg, #ECE7DD 0%, #D6CDBD 100%);
}
.feat-media.feat-shot img {
  width: 100%;
  height: auto;
  max-height: min(560px, 64vh);
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 10px;
  box-shadow: 0 28px 58px -28px rgba(22, 20, 15, 0.5);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feat:hover .feat-media.feat-shot img {
  transform: translateY(-4px);
  box-shadow: 0 36px 68px -28px rgba(22, 20, 15, 0.58);
}
.feat.feat-lead .feat-media.feat-shot img { max-height: min(620px, 68vh); }

.feat-copy .tag { color: var(--accent); }
.feat-copy h3 { font-family: var(--font-display); font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -0.02em; margin: 10px 0 14px; }
.feat-copy > p { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.65; max-width: 46ch; }
.feat-copy .work-visit { display: inline-block; margin-top: 20px; color: var(--accent); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; }
.feat.is-linked:hover .work-visit { text-decoration: underline; }

@media (max-width: 760px) {
  .home-work { padding: 68px 0; }
  .feat-list { gap: 56px; margin-top: 44px; }
  .feat, .feat.flip { flex-direction: column; gap: 24px; align-items: stretch; }
  .feat-copy > p { max-width: none; }
}

/* =============================================================================
   WORK PAGE — magazine lead + card grid
   ===========================================================================*/
.mag { margin-top: 64px; }
.mag-lead.is-linked,
.mag-card.is-linked { cursor: pointer; }
.mag-lead {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 44px;
  align-items: start;
  margin-bottom: 36px;
}
.mag-shot {
  border-radius: 18px;
  overflow: visible;
  border: 1px solid var(--line);
  background: #fff;
}
.mag-shot.frame-phone {
  border: 0;
}
.mag-shot.is-empty { overflow: hidden; aspect-ratio: 16 / 11; }
.mag-shot img {
  width: 100%;
  height: auto;
  display: block;
}
.mag-shot-live { background: #fff; }
.mag-shot-live .embed-viewport { aspect-ratio: 16 / 10; }
.work-lead .thumb.thumb-live {
  display: block;
  aspect-ratio: auto;
  padding: 0;
  overflow: hidden;
  background: #fff;
}
.work-lead .thumb.thumb-live .embed-viewport { aspect-ratio: 16 / 10; }
.mag-shot.is-empty {
  aspect-ratio: 16 / 11;
  background:
    radial-gradient(120% 120% at 50% -10%, rgba(255, 255, 255, 0.7), transparent 55%),
    linear-gradient(165deg, #ECE7DD 0%, #D6CDBD 100%);
  border-style: dashed;
}
.mag-lead .mag-copy .tag { color: var(--accent); }
.mag-lead .mag-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.1rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 10px 0 14px;
}
.mag-lead .mag-copy > p:not(.tag) { color: var(--ink-soft); font-size: 1.08rem; max-width: 42ch; }
.mag-lead .work-visit { display: inline-block; margin-top: 18px; color: var(--accent); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; }
.mag-lead.is-linked:hover .work-visit { text-decoration: underline; }

.mag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.mag-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.mag-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: #c9c2b2; }
.mag-card .mag-shot { border-radius: 0; border: none; border-bottom: 1px solid var(--line); }
.mag-card .mag-copy { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
.mag-card .mag-copy .tag { color: var(--accent); }
.mag-card .mag-copy h4 { font-family: var(--font-display); font-size: 1.2rem; margin: 6px 0 6px; }
.mag-card .mag-copy > p:not(.tag) {
  color: var(--ink-soft);
  font-size: 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mag-card .work-visit { margin-top: auto; padding-top: 14px; color: var(--accent); font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; }
.mag-card.is-linked:hover .work-visit { text-decoration: underline; }

@media (max-width: 880px) {
  .mag { margin-top: 40px; }
  .mag-lead { grid-template-columns: 1fr; gap: 22px; }
  .mag-grid { grid-template-columns: 1fr; }
}

/* ---- Portfolio cards: decorative graphic header + text; screenshot lives on
   the project page. Cards are equal height with a clamped blurb. ------------- */
.work { display: flex; flex-direction: column; }
.work .body { display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; padding: 22px 24px 24px; }
.work h3 { font-family: var(--font-display); font-size: 1.3rem; margin: 6px 0 2px; }
.work p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }
.work .work-blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.work .work-visit { margin-top: auto; padding-top: 16px; color: var(--accent); font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; }
.work.is-linked:hover .work-visit { text-decoration: underline; }
.work.is-linked:hover .thumb.placeholder .ph-art { transform: translateY(-3px); transition: transform 0.2s ease; }

/* =============================================================================
   SINGLE PROJECT PAGE (/project?p=…)
   ===========================================================================*/
.project-detail { padding: 128px 0 96px; }
.project-detail-inner { max-width: 940px; }
.project-back { display: inline-block; color: var(--ink-soft); font-size: 0.8rem; margin-bottom: 34px; transition: color 0.15s ease; }
.project-back:hover { color: var(--accent); }

.project-hero { max-width: 68ch; }
.project-hero .tag { color: var(--accent); }
.project-hero h1 { font-size: clamp(2.3rem, 6vw, 3.6rem); letter-spacing: -0.028em; margin: 12px 0 18px; }
.project-lead { color: var(--ink-soft); font-size: 1.18rem; line-height: 1.6; }
.project-hero .btn { margin-top: 28px; }

/* media showcase — a soft panel so the shot reads as a framed product photo */
.project-media {
  margin: 48px 0;
  padding: clamp(20px, 4vw, 46px);
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 120% at 50% -10%, rgba(255, 255, 255, 0.75), transparent 60%),
    linear-gradient(165deg, #ECE7DD 0%, #D6CDBD 100%);
}
.project-media img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 34px 70px -34px rgba(22, 20, 15, 0.6); }
.project-media .img-fit {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 34px 70px -34px rgba(22, 20, 15, 0.6);
}
.project-media .img-fit img { border: 0; box-shadow: none; border-radius: 0; }
/* phone shots: portrait, inside a device bezel at a sane width */
.project-media.is-phone { display: flex; justify-content: center; }
.pm-phone { width: min(300px, 72vw); padding: 8px; background: #16140F; border-radius: 34px; box-shadow: 0 34px 70px -30px rgba(0, 0, 0, 0.66); }
.pm-phone img { width: 100%; height: auto; display: block; border-radius: 26px; border: 0; box-shadow: none; }
.pm-phone .img-fit { width: 100%; border-radius: 26px; border: 0; box-shadow: none; }

/* live embed — a real, same-origin preview of the site inside a browser chrome,
   rendered at desktop width and scaled to fit (see fitEmbeds() in main.js). */
.project-media.project-embed { padding: 0; background: #fff; overflow: hidden; box-shadow: 0 34px 70px -34px rgba(22, 20, 15, 0.6); }
.embed-bar { display: flex; align-items: center; gap: 6px; padding: 11px 15px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.embed-bar i { width: 9px; height: 9px; border-radius: 50%; background: #cfc8ba; }
.embed-bar i:first-child { background: var(--accent-warm); }
.embed-addr { margin-left: 8px; font-size: 0.72rem; color: var(--ink-soft); letter-spacing: 0.02em; }
.embed-viewport { position: relative; width: 100%; aspect-ratio: 1280 / 800; overflow: hidden; background: #fff; }
.embed-frame { position: absolute; top: 0; left: 0; width: 1280px; height: 800px; border: 0; transform-origin: 0 0; pointer-events: none; }
/* the whole preview is a click target that opens the real, live site */
.embed-open { position: absolute; inset: 0; z-index: 2; }
.project-media.project-embed:hover { box-shadow: 0 40px 80px -34px rgba(22, 20, 15, 0.66); }

.project-body { font-size: 1.07rem; line-height: 1.75; color: var(--ink); max-width: 68ch; margin: 44px 0; }
.project-body p { margin: 0 0 1em; }
.project-body h3, .project-body h4 { font-family: var(--font-display); margin: 1.4em 0 0.5em; }

/* quick facts strip */
.project-facts { display: flex; flex-wrap: wrap; gap: 14px 48px; margin: 40px 0 8px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.project-facts .fact { display: flex; flex-direction: column; gap: 4px; }
.project-facts .k { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.project-facts .v { font-size: 1rem; font-weight: 600; color: var(--ink); }
.project-facts a.v { color: var(--accent); }

/* contrasting CTA panel so the page doesn't read as one flat beige column */
.project-cta { margin-top: 56px; padding: clamp(38px, 6vw, 60px) 32px; border-radius: calc(var(--radius) + 6px); background: var(--ink); text-align: center; }
.project-cta h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); color: #fff; margin-bottom: 14px; }
.project-cta p { color: rgba(244, 241, 234, 0.72); max-width: 46ch; margin: 0 auto 26px; line-height: 1.6; }
/* invert the button so it's legible on the dark panel */
.project-cta .btn { background: var(--paper); color: var(--ink); }
.project-cta .btn:hover { background: #fff; transform: translateY(-2px); }
@media (max-width: 560px) { .project-detail { padding: 104px 0 72px; } }

/* =============================================================================
   QUOTE / CONTACT
   ===========================================================================*/
.quote { background: var(--paper); }
.quote-inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 68px;
  align-items: start;
}
.contact-list { list-style: none; margin-top: 28px; }
.contact-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.96rem;
}
.contact-list li:first-child { border-top: 1px solid var(--line); }
.contact-list .k { color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; }
.contact-list .v { font-weight: 500; }
.contact-list a.v:hover { color: var(--accent); }

/* form */
.quote-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
}
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 7px; }
.req { color: var(--accent-warm); }
input, select, textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-family: inherit;
  font-size: 0.96rem;
  color: var(--ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
input::placeholder, textarea::placeholder { color: #9a9384; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 53, 255, 0.12);
}
textarea { resize: vertical; min-height: 120px; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A554A' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}

/* form status message */
.form-status {
  margin-top: 14px;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  display: none;
}
.form-status.show { display: block; }
.form-status.success { background: rgba(31, 53, 255, 0.08); color: var(--accent); border: 1px solid rgba(31, 53, 255, 0.25); }
.form-status.error   { background: rgba(255, 90, 31, 0.08); color: #c8420f; border: 1px solid rgba(255, 90, 31, 0.3); }
.form-status.info    { background: var(--paper-2); color: var(--ink-soft); border: 1px solid var(--line); }

.btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

@media (max-width: 860px) { .quote-inner { grid-template-columns: 1fr; gap: 40px; } }

/* =============================================================================
   FOOTER
   ===========================================================================*/
footer { background: var(--ink); color: var(--on-ink-soft); padding: 52px 0 44px; }
footer .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
}
footer .brand { color: var(--on-ink); }
footer .foot-meta { font-family: var(--font-mono); font-size: 0.76rem; }
footer a { color: var(--on-ink-soft); transition: color 0.2s ease; }
footer a:hover { color: var(--on-ink); }

/* =============================================================================
   SCROLL REVEAL  (progressive — content is visible if JS/IO unavailable)
   ===========================================================================*/
.reveal { opacity: 1; }
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1), transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* On phones, never run the scroll-reveal animation — show content immediately.
   (Avoids any chance of a section staying invisible if the reveal doesn't fire
   on scroll, and the animation adds little on a small screen.) */
@media (max-width: 760px) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Inside the admin live-preview iframe: show everything immediately, no motion */
.preview-mode .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* =============================================================================
   PAGE MOTION — one slow loop per section, on every section of every page.
   Still an unhurried pace, but with enough travel to actually read as motion.
   Loops pause on hover so they never fight the hover states. Off if reduce-motion.
   ===========================================================================*/
@media (prefers-reduced-motion: no-preference) {
  /* Numbers and icons: home strip, service cards, process steps */
  .strip-item .ix,
  .card .num,
  .step .n {
    display: inline-block;
    animation: ix-bob 8s ease-in-out infinite;
  }
  .strip-item:nth-child(2) .ix,
  .card:nth-child(2) .num,
  .step:nth-child(2) .n { animation-delay: 1.2s; }
  .strip-item:nth-child(3) .ix,
  .card:nth-child(3) .num,
  .step:nth-child(3) .n { animation-delay: 2.4s; }
  .step:nth-child(4) .n { animation-delay: 3.6s; }

  /* Closing CTA band (home + work) */
  .home-cta h2 { position: relative; }
  .home-cta h2::after {
    content: "";
    display: block;
    height: 7px;
    width: 56px;
    margin: 20px auto 0;
    border-radius: 4px;
    background: var(--accent);
    animation: cta-bar 8s ease-in-out infinite;
  }

  /* "Why us" band */
  .why-item .mk { animation: mk-breathe 8s ease-in-out infinite; }
  .why-item:nth-child(2) .mk { animation-delay: 1.2s; }
  .why-item:nth-child(3) .mk { animation-delay: 2.4s; }
  .why-item:nth-child(4) .mk { animation-delay: 3.6s; }

  /* Pricing: the featured plan pulses its ring */
  .price-card.featured { animation: featured-glow 8s ease-in-out infinite; }
  .price-card.featured::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: calc(var(--radius) + 10px);
    border: 3px solid var(--accent);
    pointer-events: none;
    animation: featured-ring 8s ease-in-out infinite;
  }
  .price-card.featured:hover,
  .price-card.featured:hover::after { animation-play-state: paused; }

  /* Testimonials: cards rock gently, staggered down the row */
  .testimonials .quote-card { animation: card-sway 9s ease-in-out infinite; }
  .testimonials .quote-card:nth-child(2) { animation-delay: 1.5s; }
  .testimonials .quote-card:nth-child(3) { animation-delay: 3s; }
  .testimonials .quote-card:hover { animation-play-state: paused; }

  /* About: the portrait or monogram breathes */
  .about-media img,
  .about-monogram { animation: shot-breathe 9s ease-in-out infinite; }

  /* FAQ: the +/- markers spin up so the rows read as tappable. Paused once a
     row is open, since [open] animates the marker's own bars instead. */
  .faq-item .faq-icon { animation: faq-nudge 8s ease-in-out infinite; }
  .faq-item:nth-child(2) .faq-icon { animation-delay: 0.8s; }
  .faq-item:nth-child(3) .faq-icon { animation-delay: 1.6s; }
  .faq-item:nth-child(4) .faq-icon { animation-delay: 2.4s; }
  .faq-item:nth-child(5) .faq-icon { animation-delay: 3.2s; }
  .faq-item[open] .faq-icon,
  .faq-item summary:hover .faq-icon { animation-play-state: paused; }

  /* Quote: the send button keeps a slow halo. box-shadow only — .btn:hover
     owns transform, so animating that here would cancel the lift. */
  .quote-form .btn-block { animation: send-halo 8s ease-in-out infinite; }
  .quote-form .btn-block:hover { animation-play-state: paused; }

  /* Placeholders can drift. Real screenshots must stay uncropped, so the
     loop is only on generated art — not on .img-fit. */
  .work .thumb .ph-art {
    transform-origin: center;
    animation: mag-drift 11s ease-in-out infinite alternate;
  }

  /* Empty placeholders ARE the frame: moving one would open a gap above the
     card body and scaling one would paint over the title, so sweep a highlight
     across it instead. The frame's own overflow clips the sweep. */
  .work .thumb.is-empty,
  .mag-card .mag-shot.is-empty { position: relative; }
  .work .thumb.is-empty::after,
  .mag-card .mag-shot.is-empty::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 34%, rgba(255, 255, 255, 0.9) 50%, transparent 66%);
    animation: shot-sweep 8s ease-in-out infinite;
  }
  /* The lead shot is a standalone grid item, so it can float on its own. */
  .mag-lead .mag-shot.is-empty { animation: shot-breathe 9s ease-in-out infinite; }

  .work-grid .work:nth-child(2) .thumb .ph-art,
  .work-grid .work:nth-child(2) .thumb.is-empty::after,
  .mag-grid .mag-card:nth-child(2) .mag-shot.is-empty::after { animation-delay: 1.5s; }
  .work-grid .work:nth-child(3) .thumb .ph-art,
  .work-grid .work:nth-child(3) .thumb.is-empty::after,
  .mag-grid .mag-card:nth-child(3) .mag-shot.is-empty::after { animation-delay: 3s; }

  .work:hover .thumb .ph-art,
  .work:hover .thumb.is-empty::after,
  .mag-card:hover .mag-shot.is-empty::after,
  .mag-lead:hover .mag-shot.is-empty { animation-play-state: paused; }

  /* Project page device shot */
  .project-media.is-phone .pm-phone,
  .project-media:not(.is-phone):not(.project-embed),
  .project-media.project-embed {
    animation: phone-tilt 10s ease-in-out infinite;
  }

  /* 404 */
  .error-page .error-code {
    display: inline-block;
    animation: error-tip 9s ease-in-out infinite;
  }
}

@keyframes ix-bob {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  50%      { transform: translateY(-16px) scale(1.28) rotate(-5deg); }
}
@keyframes cta-bar {
  0%, 100% { width: 44px; background: var(--accent); }
  50%      { width: 240px; background: var(--accent-warm); }
}
@keyframes mk-breathe {
  0%, 100% { transform: scale(1) rotate(0deg); background: rgba(244, 241, 234, 0.08); }
  50%      { transform: scale(1.38) rotate(8deg); background: rgba(255, 106, 43, 0.5); }
}
@keyframes featured-glow {
  0%, 100% { box-shadow: 0 18px 50px -26px rgba(35, 72, 230, 0.38); }
  50%      { box-shadow: 0 34px 80px -6px rgba(35, 72, 230, 0.9); }
}
@keyframes featured-ring {
  0%, 100% { opacity: 0.1; transform: scale(0.97); }
  50%      { opacity: 1; transform: scale(1.05); }
}
@keyframes mag-drift {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.22) translate(-4%, -6%); }
}
@keyframes shot-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-18px) scale(1.02); }
}
@keyframes shot-sweep {
  0%        { transform: translateX(-130%); }
  55%, 100% { transform: translateX(130%); }
}
@keyframes card-sway {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-1.2deg); }
}
@keyframes faq-nudge {
  0%, 60%, 100% { transform: scale(1) rotate(0deg); }
  76%           { transform: scale(1.5) rotate(90deg); }
  88%           { transform: scale(1.18) rotate(45deg); }
}
@keyframes send-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(35, 72, 230, 0); }
  50%      { box-shadow: 0 0 0 12px rgba(35, 72, 230, 0.16), 0 14px 34px -14px rgba(35, 72, 230, 0.6); }
}
@keyframes error-tip {
  0%, 100% { transform: rotate(0deg) scale(1); }
  40%      { transform: rotate(-8deg) scale(1.08); }
  72%      { transform: rotate(6deg) scale(1.04); }
}
@keyframes phone-tilt {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(5deg) translateY(-22px); }
}


/* Rich-text from the editor (bold / italic / underline / strike / colour / links) */
body { font-synthesis: weight style; }   /* let display fonts fake bold/italic */
strong, b { font-weight: 800; color: inherit; }
em, i { font-style: italic; }
/* inside an already-bold heading, emphasise with a touch of the accent so
   bold/italic actually read (you can't out-bold an 800-weight headline) */
h1 strong, h2 strong, h3 strong, h4 strong { color: var(--accent); }
.why h1 strong, .why h2 strong, .why h3 strong, .why h4 strong { color: var(--accent-warm); }
main p a, main li a, main blockquote a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.15s ease;
}
main p a:hover, main li a:hover, main blockquote a:hover { opacity: 0.7; }
/* links inside the dark "why" band stay legible */
.why a { color: #8aa0ff; }

/* =============================================================================
   PRICING
   ===========================================================================*/
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; align-items: stretch; overflow: visible; }
.price-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: #c9c2b2; }
.price-card.featured { border-color: var(--accent); box-shadow: 0 18px 50px -26px rgba(31, 53, 255, 0.5); }
.price-flag {
  position: absolute;
  top: -11px;
  left: 30px;
  background: var(--accent);
  color: #fff;
  padding: 4px 11px;
  border-radius: 100px;
  font-size: 0.66rem;
}
.price-card h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; }
.price-card .price {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 10px 0 4px;
}
.price-card .price span { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.price-card .price-desc { color: var(--ink-soft); font-size: 0.95rem; }
.price-card ul { list-style: none; margin: 18px 0 24px; display: grid; gap: 8px; }
.price-card li { font-size: 0.92rem; color: var(--ink-soft); padding-left: 24px; position: relative; }
.price-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 15px;
  height: 15px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.price-card .btn { margin-top: auto; }
.price-note { margin-top: 26px; color: var(--ink-soft); }
@media (max-width: 880px) { .price-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* =============================================================================
   TESTIMONIALS
   ===========================================================================*/
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; }
.quote-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.quote-card blockquote {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.quote-card figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.quote-card .qn { font-weight: 600; }
.quote-card .qr { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }
@media (max-width: 880px) { .quote-grid { grid-template-columns: 1fr; } }

/* =============================================================================
   ABOUT
   ===========================================================================*/
.about { background: var(--paper); }
.about-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center; }
.about-sig { margin-top: 22px; display: flex; flex-direction: column; gap: 2px; }
.about-sig .about-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.about-sig .about-role { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }
.about-media { display: grid; place-items: center; }
.about-media img { width: 100%; max-width: 320px; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--line); }
.about-media .img-fit { max-width: 320px; --shot-max-h: 20rem; border-radius: var(--radius); border: 1px solid var(--line); }
.about-media .img-fit img { max-width: none; border: 0; border-radius: 0; }
.about-monogram {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--ink) 0%, #2a2620 100%);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 4.5rem;
  letter-spacing: -0.03em;
  position: relative;
  overflow: hidden;
}
.about-monogram::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(300px 200px at 80% 0%, rgba(31, 53, 255, 0.35), transparent 70%),
    radial-gradient(200px 160px at 10% 100%, rgba(255, 90, 31, 0.22), transparent 70%);
}
.about-monogram span { position: relative; z-index: 1; }
@media (max-width: 860px) { .about-inner { grid-template-columns: 1fr; gap: 34px; } .about-media { order: -1; justify-items: start; } }

/* =============================================================================
   FAQ
   ===========================================================================*/
.faq-list { margin-top: 58px; max-width: 820px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-icon { position: relative; flex: 0 0 auto; width: 18px; height: 18px; }
.faq-item .faq-icon::before,
.faq-item .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--accent);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.faq-item .faq-icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq-item .faq-icon::after { top: 0; left: 8px; width: 2px; height: 18px; }
.faq-item[open] .faq-icon::after { transform: scaleY(0); opacity: 0; }
.faq-item .faq-a { overflow: hidden; padding: 0 4px 24px; max-width: 68ch; }
.faq-item .faq-a p { color: var(--ink-soft); }
.faq-item[open] summary { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-a { animation: faqIn 0.7s ease; }
  @keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* =============================================================================
   SECTION-ANCHORED IMAGE OVERLAYS  (percent positions, responsive)
   ===========================================================================*/
/* each band is the coordinate space for its images */
#main > section, #main > .strip { position: relative; }
.imglayer { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 4; }
.imgitem { position: absolute; transform-origin: center; }
.imgitem img { width: 100%; height: auto; display: block; border-radius: 8px; -webkit-user-select: none; user-select: none; }

/* Overlay SVGs on the hero are replaced by .hero-art on the public site. */
html:not(.img-editing) #hero > .imglayer { display: none; }
html.img-editing .hero-mark { visibility: hidden; }

/* Placed graphics are positioned for the desktop layout, so they crowd a narrow
   phone screen — hide them there. Still shown while actively editing, so they can
   be managed on a small screen if needed. */
@media (max-width: 760px) {
  html:not(.img-editing) .imglayer { display: none; }
}

/* edit mode (only inside the admin preview) */
.img-editing .imgitem { pointer-events: auto; cursor: move; outline: 1px dashed rgba(31, 53, 255, 0.65); outline-offset: 2px; touch-action: none; }
.img-editing .imgitem.sel { outline: 2px solid var(--accent); }
.ig-h { position: absolute; width: 16px; height: 16px; background: #fff; border: 2px solid var(--accent); border-radius: 50%; display: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
.imgitem.sel .ig-h, .imgitem.sel .ig-del { display: block; }
.ig-scale { right: -9px; bottom: -9px; cursor: nwse-resize; }
.ig-rotate { left: 50%; top: -30px; transform: translateX(-50%); cursor: grab; background: var(--accent); }
.ig-rotate::after { content: ""; position: absolute; left: 50%; top: 14px; width: 2px; height: 14px; background: var(--accent); transform: translateX(-50%); }
.ig-del { position: absolute; right: -13px; top: -13px; width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--accent-warm); color: #fff; cursor: pointer; display: none; font-size: 15px; line-height: 1; padding: 0; }

/* live-site admin bar (only rendered for a logged-in owner) */
#liveAdminBar {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: rgba(244, 241, 234, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 100px; padding: 8px 10px;
  box-shadow: 0 14px 40px -12px rgba(22, 20, 15, 0.4); z-index: 90;
  font-family: var(--font-body);
}
#liveAdminBar button { border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 600; font-size: 0.85rem; padding: 8px 16px; border-radius: 100px; cursor: pointer; transition: transform 0.12s ease, background 0.15s ease; }
#liveAdminBar button:hover { transform: translateY(-1px); }
#liveAdminBar .la-edit { background: var(--accent-warm); border-color: var(--accent-warm); color: #fff; }
#liveAdminBar .la-edit.on { background: var(--accent); border-color: var(--accent); }
#liveAdminBar .la-add { background: var(--ink); border-color: var(--ink); color: var(--paper); }
#liveAdminBar .la-status { font-size: 0.78rem; color: var(--ink-soft); padding: 0 4px; }

/* =============================================================================
   DESIGN PASS — hero visual, dark-section polish, portfolio mockups, pricing,
   and a distinct texture for every remaining section.
   ===========================================================================*/

/* width utilities for the wireframe illustrations (portfolio mockups) */
.w70 { width: 70%; } .w65 { width: 65%; } .w45 { width: 45%; } .w40 { width: 40%; }

/* ---- Dark "why" section: icon markers ------------------------------------ */
/* swap the "//" text marker for a real line icon, cycled per item */
.why-item .mk { position: relative; font-size: 0; line-height: 0; }
.why-item .mk::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px;
  background: var(--accent-warm);
  -webkit-mask: var(--mk-icon) no-repeat center / contain;
          mask: var(--mk-icon) no-repeat center / contain;
}
.why-item:nth-child(1) .mk { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E"); }
.why-item:nth-child(2) .mk { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cpath d='M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3'/%3E%3C/svg%3E"); }
.why-item:nth-child(3) .mk { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 13.42 20.59a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cpath d='M7 7h.01'/%3E%3C/svg%3E"); }
.why-item:nth-child(4) .mk { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }

/* ---- Portfolio: polished wireframe mockups instead of bare initials ------- */
.work .thumb.placeholder { display: grid; place-items: center; padding: 22px; }
.work .thumb.placeholder .ph-art { position: relative; z-index: 1; width: 80%; max-width: 220px; }
.ph-block { height: 42px; border-radius: 7px; background: linear-gradient(120deg, var(--accent), #5B6BFF); }
.ph-ln { height: 7px; border-radius: 100px; background: #e7e1d5; }

/* website mockup */
.ph-web .ph-win { background: #fff; border-radius: 10px; overflow: hidden; transform: rotate(-1.6deg);
  box-shadow: 0 18px 38px -18px rgba(0, 0, 0, 0.55); }
.ph-web .ph-top { display: flex; gap: 5px; padding: 8px 10px; background: var(--paper-2); }
.ph-web .ph-top i { width: 7px; height: 7px; border-radius: 50%; background: #cfc8ba; }
.ph-web .ph-body { padding: 13px; display: grid; gap: 8px; }
.ph-web .ph-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ph-web .ph-tiles b { height: 26px; border-radius: 6px; background: var(--paper-2); }

/* phone mockup */
.ph-phone .ph-phone-m { width: 104px; margin: 0 auto; background: var(--ink); border: 3px solid #2a261f;
  border-radius: 20px; padding: 7px; box-shadow: 0 18px 38px -18px rgba(0, 0, 0, 0.6); transform: rotate(2.4deg); }
.ph-phone .ph-pscreen { background: var(--paper); border-radius: 13px; padding: 11px 9px; display: grid; gap: 7px; }
.ph-phone .ph-status { height: 5px; width: 30px; border-radius: 100px; background: #cfc8ba; margin: 0 auto 1px; }
.ph-phone .ph-block { height: 46px; background: linear-gradient(120deg, var(--accent-warm), #FF8A5C); }
.ph-phone .ph-cta { height: 18px; border-radius: 6px; background: var(--ink); margin-top: 1px; }

/* automation flow mockup */
.ph-flow .ph-flow { position: relative; width: 100%; height: 116px; }
.ph-flow .ph-flow::before { content: ""; position: absolute; left: 10%; right: 10%; top: 38%;
  border-top: 2px dashed rgba(255, 255, 255, 0.55); }
.ph-flow .ph-node { position: absolute; width: 44px; height: 44px; border-radius: 12px; background: #fff;
  border: 1px solid var(--line); display: grid; place-items: center; z-index: 1;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.5); }
.ph-flow .ph-node::after { content: ""; width: 17px; height: 17px; border-radius: 5px; }
.ph-flow .ph-node:nth-child(1) { left: 2%; top: 6px; }
.ph-flow .ph-node:nth-child(1)::after { background: var(--accent); }
.ph-flow .ph-node:nth-child(2) { left: 50%; transform: translateX(-50%); top: 58px; }
.ph-flow .ph-node:nth-child(2)::after { background: var(--accent-warm); }
.ph-flow .ph-node:nth-child(3) { right: 2%; top: 6px; }
.ph-flow .ph-node:nth-child(3)::after { background: var(--ink); }

/* ---- Pricing: consistent, prominent prices + more breathing room --------- */
.price-grid { gap: 28px; }
.price-card { padding: 34px 32px; }
.price-card .price {
  font-size: 2.5rem; line-height: 1; margin: 14px 0 6px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.price-card .price span {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.06em;
}


/* ---- Preset graphics flyout (admin only) -------------------------------- */
#liveAdminBar .la-graphics { background: #fff; }
#graphicsFlyout {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(4, 58px); gap: 8px;
  background: rgba(244, 241, 234, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 16px; padding: 12px;
  box-shadow: 0 18px 50px -14px rgba(22, 20, 15, 0.45); z-index: 95;
}
#graphicsFlyout button {
  width: 58px; height: 58px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 9px; cursor: pointer; display: grid; place-items: center;
  transition: transform 0.12s ease, border-color 0.15s ease;
}
#graphicsFlyout button:hover { transform: translateY(-2px); border-color: var(--accent); }
#graphicsFlyout img { max-width: 100%; max-height: 100%; pointer-events: none; }

/* =============================================================================
   HOME — explore CTA band (the slim home page's call to action to page 2)
   ===========================================================================*/
.home-cta { text-align: center; }
.home-cta-inner { max-width: 640px; margin: 0 auto; display: grid; justify-items: center; gap: 0; }
.home-cta .sec-label { margin-bottom: 16px; }
.home-cta h2 { max-width: 18ch; margin: 0 auto; }
.home-cta-sub { color: var(--ink-soft); font-size: 1.06rem; margin: 18px auto 30px; max-width: 48ch; }

/* =============================================================================
   404 / ERROR PAGE
   ===========================================================================*/
.error-page { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 40px 0; }
.error-page .error-code { color: var(--accent); margin-bottom: 18px; }
.error-page .hero-mark { width: 132px; gap: 14px; margin: 0 auto 28px; }
.error-page h1 { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 800; letter-spacing: -0.025em; max-width: 18ch; margin: 0 auto; }
.error-sub { color: var(--ink-soft); font-size: 1.06rem; max-width: 46ch; margin: 18px auto 32px; line-height: 1.6; }
.error-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* one-line privacy reassurance under the quote form */
.form-privacy { margin-top: 14px; font-size: 0.82rem; color: var(--ink-soft); text-align: center; line-height: 1.5; }

/* linkable portfolio cards — whole card is a click target when a URL is set */
.work.is-linked { cursor: pointer; }
.work-link { position: absolute; inset: 0; z-index: 3; border-radius: var(--radius); }
.work-link:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }
.work-visit { display: inline-block; margin-top: 14px; color: var(--accent); font-size: 0.74rem; font-weight: 600; }
.work.is-linked:hover .work-visit { text-decoration: underline; }

/* =============================================================================
   PORTFOLIO DEVICE FRAMES — wrap an uploaded screenshot in a phone/browser so a
   raw app shot reads as a polished product photo.
   ===========================================================================*/
.device-screen { overflow: hidden; background: #111; }
.device-screen img { width: 100%; height: auto; object-fit: contain; object-position: center; display: block; }
.device-screen .img-fit { width: 100%; height: auto; margin: 0; transform: none; }

/* phone — the bezel wraps a tall screenshot. Landscape shots never get this
   chrome (main.js strips it). */
.frame-phone,
.project-media.is-phone {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 22px 16px;
  aspect-ratio: auto;
  overflow: visible;
  background:
    radial-gradient(115% 80% at 50% 2%, rgba(255, 255, 255, 0.85), transparent 58%),
    linear-gradient(165deg, #ECE7DD 0%, #D6CDBD 100%);
}
.frame-phone .device-phone,
.project-media.is-phone .device-phone {
  position: relative;
  width: min(220px, 62%);
  background: #16140F;
  border: 3px solid #2a261f;
  border-radius: 28px;
  padding: 8px;
  box-shadow: 0 24px 46px -16px rgba(0, 0, 0, 0.62), 0 6px 16px -8px rgba(0, 0, 0, 0.4);
}
.mag-lead.frame-phone .device-phone,
.mag-lead .frame-phone .device-phone { width: min(260px, 46%); }
.frame-phone .device-screen,
.project-media.is-phone .device-screen {
  width: 100%;
  height: auto;
  border-radius: 20px;
}
.frame-phone .img-fit,
.project-media.is-phone .img-fit { --shot-max-h: min(28rem, 68vh); }
.frame-phone .img-fit img,
.project-media.is-phone .img-fit img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(28rem, 68vh);
}

/* browser — a windowed mockup centred in the card with even breathing room
   around it (not full-bleed), a small chrome bar, and the screenshot covering
   the screen area (object-fit: cover, anchored top — see .device-screen img). */
.thumb.frame-browser {
  place-items: center; padding: 22px;
  background:
    radial-gradient(120% 95% at 50% -10%, rgba(255, 255, 255, 0.8), transparent 60%),
    linear-gradient(165deg, #ECE7DD, #D6CDBD);
}
.frame-browser .device-browser {
  width: 100%; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.5);
}
.frame-browser .device-bar { flex: 0 0 auto; display: flex; gap: 4px; align-items: center; padding: 5px 10px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.frame-browser .device-bar i { width: 5px; height: 5px; border-radius: 50%; background: #cfc8ba; }
.frame-browser .device-bar i:first-child { background: var(--accent-warm); }
.frame-browser .device-screen { flex: 1 1 auto; width: 100%; height: 158px; }

/* Explore: lead card spans the row so the first project reads as the feature */
@media (min-width: 761px) {
  .work-grid .work.work-lead {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: stretch;
  }
  .work-grid .work.work-lead .thumb {
    aspect-ratio: auto;
    min-height: 300px;
    height: 100%;
  }
  .work-grid .work.work-lead .thumb.frame-phone {
    min-height: 0;
    height: auto;
  }
  .work-grid .work.work-lead .body {
    justify-content: center;
    padding: 36px 36px 36px 8px;
  }
  .work-grid .work.work-lead h3 { font-size: 1.75rem; }
  .work-grid .work.work-lead .work-blurb { -webkit-line-clamp: 5; font-size: 1.02rem; }
}

.work-more { margin-top: 36px; }
.work-more .btn { margin-top: 0; }

.feat.feat-lead .feat-copy h3 { font-size: clamp(2rem, 4.2vw, 3rem); }

/* =============================================================================
   RESPONSIVE PASS — phone + tablet
   ===========================================================================*/
@media (max-width: 760px) {
  :root { --pad: 20px; }
  body { font-size: 16px; }

  .nav .wrap { height: 60px; }
  .nav-links { top: 60px; }
  .brand { font-size: 1.08rem; gap: 7px; }
  .brand .bmark { width: 22px; height: 22px; }

  section { padding: 56px 0; }
  #main > section:first-child { padding-top: 28px; }
  .sec-head { max-width: none; }
  .sec-label { margin-bottom: 12px; }
  h2 { font-size: clamp(1.55rem, 7vw, 2rem); max-width: 100%; }
  .sec-intro { margin-top: 14px; font-size: 1rem; }

  .eyebrow { font-size: 0.7rem; margin-bottom: 12px; }
  .hero { padding: 10px 0 32px; min-height: 0; }
  h1.hero-title { font-size: clamp(2rem, 9vw, 2.55rem); line-height: 1.05; max-width: 100%; }
  h1.hero-title [data-hero="titleLead"] { display: inline; }
  .hero-mark { width: min(86vw, 300px); gap: 18px; margin: 22px auto 14px; }
  .hero-sub { margin: 14px 0 18px; font-size: 1.12rem; max-width: none; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .hero-cta .btn { width: 100%; max-width: 100%; }

  .cards, .steps, .price-grid, .work-grid, .quote-grid { margin-top: 32px; }
  .card { padding: 24px 20px; }
  .price-card { padding: 26px 22px; }
  .price-card .price { font-size: 2.1rem; }

  .feat-list { gap: 48px; margin-top: 32px; }
  .feat, .feat.flip { gap: 18px; }
  .feat-copy h3 { font-size: 1.55rem; }
  .feat-media.is-phone .pm-phone { width: min(220px, 72%); }
  .work-grid .work.work-lead .body { padding: 22px 20px 24px; }

  .quote-form { padding: 20px; }
  .contact-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .contact-list .v { text-align: left; word-break: break-word; }

  .project-detail { padding: 88px 0 56px; }
  .project-hero h1 { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .project-lead { font-size: 1.05rem; }
  .project-media { margin: 32px 0; padding: 14px; }
  .project-cta { padding: 32px 20px; }
  .embed-viewport { aspect-ratio: 16 / 10; }

  footer { padding: 36px 0 28px; }
  footer .wrap { flex-direction: column; align-items: flex-start; gap: 12px; }

  .home-cta-sub { font-size: 1rem; margin: 14px auto 24px; }
}

@media (max-width: 640px) {
  h1.hero-title { max-width: 100%; }
}

/* =============================================================================
   STORE — image-first catalog and a two-column product page
   ===========================================================================*/
.store-page { padding: 120px 0 88px; }
.store-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.store-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.store-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.store-chip {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
}
.store-chip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 36px 22px;
  margin-top: 22px;
}
.store-card { min-width: 0; }
.store-card-link { color: inherit; text-decoration: none; display: block; }
.store-shot {
  position: relative;
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.store-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.store-card:hover .store-shot img { transform: scale(1.045); }
.store-shot.is-empty {
  background:
    radial-gradient(80% 70% at 50% 42%, #fff, var(--paper-2));
}
.store-shot.is-empty > span {
  position: absolute;
  inset: 28% 30%;
  border: 1.5px solid var(--line);
  border-radius: 12px;
}
.store-badge {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 12px;
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.store-copy { padding: 14px 4px 0; }
.store-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.store-copy h3 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.store-row .store-price {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  white-space: nowrap;
}
.store-cat {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 0.84rem;
}
.store-card.is-sold .store-shot img { filter: grayscale(0.35); }
.store-section { margin-top: 52px; }
.store-section:first-child { margin-top: 28px; }
.store-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 28px;
  margin-bottom: 18px;
}
.store-section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  letter-spacing: -0.03em;
}
.store-section-head p { color: var(--ink-soft); margin-top: 6px; max-width: 48ch; }
.store-section-link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.store-section-link:hover { text-decoration: underline; }
.store-section-empty { color: var(--ink-soft); margin: 0; }
.store-note {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  max-width: 62ch;
}
.store-empty { grid-column: 1 / -1; }
.store-empty p { margin-top: 18px; color: var(--ink-soft); }
.store-empty-shelf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 180px));
  gap: 16px;
}
.store-empty-shelf span {
  aspect-ratio: 1;
  border-radius: 18px;
  border: 1px dashed var(--line);
  background: rgba(255, 255, 255, 0.45);
}

/* Product page: photo beside the buy column, details underneath. */
.store-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.9fr);
  gap: 28px 56px;
  align-items: start;
}
.store-pdp .store-shot { border-radius: 22px; }
.store-buy { position: sticky; top: 96px; }
.store-buy h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 8px 0 10px;
}
.store-price-lg {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.store-blurb { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.55; max-width: 38ch; }
.store-buy .btn { width: 100%; margin-top: 22px; }
.store-buy .btn[disabled] {
  opacity: 0.55;
  cursor: default;
  background: var(--ink-soft);
  border-color: var(--ink-soft);
  color: #fff;
}
.store-order {
  margin-top: 8px;
  padding: 0;
  background: transparent;
  border: none;
}
.store-order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.store-order .form-row { margin-bottom: 12px; }
.store-qty { max-width: 7.5rem; }
.store-order textarea { min-height: 88px; }
.store-details {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  max-width: 68ch;
}
.store-details h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin-bottom: 12px;
}
.store-details p { margin: 0 0 1rem; font-size: 1.05rem; }
@media (max-width: 800px) {
  .store-pdp { grid-template-columns: 1fr; gap: 22px; }
  .store-buy { position: static; }
  .store-order-grid { grid-template-columns: 1fr; }
  .store-empty-shelf { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .store-page { padding: 104px 0 72px; }
  .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .store-copy h3 { font-size: 0.98rem; }
}

@media (max-width: 480px) {
  .nav-toggle { width: 40px; height: 40px; }
  .quote-form { padding: 16px; }
  .faq-item summary { font-size: 1.02rem; padding: 18px 0; }
}