/* Section patterns shared by the pages (19 Oct 2026, the Mercura-style structure): the eyebrow over a
   section heading, the customer strip under a hero, proof numbers, the customer story band, the
   why-us cards and the trust row above the footer. The build links it on every page. The canvas loads
   the same file as an uploaded asset in each board's <head>: after editing it, upload it again and
   repoint those <link>s and the id in BLOBS (README). No relative asset paths in this file.
   Motion: only transform, opacity and clip-path animate; hover only where there is a real pointer. */

/* Eyebrow: a small label over a section heading, a square in the brand orange before it. */
p.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 18px;max-width:none;color:var(--muted);font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.08em;text-transform:uppercase}
.eyebrow::before{content:"";flex-shrink:0;width:7px;height:7px;background:var(--orange)}
.section-intro>.eyebrow{grid-column:1/-1;max-width:none;margin-bottom:16px;padding-top:0;color:var(--muted);font-size:12px}
@media(max-width:760px){.section-intro>.eyebrow{margin-bottom:-14px}}
p.eyebrow.eyebrow-night,.eyebrow-night{color:var(--night-muted)}
.story-intro>.eyebrow{grid-column:1/-1;margin-bottom:calc(18px - var(--stack))}
.hero-title>.eyebrow{margin-bottom:24px}
@media(max-width:760px){.story-intro>.eyebrow{margin-bottom:-10px}.hero-title>.eyebrow{margin-bottom:18px}}

/* A hero's call with a quieter second way in beside it ("See how it works"). */
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.hero-actions .text-link{margin-top:0}

/* Customer strip: who it runs at, under the hero, in place of a row of logos, and the parts working there
   today, each a green chip (Matas, 19 Oct 2026: only what runs at LHM Step; checked on production that day). */
.logo-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;padding-block:20px;border-block:1px solid var(--line)}
.logo-strip-in{display:flex;align-items:center;gap:18px;margin:0;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.logo-strip img{display:block;width:auto;height:40px;mix-blend-mode:multiply}
.logo-strip-facts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0;padding:0;list-style:none}
.logo-strip-facts li{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;border-radius:999px;background:var(--green-soft);color:var(--green);font-size:13px;font-weight:650;line-height:1.35;white-space:nowrap}
@media(max-width:760px){.logo-strip-facts{justify-content:flex-start}}

/* Proof numbers: what is measured on the left, the number on the right. */
.metric-rows{margin:0;padding:0;border-bottom:1px solid var(--line)}
.metric-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 40px;padding:clamp(22px,2.6vw,34px) 0}
.metric-row::before{content:"";position:absolute;top:0;left:0;right:0;border-top:1px solid var(--line);transform-origin:0 50%}
.metric-row dt{display:grid;gap:8px;max-width:56ch}
.metric-label{color:var(--ink);font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.08em;text-transform:uppercase}
.metric-text{color:var(--muted);font-size:15px;line-height:1.6}
.metric-value{margin:0;color:var(--ink);font-size:clamp(3rem,6.4vw,5.6rem);font-weight:550;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap}
.metric-note{margin-top:20px;max-width:64ch;color:var(--muted);font-size:13px;line-height:1.65}
.metric-note a{color:var(--ink)}
@media(max-width:640px){
  .metric-row{grid-template-columns:minmax(0,1fr);gap:10px}
  .metric-value{grid-row:1;font-size:3.2rem}
}

/* What the LHM Step rate is in hours (20 Oct 2026): a worked example under the proof numbers, its assumptions in
   the labels, the note beside it saying it is an example. */
.proof-example{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:28px 0 0}
.proof-example>div{display:grid;gap:8px;align-content:start;padding:20px 22px 22px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.proof-example dt{color:var(--muted);font-size:13px;line-height:1.5}
.proof-example dd{margin:0;color:var(--ink);font-size:clamp(2rem,3.4vw,2.8rem);font-weight:550;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.proof-example .proof-back{color:var(--green)}
.proof-example-text{margin:18px 0 0;max-width:64ch;color:var(--ink);font-size:15px;line-height:1.6}
@media(max-width:560px){.proof-example{grid-template-columns:minmax(0,1fr)}}

/* Customer story band: a dark panel beside a photo. */
.story-band{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);overflow:hidden;border-radius:20px;background:var(--ink);color:var(--surface)}
.story-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:clamp(32px,4.4vw,64px)}
.story-copy .eyebrow{margin:0}
.story-logo{display:block;width:auto;height:44px;filter:invert(1)}
.story-copy h2,.story-copy .story-title{max-width:20ch;color:var(--surface);font-size:clamp(1.7rem,2.4vw,2.35rem);line-height:1.18;letter-spacing:-.03em}
.story-ref{color:var(--night-text);font-size:14px;line-height:1.6}
.story-copy .button{margin-top:auto}
.story-photo{position:relative;min-height:340px;margin:0}
.story-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story-photo figcaption{position:absolute;right:14px;bottom:12px;padding:2px 8px;border-radius:4px;background:rgba(37,37,33,.55);color:var(--surface);font-size:11px;line-height:1.6}
.button-night{border-color:var(--night-line);background:transparent;color:var(--surface)}
.button-night:focus-visible{outline-color:var(--surface)}
@media(hover:hover) and (pointer:fine){.button-night:hover{border-color:var(--surface);color:var(--surface)}}
@media(max-width:900px){
  .story-band{grid-template-columns:minmax(0,1fr)}
  .story-photo{order:-1;min-height:0;aspect-ratio:3/2}
}

/* The problem (20 Oct 2026, after mercura.ai's section of that name; trimmed the same evening): the intro on the
   left with the lead and the formats requests arrive in as chips; on the right one short card per problem, its
   label over the heading. The numbered list and the line art that repeated the cards are gone. One column below
   1024px. Nothing animates here. */
.problem{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.problem-intro>.eyebrow{margin-bottom:22px}
.problem-intro h2{max-width:14ch}
.problem-lead{max-width:44ch;margin:24px 0 0;color:var(--ink);font-size:17px;line-height:1.6}
.problem-tags-label{margin:30px 0 0;color:var(--muted);font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.08em;text-transform:uppercase}
.problem-tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.problem-tags li{display:inline-flex;align-items:center;gap:8px;padding:6px 11px 6px 10px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--muted);font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.08em;text-transform:uppercase}
.problem-tags li::before{content:"";flex-shrink:0;width:6px;height:6px;background:var(--orange)}
.problem-cards{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.problem-card{padding:clamp(24px,2.6vw,34px) clamp(24px,3vw,40px);border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.problem-copy{display:grid;gap:12px}
.problem-num{display:grid;gap:2px;margin:0;color:var(--muted);font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.08em;text-transform:uppercase}
.problem-num span{color:var(--orange);font-variant-numeric:tabular-nums}
.problem-card h3{max-width:26ch;font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.22;letter-spacing:-.025em;text-wrap:balance}
.problem-card .problem-text{max-width:58ch;margin:0;color:var(--muted);font-size:16px;line-height:1.6}
@media(max-width:1023px){.problem{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.problem-card{padding:22px 20px 24px}.problem-card h3{font-size:1.3rem}}

/* The CEO's testimonial (20 Oct 2026, received by Matas; quoted verbatim): an excerpt in the story band on Home and
   in the LHM Step record on For manufacturers, the whole text on Customer stories. */
.story-quote{margin:0;padding:0;color:var(--surface)}
.story-quote p{margin:0;max-width:34ch;font-size:clamp(1.15rem,1.5vw,1.45rem);font-weight:550;line-height:1.4;letter-spacing:-.015em;text-wrap:pretty}
.story-band .story-ref strong{color:var(--surface);font-weight:650}
.testimonial{display:grid;gap:22px;margin:0;max-width:66ch}
.testimonial blockquote{margin:0;padding:0 0 0 22px;border-left:2px solid var(--orange)}
.testimonial blockquote p{margin:0;color:var(--ink);font-size:17px;line-height:1.6}
.testimonial blockquote p+p{margin-top:14px}
.testimonial blockquote p:first-child{font-size:clamp(1.25rem,1.8vw,1.6rem);font-weight:550;line-height:1.35;letter-spacing:-.02em;text-wrap:pretty}
.testimonial figcaption{display:grid;gap:2px;font-size:14px;line-height:1.5;color:var(--muted)}
.testimonial figcaption strong{color:var(--ink);font-size:15px;font-weight:650}
.testimonial-short{margin:20px 0 0;padding:0 0 0 14px;border-left:2px solid var(--orange);color:var(--ink);font-size:15px;line-height:1.6}
.testimonial-short p{margin:0}
.testimonial-short cite{display:block;margin-top:6px;font-style:normal;font-size:13px;color:var(--muted)}

/* Why-us cards: four short promises, each with a label. */
.why-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.why-card{position:relative;display:flex;flex-direction:column;gap:10px;min-height:220px;padding:24px 24px 26px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.why-label{margin:0 0 auto;padding-bottom:28px;color:var(--orange-text);font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.08em;text-transform:uppercase}
.why-card svg{position:absolute;top:22px;right:22px;width:22px;height:22px;fill:none;stroke:var(--dash);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.why-card h3{font-size:19px;line-height:1.3;letter-spacing:-.02em}
.why-card p:last-child{color:var(--muted);font-size:15px;line-height:1.6}
@media(max-width:1100px){.why-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.why-cards{grid-template-columns:minmax(0,1fr)}.why-card{min-height:0}}

/* Trust row: three plain facts above the footer. */
.trust-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:0;padding:32px 0;border-top:1px solid var(--line);list-style:none}
.trust-row li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:center}
.trust-row svg{grid-row:1/3;width:36px;height:36px;padding:8px;border:1px solid var(--line);border-radius:50%;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.trust-row strong{font-size:13px;font-weight:650;line-height:1.35}
.trust-row span{color:var(--muted);font-size:12px;line-height:1.45}
.trust-row+.site-footer{border-top-color:var(--soft)}
@media(max-width:760px){.trust-row{grid-template-columns:minmax(0,1fr);gap:18px}}

/* The proof numbers arrive once, in order, when they come into view (site.js sets data-inview only when
   they start below the fold and motion is allowed). Without script or under reduced motion they are there. */
@keyframes sx-line{from{transform:scaleX(0)}}
@keyframes sx-rise{from{opacity:0;transform:translateY(14px)}}
@media screen and (prefers-reduced-motion:no-preference){
  .hero-title>.eyebrow{animation:dq-enter 800ms var(--ease) backwards}
  .metric-rows[data-inview=false] .metric-row::before{transform:scaleX(0)}
  .metric-rows[data-inview=false] .metric-row>*{opacity:0}
  .metric-rows[data-inview=true] .metric-row::before{animation:sx-line 700ms var(--ease) both}
  .metric-rows[data-inview=true] .metric-row>*{animation:sx-rise 600ms var(--ease) 120ms both}
  .metric-rows[data-inview=true] .metric-row:nth-child(2)::before{animation-delay:140ms}
  .metric-rows[data-inview=true] .metric-row:nth-child(2)>*{animation-delay:260ms}
  .metric-rows[data-inview=true] .metric-row:nth-child(3)::before{animation-delay:280ms}
  .metric-rows[data-inview=true] .metric-row:nth-child(3)>*{animation-delay:400ms}
}

/* The agency model (25 Oct 2026): a second line inside a section intro's paragraph (What we build's "Start with one
   of these"), its small print (the audit is paid), and the line after the three steps that points past the pilot. */
.section-intro .intro-more{display:block;margin-top:14px;color:var(--ink)}
.section-intro .intro-note{display:block;margin-top:14px;font-size:13px}
.pilot-more{margin:28px 0 0;max-width:60ch;color:var(--ink);font-size:15px;line-height:1.55}
.pilot-more+.link-stack{margin-top:18px}

/* The language switcher (25 Oct 2026): EN / NO in the header and the footer, each linking to the same page in the
   other language. Plain links: nothing is stored, nobody is redirected. */
.lang-switch{display:flex;align-items:center;margin:0;font-size:12px;font-weight:650;line-height:1;letter-spacing:.06em}
.lang-switch>a,.lang-switch>[aria-current]{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:32px;padding:0 4px;color:var(--muted);text-decoration:none;transition:color 160ms}
.lang-switch>[aria-current]{color:var(--ink)}
.lang-switch>.lang-sep{color:var(--line)}
@media(hover:hover){.lang-switch>a:hover{color:var(--orange)}}
.site-header>.lang-switch{margin-left:auto}
.site-footer .lang-switch{justify-content:flex-end;margin-right:-4px}
@media(max-width:900px){.site-header>.lang-switch{margin-right:6px}.lang-switch>a,.lang-switch>[aria-current]{min-width:36px;min-height:44px}}