:root {
    --bg: #000000;
    --bg-deep: #000000;
    --ink: #ffffff;
    --ink-dim: rgba(255,255,255,0.55);
    --ink-faint: rgba(255,255,255,0.25);
    --blood: #c8102e;
    --blood-deep: #8b0a1f;
    --gold: #d4a574;
    --grain-opacity: 0.04;
    --suit-base: 0.30;
    --btn-secondary-bg: rgba(255, 255, 255, 0.04);
    --btn-secondary-border: rgba(255,255,255,0.15);
    --divider: rgba(255, 255, 255, 0.1);
    --overlay-bg: rgba(0, 0, 0, 0.85);
    --overlay-border: rgba(255, 255, 255, 0.08);
  }

  html[data-theme="light"] {
    --bg: #f3ece0;
    --bg-deep: #e8dec9;
    --ink: #2a1810;
    --ink-dim: rgba(42, 24, 16, 0.65);
    --ink-faint: rgba(42, 24, 16, 0.40);
    --blood: #a8112a;
    --blood-deep: #7a0a1f;
    --grain-opacity: 0.09;
    --suit-base: 0.22;
    --btn-secondary-bg: rgba(42, 24, 16, 0.03);
    --btn-secondary-border: rgba(42, 24, 16, 0.18);
    --divider: rgba(42, 24, 16, 0.12);
    --overlay-bg: rgba(243, 236, 224, 0.92);
    --overlay-border: rgba(42, 24, 16, 0.12);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html, body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    min-height: 100vh;
    transition: background 0.5s ease, color 0.5s ease;
  }

  /* Subtle red ambient glows scattered through the page — only visible in dark
     mode, sits behind everything, adds depth without being obvious. */
  /* Selection-farge — matcher brand-tema i stedet for blå default */
  ::selection {
    background: rgba(200, 16, 46, 0.25);
    color: var(--ink);
  }
  ::-moz-selection {
    background: rgba(200, 16, 46, 0.25);
    color: var(--ink);
  }
  html[data-theme="light"] ::selection {
    background: rgba(168, 17, 42, 0.20);
    color: var(--ink);
  }
  html[data-theme="light"] ::-moz-selection {
    background: rgba(168, 17, 42, 0.20);
    color: var(--ink);
  }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(ellipse 60% 40% at 15% 10%, rgba(200, 16, 46, 0.14), transparent 60%),
      radial-gradient(ellipse 50% 45% at 85% 35%, rgba(200, 16, 46, 0.11), transparent 65%),
      radial-gradient(ellipse 55% 40% at 20% 70%, rgba(200, 16, 46, 0.09), transparent 60%),
      radial-gradient(ellipse 50% 40% at 90% 95%, rgba(200, 16, 46, 0.12), transparent 60%);
    transition: opacity 0.5s ease;
  }
  html[data-theme="light"] body::before {
    opacity: 0;
  }

  body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  nav {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    padding: 12px 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 36px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .logo {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.35em;
    color: var(--ink);
    padding-right: 28px;
    border-right: 1px solid var(--divider);
    white-space: nowrap;
  }
  .logo span {
    color: var(--blood);
    display: inline-block;
    font-size: 0.65em;
    margin: 0 0.05em;
    transform: translateY(-1px);
  }

  .nav-links {
    display: flex;
    gap: 28px;
    list-style: none;
  }

  .nav-links a {
    color: var(--ink-faint);
    text-decoration: none;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 400;
    transition: color 0.3s;
  }
  .nav-links a:hover { color: var(--ink-dim); }
  .nav-links a.active { color: var(--ink); }
  .nav-links a.active:hover { color: var(--ink); }

  .nav-clock {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 24px;
    border-left: 1px solid var(--divider);
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-faint);
    white-space: nowrap;
  }
  .clock-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
    animation: clockPulse 1.6s ease-in-out infinite;
  }
  .clock-label { color: var(--ink-dim); }
  .clock-time {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    min-width: 64px;
  }
  @keyframes clockPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.85); }
  }

  /* ============== THEME TOGGLE ============== */
  .theme-toggle {
    background: transparent;
    border: none;
    color: var(--ink-dim);
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.3s ease, transform 0.4s ease;
    margin-left: 4px;
  }
  .theme-toggle:hover {
    color: var(--ink);
    transform: rotate(20deg);
  }
  .theme-toggle svg {
    width: 16px;
    height: 16px;
    display: block;
  }
  .theme-toggle .icon-moon { display: none; }
  html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
  html[data-theme="light"] .theme-toggle .icon-moon { display: block; }

  /* ============== HAMBURGER + OVERLAY ============== */
  .menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    width: 32px;
    height: 32px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    position: relative;
    z-index: 110;
  }
  .menu-bar {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.35s ease, opacity 0.25s ease;
    transform-origin: center;
  }
  body.menu-open .menu-bar:nth-child(1) {
    transform: translateY(3.25px) rotate(45deg);
  }
  body.menu-open .menu-bar:nth-child(2) {
    transform: translateY(-3.25px) rotate(-45deg);
  }

  .menu-overlay {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    z-index: 90;
    width: calc(100% - 40px);
    max-width: 360px;
    padding: 24px 28px;
    background: var(--overlay-bg);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--overlay-border);
    border-radius: 18px;
    box-shadow:
      0 16px 40px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
  }
  body.menu-open .menu-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .menu-overlay-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 0;
    margin: 0;
  }
  .menu-overlay-links li {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
  body.menu-open .menu-overlay-links li {
    opacity: 1;
    transform: translateY(0);
  }
  body.menu-open .menu-overlay-links li:nth-child(1) { transition-delay: 0.06s; }
  body.menu-open .menu-overlay-links li:nth-child(2) { transition-delay: 0.10s; }
  body.menu-open .menu-overlay-links li:nth-child(3) { transition-delay: 0.14s; }
  body.menu-open .menu-overlay-links li:nth-child(4) { transition-delay: 0.18s; }
  body.menu-open .menu-overlay-links li:nth-child(5) { transition-delay: 0.22s; }

  .menu-overlay-links a {
    display: block;
    font-family: 'Cinzel', serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-faint);
    text-decoration: none;
    padding: 14px 8px;
    border-bottom: 1px solid var(--overlay-border);
    transition: color 0.3s ease, padding-left 0.3s ease;
  }
  .menu-overlay-links li:last-child a { border-bottom: none; }
  .menu-overlay-links a.active { color: var(--ink); }
  .menu-overlay-links a:hover {
    color: var(--ink);
    padding-left: 14px;
  }

  /* ============== HERO (text only) ============== */
  .hero {
    position: relative;
    min-height: 82vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 80px 40px;
    text-align: center;
  }

  .hero-content {
    position: relative;
    z-index: 3;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-eyebrow {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.6em;
    color: var(--blood);
    margin-bottom: 40px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeUp 1.2s ease-out 0.6s forwards;
  }

  .hero-eyebrow::before {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--blood);
    margin-right: 20px;
  }

  h1.hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(48px, 7vw, 110px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 40px;
  }

  h1.hero-title .line { display: block; overflow: hidden; }
  h1.hero-title .line span {
    display: inline-block;
    transform: translateY(110%);
    animation: revealLine 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  h1.hero-title .line:nth-child(1) span { animation-delay: 1s; }
  h1.hero-title .line:nth-child(2) span { animation-delay: 1.3s; }
  h1.hero-title .line:nth-child(3) span { animation-delay: 1.6s; }

  h1.hero-title em {
    font-style: italic;
    color: var(--blood);
    font-weight: 500;
    position: relative;
  }
  h1.hero-title em::after {
    content: '';
    position: absolute;
    left: 0; bottom: -4px;
    width: 100%;
    height: 1px;
    background: var(--blood);
    transform: scaleX(0);
    transform-origin: left;
    animation: drawLine 1.2s ease-out 2.6s forwards;
  }

  .hero-subtitle {
    font-family: 'Cinzel', serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 2.2;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-faint);
    max-width: 560px;
    margin: 0 auto 48px;
    opacity: 0;
    animation: fadeUp 1.2s ease-out 2.2s forwards;
  }

  .hero-cta-group {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeUp 1.2s ease-out 2.6s forwards;
  }

  .btn-primary {
    background: var(--blood);
    color: #ffffff;
    border: none;
    padding: 18px 36px;
    border-radius: 100px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s;
  }
  a.btn-primary, a.btn-secondary {
    display: inline-block;
    text-decoration: none;
    text-align: center;
  }
  html[data-theme="light"] .btn-primary {
    color: #ffffff;
  }
  .btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--blood-deep);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .btn-primary:hover::before { transform: translateY(0); }
  .btn-primary span { position: relative; z-index: 1; }

  .btn-secondary {
    background: var(--btn-secondary-bg);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    color: var(--ink);
    border: 1px solid var(--btn-secondary-border);
    padding: 18px 36px;
    border-radius: 100px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
  }
  .btn-secondary:hover {
    background: var(--btn-secondary-bg);
    border-color: var(--ink);
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes revealLine { to { transform: translateY(0); } }
  @keyframes drawLine { to { transform: scaleX(1); } }

  .side-text {
    position: absolute;
    z-index: 4;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 0.5em;
    color: var(--ink-faint);
    text-transform: uppercase;
    writing-mode: vertical-rl;
  }
  .side-text.right { right: 32px; top: 50%; transform: translateY(-50%); }

  /* The services grid becomes 2-column at 1024px and 1-column at 768px.
     Keep "No. 12 — The Queen" visible but pull it out toward the edge
     and shrink it so it never overlaps the cards. */
  @media (max-width: 1280px) {
    .services-section .side-text.right { right: 12px; }
  }
  @media (max-width: 1024px) {
    .services-section .side-text.right {
      right: 6px;
      font-size: 9px;
      letter-spacing: 0.4em;
    }
  }
  @media (max-width: 768px) {
    .services-section .side-text.right {
      right: 4px;
      font-size: 8px;
      letter-spacing: 0.35em;
      opacity: 0.7;
    }
  }

  .corner {
    position: absolute;
    z-index: 4;
    font-family: 'Cinzel', serif;
    color: var(--blood);
    font-size: 22px;
    opacity: 0.5;
  }
  .corner.tl { top: 100px; left: 60px; }
  .corner.tr { top: 100px; right: 60px; }
  .corner.bl { bottom: 60px; left: 60px; }
  .corner.br { bottom: 60px; right: 60px; }

  .scroll-hint {
    position: absolute;
    bottom: 32px;
    left: 60px;
    z-index: 4;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 0.4em;
    color: var(--ink-faint);
    text-transform: uppercase;
    opacity: 0;
    animation: fadeUp 1.2s ease-out 3s forwards;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .scroll-hint::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: var(--blood);
    transform: scaleX(0);
    transform-origin: left;
    animation: scrollLineFill 2.4s cubic-bezier(0.65, 0, 0.35, 1) 3.4s infinite;
  }

  @keyframes scrollLineFill {
    0%   { transform: scaleX(0); transform-origin: left; }
    45%  { transform: scaleX(1); transform-origin: left; }
    55%  { transform: scaleX(1); transform-origin: right; }
    100% { transform: scaleX(0); transform-origin: right; }
  }

  .floating-suit {
    position: absolute;
    color: var(--blood);
    opacity: 0.30;
    font-family: serif;
    pointer-events: none;
    user-select: none;
    z-index: 1;
  }
  .floating-suit.s1 { top: 15%; right: 12%; font-size: 80px; animation: float1 12s ease-in-out infinite, pulse1 6s ease-in-out infinite; }
  .floating-suit.s2 { top: 65%; right: 18%; font-size: 100px; animation: float2 15s ease-in-out infinite, pulse2 8s ease-in-out infinite; }
  .floating-suit.s3 { top: 40%; right: 8%; font-size: 60px; animation: float1 10s ease-in-out infinite reverse, pulse1 7s ease-in-out infinite 1s; }
  .floating-suit.s4 { bottom: 20%; right: 30%; font-size: 50px; animation: float2 14s ease-in-out infinite, pulse2 9s ease-in-out infinite 2s; }

  @keyframes float1 {
    0%, 100% { transform: translate(0,0) rotate(0deg); }
    50% { transform: translate(20px, -30px) rotate(10deg); }
  }
  @keyframes float2 {
    0%, 100% { transform: translate(0,0) rotate(0deg); }
    50% { transform: translate(-25px, 20px) rotate(-15deg); }
  }
  @keyframes pulse1 {
    0%, 100% { opacity: 0.15; }
    50%      { opacity: 0.42; }
  }
  @keyframes pulse2 {
    0%, 100% { opacity: 0.20; }
    50%      { opacity: 0.48; }
  }

  /* ============== TABLET/MOBILE ============== */
  @media (max-width: 1024px) {
    nav {
      padding: 10px 10px 10px 22px;
      gap: 14px;
    }
    .nav-links { display: none; }
    .nav-clock {
      padding-left: 14px;
      border-left: 1px solid var(--divider);
      gap: 6px;
      font-size: 9px;
      letter-spacing: 0.15em;
    }
    .nav-clock .clock-time { min-width: 56px; font-size: 10px; }
    .logo {
      padding-right: 0;
      border-right: none;
    }
    .menu-toggle { display: flex; }

    .hero {
      padding: 140px 40px 30px;
      align-items: center;
      justify-content: flex-start;
      text-align: center;
      min-height: 78vh;
    }
    .hero-content {
      max-width: 700px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 0;
    }
    .hero-eyebrow { justify-content: center; }
    h1.hero-title {
      font-size: clamp(56px, 10vw, 96px);
      text-align: center;
    }
    .hero-subtitle {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }
    .hero-cta-group {
      justify-content: center;
    }

    /* Chat-demo sits right under the hero buttons on medium screens.
       Cap the stage width so the box doesn't stretch edge-to-edge. */
    .chat-demo { padding: 0 32px 50px; }
    .chat-demo-stage { max-width: 380px; }
    .chat-box { padding: 12px 16px 10px; border-radius: 16px; }
    .chat-text-area { font-size: 13px; min-height: 28px; padding: 2px 2px 8px; line-height: 1.4; }
    .chat-toolbar { gap: 8px; padding-top: 2px; }
    .chat-tool { width: 18px; height: 18px; }
    .chat-tool svg { width: 15px; height: 15px; }
    .chat-divider { height: 14px; }
    .chat-mic { width: 26px; height: 26px; }
    .chat-mic svg { width: 12px; height: 12px; }
  }

  @media (max-width: 768px) {
    nav {
      top: 18px;
      padding: 8px 8px 8px 22px;
    }
    .logo { font-size: 12px; }
    .corner { display: none; }
    .hero .side-text { display: none; }

    .hero {
      padding: 160px 24px 12px;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      text-align: center;
    }

    .hero-content {
      padding-top: 0;
      margin: 0 auto;
      max-width: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .hero-eyebrow {
      margin-bottom: 28px;
      justify-content: center;
      display: flex;
    }
    .hero-eyebrow::before { display: none; }

    h1.hero-title {
      font-size: clamp(54px, 13vw, 80px);
      margin-bottom: 28px;
      text-align: center;
      width: 100%;
    }
    h1.hero-title .line { text-align: center; }

    .hero-subtitle {
      font-size: 10px;
      letter-spacing: 0.25em;
      line-height: 2;
      margin: 0 auto 36px;
      text-align: center;
      max-width: 100%;
    }

    .hero-cta-group {
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: center;
      width: 100%;
      flex-wrap: wrap;
    }
    .btn-primary, .btn-secondary {
      width: auto;
      max-width: none;
      padding: 11px 20px;
      font-size: 8.5px;
      letter-spacing: 0.22em;
    }

    .scroll-hint { display: none; }
  }

  @media (max-width: 480px) {
    .hero {
      padding: 130px 20px 30px;
    }
    h1.hero-title { font-size: clamp(48px, 14vw, 68px); }
  }

  /* ============== SERVICES SECTION ============== */
  :root {
    --card-bg: rgba(255, 255, 255, 0.02);
    --card-border: rgba(255, 255, 255, 0.07);
  }
  html[data-theme="light"] {
    --card-bg: rgba(42, 24, 16, 0.02);
    --card-border: rgba(42, 24, 16, 0.10);
  }

  .services-section {
    position: relative;
    padding: 140px 80px 80px;
    overflow: hidden;
  }
  .services-header {
    text-align: center;
    margin-bottom: 80px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  .services-eyebrow {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.6em;
    color: var(--blood);
    text-transform: uppercase;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }
  .services-eyebrow::before, .services-eyebrow::after {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--blood);
    opacity: 0.5;
  }
  .services-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(48px, 7vw, 88px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
  }
  .services-title em {
    color: var(--blood);
    font-style: italic;
  }
  .services-intro {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.7;
    color: var(--ink-dim);
    font-style: italic;
  }
  /* === SERVICES — SCROLL-LOCKED CARD SWAPPER ===
     The section is exactly one viewport tall. When the user scrolls while
     this section is in view, we intercept the scroll and swap to the next
     (or previous) card instead of moving the page. Once all 5 cards have
     been seen, normal scrolling resumes.
  */
  .services-grid {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    /* Single screen — no tall driver, the section locks scroll instead */
    height: auto;
  }

  .services-stage {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 60px;
    align-items: stretch;
    height: 560px;
    max-height: calc(100vh - 220px);
  }

  /* === STEP TRACKER (left rail) === */
  .services-tracker {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    height: 100%;
  }
  /* Line goes from just below first dot to just above last dot — all 5
     dots visible on screen because the rail height matches the stage. */
  .services-tracker-line {
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 50%;
    width: 1px;
    background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.14) 50%,
      rgba(255, 255, 255, 0.04) 100%);
    transform: translateX(-0.5px);
    pointer-events: none;
  }
  html[data-theme="light"] .services-tracker-line {
    background: linear-gradient(to bottom,
      rgba(42, 24, 16, 0.06) 0%,
      rgba(42, 24, 16, 0.18) 50%,
      rgba(42, 24, 16, 0.06) 100%);
  }

  .step-dot {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
    padding: 0;
    flex-shrink: 0;
    user-select: none;
  }
  html[data-theme="light"] .step-dot {
    background: var(--bg);
    border-color: rgba(42, 24, 16, 0.22);
    color: rgba(42, 24, 16, 0.55);
  }
  .step-dot:hover {
    border-color: rgba(255, 255, 255, 0.45);
    color: rgba(255, 255, 255, 0.9);
    transform: scale(1.08);
  }
  html[data-theme="light"] .step-dot:hover {
    border-color: rgba(42, 24, 16, 0.55);
    color: var(--ink);
  }
  .step-dot.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bg);
    transform: scale(1.05);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06);
  }
  html[data-theme="light"] .step-dot.is-active {
    box-shadow: 0 0 0 6px rgba(42, 24, 16, 0.06);
  }
  .step-dot.is-visited:not(.is-active) {
    border-color: rgba(255, 255, 255, 0.40);
    color: rgba(255, 255, 255, 0.85);
  }
  html[data-theme="light"] .step-dot.is-visited:not(.is-active) {
    border-color: rgba(42, 24, 16, 0.50);
    color: rgba(42, 24, 16, 0.85);
  }

  /* === CARD STACK — all 5 cards occupy the same space, only one visible === */
  .services-stack {
    position: relative;
    height: 100%;
    width: 100%;
  }

  .service-card {
    /* In the new layout each card is absolutely positioned so all 5
       occupy the same space — only the active one is visible. */
    position: absolute;
    inset: 0;
    padding: 64px 64px 56px;
    background:
      radial-gradient(circle at 100% 0%, rgba(200, 16, 46, 0.14), transparent 55%),
      radial-gradient(circle at 0% 100%, rgba(200, 16, 46, 0.07), transparent 50%),
      rgba(0, 0, 0, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Fade + lift transition between cards */
    opacity: 0;
    transform: translateY(24px);
    pointer-events: none;
    transition:
      opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.4s ease;
  }
  html[data-theme="light"] .service-card {
    background:
      radial-gradient(circle at 100% 0%, rgba(168, 17, 42, 0.16), transparent 55%),
      radial-gradient(circle at 0% 100%, rgba(168, 17, 42, 0.08), transparent 50%),
      rgba(255, 255, 255, 0.25);
    border-color: rgba(42, 24, 16, 0.18);
  }
  .service-card.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  html[data-theme="light"] .service-card {
    background:
      radial-gradient(circle at 100% 0%, rgba(168, 17, 42, 0.14), transparent 55%),
      radial-gradient(circle at 0% 100%, rgba(168, 17, 42, 0.07), transparent 50%);
    border-color: rgba(42, 24, 16, 0.18);
  }

  /* Stronger red glow on hover — intensifies the existing gradient */
  .service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 70% 30%, rgba(200, 16, 46, 0.16), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
  }
  .service-card:hover {
    border-color: rgba(200, 16, 46, 0.35);
  }
  .service-card:hover::before { opacity: 1; }

  /* Card-suit icon — absolutely positioned in the top-left corner of the box,
     so the title sits at the natural top of the content area. */
  .service-icon {
    position: absolute;
    top: 28px;
    left: 24px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    line-height: 1;
    color: var(--blood);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: auto;
    min-width: 28px;
    user-select: none;
    z-index: 2;
  }
  .service-icon.suit-symbol {
    font-size: 34px;
  }
  .service-icon.face-card {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-style: italic;
    font-size: 38px;
    letter-spacing: 0;
    line-height: 1;
  }

  /* For the split (wide) card, the icon sits over the left column,
     so the content needs the same top breathing room */
  .service-card.split .service-content {
    padding-top: 0;
  }

  .service-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 38px;
    line-height: 1.1;
    margin-bottom: 18px;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  html[data-theme="light"] .service-name {
    color: #2a1810;
  }
  .service-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 28px;
    max-width: 380px;
  }
  html[data-theme="light"] .service-desc {
    color: rgba(42, 24, 16, 0.85);
  }

  /* "See More →" link */
  .service-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    margin-top: auto;
    transition: color 0.3s ease, gap 0.3s ease;
    align-self: flex-start;
  }
  html[data-theme="light"] .service-link {
    color: rgba(42, 24, 16, 0.90);
  }
  .service-link:hover {
    color: var(--ink);
    gap: 14px;
  }
  .service-link .arrow {
    transition: transform 0.3s ease;
  }
  .service-link:hover .arrow {
    transform: translateX(2px);
  }

  /* Visual area for cards that have illustrations
     (the wide cards in rows 2 and 3 in the reference). */
  .service-visual {
    position: absolute;
    right: -10%;
    top: 50%;
    transform: translateY(-50%);
    width: 55%;
    height: 80%;
    opacity: 0.55;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .service-visual.placeholder {
    background: linear-gradient(135deg,
      rgba(200, 16, 46, 0.08) 0%,
      transparent 70%);
    border-radius: 16px;
  }

  /* Wide card with split layout: text on the left, illustration on the right.
     Used for cards that need to show a process or a feature graphic. */
  .service-card.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }
  .service-card.split .service-content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .service-card.split .service-illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  /* Laptop mockup image used in the Web Development card */
  .service-mockup {
    width: 100%;
    max-width: 520px;
    height: auto;
    display: block;
    object-fit: contain;
    /* Slight lift so the mockup feels like it floats inside the card */
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.45));
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .service-card:hover .service-mockup {
    transform: translateY(-3px) scale(1.015);
  }
  html[data-theme="light"] .service-mockup {
    filter: drop-shadow(0 16px 32px rgba(42, 24, 16, 0.20));
  }

  /* === Steps tracker (used inside SEO box) === */
  .steps-tracker {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 320px;
  }
  .step-row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 18px;
    align-items: flex-start;
    position: relative;
    padding-bottom: 22px;
  }
  .step-row:last-child { padding-bottom: 0; }

  /* Connector line between badges — neutral on every step */
  .step-row:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 36px;
    width: 2px;
    height: calc(100% + 6px);
    background: rgba(255, 255, 255, 0.12);
    z-index: 0;
  }

  .step-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-weight: 500;
    font-size: 14px;
    flex-shrink: 0;
    z-index: 1;
    position: relative;
    background: #ffffff;
    color: #0d0c0e;
  }

  .step-text {
    padding-top: 4px;
  }
  .step-title {
    font-family: 'Cinzel', serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 6px;
  }
  .step-desc {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
  }

  /* Light-mode tweaks for the tracker */
  html[data-theme="light"] .step-row:not(:last-child)::before {
    background: rgba(42, 24, 16, 0.18);
  }
  html[data-theme="light"] .step-badge {
    background: #2a1810;
    color: #f3ece0;
  }
  html[data-theme="light"] .step-title {
    color: #2a1810;
  }
  html[data-theme="light"] .step-desc {
    color: rgba(42, 24, 16, 0.80);
  }

  .services-section .floating-suit.ss1 { top: 8%; left: 6%; font-size: 70px; animation: float1 12s ease-in-out infinite, pulse1 6s ease-in-out infinite; }
  .services-section .floating-suit.ss2 { bottom: 12%; right: 8%; font-size: 90px; animation: float2 15s ease-in-out infinite, pulse2 8s ease-in-out infinite; }

  @media (max-width: 1024px) {
    .services-section { padding: 100px 40px 60px; }
    .services-stage {
      grid-template-columns: 72px 1fr;
      gap: 36px;
      height: 520px;
      max-height: calc(100vh - 200px);
    }
    .step-dot { width: 38px; height: 38px; font-size: 12px; }
    .services-header { margin-bottom: 60px; }
    .service-card { padding: 44px 44px 40px; border-radius: 22px; }
    .service-name { font-size: 32px; }
  }
  @media (max-width: 768px) {
    .services-section { padding: 24px 24px 50px; }
    .services-header { margin-bottom: 32px; }
    .services-eyebrow { font-size: 10px; letter-spacing: 0.4em; }
    .services-eyebrow::before, .services-eyebrow::after { width: 24px; }
    .services-intro { font-size: 15px; }

    /* On mobile: tracker becomes a horizontal bar above the cards */
    .services-stage {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      gap: 16px;
      height: auto;
      min-height: 540px;
      max-height: calc(100vh - 180px);
    }
    .services-tracker {
      flex-direction: row;
      justify-content: center;
      gap: 0;
      padding: 10px 16px;
      background: rgba(0, 0, 0, 0.72);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 100px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      width: fit-content;
      margin: 0 auto;
      height: auto;
      z-index: 5;
    }
    html[data-theme="light"] .services-tracker {
      background: rgba(243, 236, 224, 0.85);
      border-color: rgba(42, 24, 16, 0.10);
    }
    .services-tracker-line {
      top: 50%;
      bottom: auto;
      left: 24px;
      right: 24px;
      width: auto;
      height: 1px;
      transform: translateY(-0.5px);
      background: linear-gradient(to right,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0.04) 100%);
    }
    html[data-theme="light"] .services-tracker-line {
      background: linear-gradient(to right,
        rgba(42, 24, 16, 0.06) 0%,
        rgba(42, 24, 16, 0.18) 50%,
        rgba(42, 24, 16, 0.06) 100%);
    }
    .step-dot + .step-dot { margin-left: 14px; }
    .step-dot { width: 32px; height: 32px; font-size: 11px; }

    .service-card { padding: 36px 28px 32px; border-radius: 20px; }
    .service-icon { top: 22px; left: 20px; font-size: 28px; }
    .service-icon.suit-symbol { font-size: 30px; }
    .service-icon.face-card { font-size: 32px; }
    .service-name { font-size: 26px; }
  }
  @media (max-width: 480px) {
    .services-section { padding: 16px 20px 40px; }
    .services-stage { min-height: 480px; }
  }

  /* ============== PARTNERS BAR ============== */
  .partners {
    position: relative;
    padding: 80px 0 60px;
    background: transparent;
    overflow: hidden;
  }
  .partners-title {
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.55em;
    color: var(--blood);
    text-transform: uppercase;
    margin-bottom: 44px;
  }

  /* Container for the two rows */
  .partners-rows {
    display: flex;
    flex-direction: column;
    gap: 36px;
  }

  /* The viewport that masks edges (one per row) */
  .partners-viewport {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right,
      transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0%, black 15%, black 85%, transparent 100%);
  }

  /* The animated track. Two identical sets sit side-by-side.
     translate3d uses the GPU, keeps animation smooth. */
  .partners-track {
    display: flex;
    width: max-content;
    animation: partnersScroll 110s linear infinite;
  }
  /* Row going right (reverses the animation). Litt kortere tid fordi raden
     har kortere navn (mindre total bredde) og ville ellers føles tregere. */
  .partners-track.reverse {
    animation: partnersScroll 95s linear infinite reverse;
  }

  .partners-list {
    display: flex;
    align-items: center;
    gap: 64px;
    padding-right: 64px;
    flex-shrink: 0;
  }

  .partner-item {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-dim);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s ease, opacity 0.3s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 22px;
  }
  .partner-item:hover { color: var(--ink); }

  /* Logo image sits next to the partner name */
  .partner-item img {
    height: 22px;
    width: auto;
    display: block;
    opacity: 0.95;
    transition: opacity 0.3s ease, filter 0.3s ease;
    user-select: none;
    -webkit-user-drag: none;
    flex-shrink: 0;
  }
  .partner-item:hover img { opacity: 1; }

  /* For logos that are predominantly white — in light mode they would
     disappear. invert() flips white→black; hue-rotate keeps blue accents
     visually similar after inversion. */
  html[data-theme="light"] .partner-item img.light-invert {
    filter: invert(1) hue-rotate(180deg);
  }
  /* For logos that are predominantly black — in dark mode they would
     disappear. Invert to white. */
  html:not([data-theme="light"]) .partner-item img.dark-invert {
    filter: invert(1);
  }

  @keyframes partnersScroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }

  @media (max-width: 768px) {
    .partners { padding: 60px 0 40px; }
    .partners-title {
      font-size: 9px;
      letter-spacing: 0.4em;
      margin-bottom: 32px;
    }
    .partners-rows { gap: 28px; }
    .partners-list { gap: 44px; padding-right: 44px; }
    .partner-item { font-size: 12px; letter-spacing: 0.18em; height: 18px; gap: 8px; }
    .partner-item img { height: 18px; }
    .partners-track { animation-duration: 80s; }
    .partners-track.reverse { animation-duration: 70s; }
  }

  /* ============== CHAT INPUT DEMO ============== */
  /* A self-playing demo styled like a chat composer.
     Sits right under the hero buttons — visible on first view. */
  .chat-demo {
    position: relative;
    padding: 20px 24px 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .chat-demo-stage {
    position: relative;
    width: 100%;
    max-width: 880px;
  }

  .chat-box {
    position: relative;
    width: 100%;
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 28px;
    padding: 26px 28px 20px;
    box-shadow:
      0 24px 60px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
    /* Entry animation — fades up after the hero buttons have appeared,
       so the box doesn't just pop into place on page load. */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1.2s ease-out 3.2s forwards;
  }
  @media (prefers-reduced-motion: reduce) {
    .chat-box {
      opacity: 1;
      transform: none;
      animation: none;
    }
  }
  /* Light mode: chat box blends with the page background, with dark text
     and icons so everything stays visible after toggling the theme. */
  html[data-theme="light"] .chat-box {
    background: var(--bg);
    border-color: rgba(42, 24, 16, 0.18);
    box-shadow:
      0 24px 60px rgba(42, 24, 16, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
  html[data-theme="light"] .chat-text-area {
    color: rgba(42, 24, 16, 0.94);
  }
  html[data-theme="light"] .chat-placeholder {
    color: rgba(42, 24, 16, 0.45);
  }
  html[data-theme="light"] .chat-caret {
    background: rgba(42, 24, 16, 0.85);
  }
  html[data-theme="light"] .chat-tool {
    color: rgba(42, 24, 16, 0.6);
  }
  html[data-theme="light"] .chat-divider {
    background: rgba(42, 24, 16, 0.25);
  }
  /* Mic button stays a circle but flips: dark in light mode for contrast */
  html[data-theme="light"] .chat-mic {
    background: #2a1810;
    color: #f3ece0;
    box-shadow: 0 4px 14px rgba(42, 24, 16, 0.25);
  }

  .chat-text-area {
    position: relative;
    min-height: 56px;
    padding: 6px 4px 14px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.005em;
    word-break: break-word;
    text-align: left;
  }
  /* Placeholder sits absolutely so it doesn't push the typed text */
  .chat-placeholder {
    position: absolute;
    left: 4px;
    top: 6px;
    color: rgba(255, 255, 255, 0.38);
    transition: opacity 0.25s ease;
    pointer-events: none;
  }
  /* Static titanium-grey colour for the typed message in the chat box.
     Same hue as the thinking-section shimmer mid-tone, but no animation. */
  .chat-typed {
    color: #a3a3a3;
  }
  html[data-theme="light"] .chat-typed {
    color: #737373;
  }

  /* The shimmer keyframes are kept here because the thinking-section uses them. */
  @keyframes an-shimmer {
    from { background-position: 100% center; }
    to   { background-position: 0% center; }
  }

  /* === THINKING SECTION ===
     Small black strip under partners with shimmering "valetus ai is thinking..."
     Uses the same shimmer technique as the chat-demo typed text. */
  .thinking-section {
    background: transparent;
    padding: 130px 24px 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .thinking-text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 24px;
    letter-spacing: 0.02em;
    display: inline-block;
    background-size: 250% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(
      90deg,
      rgba(163, 163, 163, 1) 0%,
      rgba(163, 163, 163, 1) 40%,
      rgba(255, 255, 255, 1) 50%,
      rgba(163, 163, 163, 1) 60%,
      rgba(163, 163, 163, 1) 100%
    );
    background-repeat: no-repeat;
    animation: an-shimmer 2.4s linear infinite;
    user-select: none;
  }
  html[data-theme="light"] .thinking-text {
    background-image: linear-gradient(
      90deg,
      rgba(115, 115, 115, 1) 0%,
      rgba(115, 115, 115, 1) 40%,
      rgba(42, 24, 16, 1) 50%,
      rgba(115, 115, 115, 1) 60%,
      rgba(115, 115, 115, 1) 100%
    );
  }
  @media (max-width: 768px) {
    .thinking-section { padding: 90px 20px 50px; }
    .thinking-text { font-size: 19px; }
  }

  /* === WHAT WE DO ===
     Sits right under the thinking-section. The black background flows
     continuously from the thinking-strip so it reads like "the AI's
     answer" — what Valetus actually does, presented after the pause. */
  .whatwedo-section {
    position: relative;
    background: transparent;
    padding: 60px 24px 60px;
    overflow: hidden;
  }

  /* Floating card suits in the background of this section — matches the
     ambient suits used on the hero. Positioned around the edges so they
     never overlap with the content cards. */
  .whatwedo-section .floating-suit.ws1 { top: 6%;  left: 5%;  font-size: 70px;  animation: float1 13s ease-in-out infinite, pulse1 7s ease-in-out infinite; }
  .whatwedo-section .floating-suit.ws2 { top: 22%; right: 6%; font-size: 90px;  animation: float2 16s ease-in-out infinite, pulse2 9s ease-in-out infinite; }
  .whatwedo-section .floating-suit.ws3 { top: 58%; left: 4%;  font-size: 56px;  animation: float1 11s ease-in-out infinite reverse, pulse1 8s ease-in-out infinite 1s; }
  .whatwedo-section .floating-suit.ws4 { bottom: 8%; right: 8%; font-size: 100px; animation: float2 15s ease-in-out infinite, pulse2 10s ease-in-out infinite 2s; }
  .whatwedo-inner {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    text-align: center;
  }
  .whatwedo-eyebrow {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.55em;
    text-transform: uppercase;
    color: var(--blood);
    margin-bottom: 32px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
  }
  .whatwedo-eyebrow::before,
  .whatwedo-eyebrow::after {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--blood);
    opacity: 0.6;
  }
  .whatwedo-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(48px, 7vw, 92px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 auto 32px;
    max-width: 900px;
  }
  .whatwedo-title em {
    font-style: italic;
    color: var(--blood);
    font-weight: 400;
  }
  .whatwedo-intro {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 20px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.65);
    max-width: 640px;
    margin: 0 auto;
  }
  html[data-theme="light"] .whatwedo-intro {
    color: rgba(42, 24, 16, 0.75);
  }

  /* Subtle blood-red glow on the right edge — matches the page's ambient red */
  .whatwedo-section::before {
    content: '';
    position: absolute;
    top: 0; right: -10%;
    width: 50%; height: 100%;
    background: radial-gradient(ellipse 50% 60% at 100% 50%,
      rgba(200, 16, 46, 0.10),
      transparent 70%);
    pointer-events: none;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .whatwedo-section { padding: 40px 20px 40px; }
    .whatwedo-eyebrow { font-size: 10px; letter-spacing: 0.4em; margin-bottom: 24px; }
    .whatwedo-eyebrow::before,
    .whatwedo-eyebrow::after { width: 24px; }
    .whatwedo-title { margin-bottom: 24px; }
    .whatwedo-intro { font-size: 16px; }
  }

  /* === WHAT WE DO — BOXES ===
     Boxes that sit under the section heading, one per discipline. */
  .wwd-grid {
    max-width: 1100px;
    margin: 96px auto 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    position: relative;
    z-index: 2;
  }
  .wwd-card {
    position: relative;
    padding: 44px 44px 44px;
    background:
      radial-gradient(circle at 100% 0%, rgba(200, 16, 46, 0.12), transparent 55%),
      radial-gradient(circle at 0% 100%, rgba(200, 16, 46, 0.06), transparent 50%),
      rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    transition: border-color 0.4s ease, transform 0.4s ease;
    overflow: hidden;
    text-align: left;
    display: block;
  }
  .wwd-text { min-width: 0; }
  .wwd-text .wwd-desc { margin-bottom: 18px; }
  .wwd-text .wwd-desc:last-child { margin-bottom: 0; }
  html[data-theme="light"] .wwd-card {
    background:
      radial-gradient(circle at 100% 0%, rgba(168, 17, 42, 0.14), transparent 55%),
      radial-gradient(circle at 0% 100%, rgba(168, 17, 42, 0.07), transparent 50%),
      rgba(42, 24, 16, 0.02);
    border-color: rgba(42, 24, 16, 0.15);
  }
  .wwd-card:hover {
    border-color: rgba(200, 16, 46, 0.30);
    transform: translateY(-3px);
  }
  /* Card-suit icon in the top-left corner */
  .wwd-icon {
    font-family: 'Cormorant Garamond', serif;
    font-size: 36px;
    line-height: 1;
    color: var(--blood);
    margin-bottom: 24px;
    display: inline-block;
    user-select: none;
  }
  .wwd-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 14px;
  }
  .wwd-desc {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 36px;
    max-width: 640px;
  }
  html[data-theme="light"] .wwd-desc {
    color: rgba(42, 24, 16, 0.75);
  }

  /* "Plan:" linje — kort oppsummering av tilnærmingen */
  .wwd-plan {
    margin-top: 22px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: var(--ink-dim);
  }
  .wwd-plan-label {
    color: var(--blood);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-right: 10px;
    font-size: 11px;
  }
  html[data-theme="light"] .wwd-plan {
    color: rgba(42, 24, 16, 0.7);
  }

  /* "Read more"-lenke under tekst */
  .wwd-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.55;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-dim);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    transition: color 0.3s ease, border-color 0.3s ease, gap 0.3s ease;
  }
  .wwd-readmore svg {
    transition: transform 0.3s ease;
  }
  .wwd-readmore:hover {
    color: var(--blood);
    border-color: var(--blood);
    gap: 12px;
  }
  .wwd-readmore:hover svg {
    transform: translateX(2px);
  }
  html[data-theme="light"] .wwd-readmore {
    border-color: rgba(42, 24, 16, 0.18);
  }

  /* === SLIDER: viser kun én boks om gangen === */
  .wwd-slider {
    max-width: 1100px;
    margin: 96px auto 0;
    position: relative;
    z-index: 2;
  }
  .wwd-track {
    position: relative;
    min-height: 420px;
  }
  /* Alle kort er stablet oppå hverandre; kun den aktive vises */
  .wwd-track .wwd-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
    pointer-events: none;
  }
  .wwd-track .wwd-card.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s;
    pointer-events: auto;
    position: relative;
  }

  /* Placeholder-boks-visual (for boks 2-5 inntil innhold legges inn) */
  .wwd-ai-placeholder {
    min-height: 220px;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 16px;
    letter-spacing: 0.04em;
  }
  html[data-theme="light"] .wwd-ai-placeholder {
    border-color: rgba(42, 24, 16, 0.20);
    color: rgba(42, 24, 16, 0.45);
  }

  /* MacBook showcase image (boks 2 — Web Development)
     Holdes innenfor samme høyde som SEO-boksens kode-illustrasjon. */
  .wwd-showcase {
    width: 100%;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
  }
  .wwd-showcase::before {
    content: '';
    position: absolute;
    inset: 18% 12%;
    background: radial-gradient(ellipse at center, rgba(200, 16, 46, 0.18), transparent 65%);
    filter: blur(28px);
    z-index: 0;
    pointer-events: none;
  }
  .wwd-showcase-img {
    position: relative;
    z-index: 1;
    max-width: 92%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 4px;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5));
  }
  html[data-theme="light"] .wwd-showcase::before {
    background: radial-gradient(ellipse at center, rgba(168, 17, 42, 0.14), transparent 65%);
  }
  html[data-theme="light"] .wwd-showcase-img {
    filter: drop-shadow(0 10px 20px rgba(42, 24, 16, 0.25));
  }

  @media (max-width: 720px) {
    .wwd-showcase { height: 180px; }
  }

  /* === NAVIGASJONS-LINJE + PILER === */
  .wwd-nav {
    margin: 36px 0 0;
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
  }
  .wwd-progress {
    flex: 1;
    max-width: 360px;
    margin-left: 80px;
    height: 2px;
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
  }
  html[data-theme="light"] .wwd-progress {
    background: rgba(42, 24, 16, 0.85);
  }
  .wwd-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--blood);
    border-radius: 2px;
    transition: width 0.55s cubic-bezier(.4, .0, .2, 1);
    box-shadow: 0 0 8px rgba(200, 16, 46, 0.45);
  }
  /* Pil-gruppen — sitter til høyre for linjen med luft imellom */
  .wwd-arrows {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .wwd-arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
  .wwd-arrow:hover {
    border-color: var(--blood);
    background: rgba(200, 16, 46, 0.15);
    color: var(--blood);
  }
  .wwd-arrow-next:hover { transform: translateX(2px); }
  .wwd-arrow-prev:hover { transform: translateX(-2px); }
  html[data-theme="light"] .wwd-arrow {
    border-color: rgba(42, 24, 16, 0.25);
    background: rgba(42, 24, 16, 0.03);
  }

  @media (max-width: 720px) {
    .wwd-slider { margin-top: 64px; }
    .wwd-track { min-height: 520px; }
    .wwd-nav { margin-top: 6px; gap: 20px; }
    .wwd-progress { max-width: none; margin-left: 20px; }
    .wwd-arrows { gap: 10px; }
    .wwd-arrow { width: 40px; height: 40px; }
  }

  /* === VALETUS AI LIVE SECTION ============================================
     En enkel, sentrert seksjon der teksten "skrives" på skjermen.
     Bruker samme shimmer-stil som .thinking-section i toppen av siden. */
  .aichat-section {
    position: relative;
    background: transparent;
    padding: 120px 24px 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
  }

  .aichat-stream-centered {
    text-align: center;
    max-width: 900px;
    width: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Selve teksten — samme stil som .thinking-text */
  .aichat-text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 28px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    display: inline-block;
    user-select: none;
  }

  /* Shimmer på "valetus ai is thinking..." — identisk med .thinking-text */
  .aichat-text.thinking {
    background-size: 250% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(
      90deg,
      rgba(163, 163, 163, 1) 0%,
      rgba(163, 163, 163, 1) 40%,
      rgba(255, 255, 255, 1) 50%,
      rgba(163, 163, 163, 1) 60%,
      rgba(163, 163, 163, 1) 100%
    );
    background-repeat: no-repeat;
    animation: an-shimmer 2.4s linear infinite;
  }
  html[data-theme="light"] .aichat-text.thinking {
    background-image: linear-gradient(
      90deg,
      rgba(115, 115, 115, 1) 0%,
      rgba(115, 115, 115, 1) 40%,
      rgba(42, 24, 16, 1) 50%,
      rgba(115, 115, 115, 1) 60%,
      rgba(115, 115, 115, 1) 100%
    );
  }

  /* Når AI-en "svarer" — ren hvit/mørk tekst, ingen shimmer */
  .aichat-text.typing,
  .aichat-text.done {
    color: var(--ink);
  }

  /* Blinkende cursor mens den skriver */
  .aichat-text.typing::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 1em;
    background: var(--blood);
    margin-left: 4px;
    vertical-align: text-bottom;
    animation: aichatCursor 0.9s steps(2) infinite;
  }
  @keyframes aichatCursor {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
  }

  @media (max-width: 768px) {
    .aichat-section { padding: 84px 20px 90px; }
    .aichat-text { font-size: 22px; }
  }
  @media (max-width: 480px) {
    .aichat-text { font-size: 19px; }
  }

  /* === SCROLL-REVEAL TEXT SECTION ===
     Stor tekst der ordene avsløres ett etter ett mens man scroller. */
  .reveal-text-section {
    position: relative;
    background: transparent;
    padding: 20px 32px 95px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58vh;
  }
  .reveal-text-inner {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  .reveal-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 52px;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-align: center;
    margin: 0;
  }
  .rt-word {
    opacity: 0.12;
    transition: opacity 0.15s linear;
    display: inline-block;
  }
  .rt-word.rt-accent {
    font-style: italic;
    color: var(--blood);
  }

  /* Flytende suits i reveal-text */
  .reveal-text-section .rt-s1 { top: 12%; left: 6%; font-size: 70px; animation: float1 13s ease-in-out infinite, pulse1 7s ease-in-out infinite; }
  .reveal-text-section .rt-s2 { bottom: 14%; right: 8%; font-size: 90px; animation: float2 16s ease-in-out infinite, pulse2 9s ease-in-out infinite 1s; }
  .reveal-text-section .rt-s3 { top: 50%; right: 14%; font-size: 48px; animation: float1 11s ease-in-out infinite reverse, pulse1 8s ease-in-out infinite 2s; }

  /* Flytende suits i how-it-works */
  .how-section .how-s1 { top: 10%; left: 4%; font-size: 64px; animation: float2 14s ease-in-out infinite, pulse1 7s ease-in-out infinite; }
  .how-section .how-s2 { bottom: 12%; left: 10%; font-size: 80px; animation: float1 12s ease-in-out infinite, pulse2 9s ease-in-out infinite 1.5s; }
  .how-section .how-s3 { top: 30%; right: 5%; font-size: 56px; animation: float2 15s ease-in-out infinite reverse, pulse1 8s ease-in-out infinite 1s; }

  @media (max-width: 768px) {
    .reveal-text-section { padding: 16px 24px 70px; min-height: 50vh; }
    .reveal-text { font-size: 34px; line-height: 1.4; }
  }
  @media (max-width: 480px) {
    .reveal-text { font-size: 27px; }
  }

  /* === HOW IT WORKS SECTION ===
     Stegene 1-5 til venstre, presentatør-bilde til høyre. */
  .how-section {
    position: relative;
    background: transparent;
    padding: 80px 32px 140px;
    overflow: hidden;
  }
  .how-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  .how-header {
    margin-bottom: 72px;
  }
  .how-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .how-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 56px;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
  }
  .how-title em {
    font-style: italic;
    color: var(--blood);
  }

  .how-grid {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 72px;
    align-items: center;
  }

  /* Stegene */
  .how-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .how-step {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  .how-step:last-child {
    border-bottom: none;
  }
  html[data-theme="light"] .how-step {
    border-bottom-color: rgba(42, 24, 16, 0.10);
  }
  .how-step-num {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 32px;
    line-height: 1;
    color: var(--blood);
    flex-shrink: 0;
    min-width: 48px;
  }
  .how-step-body {
    flex: 1;
  }
  .how-step-title {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
  }
  .how-step-desc {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.5;
    color: var(--ink-dim);
    margin: 0;
  }

  /* Read more-lenke - grå (dempet) og mindre enn øvrig tekst */
  .read-more {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s ease, transform 0.3s ease;
  }
  .read-more:hover {
    color: var(--ink-dim);
    transform: translateX(4px);
  }
  .how-read-more { margin-top: 28px; }
  .partner-read-more { margin-top: 24px; }

  /* Bilde-siden */
  .how-visual {
    position: relative;
  }
  .how-image-placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    background:
      radial-gradient(circle at 50% 40%, rgba(200, 16, 46, 0.08), transparent 70%),
      rgba(255, 255, 255, 0.015);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
  }
  html[data-theme="light"] .how-image-placeholder {
    border-color: rgba(42, 24, 16, 0.2);
    background:
      radial-gradient(circle at 50% 40%, rgba(168, 17, 42, 0.08), transparent 70%),
      rgba(42, 24, 16, 0.02);
  }
  .how-placeholder-icon {
    font-family: 'Cormorant Garamond', serif;
    font-size: 72px;
    line-height: 1;
    color: var(--blood);
    opacity: 0.5;
  }
  .how-placeholder-text {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
  }
  html[data-theme="light"] .how-placeholder-text {
    color: rgba(42, 24, 16, 0.4);
  }
  /* Når et ekte bilde legges inn */
  .how-visual img {
    width: 100%;
    aspect-ratio: 1 / 1.1;
    object-fit: cover;
    border-radius: 20px;
    display: block;
  }

  /* Animert prosess-boks */
  .how-progress-box {
    width: 100%;
    border-radius: 22px;
    padding: 34px 32px;
    background:
      radial-gradient(circle at 50% 0%, rgba(200, 16, 46, 0.10), transparent 70%),
      rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  html[data-theme="light"] .how-progress-box {
    background:
      radial-gradient(circle at 50% 0%, rgba(168, 17, 42, 0.08), transparent 70%),
      rgba(42, 24, 16, 0.02);
    border-color: rgba(42, 24, 16, 0.12);
    box-shadow: 0 24px 60px rgba(42, 24, 16, 0.12);
  }
  .how-pb-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .how-pb-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 16px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  html[data-theme="light"] .how-pb-brand {
    border-bottom-color: rgba(42, 24, 16, 0.10);
  }
  .how-pb-diamond {
    color: var(--blood);
    font-size: 14px;
    line-height: 1;
    transform: translateY(0.5px);
  }
  .how-pb-brand-name {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .how-pb-title {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
  }
  .how-pb-count {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-dim);
    font-variant-numeric: tabular-nums;
  }
  .how-pb-track {
    width: 100%;
    height: 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.10);
    overflow: hidden;
  }
  html[data-theme="light"] .how-pb-track {
    background: rgba(42, 24, 16, 0.10);
  }
  .how-pb-fill {
    height: 100%;
    width: 0%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--blood), #e23a56);
    box-shadow: 0 0 12px rgba(200, 16, 46, 0.5);
    transition: width 0.2s linear;
  }
  .how-pb-text {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-dim);
    margin: 0;
    min-height: 3em;
  }
  .how-pb-button {
    margin-top: 4px;
    padding: 15px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.02em;
  }
  html[data-theme="light"] .how-pb-button {
    background: rgba(42, 24, 16, 0.04);
    border-color: rgba(42, 24, 16, 0.08);
  }

  @media (max-width: 900px) {
    .how-grid { grid-template-columns: 1fr; gap: 48px; }
    .how-visual { max-width: 420px; margin: 0 auto; }
    .how-title { font-size: 40px; }
    .how-header { margin-bottom: 48px; }
  }
  @media (max-width: 480px) {
    .how-section { padding: 60px 14px 100px; }
    .how-title { font-size: 32px; }
    .how-step { gap: 16px; padding: 18px 0; }
    .how-step-num { font-size: 26px; min-width: 38px; }
    .how-step-title { font-size: 16px; }
    .how-step-desc { font-size: 16px; }
    .how-visual { max-width: none; }
    .how-progress-box { padding: 30px 22px; }
  }

  /* === RUTER8 PARTNERSHIP SECTION ===
     Bilde til venstre, tekst om partnerskap + garantert vekst til høyre. */
  .partner-section {
    position: relative;
    background: transparent;
    padding: 80px 32px 140px;
    overflow: hidden;
  }
  .partner-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  .partner-grid {
    display: block;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
  }
  .partner-text-col { width: 100%; }
  .partner-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .partner-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 52px;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 28px;
  }
  .partner-title em {
    font-style: italic;
    color: var(--blood);
  }
  .partner-text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 20px;
    line-height: 1.6;
    color: var(--ink-dim);
    margin: 0 auto 22px;
    max-width: 600px;
  }
  .partner-guarantee {
    margin: 36px auto 0;
    max-width: 600px;
    padding: 28px 32px;
    border-radius: 16px;
    border: 1px solid rgba(200, 16, 46, 0.25);
    background:
      radial-gradient(circle at 50% 0%, rgba(200, 16, 46, 0.07), transparent 70%),
      rgba(255, 255, 255, 0.015);
  }
  html[data-theme="light"] .partner-guarantee {
    border-color: rgba(168, 17, 42, 0.25);
    background:
      radial-gradient(circle at 50% 0%, rgba(168, 17, 42, 0.06), transparent 70%),
      rgba(42, 24, 16, 0.02);
  }
  .partner-guarantee-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--blood);
    margin: 0 0 10px;
  }
  .partner-guarantee-text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 19px;
    line-height: 1.5;
    color: var(--ink);
    margin: 0;
  }

  @media (max-width: 900px) {
    .partner-title { font-size: 40px; }
  }
  @media (max-width: 480px) {
    .partner-section { padding: 60px 24px 100px; }
    .partner-title { font-size: 32px; }
    .partner-text { font-size: 18px; }
    .partner-guarantee { padding: 22px 24px; }
    .partner-guarantee-text { font-size: 17px; }
  }

  /* === FOUNDERS SECTION ===
     Om oss - to founders med beskrivelse og n\u00f8kkelord-tags. */
  .founders-section {
    position: relative;
    background: transparent;
    padding: 80px 32px 140px;
    overflow: hidden;
  }
  .founders-inner {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  .founders-header {
    text-align: center;
    margin-bottom: 72px;
  }
  .founders-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .founders-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 56px;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
  }
  .founders-title em {
    font-style: italic;
    color: var(--blood);
  }
  .founders-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  /* Flytende kortsymboler i founders-seksjonen */
  .founders-section .fs1 { top: 8%;  left: 5%;  font-size: 70px; animation: float1 13s ease-in-out infinite, pulse1 7s ease-in-out infinite; }
  .founders-section .fs2 { top: 18%; right: 6%; font-size: 90px; animation: float2 16s ease-in-out infinite, pulse2 9s ease-in-out infinite; }
  .founders-section .fs3 { bottom: 14%; left: 8%; font-size: 56px; animation: float1 11s ease-in-out infinite reverse, pulse1 8s ease-in-out infinite 1s; }
  .founders-section .fs4 { bottom: 10%; right: 7%; font-size: 100px; animation: float2 15s ease-in-out infinite, pulse2 10s ease-in-out infinite 2s; }

  .founder-card {
    position: relative;
    padding: 8px 4px;
  }
  .founder-status {
    position: absolute;
    top: 10px;
    right: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .founder-status.online {
    background: #2ecc71;
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5);
    animation: blink-green 2s ease-in-out infinite;
  }
  .founder-status.busy {
    background: var(--blood);
    box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.5);
    animation: blink-red 2s ease-in-out infinite;
  }
  @keyframes blink-green {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5); }
    50%      { opacity: 0.4; box-shadow: 0 0 0 8px rgba(46, 204, 113, 0); }
  }
  @keyframes blink-red {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.5); }
    50%      { opacity: 0.4; box-shadow: 0 0 0 8px rgba(200, 16, 46, 0); }
  }
  .founder-num {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 28px;
    line-height: 1;
    color: var(--blood);
    margin-bottom: 14px;
  }
  .founder-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 36px;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 8px;
  }
  .founder-role {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin: 0 0 24px;
  }
  .founder-bio {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 19px;
    line-height: 1.6;
    color: var(--ink-dim);
    margin: 0 0 28px;
  }
  .founder-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .founder-tag {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-dim);
    padding: 6px 13px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    transition: border-color 0.3s ease, color 0.3s ease;
  }
  .founder-tag:hover {
    border-color: rgba(200, 16, 46, 0.5);
    color: var(--ink);
  }
  html[data-theme="light"] .founder-tag {
    border-color: rgba(42, 24, 16, 0.16);
  }
  html[data-theme="light"] .founder-tag:hover {
    border-color: rgba(168, 17, 42, 0.5);
  }

  @media (max-width: 900px) {
    .founders-grid { grid-template-columns: 1fr; gap: 28px; }
    .founders-title { font-size: 40px; }
    .founders-header { margin-bottom: 48px; }
  }
  @media (max-width: 480px) {
    .founders-section { padding: 60px 24px 100px; }
    .founders-title { font-size: 32px; }
    .founder-name { font-size: 30px; }
    .founder-bio { font-size: 17px; }
  }

  /* === CLOSING CTA SECTION ===
     Avslutning - stor overskrift + to bokser (Book a Meeting / Contact Us). */
  .cta-section {
    position: relative;
    background: transparent;
    padding: 100px 32px 160px;
    overflow: hidden;
    text-align: center;
  }
  .cta-inner {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  /* Flytende kortsymboler i CTA-seksjonen */
  .cta-section .fs1 { top: 12%; left: 7%;  font-size: 72px;  animation: float1 13s ease-in-out infinite, pulse1 7s ease-in-out infinite; }
  .cta-section .fs2 { top: 20%; right: 8%; font-size: 90px;  animation: float2 16s ease-in-out infinite, pulse2 9s ease-in-out infinite; }
  .cta-section .fs3 { bottom: 16%; left: 10%; font-size: 56px; animation: float1 11s ease-in-out infinite reverse, pulse1 8s ease-in-out infinite 1s; }
  .cta-section .fs4 { bottom: 12%; right: 9%; font-size: 100px; animation: float2 15s ease-in-out infinite, pulse2 10s ease-in-out infinite 2s; }
  .cta-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 32px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .cta-title {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 64px;
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 24px;
  }
  .cta-title em {
    font-style: normal;
    color: var(--blood);
  }
  .cta-sub {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 22px;
    line-height: 1.5;
    color: var(--ink-dim);
    margin: 0 auto 56px;
    max-width: 560px;
  }
  .cta-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 720px;
    margin: 0 auto;
  }
  .cta-box {
    display: block;
    text-decoration: none;
    padding: 40px 32px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.015);
    transition: border-color 0.35s ease, transform 0.35s ease, background 0.35s ease;
    text-align: left;
  }
  html[data-theme="light"] .cta-box {
    border-color: rgba(42, 24, 16, 0.12);
    background: rgba(42, 24, 16, 0.02);
  }
  .cta-box:hover {
    transform: translateY(-4px);
    border-color: rgba(200, 16, 46, 0.5);
    background: rgba(200, 16, 46, 0.04);
  }
  .cta-box-icon {
    font-family: serif;
    font-size: 30px;
    line-height: 1;
    color: var(--blood);
    margin-bottom: 18px;
  }
  .cta-box-title {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 8px;
  }
  .cta-box-desc {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 17px;
    line-height: 1.45;
    color: var(--ink-dim);
    margin: 0;
  }
  .cta-box-arrow {
    display: inline-block;
    margin-top: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--blood);
    transition: transform 0.3s ease;
  }
  .cta-box:hover .cta-box-arrow {
    transform: translateX(6px);
  }

  @media (max-width: 760px) {
    .cta-title { font-size: 42px; }
    .cta-boxes { grid-template-columns: 1fr; gap: 16px; }
  }
  @media (max-width: 480px) {
    .cta-section { padding: 70px 24px 110px; }
    .cta-title { font-size: 32px; }
    .cta-sub { font-size: 19px; margin-bottom: 40px; }
    .cta-box { padding: 32px 26px; }
  }

  /* === FOOTER ===
     Bunntekst med Valetus, lenker, lite kontaktskjema og rettigheter. */
  .site-footer {
    position: relative;
    background: transparent;
    padding: 80px 32px 0;
    overflow: hidden;
  }
  .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.3fr;
    gap: 56px;
  }
  .footer-brand-name {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 30px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 16px;
  }
  .footer-brand-name span {
    color: var(--blood);
    display: inline-block;
    font-size: 0.6em;
    margin: 0 0.08em;
    transform: translateY(-2px);
  }
  .footer-logo-big {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink);
    text-align: center;
    line-height: 0.9;
    font-size: clamp(48px, 11vw, 180px);
    margin: 0 0 56px;
    text-indent: -0.08em;
    white-space: nowrap;
    user-select: none;
    overflow: hidden;
  }
  .footer-logo-big span {
    color: var(--blood);
    display: inline-block;
    font-size: 0.5em;
    margin: 0 0.06em;
    transform: translateY(-0.18em);
  }
  @media (max-width: 600px) {
    .footer-logo-big {
      letter-spacing: 0.04em;
      font-size: clamp(40px, 15.5vw, 150px);
      text-indent: 0;
      padding: 0 6px;
    }
  }
  .footer-brand-tag {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.5;
    color: var(--ink-dim);
    margin: 0;
    max-width: 320px;
  }
  .footer-col-title {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 22px;
  }
  .footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
  }
  .footer-links a {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--ink-dim);
    text-decoration: none;
    transition: color 0.25s ease;
  }
  .footer-links a:hover { color: var(--blood); }
  .footer-policies-row {
    margin-top: 48px;
    padding-top: 36px;
    border-top: 1px solid var(--divider);
  }
  .footer-policies-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 40px;
  }
  .footer-policies-links a {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--ink-dim);
    text-decoration: none;
    transition: color 0.25s ease;
  }
  .footer-policies-links a:hover { color: var(--blood); }

  .footer-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .footer-form input,
  .footer-form textarea {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 13px 16px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.25s ease;
  }
  html[data-theme="light"] .footer-form input,
  html[data-theme="light"] .footer-form textarea {
    background: rgba(42, 24, 16, 0.03);
    border-color: rgba(42, 24, 16, 0.14);
  }
  .footer-form input::placeholder,
  .footer-form textarea::placeholder {
    color: var(--ink-faint);
  }
  .footer-form input:focus,
  .footer-form textarea:focus {
    outline: none;
    border-color: var(--blood);
  }
  .footer-form textarea {
    resize: vertical;
    min-height: 80px;
  }
  .footer-form button {
    align-self: flex-start;
    background: var(--blood);
    color: #ffffff;
    border: none;
    padding: 13px 30px;
    border-radius: 100px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  .footer-form button:hover { background: var(--blood-deep); }

  .footer-bottom {
    margin-top: 64px;
    padding: 28px 0 34px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
  }
  html[data-theme="light"] .footer-bottom {
    border-top-color: rgba(42, 24, 16, 0.08);
  }
  .footer-copy,
  .footer-legal {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: var(--ink-faint);
    margin: 0;
  }
  .footer-legal a {
    color: var(--ink-faint);
    text-decoration: none;
    transition: color 0.25s ease;
  }
  .footer-legal a:hover { color: var(--ink-dim); }

  @media (max-width: 860px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .footer-form-col { grid-column: 1 / -1; }
  }
  @media (max-width: 540px) {
    .site-footer { padding: 60px 24px 0; }
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
  }

  /* === THE KING SECTION ===================================================
     Dedicated section for showcasing a demo project. The King is the highest
     card in the deck — fits the visual theme. */
  .king-section {
    position: relative;
    background: transparent;
    padding: 110px 24px 160px;
    overflow: hidden;
  }
  .king-suit-bg {
    position: absolute;
    font-family: 'Cormorant Garamond', serif;
    font-size: 520px;
    line-height: 1;
    color: rgba(200, 16, 46, var(--suit-base));
    user-select: none;
    pointer-events: none;
    opacity: 0.06;
    top: 50%;
    left: 50%;
    /* Sentrering + parallax (beveger seg sakte motsatt vei av scroll for dybde) */
    transform: translate(-50%, calc(-50% + var(--scroll-y, 0px) * -0.08));
    z-index: 0;
    transition: opacity 0.6s ease;
  }
  html[data-theme="light"] .king-suit-bg {
    color: rgba(168, 17, 42, var(--suit-base));
  }

  .king-inner {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    text-align: center;
  }

  .king-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 80px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
  }
  .king-eyebrow::before,
  .king-eyebrow::after {
    content: '';
    width: 32px;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
  }
  html[data-theme="light"] .king-eyebrow::before,
  html[data-theme="light"] .king-eyebrow::after {
    background: rgba(42, 24, 16, 0.25);
  }

  .king-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 72px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 60px;
  }
  .king-title em {
    font-style: italic;
    color: var(--blood);
  }

  /* === KAROUSELL: ruller endeløst fra høyre til venstre === */
  .king-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 201;
    padding: 12px 0;
    /* Soft fade på begge sider så bildene ikke kuttes hardt */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  .king-carousel-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 28px;
    width: max-content;
    animation: kingScroll 120s linear infinite;
    animation-play-state: paused;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  /* Når karusellen kommer i syne, starter animasjonen */
  .king-carousel.is-visible .king-carousel-track {
    animation-play-state: running;
  }
  .king-carousel:hover .king-carousel-track {
    animation-play-state: paused;
  }
  @keyframes kingScroll {
    from { transform: translate3d(0, 0, 0); }
    /* -50% fordi vi har duplisert settet — looper sømløst */
    to   { transform: translate3d(-50%, 0, 0); }
  }

  .king-slide {
    flex-shrink: 0;
    width: 585px;
    height: 340px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background-color: #000000;
    background-image: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    transition: transform 0.4s ease, border-color 0.4s ease;
  }
  .king-slide:hover {
    transform: translateY(-4px);
    border-color: rgba(200, 16, 46, 0.4);
  }
  html[data-theme="light"] .king-slide {
    border-color: rgba(42, 24, 16, 0.15);
    background-color: #000000;
    background-image: none;
  }
  /* Placeholder-nummer for hver boks (byttes ut med <img>) */
  .king-slide-num {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 64px;
    color: rgba(255, 255, 255, 0.18);
    line-height: 1;
  }
  html[data-theme="light"] .king-slide-num {
    color: rgba(42, 24, 16, 0.25);
  }
  /* Når bilder legges inn — hele bildet vises (uten beskjæring) */
  .king-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  /* Variant: vis hele bildet skalert ned (for bilder som ikke matcher boks-ratio).
     Boksen er svart, så svart felt rundt smelter sømløst sammen. */
  .king-slide.king-slide--contain img {
    object-fit: contain;
    position: relative;
    z-index: 2;
  }

  /* Kode-bakgrunn bak bildet — to kolonner (venstre + høyre).
     Color picker-bildet ligger oppå (z-index 2) og dekker midten,
     mens kode-kolonnene fyller sidene. */
  .king-code-bg {
    position: absolute;
    top: 64px;
    bottom: 22px;
    left: 18px;
    right: 18px;
    font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
    font-size: 11px;
    line-height: 1.7;
    color: rgba(180, 180, 180, 0.55);
    margin: 0;
    padding: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    white-space: pre;
    text-align: left;
    user-select: none;
  }
  .king-code-bg .cd-c { color: rgba(140, 140, 140, 0.45); font-style: italic; }
  .king-code-bg .cd-p { color: rgba(200, 200, 200, 0.55); }
  .king-code-bg .cd-v { color: rgba(210, 210, 210, 0.62); }
  .king-code-bg .cd-k { color: rgba(190, 190, 190, 0.55); }
  .king-code-bg .cd-s { color: rgba(220, 220, 220, 0.65); }
  .king-code-bg .cd-n { color: rgba(220, 220, 220, 0.62); }

  /* === BOKS 4: BOOKING ===
     Bildet er portrettorientert, så vi viser det helt (contain) på en lys
     bakgrunn som matcher bildets egen lyse bakgrunn — ingen kutting. */
  .king-slide.king-slide--booking {
    background-color: #f3ece9;
  }
  html[data-theme="light"] .king-slide.king-slide--booking {
    background-color: #f3ece9;
  }
  .king-slide.king-slide--booking img {
    object-fit: contain;
  }

  /* === BOKS 10: FULL KODE-ILLUSTRASJON ===
     Sentrert kode som fyller boksen, med syntax-farger. */
  .king-slide.king-slide--code-full .king-code-bg--full {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    bottom: auto;
    width: auto;
    font-size: 13px;
    line-height: 1.75;
    color: rgba(200, 200, 200, 0.55);
  }
  .king-code-bg--full .cd-tag  { color: rgba(150, 200, 230, 0.55); }
  .king-code-bg--full .cd-attr { color: rgba(200, 180, 230, 0.55); }
  .king-code-bg--full .cd-str  { color: rgba(180, 220, 180, 0.60); }
  .king-code-bg--full .cd-k    { color: rgba(220, 200, 150, 0.55); }
  .king-code-bg--full .cd-n    { color: rgba(230, 180, 140, 0.60); }
  .king-code-bg--full .cd-c    { color: rgba(140, 140, 140, 0.50); font-style: italic; }

  @media (max-width: 768px) {
    .king-slide.king-slide--code-full .king-code-bg--full { font-size: 10px; top: 50px; line-height: 1.7; }
  }

  /* === BOKS 3: KODE + LOADER ===
     Kode-bakgrunn til venstre, loader-spinner + progressbar til høyre. */
  .king-slide.king-slide--code-loader .king-code-bg {
    right: 42%;
  }
  /* Sentrert loader (uten kode) */
  .king-slide.king-slide--loader-only .king-loader-center {
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    z-index: 1;
    pointer-events: none;
  }
  .king-loader {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 36%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    z-index: 2;
    pointer-events: none;
  }
  .king-loader-spinner {
    width: 56px;
    height: 56px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-top-color: var(--blood);
    border-radius: 50%;
    animation: kingSpin 1.4s linear infinite;
  }
  @keyframes kingSpin {
    to { transform: rotate(360deg); }
  }
  .king-loader-text {
    font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
    font-size: 11px;
    color: rgba(200, 200, 200, 0.55);
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }
  .king-loader-text::after {
    content: '';
    display: inline-block;
    width: 1ch;
    text-align: left;
    animation: kingDots 1.6s steps(4) infinite;
  }
  @keyframes kingDots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
  }
  .king-loader-bar {
    width: 100%;
    max-width: 160px;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
  }
  .king-loader-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    background: var(--blood);
    border-radius: 2px;
    animation: kingProgress 2.8s ease-in-out infinite;
  }
  @keyframes kingProgress {
    0%   { left: -30%; }
    100% { left: 100%; }
  }

  @media (max-width: 768px) {
    .king-loader-spinner { width: 44px; height: 44px; }
    .king-loader-text { font-size: 9px; }
    .king-loader-bar { max-width: 110px; }
  }

  @media (max-width: 768px) {
    .king-code-bg { font-size: 9px; line-height: 1.6; top: 50px; bottom: 16px; left: 12px; right: 12px; }
  }
  /* Tekst-overlay øverst i boksen — over bildet */
  .king-slide-label {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    z-index: 2;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffffff;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    pointer-events: none;
  }

  @media (max-width: 768px) {
    .king-section { padding: 84px 0 100px; }
    .king-inner { padding: 0 20px; }
    .king-title { font-size: 48px; margin-bottom: 40px; }
    .king-eyebrow { font-size: 10px; letter-spacing: 0.3em; margin-bottom: 56px; }
    .king-eyebrow::before, .king-eyebrow::after { width: 20px; }
    .king-suit-bg { font-size: 320px; }
    .king-slide { width: 430px; height: 250px; }
    .king-carousel-track { gap: 20px; animation-duration: 85s; }
    .king-slide-label { font-size: 9px; padding: 6px 10px; top: 10px; left: 10px; right: 10px; }
  }
  @media (max-width: 480px) {
    .king-title { font-size: 38px; }
    .king-slide { width: 340px; height: 198px; }
    .king-slide-num { font-size: 48px; }
  }

  /* === BOTTOM AREA: dashboard on the left, AI-message on the right === */
  .wwd-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 0;
    min-width: 0;
  }

  /* --- Mini-dashboard panel (left side) --- */
  .wwd-dash {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 14px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 16px;
  }
  html[data-theme="light"] .wwd-dash {
    background: rgba(42, 24, 16, 0.05);
    border-color: rgba(42, 24, 16, 0.10);
  }

  .wwd-stat {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 16px;
    position: relative;
  }
  html[data-theme="light"] .wwd-stat {
    background: rgba(42, 24, 16, 0.03);
    border-color: rgba(42, 24, 16, 0.10);
  }
  .wwd-stat-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(200, 16, 46, 0.12);
    border: 1px solid rgba(200, 16, 46, 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: var(--blood);
  }
  .wwd-stat-icon svg { width: 14px; height: 14px; }
  .wwd-stat-label {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 8px;
  }
  html[data-theme="light"] .wwd-stat-label {
    color: rgba(42, 24, 16, 0.55);
  }
  .wwd-stat-value {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .wwd-stat-pill {
    margin-left: auto;
    font-size: 10px;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 2px 8px;
    border-radius: 6px;
  }
  html[data-theme="light"] .wwd-stat-pill {
    color: rgba(42, 24, 16, 0.65);
    background: rgba(42, 24, 16, 0.04);
    border-color: rgba(42, 24, 16, 0.10);
  }
  .wwd-stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blood);
    box-shadow: 0 0 12px rgba(200, 16, 46, 0.6);
  }

  /* Trend chart fills the bottom row of the dashboard */
  .wwd-trend {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 16px 10px;
    min-height: 140px;
    display: flex;
    flex-direction: column;
  }
  html[data-theme="light"] .wwd-trend {
    background: rgba(42, 24, 16, 0.03);
    border-color: rgba(42, 24, 16, 0.10);
  }
  .wwd-trend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .wwd-trend-title {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
  }
  html[data-theme="light"] .wwd-trend-title {
    color: rgba(42, 24, 16, 0.55);
  }
  .wwd-trend-value {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 22px;
    color: var(--ink);
    margin-bottom: 2px;
  }
  .wwd-trend-sub {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 6px;
  }
  html[data-theme="light"] .wwd-trend-sub {
    color: rgba(42, 24, 16, 0.55);
  }
  .wwd-trend-svg {
    width: 100%;
    flex: 1;
    min-height: 50px;
    display: block;
  }

  /* --- AI message bubble (right side) --- */
  .wwd-ai {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
  }
  html[data-theme="light"] .wwd-ai {
    background: rgba(42, 24, 16, 0.05);
    border-color: rgba(42, 24, 16, 0.10);
  }
  .wwd-ai-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  html[data-theme="light"] .wwd-ai-header {
    border-bottom-color: rgba(42, 24, 16, 0.10);
  }
  .wwd-ai-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blood), var(--blood-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.05em;
    flex-shrink: 0;
  }
  .wwd-ai-name {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
  }
  html[data-theme="light"] .wwd-ai-name {
    color: rgba(42, 24, 16, 0.70);
  }
  .wwd-ai-status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: rgba(34, 197, 94, 0.95);
  }
  .wwd-ai-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
  }
  .wwd-ai-message {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
  }
  html[data-theme="light"] .wwd-ai-message {
    color: rgba(42, 24, 16, 0.85);
  }
  .wwd-ai-code {
    font-family: 'Courier New', monospace;
    font-size: 11.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 12px 14px;
    overflow: hidden;
    white-space: pre;
  }
  html[data-theme="light"] .wwd-ai-code {
    color: rgba(42, 24, 16, 0.82);
    background: rgba(42, 24, 16, 0.08);
    border-color: rgba(42, 24, 16, 0.10);
  }
  .wwd-ai-code .tok-tag    { color: #c8102e; }
  .wwd-ai-code .tok-attr   { color: #d4a574; }
  .wwd-ai-code .tok-str    { color: #a3a3a3; }
  .wwd-ai-code .tok-com    { color: rgba(255, 255, 255, 0.35); font-style: italic; }
  html[data-theme="light"] .wwd-ai-code .tok-com { color: rgba(42, 24, 16, 0.45); }
  html[data-theme="light"] .wwd-ai-code .tok-str { color: rgba(42, 24, 16, 0.65); }
  html[data-theme="light"] .wwd-ai-code .tok-attr { color: #8a5a12; }
  html[data-theme="light"] .wwd-ai-code .tok-tag  { color: #a8112a; }

  .wwd-ai-foot {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(34, 197, 94, 0.85);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .wwd-ai-foot::before {
    content: '↗';
    font-size: 13px;
  }

  @media (max-width: 1024px) {
    .wwd-card { grid-template-columns: 1fr; gap: 28px; }
    .wwd-body { grid-template-columns: 1fr; gap: 16px; }
  }
  @media (max-width: 768px) {
    .wwd-grid { margin-top: 56px; gap: 16px; }
    .wwd-card { padding: 32px 24px; border-radius: 20px; }
    .wwd-icon { font-size: 30px; margin-bottom: 18px; }
    .wwd-name { font-size: 30px; }
    .wwd-desc { font-size: 16px; margin-bottom: 24px; }
    .wwd-dash { padding: 12px; gap: 10px; }
    .wwd-stat { padding: 12px; }
    .wwd-stat-value { font-size: 16px; }
    .wwd-trend { padding: 12px; min-height: 120px; }
    .wwd-trend-value { font-size: 19px; }
    .wwd-ai { padding: 14px; }
    .wwd-ai-message { font-size: 14px; }
    .wwd-ai-code { font-size: 10.5px; padding: 10px 12px; }
  }
  /* Blinking caret after typed text */
  .chat-caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    background: rgba(255, 255, 255, 0.85);
    margin-left: 2px;
    vertical-align: text-bottom;
    transform: translateY(2px);
    animation: caretBlink 1s steps(1, end) infinite;
  }
  @keyframes caretBlink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
  }
  .chat-box.is-typing .chat-placeholder { opacity: 0; }

  .chat-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 6px;
  }
  .chat-tool {
    width: 26px;
    height: 26px;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.25s ease, transform 0.25s ease;
  }
  .chat-tool svg {
    width: 22px;
    height: 22px;
    display: block;
  }
  .chat-divider {
    width: 1px;
    height: 18px;
    background: rgba(140, 100, 220, 0.55);
    flex-shrink: 0;
  }
  .chat-spacer { flex: 1; }
  .chat-mic {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
  }
  .chat-mic svg {
    width: 18px;
    height: 18px;
    display: block;
  }
  .chat-box.is-typing .chat-mic {
    transform: scale(1.06);
  }

  @media (max-width: 768px) {
    .chat-demo { padding: 0 20px 40px; }
    .chat-box { padding: 14px 16px 12px; border-radius: 18px; }
    .chat-text-area { font-size: 15px; min-height: 32px; padding: 2px 2px 8px; line-height: 1.4; }
    .chat-placeholder { left: 2px; top: 2px; }
    .chat-toolbar { gap: 8px; padding-top: 2px; }
    .chat-tool { width: 18px; height: 18px; }
    .chat-tool svg { width: 16px; height: 16px; }
    .chat-divider { height: 14px; }
    .chat-mic { width: 28px; height: 28px; }
    .chat-mic svg { width: 13px; height: 13px; }
  }

  /* ============== SCROLL REVEAL ============== */
  /* Elements below the hero fade and rise into place when scrolled into view,
     matching the hero's fadeUp easing for visual consistency. */
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  /* Variant: fra venstre */
  .reveal.from-left {
    transform: translateX(-48px);
  }
  .reveal.from-left.is-visible {
    transform: translateX(0);
  }
  /* Variant: fra høyre */
  .reveal.from-right {
    transform: translateX(48px);
  }
  .reveal.from-right.is-visible {
    transform: translateX(0);
  }
  /* Variant: skalér opp (zoom-in subtil) */
  .reveal.zoom-in {
    transform: scale(0.94);
  }
  .reveal.zoom-in.is-visible {
    transform: scale(1);
  }
  /* Variant: blur som faller bort */
  .reveal.blur-in {
    filter: blur(8px);
  }
  .reveal.blur-in.is-visible {
    filter: blur(0);
  }
  /* Stagger delays for groups of items in the same section */
  .reveal.delay-1 { transition-delay: 0.12s; }
  .reveal.delay-2 { transition-delay: 0.24s; }
  .reveal.delay-3 { transition-delay: 0.36s; }
  .reveal.delay-4 { transition-delay: 0.48s; }
  .reveal.delay-5 { transition-delay: 0.60s; }
  .reveal.delay-6 { transition-delay: 0.72s; }

  /* Scroll-parallax: targets følger scroll-posisjonen subtilt.
     Aktiveres via JS som setter --scroll-y. */
  .parallax-slow  { transform: translateY(calc(var(--scroll-y, 0px) * 0.10)); }
  .parallax-med   { transform: translateY(calc(var(--scroll-y, 0px) * 0.20)); }
  .parallax-fast  { transform: translateY(calc(var(--scroll-y, 0px) * 0.35)); }
  /* Horisontal parallax */
  .parallax-x-slow { transform: translateX(calc(var(--scroll-y, 0px) * -0.05)); }
  .parallax-x-med  { transform: translateX(calc(var(--scroll-y, 0px) * -0.12)); }

  /* Respect users who prefer no motion */
  @media (prefers-reduced-motion: reduce) {
    .reveal {
      opacity: 1;
      transform: none;
      transition: none;
      filter: none;
    }
    .parallax-slow, .parallax-med, .parallax-fast,
    .parallax-x-slow, .parallax-x-med {
      transform: none !important;
    }
  }

  /* === VIRTUAL PAGES (services / seo via hash) === */
  .virtual-page { display: block; }
  .virtual-page[hidden] { display: none !important; }
  /* When a virtual page is open, hide the rest of the main content but keep nav + footer */
  body.virtual-active .main-content { display: none !important; }

    /* === HERO === */
    .srv-hero {
      position: relative;
      padding: 140px 32px 70px;
      text-align: center;
      overflow: hidden;
    }
    .srv-hero-inner { max-width: 880px; margin: 0 auto; position: relative; z-index: 2; }
    .srv-eyebrow {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--ink-dim);
      margin-bottom: 28px;
    }
    .srv-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: 72px;
      line-height: 1.04;
      letter-spacing: -0.02em;
      margin: 0 0 24px;
    }
    .srv-title em { font-style: italic; color: var(--blood); }
    .srv-sub {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 22px;
      line-height: 1.5;
      color: var(--ink-dim);
      margin: 0 auto;
      max-width: 620px;
    }

    /* Floating suits */
    .floating-suit {
      position: absolute;
      color: var(--blood);
      opacity: 0.22;
      font-family: serif;
      pointer-events: none;
      user-select: none;
      z-index: 1;
    }
    .floating-suit.s1 { top: 12%; left: 6%;  font-size: 80px; animation: float1 13s ease-in-out infinite; }
    .floating-suit.s2 { top: 24%; right: 8%; font-size: 100px; animation: float2 16s ease-in-out infinite; }
    .floating-suit.s3 { bottom: 18%; left: 10%; font-size: 60px; animation: float1 11s ease-in-out infinite reverse; }
    .floating-suit.s4 { bottom: 14%; right: 9%; font-size: 90px; animation: float2 15s ease-in-out infinite; }
    @keyframes float1 {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      50% { transform: translate(20px, -20px) rotate(8deg); }
    }
    @keyframes float2 {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      50% { transform: translate(-25px, 25px) rotate(-10deg); }
    }

    /* === SERVICES LIST === */
    .srv-section { padding: 40px 32px 100px; }
    .srv-list {
      max-width: 860px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
    }
    .srv-item {
      display: flex;
      align-items: flex-start;
      gap: 28px;
      padding: 36px 0;
      border-top: 1px solid var(--divider);
    }
    .srv-item:last-of-type { border-bottom: 1px solid var(--divider); }
    .srv-item-num {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 28px;
      line-height: 1;
      color: var(--blood);
      flex-shrink: 0;
      width: 44px;
      padding-top: 8px;
    }
    .srv-item-body { flex: 1; }
    .srv-item-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: 36px;
      line-height: 1.1;
      letter-spacing: -0.01em;
      margin: 0 0 10px;
    }
    .srv-item-title a {
      color: var(--ink);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 6px;
      text-decoration-color: var(--ink-faint);
      transition: color 0.3s ease, text-decoration-color 0.3s ease;
    }
    .srv-item-title a:hover {
      color: var(--blood);
      text-decoration-color: var(--blood);
    }
    .srv-item-desc {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 18px;
      line-height: 1.55;
      color: var(--ink-dim);
      margin: 0;
      max-width: 620px;
    }

    /* CTA */
    .srv-cta {
      margin: 80px auto 0;
      padding: 56px 48px;
      max-width: 760px;
      border-radius: 24px;
      border: 1px solid rgba(200, 16, 46, 0.28);
      background:
        radial-gradient(circle at 50% 0%, rgba(200, 16, 46, 0.10), transparent 70%),
        rgba(255, 255, 255, 0.015);
      text-align: center;
    }
    html[data-theme="light"] .srv-cta {
      border-color: rgba(168, 17, 42, 0.28);
      background:
        radial-gradient(circle at 50% 0%, rgba(168, 17, 42, 0.08), transparent 70%),
        rgba(42, 24, 16, 0.02);
    }
    .srv-cta-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: 36px;
      line-height: 1.15;
      color: var(--ink);
      margin: 0 0 16px;
    }
    .srv-cta-title em { font-style: italic; color: var(--blood); }
    .srv-cta p {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 19px;
      color: var(--ink-dim);
      margin: 0 0 32px;
    }
    .srv-cta-btn {
      display: inline-block;
      background: var(--blood);
      color: #ffffff;
      padding: 16px 38px;
      border-radius: 100px;
      font-family: 'Cinzel', serif;
      font-size: 12px;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background 0.3s ease, transform 0.3s ease;
    }
    .srv-cta-btn:hover { background: var(--blood-deep); transform: translateY(-2px); }


    /* === HERO === */
    .seo-hero {
      position: relative;
      padding: 140px 32px 80px;
      text-align: center;
      overflow: hidden;
    }
    .seo-hero-inner {
      max-width: 880px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    .seo-eyebrow {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--ink-dim);
      margin-bottom: 28px;
    }
    .seo-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: 76px;
      line-height: 1.02;
      letter-spacing: -0.02em;
      margin: 0 0 24px;
    }
    .seo-title em {
      font-style: italic;
      color: var(--blood);
    }
    .seo-sub {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 22px;
      line-height: 1.5;
      color: var(--ink-dim);
      margin: 0 auto;
      max-width: 620px;
    }

    /* Flytende symboler */
    .floating-suit {
      position: absolute;
      color: var(--blood);
      opacity: 0.22;
      font-family: serif;
      pointer-events: none;
      user-select: none;
      z-index: 1;
    }
    .floating-suit.s1 { top: 12%; left: 6%;  font-size: 80px; animation: float1 13s ease-in-out infinite; }
    .floating-suit.s2 { top: 24%; right: 8%; font-size: 100px; animation: float2 16s ease-in-out infinite; }
    .floating-suit.s3 { bottom: 18%; left: 10%; font-size: 60px; animation: float1 11s ease-in-out infinite reverse; }
    .floating-suit.s4 { bottom: 14%; right: 9%; font-size: 90px; animation: float2 15s ease-in-out infinite; }
    @keyframes float1 {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      50% { transform: translate(20px, -20px) rotate(8deg); }
    }
    @keyframes float2 {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      50% { transform: translate(-25px, 25px) rotate(-10deg); }
    }

    /* === CONTENT === */
    .seo-section {
      padding: 60px 32px 100px;
    }
    .seo-content {
      max-width: 760px;
      margin: 0 auto;
    }
    .seo-block { margin-bottom: 64px; }
    .seo-block-eyebrow {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--blood);
      margin-bottom: 18px;
    }
    .seo-block-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: 40px;
      line-height: 1.1;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin: 0 0 24px;
    }
    .seo-block p {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 21px;
      line-height: 1.65;
      color: var(--ink-dim);
      margin: 0 0 20px;
    }
    .seo-block p strong {
      font-style: normal;
      font-weight: 500;
      color: var(--ink);
    }

    /* Eksempel-søkebar */
    .seo-examples {
      margin: 40px 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .seo-search-mock {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 22px;
      border-radius: 100px;
      border: 1px solid var(--divider);
      background: rgba(255, 255, 255, 0.02);
      transition: border-color 0.3s ease, transform 0.3s ease;
    }
    html[data-theme="light"] .seo-search-mock {
      background: rgba(42, 24, 16, 0.03);
    }
    .seo-search-mock:hover {
      border-color: rgba(200, 16, 46, 0.45);
      transform: translateX(4px);
    }
    .seo-search-icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      color: var(--ink-faint);
    }
    .seo-search-mock span {
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      color: var(--ink-dim);
    }
    .seo-search-mock em {
      font-style: normal;
      color: var(--ink);
      font-weight: 500;
    }

    /* === CTA === */
    .seo-cta {
      margin: 80px auto 0;
      padding: 56px 48px;
      max-width: 760px;
      border-radius: 24px;
      border: 1px solid rgba(200, 16, 46, 0.28);
      background:
        radial-gradient(circle at 50% 0%, rgba(200, 16, 46, 0.10), transparent 70%),
        rgba(255, 255, 255, 0.015);
      text-align: center;
    }
    html[data-theme="light"] .seo-cta {
      border-color: rgba(168, 17, 42, 0.28);
      background:
        radial-gradient(circle at 50% 0%, rgba(168, 17, 42, 0.08), transparent 70%),
        rgba(42, 24, 16, 0.02);
    }
    .seo-cta-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: 36px;
      line-height: 1.15;
      color: var(--ink);
      margin: 0 0 16px;
    }
    .seo-cta-title em { font-style: italic; color: var(--blood); }
    .seo-cta p {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 19px;
      color: var(--ink-dim);
      margin: 0 0 32px;
    }
    .seo-cta-btn {
      display: inline-block;
      background: var(--blood);
      color: #ffffff;
      padding: 16px 38px;
      border-radius: 100px;
      font-family: 'Cinzel', serif;
      font-size: 12px;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background 0.3s ease, transform 0.3s ease;
    }
    .seo-cta-btn:hover {
      background: var(--blood-deep);
      transform: translateY(-2px);
    }

    /* === WORK PAGE: PROCESS STEPS === */
    .work-process {
      max-width: 880px;
      margin: 72px auto 0;
      display: flex;
      flex-direction: column;
    }
    .work-step {
      display: grid;
      grid-template-columns: 96px 1fr;
      gap: 32px;
      align-items: start;
      padding: 40px 0;
      border-top: 1px solid var(--line, rgba(255,255,255,0.10));
      transition: padding-left 0.4s cubic-bezier(.2,.9,.3,1);
    }
    .work-step:last-child {
      border-bottom: 1px solid var(--line, rgba(255,255,255,0.10));
    }
    .work-step:hover { padding-left: 12px; }
    .work-step-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 56px;
      font-weight: 500;
      line-height: 1;
      color: var(--blood);
      font-feature-settings: "tnum";
    }
    .work-step-body h3 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: 30px;
      letter-spacing: -0.01em;
      margin-bottom: 12px;
      color: var(--ink);
    }
    .work-step-body p {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 20px;
      line-height: 1.55;
      color: var(--ink-dim);
      max-width: 600px;
    }
    @media (max-width: 600px) {
      .work-step {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 32px 0;
      }
      .work-step-num { font-size: 40px; }
      .work-step-body h3 { font-size: 26px; }
      .work-step-body p { font-size: 18px; }
    }

    /* === WORK PAGE: extra floating suits === */
    #page-work .seo-section { position: relative; overflow: hidden; }
    #page-work .seo-content { position: relative; z-index: 2; }
    #page-work .floating-suit.w1 { top: 22%; left: 7%;  font-size: 70px;  animation: float1 13s ease-in-out infinite, pulse1 7s ease-in-out infinite; }
    #page-work .floating-suit.w2 { top: 48%; left: 4%;  font-size: 52px;  animation: float2 16s ease-in-out infinite, pulse2 9s ease-in-out infinite 1s; }
    #page-work .floating-suit.w3 { top: 78%; left: 14%; font-size: 88px;  animation: float1 11s ease-in-out infinite reverse, pulse1 8s ease-in-out infinite 2s; }
    #page-work .floating-suit.w4 { top: 30%; left: 9%;  font-size: 60px;  animation: float2 14s ease-in-out infinite, pulse2 7s ease-in-out infinite 1.5s; }
    #page-work .seo-section .floating-suit.c1 { top: 6%;   right: 6%;  font-size: 76px; animation: float1 14s ease-in-out infinite, pulse1 7s ease-in-out infinite; }
    #page-work .seo-section .floating-suit.c2 { top: 34%;  left: 3%;   font-size: 58px; animation: float2 17s ease-in-out infinite, pulse2 8s ease-in-out infinite 1s; }
    #page-work .seo-section .floating-suit.c3 { top: 60%;  right: 5%;  font-size: 96px; animation: float1 12s ease-in-out infinite reverse, pulse1 9s ease-in-out infinite 2s; }
    #page-work .seo-section .floating-suit.c4 { top: 84%;  left: 8%;   font-size: 64px; animation: float2 15s ease-in-out infinite, pulse2 7s ease-in-out infinite 0.5s; }
    #page-work .seo-section .floating-suit.c5 { top: 48%;  right: 12%; font-size: 50px; animation: float1 13s ease-in-out infinite, pulse1 8s ease-in-out infinite 1.5s; }
    @media (max-width: 768px) {
      #page-work .floating-suit.w2,
      #page-work .floating-suit.w4,
      #page-work .seo-section .floating-suit.c2,
      #page-work .seo-section .floating-suit.c5 { display: none; }
    }

    /* === PARTNERSHIP PAGE === */
    #page-partnership .seo-section { position: relative; overflow: hidden; }
    #page-partnership .seo-content { position: relative; z-index: 2; }
    #page-partnership .floating-suit.p1 { top: 20%; left: 6%;  font-size: 72px; animation: float1 13s ease-in-out infinite, pulse1 7s ease-in-out infinite; }
    #page-partnership .floating-suit.p2 { top: 44%; left: 3%;  font-size: 54px; animation: float2 16s ease-in-out infinite, pulse2 9s ease-in-out infinite 1s; }
    #page-partnership .floating-suit.p3 { top: 74%; left: 12%; font-size: 92px; animation: float1 11s ease-in-out infinite reverse, pulse1 8s ease-in-out infinite 2s; }
    #page-partnership .floating-suit.p4 { top: 30%; left: 9%;  font-size: 60px; animation: float2 14s ease-in-out infinite, pulse2 7s ease-in-out infinite 1.5s; }
    #page-partnership .seo-section .floating-suit.q1 { top: 5%;  right: 6%;  font-size: 78px; animation: float1 14s ease-in-out infinite, pulse1 7s ease-in-out infinite; }
    #page-partnership .seo-section .floating-suit.q2 { top: 33%; left: 3%;   font-size: 58px; animation: float2 17s ease-in-out infinite, pulse2 8s ease-in-out infinite 1s; }
    #page-partnership .seo-section .floating-suit.q3 { top: 58%; right: 5%;  font-size: 98px; animation: float1 12s ease-in-out infinite reverse, pulse1 9s ease-in-out infinite 2s; }
    #page-partnership .seo-section .floating-suit.q4 { top: 82%; left: 8%;   font-size: 64px; animation: float2 15s ease-in-out infinite, pulse2 7s ease-in-out infinite 0.5s; }
    #page-partnership .seo-section .floating-suit.q5 { top: 47%; right: 11%; font-size: 50px; animation: float1 13s ease-in-out infinite, pulse1 8s ease-in-out infinite 1.5s; }
    .pt-guarantee {
      margin: 8px 0 12px;
      padding: 28px 30px;
      border: 1px solid var(--blood);
      border-radius: 16px;
      background: rgba(200,16,46,0.06);
    }
    .pt-guarantee-label {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--blood);
      margin-bottom: 10px;
    }
    .pt-guarantee p {
      font-family: 'Cormorant Garamond', serif;
      font-size: 22px;
      line-height: 1.5;
      color: var(--ink);
      margin: 0;
    }
    @media (max-width: 768px) {
      #page-partnership .floating-suit.p2,
      #page-partnership .floating-suit.p4,
      #page-partnership .seo-section .floating-suit.q2,
      #page-partnership .seo-section .floating-suit.q5 { display: none; }
    }

    /* === ABOUT PAGE === */
    #page-about .seo-section { position: relative; overflow: hidden; }
    #page-about .seo-content { position: relative; z-index: 2; }
    #page-about .floating-suit.a1 { top: 19%; left: 6%;  font-size: 72px; animation: float1 13s ease-in-out infinite, pulse1 7s ease-in-out infinite; }
    #page-about .floating-suit.a2 { top: 43%; left: 3%;  font-size: 54px; animation: float2 16s ease-in-out infinite, pulse2 9s ease-in-out infinite 1s; }
    #page-about .floating-suit.a3 { top: 73%; left: 12%; font-size: 92px; animation: float1 11s ease-in-out infinite reverse, pulse1 8s ease-in-out infinite 2s; }
    #page-about .floating-suit.a4 { top: 29%; left: 9%;  font-size: 60px; animation: float2 14s ease-in-out infinite, pulse2 7s ease-in-out infinite 1.5s; }
    #page-about .seo-section .floating-suit.b1 { top: 5%;  right: 6%;  font-size: 78px; animation: float1 14s ease-in-out infinite, pulse1 7s ease-in-out infinite; }
    #page-about .seo-section .floating-suit.b2 { top: 32%; left: 3%;   font-size: 58px; animation: float2 17s ease-in-out infinite, pulse2 8s ease-in-out infinite 1s; }
    #page-about .seo-section .floating-suit.b3 { top: 57%; right: 5%;  font-size: 98px; animation: float1 12s ease-in-out infinite reverse, pulse1 9s ease-in-out infinite 2s; }
    #page-about .seo-section .floating-suit.b4 { top: 81%; left: 8%;   font-size: 64px; animation: float2 15s ease-in-out infinite, pulse2 7s ease-in-out infinite 0.5s; }
    #page-about .seo-section .floating-suit.b5 { top: 47%; right: 11%; font-size: 50px; animation: float1 13s ease-in-out infinite, pulse1 8s ease-in-out infinite 1.5s; }
    .about-location {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 18px;
      padding: 8px 16px;
      border: 1px solid var(--divider);
      border-radius: 999px;
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-dim);
    }
    .about-location svg { width: 15px; height: 15px; stroke-width: 1.8; }
    @media (max-width: 768px) {
      #page-about .floating-suit.a2,
      #page-about .floating-suit.a4,
      #page-about .seo-section .floating-suit.b2,
      #page-about .seo-section .floating-suit.b5 { display: none; }
    }

    /* === CONTACT PAGE === */
    #page-contact .seo-section { position: relative; overflow: hidden; }
    #page-contact .seo-content { position: relative; z-index: 2; }
    #page-contact .floating-suit.k1 { top: 18%; left: 6%;  font-size: 72px; animation: float1 13s ease-in-out infinite, pulse1 7s ease-in-out infinite; }
    #page-contact .floating-suit.k2 { top: 44%; left: 3%;  font-size: 54px; animation: float2 16s ease-in-out infinite, pulse2 9s ease-in-out infinite 1s; }
    #page-contact .floating-suit.k3 { top: 74%; left: 12%; font-size: 92px; animation: float1 11s ease-in-out infinite reverse, pulse1 8s ease-in-out infinite 2s; }
    #page-contact .floating-suit.k4 { top: 29%; left: 9%;  font-size: 60px; animation: float2 14s ease-in-out infinite, pulse2 7s ease-in-out infinite 1.5s; }
    #page-contact .seo-section .floating-suit.m1 { top: 5%;  right: 6%;  font-size: 78px; animation: float1 14s ease-in-out infinite, pulse1 7s ease-in-out infinite; }
    #page-contact .seo-section .floating-suit.m2 { top: 33%; left: 3%;   font-size: 58px; animation: float2 17s ease-in-out infinite, pulse2 8s ease-in-out infinite 1s; }
    #page-contact .seo-section .floating-suit.m3 { top: 60%; right: 5%;  font-size: 96px; animation: float1 12s ease-in-out infinite reverse, pulse1 9s ease-in-out infinite 2s; }
    #page-contact .seo-section .floating-suit.m4 { top: 84%; left: 8%;   font-size: 64px; animation: float2 15s ease-in-out infinite, pulse2 7s ease-in-out infinite 0.5s; }
    #page-contact .seo-section .floating-suit.m5 { top: 47%; right: 11%; font-size: 50px; animation: float1 13s ease-in-out infinite, pulse1 8s ease-in-out infinite 1.5s; }
    .contact-methods {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 8px;
    }
    .contact-method {
      display: block;
      padding: 26px 28px;
      border: 1px solid var(--divider);
      border-radius: 16px;
      background: rgba(255,255,255,0.02);
      text-decoration: none;
      transition: border-color 0.25s, background 0.25s, transform 0.25s;
    }
    .contact-method:hover {
      border-color: var(--blood);
      background: rgba(200,16,46,0.05);
      transform: translateY(-3px);
    }
    .contact-method-label {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--blood);
      margin-bottom: 10px;
    }
    .contact-method-value {
      font-family: 'Cormorant Garamond', serif;
      font-size: 22px;
      color: var(--ink);
      line-height: 1.3;
    }
    @media (max-width: 600px) {
      .contact-methods { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
      #page-contact .floating-suit.k2,
      #page-contact .floating-suit.k4,
      #page-contact .seo-section .floating-suit.m2,
      #page-contact .seo-section .floating-suit.m5 { display: none; }
    }

    /* === POLICY PAGES (terms / privacy / cookies) === */
    .policy-page .seo-section { position: relative; overflow: hidden; }
    .policy-page .seo-content { position: relative; z-index: 2; max-width: 820px; }
    .policy-page .floating-suit.g1 { top: 16%; left: 6%;  font-size: 70px; animation: float1 13s ease-in-out infinite, pulse1 7s ease-in-out infinite; }
    .policy-page .floating-suit.g2 { top: 52%; left: 4%;  font-size: 52px; animation: float2 16s ease-in-out infinite, pulse2 9s ease-in-out infinite 1s; }
    .policy-page .floating-suit.g3 { top: 80%; right: 7%; font-size: 90px; animation: float1 11s ease-in-out infinite reverse, pulse1 8s ease-in-out infinite 2s; }
    .policy-page .floating-suit.g4 { top: 30%; right: 6%; font-size: 58px; animation: float2 14s ease-in-out infinite, pulse2 7s ease-in-out infinite 1.5s; }
    .policy-updated {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      letter-spacing: 0.04em;
      color: var(--ink-faint);
      margin-top: 14px;
    }
    .policy-block { margin-bottom: 40px; }
    .policy-block h2 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: 26px;
      color: var(--ink);
      margin: 0 0 14px;
    }
    .policy-block p {
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      line-height: 1.7;
      color: var(--ink-dim);
      margin: 0 0 14px;
    }
    .policy-block ul {
      margin: 0 0 14px;
      padding-left: 20px;
    }
    .policy-block li {
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      line-height: 1.7;
      color: var(--ink-dim);
      margin-bottom: 8px;
    }
    .policy-block a { color: var(--blood); text-decoration: none; }
    .policy-block a:hover { text-decoration: underline; }
    @media (max-width: 768px) {
      .policy-page .floating-suit.g2,
      .policy-page .floating-suit.g4 { display: none; }
    }

    /* === BRANDING PAGE === */
    .brand-hero {
      position: relative;
      padding: 140px 32px 80px;
      text-align: center;
      overflow: hidden;
    }
    .brand-hero-inner {
      max-width: 880px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    .brand-eyebrow {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--ink-dim);
      margin-bottom: 28px;
    }
    .brand-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: 76px;
      line-height: 1.02;
      letter-spacing: -0.02em;
      margin: 0 0 24px;
    }
    .brand-title em { font-style: italic; color: var(--blood); }
    .brand-sub {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 22px;
      line-height: 1.5;
      color: var(--ink-dim);
      margin: 0 auto;
      max-width: 640px;
    }
    .brand-section { padding: 60px 32px 100px; }
    .brand-content { max-width: 760px; margin: 0 auto; }
    .brand-block { margin-bottom: 64px; }
    .brand-block-eyebrow {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--blood);
      margin-bottom: 18px;
    }
    .brand-block-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: 40px;
      line-height: 1.1;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin: 0 0 24px;
    }
    .brand-block p {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 21px;
      line-height: 1.65;
      color: var(--ink-dim);
      margin: 0 0 20px;
    }
    .brand-block p strong {
      font-style: normal;
      font-weight: 500;
      color: var(--ink);
    }

    /* Branding service boxes */
    .brand-grid {
      margin: 40px 0;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
    }
    .brand-box {
      padding: 30px 28px;
      border-radius: 18px;
      border: 1px solid var(--divider);
      background: rgba(255, 255, 255, 0.02);
      transition: border-color 0.3s ease, transform 0.3s ease;
    }
    html[data-theme="light"] .brand-box {
      background: rgba(42, 24, 16, 0.03);
    }
    .brand-box:hover {
      border-color: rgba(200, 16, 46, 0.45);
      transform: translateY(-4px);
    }
    .brand-box-num {
      font-family: 'Cinzel', serif;
      font-size: 12px;
      letter-spacing: 0.22em;
      color: var(--blood);
      margin-bottom: 14px;
    }
    .brand-box-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }
    .brand-box-head .brand-box-num { margin-bottom: 0; }
    .brand-box-icon {
      width: 26px;
      height: 26px;
      flex-shrink: 0;
      color: var(--blood);
      opacity: 0.85;
      transition: transform 0.3s ease;
    }
    .brand-box:hover .brand-box-icon { transform: scale(1.12) rotate(-4deg); }
    .brand-box h3 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: 26px;
      line-height: 1.15;
      color: var(--ink);
      margin: 0 0 10px;
    }
    .brand-box p {
      font-family: 'Inter', sans-serif;
      font-style: normal;
      font-size: 15px;
      line-height: 1.6;
      color: var(--ink-dim);
      margin: 0;
    }

    /* Driving school example */
    .brand-example {
      margin: 48px 0;
      padding: 44px 40px;
      border-radius: 22px;
      border: 1px solid var(--divider);
      background:
        radial-gradient(circle at 0% 0%, rgba(200, 16, 46, 0.06), transparent 60%),
        rgba(255, 255, 255, 0.015);
    }
    html[data-theme="light"] .brand-example {
      background:
        radial-gradient(circle at 0% 0%, rgba(168, 17, 42, 0.06), transparent 60%),
        rgba(42, 24, 16, 0.02);
    }
    .brand-example-tag {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--blood);
      margin-bottom: 16px;
    }
    .brand-example h3 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: 32px;
      line-height: 1.15;
      color: var(--ink);
      margin: 0 0 18px;
    }
    .brand-example p {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 20px;
      line-height: 1.6;
      color: var(--ink-dim);
      margin: 0 0 16px;
    }

    .brand-cta {
      margin: 80px auto 0;
      padding: 56px 48px;
      max-width: 760px;
      border-radius: 24px;
      border: 1px solid rgba(200, 16, 46, 0.28);
      background:
        radial-gradient(circle at 50% 0%, rgba(200, 16, 46, 0.10), transparent 70%),
        rgba(255, 255, 255, 0.015);
      text-align: center;
    }
    html[data-theme="light"] .brand-cta {
      border-color: rgba(168, 17, 42, 0.28);
      background:
        radial-gradient(circle at 50% 0%, rgba(168, 17, 42, 0.08), transparent 70%),
        rgba(42, 24, 16, 0.02);
    }
    .brand-cta-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: 36px;
      line-height: 1.15;
      color: var(--ink);
      margin: 0 0 16px;
    }
    .brand-cta-title em { font-style: italic; color: var(--blood); }
    .brand-cta p {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 19px;
      color: var(--ink-dim);
      margin: 0 0 32px;
    }
    .brand-cta-btn {
      display: inline-block;
      background: var(--blood);
      color: #ffffff;
      padding: 16px 38px;
      border-radius: 100px;
      font-family: 'Cinzel', serif;
      font-size: 12px;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background 0.3s ease, transform 0.3s ease;
    }
    .brand-cta-btn:hover {
      background: var(--blood-deep);
      transform: translateY(-2px);
    }
    @media (max-width: 860px) {
      .brand-title { font-size: 52px; }
      .brand-sub { font-size: 19px; }
      .brand-block-title { font-size: 32px; }
      .brand-block p { font-size: 19px; }
      .brand-cta { padding: 44px 28px; }
      .brand-cta-title { font-size: 30px; }
    }
    @media (max-width: 620px) {
      .brand-hero { padding: 80px 24px 60px; }
      .brand-title { font-size: 40px; }
      .brand-section { padding: 40px 24px 80px; }
      .brand-grid { grid-template-columns: 1fr; }
      .brand-example { padding: 32px 24px; }
      .brand-cta { padding: 36px 22px; }
      .brand-cta-title { font-size: 26px; }
    }


    @media (max-width: 860px) {
      .srv-title { font-size: 52px; }
      .srv-sub { font-size: 19px; }
      .srv-item { gap: 18px; padding: 30px 0; }
      .srv-item-num { font-size: 22px; width: 36px; padding-top: 6px; }
      .srv-item-title { font-size: 28px; }
      .srv-item-desc { font-size: 17px; }
      .srv-cta { padding: 44px 28px; }
      .srv-cta-title { font-size: 30px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
      .footer-form-col { grid-column: 1 / -1; }
    }
    @media (max-width: 540px) {
      .srv-hero { padding: 110px 24px 50px; }
      .srv-title { font-size: 40px; }
      .srv-section { padding: 20px 22px 80px; }
      .srv-item { flex-direction: row; gap: 14px; padding: 26px 0; }
      .srv-item-num { font-size: 18px; width: 28px; padding-top: 4px; }
      .srv-item-title { font-size: 24px; }
      .srv-cta { padding: 36px 22px; }
      .srv-cta-title { font-size: 26px; }
      .footer-grid { grid-template-columns: 1fr; gap: 40px; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
      .site-footer { padding: 60px 24px 0; }
    }
    @media (max-width: 860px) {
      .seo-title { font-size: 52px; }
      .seo-sub { font-size: 19px; }
      .seo-block-title { font-size: 32px; }
      .seo-block p { font-size: 19px; }
      .seo-cta { padding: 44px 28px; }
      .seo-cta-title { font-size: 30px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
      .footer-form-col { grid-column: 1 / -1; }
    }
    @media (max-width: 540px) {
      .seo-hero { padding: 80px 24px 60px; }
      .seo-title { font-size: 40px; }
      .seo-section { padding: 40px 24px 80px; }
      .seo-cta { padding: 36px 22px; }
      .seo-cta-title { font-size: 26px; }
      .header-inner { padding: 16px 22px; }
      .brand { font-size: 17px; letter-spacing: 0.14em; }
      .footer-grid { grid-template-columns: 1fr; gap: 40px; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
      .site-footer { padding: 60px 24px 0; }
    }

  /* === BOOKING PAGE === */
  .bk-hero {
    position: relative;
    padding: 140px 32px 60px;
    text-align: center;
    overflow: hidden;
  }
  .bk-hero-inner { max-width: 880px; margin: 0 auto; position: relative; z-index: 2; }
  .bk-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 28px;
  }
  .bk-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 72px;
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
  }
  .bk-title em { font-style: italic; color: var(--blood); }
  .bk-sub {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 22px;
    line-height: 1.5;
    color: var(--ink-dim);
    margin: 0 auto;
    max-width: 620px;
  }

  .bk-section { padding: 30px 32px 100px; }
  .bk-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: start;
  }

  /* === CALENDAR === */
  .bk-card {
    padding: 32px;
    border-radius: 20px;
    border: 1px solid var(--divider);
    background: rgba(255,255,255,0.015);
  }
  html[data-theme="light"] .bk-card { background: rgba(42,24,16,0.02); }
  .bk-step {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--blood);
    margin: 0 0 8px;
  }
  .bk-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 26px;
    color: var(--ink);
    margin: 0 0 22px;
  }
  .bk-card + .bk-card { margin-top: 24px; }

  .bk-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
  }
  .bk-month {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .bk-nav-btn {
    background: transparent;
    border: 1px solid var(--divider);
    color: var(--ink-dim);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    font-size: 14px;
  }
  .bk-nav-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-dim); }
  .bk-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

  .bk-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
  }
  .bk-weekday {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    text-align: center;
    padding: 6px 0;
  }
  .bk-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
  }
  .bk-day {
    aspect-ratio: 1;
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    position: relative;
  }
  .bk-day:hover:not(:disabled):not(.selected) {
    background: rgba(200,16,46,0.08);
    border-color: rgba(200,16,46,0.4);
  }
  .bk-day:disabled {
    color: var(--ink-faint);
    cursor: not-allowed;
    opacity: 0.35;
  }
  .bk-day.empty { cursor: default; }
  .bk-day.today {
    border-color: var(--ink-faint);
  }
  .bk-day.selected {
    background: var(--blood);
    color: #ffffff;
    border-color: var(--blood);
    transform: scale(1.05);
  }

  /* === TIME SLOTS === */
  .bk-times {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 8px;
    margin-top: 6px;
  }
  .bk-time {
    background: transparent;
    border: 1px solid var(--divider);
    color: var(--ink-dim);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    padding: 12px 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    font-variant-numeric: tabular-nums;
  }
  .bk-time:hover:not(:disabled):not(.selected) {
    border-color: rgba(200,16,46,0.5);
    color: var(--ink);
  }
  .bk-time:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .bk-time.selected {
    background: var(--blood);
    color: #fff;
    border-color: var(--blood);
  }
  .bk-times-empty {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 16px;
    color: var(--ink-faint);
    text-align: center;
    padding: 24px 0;
  }

  /* === MEETING TYPE === */
  .bk-meeting-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .bk-mtype {
    background: transparent;
    border: 1px solid var(--divider);
    color: var(--ink-dim);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 16px 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .bk-mtype:hover:not(.selected) { border-color: rgba(200,16,46,0.5); color: var(--ink); }
  .bk-mtype.selected {
    background: var(--blood);
    color: #fff;
    border-color: var(--blood);
  }
  .bk-mtype-icon {
    width: 22px;
    height: 22px;
    stroke-width: 1.6;
  }

  /* === EVALUATION MODE === */
  .bk-eval-link {
    margin-top: 16px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--ink-dim);
    line-height: 1.6;
  }
  .bk-eval-link a {
    color: var(--blood);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid rgba(200,16,46,0.4);
    transition: border-color 0.2s, color 0.2s;
  }
  .bk-eval-link a:hover { color: var(--blood-deep); border-color: var(--blood); }
  .bk-eval-link-top { margin-top: 4px; margin-bottom: 22px; }
  .bk-social-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  select.bk-social-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 150px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-color: rgba(255,255,255,0.04);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7l6-5.5' fill='none' stroke='%23c8102e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
  }
  html[data-theme="light"] select.bk-social-select { background-color: rgba(42,24,16,0.04); }
  select.bk-social-select option {
    background: #141414;
    color: #fff;
  }
  html[data-theme="light"] select.bk-social-select option {
    background: #efe7d9;
    color: #2a1810;
  }
  .bk-social-handle { flex: 1 1 140px; }
  .bk-social-add {
    flex: 0 0 auto;
    padding: 0 20px;
    border-radius: 10px;
    border: 1px solid var(--blood);
    background: var(--blood);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
  }
  .bk-social-add:hover { background: var(--blood-deep); transform: translateY(-1px); }
  .bk-social-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }
  .bk-social-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 99px;
    border: 1px solid var(--divider);
    background: rgba(255,255,255,0.03);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--ink);
  }
  html[data-theme="light"] .bk-social-tag { background: rgba(42,24,16,0.03); }
  .bk-social-tag strong { color: var(--blood); font-weight: 600; }
  .bk-social-tag button {
    border: none;
    background: none;
    color: var(--ink-dim);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
  }
  .bk-social-tag button:hover { color: var(--blood); }
  .bk-eval-panel { margin-top: 4px; }
  .bk-eval-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
  }
  .bk-eval-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px;
    border: 1px solid var(--divider);
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--ink-dim);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    user-select: none;
  }
  .bk-eval-opt:hover { border-color: rgba(200,16,46,0.5); color: var(--ink); }
  .bk-eval-opt input { display: none; }
  .bk-eval-opt .bk-eval-box {
    width: 18px;
    height: 18px;
    border: 1px solid var(--divider);
    border-radius: 5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
  }
  .bk-eval-opt .bk-eval-box::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    margin-top: -2px;
    transition: transform 0.15s;
  }
  .bk-eval-opt.checked {
    border-color: var(--blood);
    color: var(--ink);
  }
  .bk-eval-opt.checked .bk-eval-box {
    background: var(--blood);
    border-color: var(--blood);
  }
  .bk-eval-opt.checked .bk-eval-box::after { transform: rotate(45deg) scale(1); }
  @media (max-width: 600px) {
    .bk-eval-options { grid-template-columns: 1fr; }
  }

  /* === FORM === */
  .bk-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
  .bk-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .bk-input, .bk-textarea {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--ink);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--divider);
    border-radius: 10px;
    padding: 13px 16px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.25s ease;
  }
  html[data-theme="light"] .bk-input,
  html[data-theme="light"] .bk-textarea {
    background: rgba(42,24,16,0.03);
  }
  .bk-input:focus, .bk-textarea:focus { outline: none; border-color: var(--blood); }
  .bk-input::placeholder, .bk-textarea::placeholder { color: var(--ink-faint); }
  .bk-textarea { resize: vertical; min-height: 110px; }

  /* === SUMMARY === */
  .bk-summary {
    padding: 24px 28px;
    border-radius: 16px;
    border: 1px solid rgba(200,16,46,0.28);
    background:
      radial-gradient(circle at 50% 0%, rgba(200,16,46,0.07), transparent 70%),
      rgba(255,255,255,0.015);
    margin-bottom: 22px;
  }
  html[data-theme="light"] .bk-summary {
    border-color: rgba(168,17,42,0.28);
    background:
      radial-gradient(circle at 50% 0%, rgba(168,17,42,0.06), transparent 70%),
      rgba(42,24,16,0.02);
  }
  .bk-summary-label {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--blood);
    margin: 0 0 8px;
  }
  .bk-summary-text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.5;
    color: var(--ink);
    margin: 0;
  }
  .bk-summary-text strong { font-style: normal; font-weight: 500; }

  /* === CONFIRM BUTTON === */
  .bk-confirm {
    width: 100%;
    background: var(--blood);
    color: #fff;
    border: none;
    padding: 18px;
    border-radius: 100px;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  }
  .bk-confirm:hover:not(:disabled) { background: var(--blood-deep); transform: translateY(-2px); }
  .bk-confirm:disabled { opacity: 0.4; cursor: not-allowed; }

  /* === SUCCESS === */
  .bk-success {
    text-align: center;
    padding: 60px 32px;
    min-height: 70vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .bk-success-check {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--blood);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 22px;
  }
  .bk-success-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 36px;
    color: var(--ink);
    margin: 0 0 14px;
  }
  .bk-success-text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 19px;
    color: var(--ink-dim);
    margin: 0;
  }

  @media (max-width: 860px) {
    .bk-title { font-size: 48px; }
    .bk-sub { font-size: 19px; }
    .bk-grid { grid-template-columns: 1fr; gap: 24px; }
    .bk-card { padding: 24px; }
  }
  @media (max-width: 540px) {
    .bk-hero { padding: 110px 24px 40px; }
    .bk-title { font-size: 36px; }
    .bk-section { padding: 20px 18px 80px; }
    .bk-meeting-types { grid-template-columns: 1fr; }
    .bk-times { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
  }

  /* === ADVERTISING PAGE === */
  .adv-hero {
    position: relative;
    padding: 140px 32px 60px;
    text-align: center;
    overflow: hidden;
  }
  .adv-hero-inner { max-width: 880px; margin: 0 auto; position: relative; z-index: 2; }
  .adv-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 28px;
  }
  .adv-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 72px;
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
  }
  .adv-title em { font-style: italic; color: var(--blood); }
  .adv-sub {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 22px;
    line-height: 1.5;
    color: var(--ink-dim);
    margin: 0 auto;
    max-width: 620px;
  }

  .adv-image-wrap {
    width: calc(100vw - 64px);
    max-width: 1100px;
    margin: 20px auto 60px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .adv-image {
    width: 100%;
    border-radius: 24px;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .adv-section { padding: 0 32px 100px; }
  .adv-content {
    max-width: 760px;
    margin: 0 auto;
  }
  .adv-block { margin-bottom: 64px; }
  .adv-block-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--blood);
    margin-bottom: 18px;
  }
  .adv-block-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 24px;
  }
  .adv-block p {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 21px;
    line-height: 1.65;
    color: var(--ink-dim);
    margin: 0 0 20px;
  }
  .adv-block p strong {
    font-style: normal;
    font-weight: 500;
    color: var(--ink);
  }

  /* Social platforms row */
  .adv-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 8px;
  }
  .adv-platform {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-dim);
    padding: 10px 18px;
    border-radius: 100px;
    border: 1px solid var(--divider);
    background: transparent;
    transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
  }
  .adv-platform:hover {
    border-color: rgba(200, 16, 46, 0.5);
    color: var(--ink);
    transform: translateY(-2px);
  }

  /* CTA box */
  .adv-cta {
    margin: 80px auto 0;
    padding: 56px 48px;
    max-width: 760px;
    border-radius: 24px;
    border: 1px solid rgba(200, 16, 46, 0.28);
    background:
      radial-gradient(circle at 50% 0%, rgba(200, 16, 46, 0.10), transparent 70%),
      rgba(255, 255, 255, 0.015);
    text-align: center;
  }
  html[data-theme="light"] .adv-cta {
    border-color: rgba(168, 17, 42, 0.28);
    background:
      radial-gradient(circle at 50% 0%, rgba(168, 17, 42, 0.08), transparent 70%),
      rgba(42, 24, 16, 0.02);
  }
  .adv-cta-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 36px;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 16px;
  }
  .adv-cta-title em { font-style: italic; color: var(--blood); }
  .adv-cta p {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 19px;
    color: var(--ink-dim);
    margin: 0 0 32px;
  }
  .adv-cta-btn {
    display: inline-block;
    background: var(--blood);
    color: #ffffff;
    padding: 16px 38px;
    border-radius: 100px;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
  }
  .adv-cta-btn:hover { background: var(--blood-deep); transform: translateY(-2px); }

  @media (max-width: 860px) {
    .adv-title { font-size: 52px; }
    .adv-sub { font-size: 19px; }
    .adv-block-title { font-size: 32px; }
    .adv-block p { font-size: 19px; }
    .adv-image-wrap { width: calc(100vw - 48px); margin: 16px auto 40px; }
    .adv-image { aspect-ratio: 4 / 3; border-radius: 18px; }
    .adv-cta { padding: 44px 28px; }
    .adv-cta-title { font-size: 30px; }
  }
  @media (max-width: 540px) {
    .adv-hero { padding: 110px 24px 40px; }
    .adv-title { font-size: 40px; }
    .adv-section { padding: 0 22px 80px; }
    .adv-image-wrap { width: calc(100vw - 32px); margin: 12px auto 30px; }
    .adv-cta { padding: 36px 22px; }
    .adv-cta-title { font-size: 26px; }
  }

  /* === WEB DEVELOPMENT PAGE === */
  .wd-hero {
    position: relative;
    padding: 140px 32px 40px;
    text-align: center;
    overflow: hidden;
  }
  .wd-hero-inner { max-width: 880px; margin: 0 auto; position: relative; z-index: 2; }
  .wd-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 28px;
  }
  .wd-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 72px;
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
  }
  .wd-title em { font-style: italic; color: var(--blood); }
  .wd-sub {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 22px;
    line-height: 1.5;
    color: var(--ink-dim);
    margin: 0 auto;
    max-width: 620px;
  }

  /* Demo block at top */
  .wd-demo-section { padding: 30px 32px 70px; }
  .wd-demo-wrap {
    max-width: 1200px;
    margin: 0 auto;
  }
  .wd-demo-label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
  }
  .wd-demo-tag {
    color: var(--blood);
    border: 1px solid rgba(200,16,46,0.45);
    padding: 6px 14px;
    border-radius: 100px;
    background: rgba(200,16,46,0.05);
  }
  .wd-demo-desc { color: var(--ink-dim); }
  .wd-demo-card {
    display: block;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--divider);
    background: rgba(255,255,255,0.015);
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  }
  html[data-theme="light"] .wd-demo-card { background: rgba(42,24,16,0.02); }
  .wd-demo-card:hover {
    transform: translateY(-4px);
    border-color: rgba(200,16,46,0.4);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4);
  }
  .wd-demo-image {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top;
  }
  .wd-demo-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 24px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    background: linear-gradient(to top, rgba(0,0,0,0.4), transparent 50%);
  }
  .wd-demo-card:hover .wd-demo-overlay { opacity: 1; }
  .wd-demo-overlay-btn {
    background: var(--blood);
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 12px 24px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  /* Content section */
  .wd-section { padding: 60px 32px 100px; }
  .wd-content { max-width: 760px; margin: 0 auto; }
  .wd-block { margin-bottom: 64px; }
  .wd-block-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--blood);
    margin-bottom: 18px;
  }
  .wd-block-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 24px;
  }
  .wd-block p {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 21px;
    line-height: 1.65;
    color: var(--ink-dim);
    margin: 0 0 20px;
  }
  .wd-block p strong { font-style: normal; font-weight: 500; color: var(--ink); }

  /* Tech tags */
  .wd-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
  }
  .wd-chip {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-dim);
    padding: 8px 16px;
    border-radius: 100px;
    border: 1px solid var(--divider);
    transition: border-color 0.3s ease, color 0.3s ease;
  }
  .wd-chip:hover { border-color: rgba(200,16,46,0.5); color: var(--ink); }

  /* CTA */
  .wd-cta {
    margin: 60px auto 0;
    padding: 56px 48px;
    max-width: 760px;
    border-radius: 24px;
    border: 1px solid rgba(200, 16, 46, 0.28);
    background:
      radial-gradient(circle at 50% 0%, rgba(200, 16, 46, 0.10), transparent 70%),
      rgba(255, 255, 255, 0.015);
    text-align: center;
  }
  html[data-theme="light"] .wd-cta {
    border-color: rgba(168, 17, 42, 0.28);
    background:
      radial-gradient(circle at 50% 0%, rgba(168, 17, 42, 0.08), transparent 70%),
      rgba(42, 24, 16, 0.02);
  }
  .wd-cta-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 36px;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 16px;
  }
  .wd-cta-title em { font-style: italic; color: var(--blood); }
  .wd-cta p {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 19px;
    color: var(--ink-dim);
    margin: 0 0 32px;
  }
  .wd-cta-btn {
    display: inline-block;
    background: var(--blood);
    color: #fff;
    padding: 16px 38px;
    border-radius: 100px;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
  }
  .wd-cta-btn:hover { background: var(--blood-deep); transform: translateY(-2px); }

  @media (max-width: 860px) {
    .wd-title { font-size: 52px; }
    .wd-sub { font-size: 19px; }
    .wd-block-title { font-size: 32px; }
    .wd-block p { font-size: 19px; }
    .wd-demo-section { padding: 20px 24px 50px; }
    .wd-cta { padding: 44px 28px; }
    .wd-cta-title { font-size: 30px; }
    .wd-demo-label { flex-direction: column; align-items: flex-start; gap: 8px; }
  }
  @media (max-width: 540px) {
    .wd-hero { padding: 110px 24px 30px; }
    .wd-title { font-size: 40px; }
    .wd-section { padding: 40px 22px 80px; }
    .wd-cta { padding: 36px 22px; }
    .wd-cta-title { font-size: 26px; }
    .wd-demo-card:hover .wd-demo-overlay { opacity: 1; } /* always show on touch */
  }

  
  /* === DENTAL DEMO OVERLAY (iframe) === */
  .demo-iframe-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: #F5F1EA;
    display: none;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .demo-iframe-overlay.open {
    display: block;
    opacity: 1;
  }
  .demo-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }
  body.demo-open { overflow: hidden; }
  /* Hide main site nav and grain overlays when dental demo is open */
  body.demo-open > nav,
  body.demo-open > .menu-overlay { display: none !important; }
  body.demo-open::after { display: none !important; }
  body.demo-open::before { display: none !important; }

  .demo-close-btn {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 510;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(26, 31, 28, 0.92);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    padding: 0;
    transition: background 0.25s ease, transform 0.25s ease;
    font-family: inherit;
  }
  .demo-close-btn.open { display: flex; }
  .demo-close-btn:hover { background: #c8102e; transform: rotate(90deg); }
  @media (max-width: 540px) {
    .demo-close-btn { top: 16px; right: 16px; width: 38px; height: 38px; font-size: 19px; }
  }

/* ============== COOKIE CONSENT MODAL ============== */
.cookie-consent {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: cookieFadeIn 0.3s ease;
}
.cookie-consent.show { display: flex; }
@keyframes cookieFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cookie-consent-inner {
  position: relative;
  max-width: 440px;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: 18px;
  padding: 38px 34px 30px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: cookiePopIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cookiePopIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.cookie-consent-mark {
  font-size: 26px;
  color: var(--blood);
  margin-bottom: 14px;
  line-height: 1;
}
.cookie-consent-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 12px;
}
.cookie-consent-text {
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 24px;
}
.cookie-consent-text a {
  color: var(--blood);
  text-decoration: none;
}
.cookie-consent-text a:hover { text-decoration: underline; }
.cookie-consent-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.cookie-btn {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 28px;
  border-radius: 100px;
  cursor: pointer;
  border: 1px solid var(--divider);
  transition: all 0.2s ease;
  white-space: nowrap;
  flex: 1;
}
.cookie-btn-decline {
  background: transparent;
  color: var(--ink-dim);
}
.cookie-btn-decline:hover {
  color: var(--ink);
  border-color: var(--ink-dim);
}
.cookie-btn-accept {
  background: var(--blood);
  color: #fff;
  border-color: var(--blood);
}
.cookie-btn-accept:hover { opacity: 0.88; }
@media (max-width: 480px) {
  .cookie-consent-inner { padding: 32px 24px 26px; }
  .cookie-consent-title { font-size: 24px; }
  .cookie-consent-actions { flex-direction: column; }
}