@layer reset, tokens, base, layout, components, pages, motion;
@view-transition { navigation: auto; }

@layer reset {
  *,*::before,*::after { box-sizing: border-box; }
  * { margin: 0; }
  img,picture,svg { display: block; max-width: 100%; }
  button,input,select,textarea { font: inherit; color: inherit; }
  ul { padding: 0; list-style: none; }
  html { -webkit-text-size-adjust: 100%; }
}

@layer tokens {
  :root {
    --ink: #181818; --slate: #5A5B5C; --paper: #FAFCFD; --white: #fff; --fjord: #5f7c8c;
    --pack: #34302c; --fjord: #5f7c8c;
    --bg: var(--paper); --fg: var(--ink); --muted: color-mix(in oklab, var(--fg) 66%, var(--bg));
    --alt: #E8EAEB;
    --line: color-mix(in oklab, var(--fg) 16%, transparent);
    --font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --h1: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
    --h2: clamp(1.4rem, 1rem + 1.4vw, 2.25rem);
    --body: clamp(1rem, .96rem + .2vw, 1.125rem);
    --gap: clamp(1.25rem, 4vw, 3rem);
    --pad: clamp(3.5rem, 8vw, 7rem);
    --maxw: 1240px; --narrow: 760px;
    --hdr: 4.5rem;
    color-scheme: light dark;
  }
  @media (prefers-color-scheme: dark) {
    :root { --bg: #111314; --fg: #ECE9E2; --alt: #181C1E; --line: color-mix(in oklab, #fff 16%, transparent); }
  }
}

@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 1rem); }
  body { font-family: var(--font); font-size: var(--body); line-height: 1.7; background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  h1,h2,h3 { line-height: 1.2; text-wrap: balance; }
  h1 { font-size: var(--h1); font-weight: 300; letter-spacing: .005em; } h2 { font-size: var(--h2); font-weight: 400; letter-spacing: 0; } h3 { font-size: 1.1rem; font-weight: 500; }
  p { text-wrap: pretty; } p + p { margin-top: 1em; }
  a { color: inherit; text-underline-offset: .22em; }
  :focus-visible { outline: 3px solid var(--fjord); outline-offset: 3px; border-radius: 2px; }
  ::selection { background: var(--slate); color: #fff; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: #fff; padding: .6rem 1rem; transition: top .2s; }
  .skip:focus { top: 1rem; }
  mark { background: color-mix(in oklab, gold 45%, transparent); color: inherit; padding: 0 .15em; border-radius: 2px; }
}

@layer layout {
  .wrap { width: min(100% - 2*var(--gap), var(--maxw)); margin-inline: auto; }
  .narrow { max-width: var(--narrow); }
  .narrow.wrap { width: min(100% - 2*var(--gap), var(--narrow)); }
  .center { text-align: center; }
  .band { padding-block: var(--pad); }
  .band.alt { background: var(--alt); }
  .split { display: grid; gap: var(--gap); align-items: center;
    @media (min-width: 860px) { grid-template-columns: 1.05fr 1fr; &.flip .split-img { order: 2; } } }
  .split-img { overflow: hidden; border-radius: 2px; &.tall img { aspect-ratio: 4/5; } & img { width: 100%; height: 100%; object-fit: cover; } }
  .split-copy { display: grid; gap: 1.25rem; justify-items: start; align-content: center;
    & h2 { margin: 0; } & p { margin: 0; color: var(--muted); max-width: 52ch; } }
  .two { display: grid; gap: var(--gap); @media (min-width: 800px) { grid-template-columns: 1fr 1fr; } & p { color: var(--muted); margin-top: 1rem; } }
  .row { display: flex; flex-wrap: wrap; gap: .75rem; }
}

@layer components {
  .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--ink) 94%, transparent); color: #F5F3EE; backdrop-filter: blur(14px) saturate(1.2); padding-top: env(safe-area-inset-top, 0px);
    & .bar { display: flex; align-items: center; justify-content: space-between; min-height: var(--hdr); gap: 1rem; } }
  .brand { display: inline-flex; align-items: center; text-decoration: none;
    & .logo { height: 2.4rem; width: auto; max-width: 100%; } }
  #nav { display: flex; align-items: center; gap: 2rem;
    & ul { display: flex; align-items: flex-start; gap: clamp(1rem, 2.2vw, 2rem); }
    & a { text-decoration: none; font-size: .9rem; font-weight: 500; padding-block: .4rem; border-bottom: 1px solid transparent; transition: border-color .2s;
      &:hover,&[aria-current="page"] { border-bottom-color: currentColor; } } }
  .lang { display: flex; gap: .5rem; font-size: .8rem; align-items: center; opacity: .95; & a[aria-current="true"] { font-weight: 600; border-bottom: 1px solid currentColor; } }
  .nav-toggle { display: none; background: none; border: 0; width: 2.75rem; height: 2.75rem; cursor: pointer; position: relative; color: inherit;
    & .bars,& .bars::before,& .bars::after { position: absolute; left: .7rem; right: .7rem; height: 2px; background: currentColor; content: ""; transition: transform .25s, opacity .25s; }
    & .bars { top: 50%; } & .bars::before { left: 0; right: 0; top: -7px; } & .bars::after { left: 0; right: 0; top: 7px; }
    &[aria-expanded="true"] .bars { background: transparent; } &[aria-expanded="true"] .bars::before { transform: translateY(7px) rotate(45deg); } &[aria-expanded="true"] .bars::after { transform: translateY(-7px) rotate(-45deg); } }

  .has-sub { position: relative;
    & .sub-wrap { display: flex; align-items: center; gap: .15rem; }
    & .sub-toggle { background: none; border: 0; color: inherit; cursor: pointer; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; & svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate .2s; } &[aria-expanded="true"] svg { rotate: 180deg; } }
    & .sub { display: block; }
  }
  @media (min-width: 901px) {
    .has-sub .sub { position: absolute; left: -1rem; top: 100%; min-width: 17rem; padding: .6rem 0; background: var(--ink); border: 1px solid rgb(255 255 255 / .14); box-shadow: 0 18px 40px rgb(0 0 0 / .35); opacity: 0; visibility: hidden; translate: 0 -.4rem; transition: opacity .2s, translate .2s, visibility .2s; display: block;
      & li { display: block; } & a { display: block; padding: .6rem 1.25rem; border-bottom: 0; font-size: .88rem; &:hover,&[aria-current="page"] { background: rgb(255 255 255 / .08); } } }
    .has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub[data-open] .sub { opacity: 1; visibility: visible; translate: 0; }
    #nav .has-sub .sub { flex-direction: column; gap: 0; }
  }
  @media (max-width: 900px) {
    .nav-toggle { display: block; }
    #nav { position: fixed; inset: var(--hdr) 0 auto 0; flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 1.5rem var(--gap) 2rem; background: var(--ink); max-height: calc(100svh - var(--hdr)); overflow: auto; translate: 0 -.5rem; opacity: 0; visibility: hidden; transition: .25s;
      &[data-open] { translate: 0; opacity: 1; visibility: visible; }
      & ul { flex-direction: column; gap: .5rem; width: 100%; } & a { font-size: 1.1rem; }
      & .sub-wrap { justify-content: space-between; width: 100%; } & .sub-toggle { width: 2.75rem; height: 2.75rem; }
      & .has-sub .sub { display: none; gap: .1rem; padding: .25rem 0 .5rem 1rem; border-left: 1px solid rgb(255 255 255 / .25); margin-left: .25rem; & a { font-size: 1rem; opacity: .9; display: block; padding-block: .45rem; } }
      & .has-sub[data-open] .sub { display: flex; } & .lang { margin-top: .5rem; } }
  }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.6rem; border: 1px solid currentColor; background: transparent; color: inherit; text-decoration: none; font-weight: 500; font-size: .92rem; letter-spacing: .02em; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
    &:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
    &.solid { background: var(--ink); color: #fff; border-color: var(--ink); &:hover { background: var(--slate); border-color: var(--slate); } }
    &.solid.light { background: #fff; color: var(--ink); border-color: #fff; &:hover { background: transparent; color: #fff; } }
    &.ghost { border-color: transparent; padding-inline: .5rem; text-decoration: underline; text-underline-offset: .25em; &:hover { background: transparent; color: inherit; border-color: transparent; } } }
  .site-footer .btn, .carousel .btn { }
  .carousel .btn.solid { background: #fff; color: var(--ink); border-color: #fff; &:hover { background: transparent; color: #fff; } }
  @media (prefers-color-scheme: dark) { .btn.solid { background: #ECE9E2; color: #111; border-color: #ECE9E2; &:hover { background: transparent; color: #ECE9E2; } } }
  .textlink { font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .1em; width: fit-content; }
  .eyebrow { font-size: .78rem; letter-spacing: .18em; font-weight: 500; text-transform: none; opacity: .8; margin-bottom: 1rem; }
  .lead { font-weight: 400; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: var(--muted); } .lead.big { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem); line-height: 1.5; color: var(--fg); font-weight: 400; }
  .fine { font-size: .8rem; color: var(--muted); line-height: 1.6; }
  .muted { color: var(--muted); }

  /* Carousel */
  .carousel { position: relative; background: var(--pack); color: #fff; isolation: isolate; overflow: hidden; }
  .slides { display: grid; grid-template-columns: minmax(0, 1fr); }
  .slide { grid-area: 1/1; position: relative; aspect-ratio: 2.4/1; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; min-height: 18rem;
    &[data-active] { opacity: 1; visibility: visible; z-index: 1; }
    & picture,& img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    &.is-contain { background: var(--pack); & img { object-fit: contain; } @media (min-width: 701px) { & img { object-position: 92% center; mask-image: linear-gradient(to right, transparent 33%, #000 47%); } } }
    &::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgb(0 0 0 / .32), transparent 55%), linear-gradient(to right, rgb(0 0 0 / .28), transparent 55%); }
    &.is-contain::after { background: none; }
  }
  .slide-copy { position: absolute; z-index: 2; inset: auto 0 clamp(3rem, 7vw, 5rem) 0; margin-inline: auto; display: grid; gap: .8rem; justify-items: start; max-width: var(--maxw);
    .is-contain & { inset-block: 0; & .slide-h { max-width: 11ch; } align-content: center; justify-items: start; width: min(100% - 2*var(--gap), var(--maxw)); } }
  .slide-h { font-size: var(--h1); font-weight: 400; line-height: 1.12; max-width: 18ch; text-wrap: balance; text-shadow: 0 1px 24px rgb(0 0 0 / .25); }
  .slide-s { font-size: clamp(1rem, .95rem + .3vw, 1.2rem); opacity: .95; }
  .car-ui { position: absolute; inset: auto 0 1rem 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: .75rem; margin-inline: auto; pointer-events: none; & > * { pointer-events: auto; } }
  .dots { display: flex; gap: .25rem; }
  .dot { width: 2.25rem; height: 2.25rem; background: none; border: 0; cursor: pointer; position: relative; &::after { content: ""; position: absolute; inset: 50% .5rem auto; height: 3px; translate: 0 -50%; background: rgb(255 255 255 / .45); transition: background .2s; } &[aria-current="true"]::after { background: #fff; } &:hover::after { background: rgb(255 255 255 / .85); } }
  .arrow,.playpause { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgb(255 255 255 / .6); background: rgb(0 0 0 / .25); color: #fff; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(4px); transition: background .2s;
    &:hover { background: rgb(0 0 0 / .55); } & svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } }
  .arrow.prev { margin-right: auto; } .arrow.next { margin-left: 0; }
  @media (min-width: 701px) { .car-ui { inset: 0; align-items: center; justify-content: space-between; padding-inline: 1.25rem; width: 100%; max-width: none; } .dots { position: absolute; bottom: 1rem; left: 50%; translate: -50% 0; } .arrow.prev { margin: 0; } .playpause { position: absolute; right: 1.25rem; bottom: .75rem; width: 2.25rem; height: 2.25rem; } }
  .playpause .i-play { display: none; fill: currentColor; } .playpause[data-paused] .i-play { display: block; } .playpause[data-paused] .i-pause { display: none; }
  @media (max-width: 700px) {
    .slide.is-contain { aspect-ratio: auto; max-height: none; display: flex; flex-direction: column; justify-content: center; padding-block: 1.25rem 6rem; background: var(--pack);
      & picture { position: static; display: block; width: 100%; } & .slide-h { max-width: none; } & img { position: static; height: auto; aspect-ratio: 3/2; width: 100%; object-fit: contain; }
      & .slide-copy,& .slide-copy { position: static; inset: auto; width: min(100% - 2*var(--gap), var(--maxw)); margin: 1.25rem auto 0; align-content: start; } &::after { display: none; } }
    .slide { aspect-ratio: 4/5; max-height: 82svh; }
    .slide-copy { inset: auto 0 4.5rem 0; } .is-contain .slide-copy { inset: auto 0 4.5rem 0; align-content: end; }
    .car-ui { gap: .25rem; } .arrow.prev { margin-right: 0; } .playpause { margin-left: .25rem; }
    .slide::after { background: linear-gradient(to top, rgb(0 0 0 / .55), transparent 55%); } .slide.is-contain::after { background: linear-gradient(to top, rgb(0 0 0 / .45), transparent 45%); }
  }

  .hero-text { padding-block: clamp(3rem, 6vw, 5rem); & .narrow { display: grid; gap: 1.25rem; justify-items: start; text-align: left; } & .eyebrow { margin: 0; } & .lead { margin: 0; max-width: 56ch; } }
  .intro .wide { margin: 0; & img { width: 100%; aspect-ratio: 21/9; object-fit: cover; } }
  .intro .narrow { padding-block: var(--pad); & p { color: var(--muted); margin-top: 1.25rem; } }
  .final { background: var(--slate); color: #fff; padding-block: var(--pad); & .narrow { display: grid; gap: 1.25rem; justify-items: center; } & p { margin: 0; opacity: .9; max-width: 55ch; } }

  /* Page hero */
  .phero { position: relative; min-height: clamp(18rem, 44vw, 30rem); display: grid; align-items: end; color: #fff; isolation: isolate; background: var(--ink);
    &.short { min-height: clamp(14rem, 28vw, 20rem); }
    &.plain { min-height: 0; padding-block: clamp(3rem, 7vw, 5rem); background: var(--slate); align-items: center; }
    & .phero-img { position: absolute; inset: 0; z-index: -1; & img { width: 100%; height: 100%; object-fit: cover; } &::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .55), rgb(0 0 0 / .1) 65%); } }
    & .phero-copy { padding-block: clamp(2rem, 5vw, 4rem); & h1 { max-width: 20ch; } & .eyebrow { opacity: .9; } } }

  /* Cards */
  .grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
  .card { display: grid; background: var(--bg); border: 1px solid var(--line); overflow: hidden; transition: translate .3s, box-shadow .3s;
    &:hover { translate: 0 -3px; box-shadow: 0 12px 34px rgb(0 0 0 / .12); }
    & .card-img { display: block; overflow: hidden; & img { width: 100%; height: auto; aspect-ratio: 4/3.3; object-fit: cover; transition: scale .6s; } }
    &:hover .card-img img { scale: 1.04; }
    & .card-body { padding: 1.5rem 1.5rem 1.75rem; display: grid; gap: .75rem; justify-items: start; & p { margin: 0; color: var(--muted); font-size: .98rem; } } }

  .pdp { padding-block: var(--pad); }
  .specs { display: grid; gap: 1rem; margin-block: .5rem; width: 100%; border-block: 1px solid var(--line); padding-block: 1.25rem;
    & dt { font-size: .75rem; letter-spacing: .14em; opacity: .65; } & dd { margin: .25rem 0 0; } }

  /* Contact */
  .contact-grid { display: grid; gap: var(--gap); @media (min-width: 900px) { grid-template-columns: 5fr 7fr; align-items: start; } }
  .offices { display: grid; gap: 1.75rem; & img { height: auto; } & address { font-style: normal; color: var(--muted); } & h3 { letter-spacing: .14em; margin-bottom: .35rem; } & p { margin: 0; } & img { aspect-ratio: 4/3; object-fit: cover; width: 100%; } }
  .form { display: grid; gap: 1.25rem; background: var(--bg); padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid var(--line); }
  .fgrid { display: grid; gap: 1.25rem; @media (min-width: 640px) { grid-template-columns: 1fr 1fr; } }
  .field { display: grid; gap: .4rem; & label { font-size: .85rem; font-weight: 500; } }
  .field input:not([type=checkbox]),.field select,.field textarea { width: 100%; padding: .75rem .85rem; background: var(--bg); border: 1px solid color-mix(in oklab, var(--fg) 35%, transparent); border-radius: 2px; min-height: 2.9rem;
    &:focus-visible { outline: 2px solid var(--fjord); outline-offset: 1px; border-color: var(--fjord); } }
  .field:has(:user-invalid) .err,.field.invalid .err { display: block; }
  .field :user-invalid { border-color: #b3261e; }
  .err { color: #b3261e; font-size: .8rem; } @media (prefers-color-scheme: dark) { .err { color: #ff8a80; } }
  .check label { display: flex; gap: .75rem; align-items: flex-start; font-weight: 400; font-size: .9rem; line-height: 1.5; & input { margin-top: .2rem; width: 1.15rem; height: 1.15rem; accent-color: var(--slate); flex: none; } }
  .hp { position: absolute; left: -9999px; }
  .fail { padding: 1rem; background: color-mix(in oklab, #b3261e 12%, transparent); border-left: 3px solid #b3261e; }
  .ok { padding: 1rem; background: color-mix(in oklab, var(--slate) 18%, transparent); border-left: 3px solid var(--slate); }
  .req { color: #b3261e; }

  /* Legal */
  .legal { display: grid; gap: var(--gap); @media (min-width: 900px) { grid-template-columns: 220px 1fr; } 
    & nav { position: sticky; top: calc(var(--hdr) + 1rem); align-self: start; & ul { display: grid; gap: .6rem; } & a { text-decoration: none; font-size: .9rem; } }
    & .legal-sec { padding-bottom: 3rem; max-width: 70ch; & h2 { margin-bottom: .5rem; } & h3 { margin-top: 1.75rem; } & p { color: var(--muted); margin-top: .6rem; } } }

  /* Footer */
  .site-footer { background: var(--ink); color: #F5F3EE; padding-block: 3.5rem calc(2rem + env(safe-area-inset-bottom, 0px));
    & .fcols { display: grid; gap: 2rem; margin-bottom: 2rem; @media (min-width: 800px) { grid-template-columns: 1fr auto; align-items: start; } }
    & .tag { margin-top: 1rem; opacity: .8; font-size: .95rem; }
    & .flinks { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; font-size: .9rem; & a { text-decoration: none; &:hover { text-decoration: underline; } } }
    & .fine { color: rgb(245 243 238 / .6); margin-top: .5rem; } }
  .linklike { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: .22em; font-size: inherit; }

  /* Cookie UI */
  .cookie { position: fixed; z-index: 90; inset: auto 1rem calc(1rem + env(safe-area-inset-bottom, 0px)) 1rem; max-width: 46rem; margin-inline: auto; padding: 1.1rem 1.25rem; background: var(--ink); color: #F5F3EE; border: 1px solid rgb(255 255 255 / .2); box-shadow: 0 18px 50px rgb(0 0 0 / .35); display: grid; gap: .9rem; font-size: .88rem; line-height: 1.55;
    & p { margin: 0; } & a { text-underline-offset: .2em; } & .btn { padding: .65rem 1.1rem; font-size: .85rem; } & .btn.solid { background: #fff; color: var(--ink); border-color: #fff; } & .btn:hover { background: #fff; color: var(--ink); } &[hidden] { display: none; } }
  .prefs { margin: auto; width: min(32rem, 100% - 2rem); border: 0; padding: 1.75rem; background: var(--bg); color: var(--fg); box-shadow: 0 30px 80px rgb(0 0 0 / .4);
    &::backdrop { background: rgb(0 0 0 / .55); backdrop-filter: blur(3px); } & form { display: grid; gap: 1rem; }
    & .opt { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding-block: .75rem; border-bottom: 1px solid var(--line); & small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.5; } & input { width: 1.4rem; height: 1.4rem; accent-color: var(--slate); flex: none; } }
    & .btn.solid { background: var(--ink); color: #fff; } }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
      @keyframes rise { from { opacity: 0; translate: 0 2rem; } to { opacity: 1; translate: 0; } }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; } *,*::before,*::after { transition-duration: .01ms !important; animation: none !important; }
    .slide { transition: none; }
  }
}