@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/Newsreader-400.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/SchibstedGrotesk-400.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/SchibstedGrotesk-600.woff2") format("woff2")}
*{box-sizing:border-box}@layer base{a{color:inherit}}button,input,select,textarea{font:inherit}[hidden]{display:none!important}


:root {
  --color-ink: #1c1b19;
  --color-bark: #1e2420;
  --color-moss: #3f3c37;
  --color-sage: #8ea58a;
  --color-mist: #e6e1d6;
  --color-foam: #f4f1eb;
  --color-water: #5e5a52;
  --color-line: #ddd6ca;
  --font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Newsreader", ui-serif, Georgia, serif;
  --radius-frame: 0px;
}

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }

  html {
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    margin: 0;
    background: var(--color-foam);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.55;
  }

  ::selection {
    background: var(--color-mist);
    color: var(--color-ink);
  }
}

@layer components {
  .site-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--color-foam) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-line);
  }

  .wordmark {
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-ink);
    text-decoration: none;
  }

  .nav-links {
    display: flex;
    gap: 1.25rem;
    align-items: center;
  }

  .nav-links a {
    color: var(--color-moss);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
  }

  .nav-links a:hover {
    color: var(--color-ink);
  }

  .plate {
    margin: 0;
    height: min(72vh, 40rem);
    background: var(--color-bark);
  }

  .plate img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
  }

  .caption-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    max-width: 76rem;
    margin: 0 auto;
    padding: 0.7rem 1.5rem 0;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-water);
  }

  .spread {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3rem;
    align-items: end;
    max-width: 76rem;
    margin: 0 auto;
    padding: 2.75rem 1.5rem 3.5rem;
  }

  .spread h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3rem, 6vw, 5.4rem);
    line-height: 0.96;
    letter-spacing: -0.03em;
  }

  .lede {
    margin: 0 0 1.5rem;
    color: var(--color-moss);
    font-size: 1.125rem;
  }


  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    align-items: center;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.65rem 1.15rem;
    background: var(--color-bark);
    color: var(--color-foam);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid var(--color-bark);
    border-radius: var(--radius-frame);
  }

  .btn:hover {
    background: var(--color-ink);
  }

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

  .btn-ghost:hover {
    background: var(--color-mist);
  }

  .btn-on-dark {
    background: var(--color-mist);
    color: var(--color-ink);
    border-color: var(--color-mist);
  }

  .btn-quiet {
    background: transparent;
    color: var(--color-foam);
    border-color: color-mix(in srgb, var(--color-mist) 55%, var(--color-bark));
  }

  .btn-quiet:hover {
    background: color-mix(in srgb, var(--color-mist) 14%, transparent);
  }

  .section {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.25rem 4.5rem;
  }

  .section h2 {
    margin: 0 0 0.4rem;
    font-family: var(--font-display);
    font-weight: 460;
    font-size: clamp(2rem, 3vw, 2.75rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
  }

  .section-intro {
    margin: 0 0 2rem;
    max-width: 38rem;
    color: var(--color-moss);
  }

  .service-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-line);
  }

  .service-list li {
    display: grid;
    grid-template-columns: 16rem 1fr 1.2fr;
    gap: 1.5rem;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--color-line);
    align-items: baseline;
  }

  .idx {
    font-family: var(--font-display);
    color: var(--color-water);
    font-size: 1.35rem;
  }

  .service-list h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
  }

  .service-list p {
    margin: 0;
    color: var(--color-moss);
  }

  .service-list .when {
    margin: 0;
    color: var(--color-ink);
  }

  .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .step {
    padding-top: 1rem;
    border-top: 2px solid var(--color-bark);
  }

  .step span {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-water);
  }

  .step h3 {
    margin: 0 0 0.4rem;
    font-size: 1.2rem;
  }

  .step p {
    margin: 0;
    color: var(--color-moss);
  }

  .inquire {
    background: var(--color-bark);
    color: var(--color-mist);
    padding: 2.5rem 1.5rem 3rem;
  }

  .inquire-inner {
    max-width: 42rem;
    margin: 0 auto;
  }

  .inquire h2 {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-weight: 460;
    font-size: clamp(2rem, 3vw, 2.75rem);
    letter-spacing: -0.03em;
    color: var(--color-foam);
    line-height: 1.1;
  }

  .inquire .section-intro {
    color: var(--color-mist);
  }

  .form {
    display: grid;
    gap: 1rem;
  }

  .field {
    display: grid;
    gap: 0.35rem;
  }

  .field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-foam);
  }

  .field input,
  .field select,
  .field textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.65rem 0.75rem;
    font: inherit;
    color: var(--color-foam);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--color-mist) 45%, var(--color-bark));
    border-radius: var(--radius-frame);
  }

  .field textarea {
    min-height: 8rem;
    resize: vertical;
  }

  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    outline: 2px solid var(--color-sage);
    outline-offset: 1px;
  }

  .field select option {
    color: var(--color-ink);
    background: var(--color-foam);
  }

  .field input::placeholder,
  .field textarea::placeholder {
    color: color-mix(in srgb, var(--color-mist) 70%, var(--color-bark));
  }

  .fine {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-mist);
  }

  .ready {
    display: grid;
    gap: 1rem;
  }

  .ready p {
    margin: 0;
    color: var(--color-mist);
  }

  .ready pre {
    margin: 0;
    white-space: pre-wrap;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-foam);
    background: color-mix(in srgb, var(--color-ink) 55%, transparent);
    padding: 1rem;
  }

  .site-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.25rem;
    color: var(--color-water);
    font-size: 0.9rem;
  }

  .site-footer a {
    color: var(--color-moss);
  }

  @media (max-width: 800px) {
    .plate {
      height: 52vh;
    }

    .spread,
    .steps,
    .service-list li {
      grid-template-columns: 1fr;
    }

    .spread {
      gap: 1.5rem;
      padding-top: 1.75rem;
    }

    .service-list li {
      gap: 0.25rem;
    }

    .nav-links {
      gap: 0.85rem;
    }
  }
}

html{scroll-padding-top:6rem}section[id]{scroll-margin-top:1rem}.plate{height:clamp(15rem,43vh,31rem)}.spread{align-items:start;padding-bottom:4.5rem}.spread h1{font-size:clamp(2.9rem,5.7vw,5rem);line-height:1.04}.eyebrow{margin:0 0 1rem;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--color-water)}.btn-on-dark:hover{background:var(--color-foam);color:var(--color-ink)}a:focus-visible,button:focus-visible{outline:3px solid #6d8665;outline-offset:5px}.inquire a:focus-visible,.inquire button:focus-visible{outline-color:#afc9a8}.skip-link{position:fixed;top:0;left:1rem;z-index:50;padding:.75rem 1rem;background:var(--color-foam);transform:translateY(-120%)}.skip-link:focus{transform:translateY(0)}.ready pre{overflow-wrap:anywhere;word-break:break-word}.direct-contact{margin-top:1.5rem}.privacy-note{font-size:.85rem;margin-top:1.5rem;color:var(--color-mist)}.form .field:has(textarea){grid-column:1/-1}.inquire .fine{line-height:1.6}.inquire-inner>a{color:var(--color-mist)}.field input,.field select,.field textarea{background:#252c27}.caption-row{padding-top:.85rem}.site-nav{padding-left:max(1.25rem,calc((100vw - 73rem)/2));padding-right:max(1.25rem,calc((100vw - 73rem)/2))}.nav-links a{display:inline-flex;min-height:2.75rem;align-items:center}.site-footer a{overflow-wrap:anywhere}.section h2,.inquire h2{font-weight:400}
@media(min-width:600px){.form{grid-template-columns:1fr 1fr}.form>.actions,.form>.fine{grid-column:1/-1}}
@media(max-width:480px){.site-nav{gap:.5rem;padding:.6rem 1rem}.nav-links{gap:.8rem}.nav-links a{font-size:.8rem}.wordmark{font-size:.75rem;letter-spacing:.1em}.spread{padding-bottom:3rem}.section{padding-bottom:3rem}.caption-row{font-size:.6rem;letter-spacing:.08em}.plate{height:32vh;min-height:13rem}.inquire{padding:2.5rem 1.25rem}.actions{gap:.75rem}.actions .btn{flex-grow:1}}