:root {
    --bg: oklch(0.975 0.005 80);
    --bg-warm: oklch(0.94 0.012 70);
    --bg-deep: oklch(0.22 0.012 50);
    --ink: oklch(0.18 0.012 60);
    --ink-soft: oklch(0.38 0.012 60);
    --ink-mute: oklch(0.55 0.01 60);
    --line: oklch(0.86 0.008 70);
    --line-soft: oklch(0.91 0.006 70);
    --accent: oklch(0.58 0.075 155);
    --accent-deep: oklch(0.44 0.06 155);
    --accent-soft: oklch(0.93 0.03 155);
    --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
    --sans: 'Manrope', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
    font-size: 16px;
  }
  img { display: block; max-width: 100%; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
  a { color: inherit; text-decoration: none; }

  /* selection */
  ::selection { background: var(--accent); color: white; }

  /* type */
  h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.05;
    color: var(--ink);
    text-wrap: balance;
  }
  h1 { font-size: clamp(48px, 7vw, 104px); letter-spacing: -0.025em; }
  h2 { font-size: clamp(36px, 4.5vw, 64px); letter-spacing: -0.02em; }
  h3 { font-size: clamp(22px, 2vw, 30px); }
  p { text-wrap: pretty; }

  .eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
    font-weight: 500;
  }

  .container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
  }
  @media (max-width: 640px) { .container { padding: 0 20px; } }

  /* lang switcher */
  .lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--line);
    padding: 2px;
    border-radius: 999px;
    background: oklch(0.975 0.005 80 / 0.6);
    flex-shrink: 0;
  }
  .lang-switcher button {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
    padding: 5px 9px;
    border-radius: 999px;
    transition: all .15s;
    font-weight: 500;
  }
  .lang-switcher button:hover { color: var(--ink); }
  .lang-switcher button.active {
    background: var(--ink);
    color: var(--bg);
  }
  @media (max-width: 480px) {
    .lang-switcher button { padding: 5px 7px; font-size: 9px; letter-spacing: 0.08em; }
  }
  .mobile-lang {
    display: flex;
    gap: 8px;
    padding: 16px 0 8px;
    border-top: 1px solid var(--line);
    margin-top: 16px;
  }
  .mobile-lang button {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: all .15s;
  }
  .mobile-lang button.active {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }

  /* nav */
  .nav {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    background: oklch(0.975 0.005 80 / 0.78);
    border-bottom: 1px solid transparent;
    transition: border-color .3s, background .3s;
  }
  .nav.scrolled {
    border-bottom-color: var(--line);
    background: oklch(0.975 0.005 80 / 0.92);
  }
  .nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 72px;
    gap: 16px;
  }
  .nav-actions {
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
  }
  .logo {
    display: flex; align-items: center; gap: 13px;
    min-width: 0;
    flex-shrink: 1;
  }
  .logo img { width: auto; }
  .logo-roof { display: block; height: calc(var(--tw-logo-h, 36px) * 0.84); }
  .logo-name {
    display: flex; flex-direction: column; justify-content: center;
    font-family: var(--sans);
    line-height: 1.3;
    white-space: nowrap;
    text-transform: uppercase;
  }
  .logo-name .top {
    font-size: calc(var(--tw-logo-h, 36px) * 0.25);
    letter-spacing: 0.36em;
    font-weight: 600;
    color: var(--ink-soft);
  }
  .logo-name .main {
    font-size: calc(var(--tw-logo-h, 36px) * 0.42);
    letter-spacing: 0.15em;
    font-weight: 700;
    color: var(--ink);
  }
  .logo-stacked { display: none; height: calc(var(--tw-logo-h, 36px) * 1.7); }
  body[data-logo-variant="image"] .logo-roof,
  body[data-logo-variant="image"] .logo-name { display: none; }
  body[data-logo-variant="image"] .logo-stacked { display: block; }
  @media (max-width: 560px) {
    .logo-name { display: none; }
    body[data-logo-variant="image"] .logo-stacked { height: calc(var(--tw-logo-h, 36px) * 1.25); }
  }
  .nav-links {
    display: flex; gap: 4px; align-items: center;
    margin-right: 4px;
  }
  .nav-links a {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    border-radius: 999px;
    transition: color .15s, background .15s;
    position: relative;
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-links a.active { color: var(--ink); }
  .nav-links a.active::after {
    content: '';
    position: absolute; bottom: 4px; left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    background: var(--accent);
    border-radius: 50%;
  }
  .nav-cta {
    padding: 10px 18px;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    transition: background .15s, color .15s, transform .15s;
  }
  .nav-cta:hover { background: var(--accent-deep); color: #fff; }

  .nav-mobile-toggle {
    display: none;
    flex-direction: column; gap: 5px;
    padding: 10px;
    flex-shrink: 0;
  }
  .nav-mobile-toggle span {
    width: 22px; height: 1.5px; background: var(--ink);
    transition: transform .25s, opacity .25s;
    display: block;
  }
  .nav-mobile-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-mobile-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-mobile-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* ─── Tablet: collapse page links into hamburger; keep lang + CTA in header ─── */
  @media (max-width: 960px) {
    .nav-links { display: none; }
    .nav-mobile-toggle { display: flex; }
  }

  /* ─── Mobile: tighter padding, condensed logo, smaller CTA ─── */
  @media (max-width: 480px) {
    .nav-inner { height: 64px; gap: 8px; }
    .container { padding: 0 16px; }
    .logo-roof { height: calc(var(--tw-logo-h, 36px) * 0.7); }
    .lang-switcher button { padding: 5px 6px; }
    .nav-cta { padding: 8px 12px; font-size: 11px; }
    .nav-actions { gap: 6px; }
    .nav-cta { padding: 9px 14px; font-size: 12px; }
    .nav-mobile-toggle { padding: 8px; }
  }

  .mobile-menu { display: none; }
  @media (max-width: 960px) {
    .mobile-menu {
      position: fixed; top: 72px; left: 0; right: 0;
      height: calc(100vh - 72px);
      height: calc(100dvh - 72px);
      background: var(--bg);
      z-index: 49;
      transform: translateY(-100%);
      transition: transform .35s cubic-bezier(.4,0,.2,1), visibility 0s linear .35s;
      padding: 40px 32px;
      display: flex; flex-direction: column; gap: 4px;
      overflow-y: auto;
      visibility: hidden;
      pointer-events: none;
    }
    .mobile-menu.open {
      transform: translateY(0);
      visibility: visible;
      pointer-events: auto;
      transition: transform .35s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
    }
  }
  @media (max-width: 480px) {
    .mobile-menu {
      top: 64px; padding: 32px 20px;
      height: calc(100vh - 64px);
      height: calc(100dvh - 64px);
    }
  }
  .mobile-menu a {
    padding: 18px 0;
    font-family: var(--serif);
    font-size: clamp(28px, 6vw, 40px);
    border-bottom: 1px solid var(--line-soft);
    line-height: 1.1;
  }
  .mobile-menu a.active { color: var(--accent); }

  /* hero */
  .hero {
    min-height: calc(100vh - 72px);
    display: flex; flex-direction: column;
    position: relative;
  }
  @media (max-width: 480px) { .hero { min-height: calc(100vh - 64px); } }
  .hero-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 0;
    align-items: stretch;
  }
  @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }

  .hero-text {
    padding: 80px 32px 80px max(32px, calc((100vw - 1320px) / 2 + 32px));
    display: flex; flex-direction: column; justify-content: space-between;
    gap: 64px;
    border-right: 1px solid var(--line);
  }
  @media (max-width: 960px) { .hero-text { border-right: none; padding: 56px 24px 40px; gap: 48px; } }
  @media (max-width: 480px) { .hero-text { padding: 40px 16px 32px; gap: 36px; } .hero-meta { gap: 28px; padding-top: 24px; } }

  .hero h1 .ital { font-style: italic; color: var(--accent); }
  .hero-meta {
    display: flex; gap: 48px;
    flex-wrap: wrap;
    padding-top: 32px;
    border-top: 1px solid var(--line);
  }
  .hero-meta div { display: flex; flex-direction: column; gap: 6px; }
  .hero-meta .label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  .hero-meta .val { font-size: 15px; color: var(--ink); font-weight: 500; }

  .hero-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    max-height: 80vh;
    min-height: 320px;
    background:
      linear-gradient(135deg, oklch(0.45 0.04 50), oklch(0.28 0.03 60)),
      repeating-linear-gradient(45deg, transparent 0 20px, oklch(0 0 0 / 0.08) 20px 21px);
    background-blend-mode: multiply;
  }
  .hero-image > img {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    filter: saturate(0.92);
  }
  .hero-image .floating-card img { position: static; width: 100%; height: 100%; }
  .hero-image .placeholder-label {
    position: absolute; top: 24px; left: 24px;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: oklch(0.95 0.005 70 / 0.7);
    z-index: 1;
  }
  .hero-image .floating-card {
    position: absolute;
    bottom: 32px; left: 32px;
    background: var(--bg);
    padding: 20px 24px;
    border-radius: 4px;
    display: flex; align-items: center; gap: 16px;
    max-width: 320px;
    box-shadow: 0 24px 48px -16px oklch(0.18 0.012 60 / 0.18);
  }
  .floating-card .badge {
    width: 44px; height: 44px;
    border: 1.5px solid var(--accent);
    color: var(--accent);
    display: grid; place-items: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px;
    flex-shrink: 0;
  }
  .floating-card .text { font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
  .floating-card .text strong { color: var(--ink); display: block; font-size: 14px; margin-bottom: 2px; }

  /* marquee */
  .marquee {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    background: var(--bg);
    padding: 22px 0;
  }
  .marquee-track {
    display: flex; gap: 64px;
    animation: marquee 38s linear infinite;
    white-space: nowrap;
    width: max-content;
  }
  .marquee-item {
    font-family: var(--serif);
    font-size: 28px;
    font-style: italic;
    color: var(--ink-soft);
    display: flex; align-items: center; gap: 64px;
  }
  .marquee-item::after {
    content: '';
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
    flex-shrink: 0;
  }
  @keyframes marquee {
    to { transform: translateX(-50%); }
  }

  /* sections */
  section { scroll-margin-top: 72px; }
  .section {
    padding: 120px 0;
  }
  @media (max-width: 700px) { .section { padding: 72px 0; } }

  .section-header {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 64px;
    margin-bottom: 80px;
    align-items: end;
  }
  @media (max-width: 800px) {
    .section-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  }
  .section-header .lead { font-size: 19px; color: var(--ink-soft); max-width: 56ch; }

  /* services */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  @media (max-width: 1000px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 768px) { .services-grid { grid-template-columns: 1fr; } }

  .service {
    background: var(--bg);
    padding: 36px 28px 32px;
    display: flex; flex-direction: column;
    gap: 16px;
    min-height: 280px;
    transition: background .2s;
    cursor: default;
    position: relative;
  }
  .service:hover { background: var(--bg-warm); }
  .service .num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-mute);
    letter-spacing: 0.1em;
  }
  .service h3 {
    font-size: 26px;
    margin-top: auto;
  }
  .service p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
  .service .arrow {
    position: absolute;
    top: 32px; right: 28px;
    width: 28px; height: 28px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid; place-items: center;
    transition: transform .2s, background .2s, border-color .2s, color .2s;
  }
  .service:hover .arrow {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bg);
    transform: rotate(-45deg);
  }

  /* work / projects */
  .work-section {
    background: var(--bg-deep);
    color: oklch(0.92 0.008 70);
    padding: 120px 0;
  }
  @media (max-width: 700px) { .work-section { padding: 72px 0; } .process-section { padding: 72px 0; } .contact-section { padding: 72px 0; } }
  .work-section h2 { color: oklch(0.97 0.005 70); }
  .work-section .lead { color: oklch(0.78 0.008 70); }
  .work-section .eyebrow { color: oklch(0.72 0.05 50); }

  .projects-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
  }
  .project {
    position: relative;
    overflow: hidden;
    background: oklch(0.32 0.03 60);
    cursor: pointer;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    max-height: 80vh;
  }
  .project:hover { transform: translateY(-4px); }
  .project img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2,0,.2,1), filter .35s;
    filter: saturate(0.92) brightness(0.95);
  }
  .project:hover img {
    transform: scale(1.04);
    filter: saturate(1.05) brightness(1);
  }
  .project .overlay {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 24px;
    background: linear-gradient(to top, oklch(0.18 0.012 60 / 0.85), transparent);
    color: oklch(0.97 0.005 70);
  }
  .project .tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: oklch(0.78 0.05 60);
    margin-bottom: 6px;
  }
  .project .title {
    font-family: var(--serif);
    font-size: 22px;
    line-height: 1.1;
  }

  .p-tall { grid-column: span 5; aspect-ratio: 4/5; }
  .p-wide { grid-column: span 7; aspect-ratio: 7/5; }
  .p-square { grid-column: span 4; aspect-ratio: 1/1; }
  .p-half { grid-column: span 6; aspect-ratio: 6/4; }

  @media (max-width: 960px) {
    .projects-grid { gap: 16px; }
    .p-tall, .p-wide, .p-square, .p-half {
      grid-column: span 12;
      aspect-ratio: 4/3;
    }
  }
  @media (max-width: 480px) {
    .projects-grid { gap: 12px; }
    .p-tall, .p-wide, .p-square, .p-half { aspect-ratio: 5/4; }
    .project .overlay { padding: 16px; }
    .project .title { font-size: 18px; }
  }

  .work-cta {
    margin-top: 64px;
    display: flex; justify-content: space-between;
    align-items: center;
    padding-top: 40px;
    border-top: 1px solid oklch(0.40 0.012 60);
    flex-wrap: wrap;
    gap: 24px;
  }
  .work-cta p { color: oklch(0.78 0.008 70); max-width: 50ch; }

  /* process / tools */
  .process-section {
    background: var(--bg-warm);
    padding: 120px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .process-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  @media (max-width: 960px) { .process-grid { grid-template-columns: 1fr; gap: 48px; } }
  @media (max-width: 480px) { .process-grid { gap: 32px; } .tool-card { padding: 28px; } }
  .process-text > * + * { margin-top: 24px; }
  .process-text p { font-size: 17px; color: var(--ink-soft); line-height: 1.7; max-width: 56ch; }
  .process-text .tool-link {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--ink);
    border-bottom: 1px solid var(--accent);
    padding-bottom: 4px;
    margin-top: 16px;
    transition: color .15s, border-color .15s;
  }
  .process-text .tool-link:hover { color: var(--accent); }

  .tool-card {
    background: var(--bg);
    padding: 40px;
    border: 1px solid var(--line);
    position: relative;
  }
  .tool-card .tool-head {
    display: flex; align-items: center; gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 24px;
  }
  .tool-card .tool-mark {
    width: 48px; height: 48px;
    background: #fff;
    color: #1a1a1a;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid; place-items: center;
  }
  .tool-card .tool-name { font-family: var(--serif); font-size: 28px; line-height: 1; }
  .tool-card .tool-sub {
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink-mute); margin-top: 6px;
  }
  .tool-card ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
  }
  @media (max-width: 500px) { .tool-card ul { grid-template-columns: 1fr; } }
  .tool-card ul li {
    font-size: 14px;
    color: var(--ink-soft);
    padding-left: 18px;
    position: relative;
  }
  .tool-card ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 9px;
    width: 6px; height: 6px;
    background: var(--accent);
  }

  /* about */
  .about-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: start;
  }
  @media (max-width: 960px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } }
  @media (max-width: 480px) {
    .about-portrait { aspect-ratio: 4/5; max-height: 70vh; }
    .about-text .pull { font-size: 22px; padding: 16px 0 16px 18px; }
  }
  .about-portrait {
    aspect-ratio: 4 / 5;
    max-height: 80vh;
    background: var(--bg-warm);
    overflow: hidden;
    position: relative;
  }
  .about-portrait img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .about-portrait .stamp {
    position: absolute;
    bottom: 24px; right: 24px;
    background: var(--bg);
    padding: 16px 20px;
    text-align: center;
  }
  .about-portrait .stamp .y {
    font-family: var(--serif);
    font-size: 36px;
    font-style: italic;
    line-height: 1;
    color: var(--accent);
  }
  .about-portrait .stamp .l {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-top: 4px;
  }
  .about-text > * + * { margin-top: 24px; }
  .about-text p { font-size: 17px; color: var(--ink-soft); line-height: 1.7; }
  .about-text .pull {
    font-family: var(--serif);
    font-size: 28px;
    line-height: 1.25;
    color: var(--ink);
    padding: 20px 0 20px 24px;
    border-left: 2px solid var(--accent);
    font-style: italic;
  }

  .stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
  }
  @media (max-width: 600px) { .stats { grid-template-columns: 1fr 1fr; } }
  .stats .stat { display: flex; flex-direction: column; gap: 4px; }
  .stats .num {
    font-family: var(--serif);
    font-size: 48px;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .stats .num .ital { font-style: italic; color: var(--accent); }
  .stats .lab {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-top: 4px;
  }

  /* contact */
  .contact-section {
    background: var(--bg-warm);
    padding: 120px 0;
  }
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }
  @media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
  @media (max-width: 480px) {
    .contact-section { padding: 72px 0; }
    .contact-info .row { padding: 20px 0; }
    .contact-info .row .val { font-size: 22px; }
    .form { padding: 24px 20px; }
  }

  .contact-info h2 { margin-bottom: 32px; }
  .contact-info p { font-size: 18px; color: var(--ink-soft); margin-bottom: 40px; max-width: 42ch; }
  .contact-info .row {
    display: flex; flex-direction: column; gap: 6px;
    padding: 24px 0;
    border-top: 1px solid var(--line);
  }
  .contact-info .row:last-child { border-bottom: 1px solid var(--line); }
  .contact-info .row .lab {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  .contact-info .row .val {
    font-family: var(--serif);
    font-size: 26px;
    color: var(--ink);
  }
  .contact-info .row .val a { transition: color .15s; }
  .contact-info .row .val a:hover { color: var(--accent); }

  /* form */
  .form {
    background: var(--bg);
    padding: 40px;
    display: flex; flex-direction: column;
    gap: 4px;
  }
  @media (max-width: 500px) { .form { padding: 28px; } }
  .form .field {
    display: flex; flex-direction: column;
    padding: 16px 0;
    border-bottom: 1px solid var(--line-soft);
    transition: border-color .15s;
  }
  .form .field:focus-within { border-color: var(--ink); }
  .form .field label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 6px;
  }
  .form .field input,
  .form .field textarea,
  .form .field select {
    border: none; outline: none; background: transparent;
    font-family: var(--sans);
    font-size: 16px;
    color: var(--ink);
    padding: 4px 0;
    width: 100%;
    resize: none;
  }
  .form .field input::placeholder,
  .form .field textarea::placeholder { color: var(--ink-mute); }
  .form .chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 8px;
  }
  .form .chip {
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    color: var(--ink-soft);
    transition: all .15s;
    cursor: pointer;
    background: var(--bg);
  }
  .form .chip:hover { border-color: var(--ink-soft); color: var(--ink); }
  .form .chip.active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bg);
  }
  .form .submit {
    margin-top: 24px;
    padding: 18px 24px;
    background: var(--ink);
    color: var(--bg);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    display: flex; align-items: center; justify-content: center;
    gap: 12px;
    transition: background .2s, gap .2s;
  }
  .form .submit:hover {
    background: var(--accent);
    gap: 18px;
  }
  .form .submit svg { width: 16px; height: 16px; }

  .form .success {
    background: var(--accent-soft);
    color: var(--accent-deep);
    padding: 16px;
    font-size: 14px;
    border-radius: 4px;
    text-align: center;
  }

  /* footer */
  .footer {
    background: var(--bg-deep);
    color: oklch(0.78 0.008 70);
    padding: 80px 0 32px;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 64px;
    border-bottom: 1px solid oklch(0.32 0.012 60);
  }
  @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
  @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

  .footer h4 {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: oklch(0.62 0.008 60);
    font-weight: 400;
    margin-bottom: 18px;
  }
  .footer-logo {
    width: min(var(--tw-footer-logo-w, 300px), 100%);
    height: auto;
    display: block;
    margin-bottom: 20px;
  }
  .footer .tagline { color: oklch(0.72 0.008 70); max-width: 36ch; font-size: 15px; line-height: 1.55; }
  .footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .footer ul a { color: oklch(0.85 0.008 70); transition: color .15s; font-size: 14px; }
  .footer ul a:hover { color: oklch(0.78 0.05 50); }
  .footer-bottom {
    padding-top: 24px;
    display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
    font-family: var(--mono);
    font-size: 11px;
    color: oklch(0.62 0.008 60);
    letter-spacing: 0.05em;
  }

  /* fade in on scroll */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .9s cubic-bezier(.2,0,.2,1), transform .9s cubic-bezier(.2,0,.2,1);
  }
  .reveal.in { opacity: 1; transform: none; }

  /* button general */
  .btn-pill {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 16px 24px;
    background: var(--ink);
    color: var(--bg);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    transition: background .2s, gap .2s;
    white-space: nowrap;
  }
  .btn-pill:hover { background: var(--accent); gap: 18px; }
  .btn-pill svg { width: 14px; height: 14px; }
  .btn-pill.outline {
    background: transparent;
    border: 1px solid var(--ink);
    color: var(--ink);
  }
  .btn-pill.outline:hover { background: var(--ink); color: var(--bg); }
  .btn-pill.light {
    background: oklch(0.97 0.005 70);
    color: var(--bg-deep);
  }
  .btn-pill.light:hover { background: var(--accent); color: var(--bg); }

  /* lærebedrift badge area */
  .badges-row {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
    display: flex; gap: 40px; flex-wrap: wrap;
    align-items: center;
  }
  .badge-card {
    display: flex; align-items: center; gap: 14px;
  }
  .badge-card .ico {
    width: 48px; height: 48px;
    border: 1.5px solid var(--accent);
    color: var(--accent);
    display: grid; place-items: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
  }
  .badge-card .meta { display: flex; flex-direction: column; gap: 2px; }
  .badge-card .meta strong { font-size: 14px; }
  .badge-card .meta span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }

  /* offisielle merker som bilde-badges */
  .badge-card .ico.img,
  .floating-card .badge.img {
    border: none;
    border-radius: 0;
    background: none;
    padding: 0;
  }
  .badge-card .ico.img { width: 54px; height: 54px; }
  .badge-card .ico.img img,
  .floating-card .badge.img img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
  }