@font-face {
  font-family: "Familjen";
  src: url("/assets/fonts/familjen-grotesk-var.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --steel: #A9B1B3;
  --sky: #2E6DB4;
  --pink: #F28FBF;
  --blue: #2F95D6;
  --orange: #F06B47;
  --lemon: #EDE54A;
  --ink: #1B1F21;
  --night: #121314;
  --paper: #F1F0EC;
  --paper-2: #D2D0CA;
  --font: "Familjen", system-ui, sans-serif;
  --gutter: clamp(1rem, 4vw, 3rem);
  --rule: #2B2D2F;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--paper); font-family: var(--font); font-size: 1.0625rem; line-height: 1.55; }
a { color: inherit; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--lemon); outline-offset: 4px; }
.page { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; z-index: 10; inset: .5rem auto auto .5rem; padding: .6rem 1rem; background: var(--night); color: var(--paper); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* Shared company header. Product navigation deliberately stays unwrapped. */
.sky { background: var(--sky); color: #FFF; }
.head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0; }
.head .home { font-weight: 700; text-decoration: none; font-size: 1.0625rem; }
.head nav { display: flex; gap: 1.25rem; font-size: .9375rem; }
.head a { white-space: nowrap; }
.sky a:focus-visible { outline-color: #FFF; }
@media (max-width: 560px) {
  .head { align-items: center; }
  .head nav { flex-direction: column; align-items: flex-end; gap: .3rem; }
}

/* Paint is below the rib overlay; the leaf layer shades the whole steel wall.
   This is the approved direction-D construction, not a photograph or canvas. */
.steel { position: relative; overflow: hidden; isolation: isolate; background-color: var(--steel);
  background-image: repeating-linear-gradient(90deg,
    rgb(255 255 255 / .30) 0 3px, rgb(255 255 255 / 0) 3px 9px,
    rgb(0 0 0 / .07) 9px 15px, rgb(0 0 0 / .18) 15px 17px, rgb(255 255 255 / 0) 17px 22px); }
.steel::before { content: ""; position: absolute; inset: 17% 0 auto; height: 7px; z-index: 1;
  background: linear-gradient(#7F888B, #C4CACC 40%, rgb(0 0 0 / .18)); }
.steel::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image: repeating-linear-gradient(90deg,
    rgb(255 255 255 / .10) 0 3px, rgb(255 255 255 / 0) 3px 9px,
    rgb(0 0 0 / .05) 9px 15px, rgb(0 0 0 / .12) 15px 17px, rgb(255 255 255 / 0) 17px 22px); }
.shade { position: absolute; inset: -6%; z-index: 5; pointer-events: none; mix-blend-mode: multiply; opacity: .34; filter: blur(3px);
  background: url("/assets/leaves.svg") center / cover no-repeat; transform-origin: 85% 0; }
@media (prefers-reduced-motion: no-preference) {
  .shade { animation: sway 9s ease-in-out infinite alternate; }
  @keyframes sway { from { transform: translate(-1.5%, 0) rotate(-1deg); } to { transform: translate(1.5%, .6%) rotate(1deg); } }
}
@media (prefers-reduced-motion: reduce) { .shade { animation: none; transform: none; } }
.hero { position: relative; padding: clamp(4rem, 12vw, 8.5rem) 0 clamp(3rem, 8vw, 5.5rem); }
.mark { position: relative; z-index: 2; margin: 0; font-weight: 700; font-size: clamp(3.25rem, 12vw, 9.5rem); line-height: .92; letter-spacing: -.012em; }
.mark span { display: block; width: fit-content; text-shadow: .012em .012em 0 var(--ink), .024em .024em 0 var(--ink), .036em .036em 0 var(--ink), .048em .048em 0 var(--ink); }
.mark .hi { color: var(--pink); }
.mark .lo { color: var(--blue); }
.hero p { position: relative; z-index: 2; margin: 2.5rem 0 0; }
.make { display: inline-block; color: var(--ink); font-weight: 700; font-size: clamp(1.5625rem, 3.85vw, 2.625rem); line-height: 1; letter-spacing: -.01em; }
.hero--short { padding: clamp(1.4rem, 4vw, 2.5rem) 0; }
.mark--inner { color: var(--ink); font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1; }
/* The short crop puts the same leaves directly over the page title. A lighter
   shadow preserves large-text AA on the actual ribs, not just flat tokens. */
.steel--short .shade { opacity: .16; }
.tape { height: 22px; background: repeating-linear-gradient(-45deg, var(--lemon) 0 18px, var(--ink) 18px 36px); }

/* The music-making story follows the approved draft. */
.night { background: var(--night); color: var(--paper); }
.section { padding-block: clamp(3rem, 8vw, 6rem); }
.grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .grid { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.name { margin: 0 0 .75rem; font-weight: 700; font-size: 1.0625rem; }
.name small { display: block; margin-top: .2rem; font-weight: 400; color: var(--paper-2); font-size: .9375rem; }
.product h2 { margin: 0; font-size: clamp(2.5rem, 6.5vw, 4.75rem); line-height: .95; letter-spacing: -.035em; font-weight: 700; }
.lede { margin: 1.5rem 0 0; font-size: 1.1875rem; color: var(--paper-2); max-width: 40ch; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 3.25rem 1fr; gap: 0 1rem; padding: 1.25rem 0; border-top: 2px solid var(--rule); }
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps li::before { content: counter(s); grid-row: span 2; width: 3.25rem; height: 3.25rem; display: grid; place-items: center; background: var(--c); color: var(--ink); font-weight: 700; font-size: 1.5rem; border-radius: 50% 46% 52% 48% / 48% 54% 46% 52%; }
.steps h3 { margin: .2rem 0 .15rem; font-size: 1.3125rem; letter-spacing: -.01em; }
.steps p { margin: 0; color: var(--paper-2); }
.s1 { --c: #CB8B76; } .s2 { --c: #B1B6B3; } .s3 { --c: #77B4BF; } .s4 { --c: #E7C84B; }
.further { margin-top: 4rem; padding-top: 2rem; border-top: 2px solid var(--rule); display: grid; gap: 1rem; }
@media (min-width: 900px) { .further { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.further h3 { margin: 0; font-size: 1.625rem; letter-spacing: -.02em; line-height: 1.1; }
.exports { margin: 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
@media (min-width: 600px) { .exports { grid-template-columns: repeat(3, 1fr); } }
.exports li { background: #1D1F21; padding: 1rem; border-radius: 4px; }
.exports strong { display: block; font-size: 1.0625rem; }
.exports span { color: var(--paper-2); font-size: .9375rem; }
.cta { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.status { font-weight: 700; }
.btn { display: inline-block; background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 700; padding: .85rem 1.25rem; border-radius: 999px; }
.btn:hover { background: var(--lemon); }
.btn:focus-visible { outline-color: var(--lemon); }

/* Inner company pages retain WEB-001's reviewed text, not its interim styles. */
.reading { max-width: 68ch; padding-block: clamp(2rem, 7vw, 4rem); line-height: 1.65; }
.reading .intro { font-size: 1.1875rem; color: var(--paper); margin: 0 0 2.5rem; }
.reading .updated { margin: -.5rem 0 2.5rem; color: var(--paper-2); font-size: .9375rem; }
.reading h2 { margin: 2.25rem 0 .5rem; font-size: 1.125rem; font-weight: 650; line-height: 1.3; }
.reading p, .reading ul { margin: 0 0 1rem; color: var(--paper-2); }
.reading ul { padding-left: 1.25rem; }
.reading li { margin-bottom: .35rem; }
.reading strong { color: var(--paper); font-weight: 600; }
.reading a { overflow-wrap: anywhere; }
.site-foot .page { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; padding-top: 1.25rem; padding-bottom: 2.5rem; font-size: .875rem; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.site-foot a { color: var(--paper-2); }
.site-foot a:hover, .site-foot a[aria-current="page"] { color: var(--paper); }