/* Shared presentation of Aquilora's fictional design concepts. */
[hidden] { display: none !important; }
body { --demo-ink: #173236; --demo-paper: #fff9ec; }
#designprov-banner { position: relative; z-index: 110; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px max(24px, calc((100vw - 1280px) / 2)); background: #173236; color: #fff9ec; font: 13px/1.5 system-ui, sans-serif; }
#designprov-banner > span { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#designprov-banner a { color: inherit; text-decoration: underline; text-underline-offset: 4px; flex-shrink: 0; padding-block: 6px; }
.demo-tag { color: #b7d8c8; border-left: 1px solid #5e7779; padding-left: 8px; }
.demo-skip { position: fixed; top: 8px; left: 16px; z-index: 120; padding: 12px 20px; background: #fff9ec; color: #173236; transform: translateY(-180%); }
.demo-skip:focus { transform: none; }
a:focus-visible, button:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid #b97923; outline-offset: 5px; }
.lookbook-scroll::-webkit-scrollbar, .ref-scroll::-webkit-scrollbar { display: block; height: 8px; }
.lookbook-scroll::-webkit-scrollbar-thumb, .ref-scroll::-webkit-scrollbar-thumb { background: #a89c8c; border-radius: 4px; }
#designprov-banner a:focus-visible, .top-zone a:focus-visible, .hero-box a:focus-visible, footer a:focus-visible { outline-color: #f6b63a; }
button, .btn, .btn-dark, .btn-outline, .button, .call, .ghost { min-height: 44px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
[id] { scroll-margin-top: 110px; }
.reveal, .fade-in, .fade-in-observer, .fade-up { opacity: 1 !important; transform: none !important; animation: none !important; }
.demo-contact { max-width: 1280px; margin: 64px auto; padding: clamp(24px, 5vw, 64px); display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; background: #e9eee6; color: #173236; border-top: 3px solid #173236; font-family: system-ui, sans-serif; }
.demo-contact .demo-eyebrow, .demo-eyebrow { font: 500 12px/1.6 system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 20px; }
.demo-contact h2 { font: 500 clamp(28px, 3vw, 42px)/1.15 system-ui, sans-serif; letter-spacing: -.035em; color: #173236; margin: 0 0 20px; }
.demo-contact p { color: #2d4d50; max-width: 55ch; font-size: 15px; line-height: 1.7; }
.demo-contact-action { align-self: center; }
.demo-primary { display: inline-flex; align-items: center; gap: 16px; background: #173236; color: #fff9ec; padding: 16px 22px; margin: 24px 0 16px; font-size: 15px; font-weight: 600; line-height: 1.5; transition: background .2s; }
.demo-primary:hover { background: #0a5e62; }
.demo-primary:active { transform: translateY(1px); }
.demo-back { display: block; width: fit-content; text-decoration: underline; text-underline-offset: 4px; font-size: 14px; }
.demo-footer { padding: 24px; background: #173236; color: #fff9ec; font: 14px/1.6 system-ui, sans-serif; text-align: center; }

/* Retail: retain the editorial illustration style, strengthen type and browsing. */
[data-demo="retail"] .nav-desktop, [data-demo="retail"] .nav-mobile { position: sticky; top: 0; background: #faf8f5; mix-blend-mode: normal; color: #2a1c14; border-bottom: 1px solid #e8dfd5; }
[data-demo="retail"] .hero { min-height: auto; padding-top: 48px; }
[data-demo="retail"] .hero-title { font-weight: 600; letter-spacing: -.045em; line-height: .92; }
[data-demo="retail"] .hero-lead { font-size: 18px; line-height: 1.7; max-width: 42ch; }
[data-demo="retail"] .nav-links { font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: .02em; }
[data-demo="retail"] .hero-open { font-size: 13px; }
[data-demo="retail"] .hero-media { min-height: 560px; }
[data-demo="retail"] .hero-title { font-size: clamp(56px, 7vw, 94px); }
[data-demo="retail"] .hero-text { padding-inline: clamp(24px, 4vw, 64px); }
[data-demo="retail"] .hero-media-inset { left: 6%; width: 36%; bottom: 24px; }
[data-demo="retail"] .lb-item { cursor: default; }

/* Craft: material-led editorial design, with more legible body copy. */
[data-demo="hantverk"] { font-weight: 400; }
[data-demo="hantverk"] #navbar { position: sticky; top: 0; mix-blend-mode: normal; background: #f6f1ea; border-bottom: 1px solid #dfd3c5; }
[data-demo="hantverk"] #navbar .nav-brand, [data-demo="hantverk"] #navbar .nav-link, [data-demo="hantverk"] #navbar .nav-hamb { color: #241b15; }
[data-demo="hantverk"] .hero { min-height: auto; padding-block: 48px 72px; }
[data-demo="hantverk"] .hero-title { font-size: clamp(48px, 5.8vw, 88px); line-height: .98; letter-spacing: -.035em; }
[data-demo="hantverk"] .hero-title em { font-weight: 400; color: #906741; }
[data-demo="hantverk"] .hero-lead { max-width: 44ch; font-size: 18px; line-height: 1.7; }
[data-demo="hantverk"] .nav-link { font-size: 14px; text-transform: none; letter-spacing: .02em; }
[data-demo="hantverk"] .btn-dark, [data-demo="hantverk"] .btn-outline, [data-demo="hantverk"] .cta-nav { border-radius: 3px; }
[data-demo="hantverk"] #navbar .cta-nav { color: #fffdf8; background: #624326; border-color: #624326; }
[data-demo="hantverk"] .hero-frame { aspect-ratio: 1.12; border-radius: 2px; }

/* Cold chain: a concrete process diagram replaces the placeholder motif. */
[data-demo="logistik"] { font-weight: 400; }
[data-demo="logistik"] #navbar { position: sticky; top: 0; mix-blend-mode: normal; background: #eaf2f8; border-bottom: 1px solid #c4d8e2; }
[data-demo="logistik"] #navbar .nav-brand, [data-demo="logistik"] #navbar .nav-link, [data-demo="logistik"] #navbar .nav-hamburger { color: #0c3547; }
[data-demo="logistik"] #navbar .cta-nav { color: #fff; background: #146b80; border-color: #146b80; }
[data-demo="logistik"] .hero { padding-block: 72px; }
[data-demo="logistik"] .btn { border-radius: 4px; text-transform: none; letter-spacing: 0; font-size: 15px; white-space: normal; }
[data-demo="logistik"] .btn-primary { background: #146b80; }
[data-demo="logistik"] .hero-title { font-size: clamp(48px, 5.8vw, 82px); letter-spacing: -.045em; }
[data-demo="logistik"] .hero-visual { min-width: 0; }
.cold-chain { padding: clamp(24px, 3vw, 40px); background: #103545; border: 1px solid #3c6575; border-radius: 8px; color: #eaf2f8; }
.cold-chain h2 { font: 600 clamp(26px, 2.6vw, 36px)/1.2 'Sora', sans-serif; margin-bottom: 32px; letter-spacing: -.03em; }
.cold-chain ol { list-style: none; }
.cold-chain li { display: flex; gap: 18px; padding: 20px 0; border-top: 1px solid #3c6575; }
.cold-chain li > span { color: #89c4e1; font-variant-numeric: tabular-nums; }
.cold-chain strong { display: block; font-size: 16px; margin-bottom: 5px; }
.cold-chain li p, .chain-caption { color: #bed4df; font-size: 14px; }
.cold-chain .chain-caption { margin-top: 20px; font-size: 12px; }
[data-demo="logistik"] .om-badge-value { font-size: 22px; }
[data-demo="logistik"] .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-demo="logistik"] .card, [data-demo="logistik"] .card:hover { box-shadow: none; transform: none; border-radius: 4px; }

/* Automation: one accent and an annotated interface instead of decorative glow. */
[data-demo="tech"] { --blue: #326978; --cyan: #73b5ba; --radius: 8px; --radius-pill: 4px; background: #f2f5f5; }
[data-demo="tech"] .top-zone { background: #12242c; padding-bottom: 64px; }
[data-demo="tech"] .top-zone::after, [data-demo="tech"] .hero-card::before { content: none; }
[data-demo="tech"] .top-zone::before { animation: none; }
[data-demo="tech"] .nav { background: #12242c; }
[data-demo="tech"] .brand span:first-child { color: #9ec9cb; }
[data-demo="tech"] h1 { max-width: 14ch; font-size: clamp(40px, 4.5vw, 64px); line-height: 1.08; letter-spacing: -.045em; }
[data-demo="tech"] .hero-grid { align-items: center; }
[data-demo="tech"] .kicker { color: #b5d5d7; background: none; padding: 0; border-radius: 0; font: 500 13px/1.5 Geist, sans-serif; }
[data-demo="tech"] .hero-card { border-radius: 8px; animation: none; box-shadow: none; }
[data-demo="tech"] .card, [data-demo="tech"] .signal { box-shadow: none; border-radius: 4px; }
[data-demo="tech"] .card:hover, [data-demo="tech"] .signal:hover { transform: none; }

/* Service: decisive type and clear steps, with fewer nested panels. */
[data-demo="service"] .header { position: relative; padding-inline: 24px; backdrop-filter: none; }
[data-demo="service"] .alert { background: #efe9e0; color: #171513; border: 0; }
[data-demo="service"] .alert a { color: #171513; text-decoration: underline; background: none; }
[data-demo="service"] .hero { padding-top: 32px; }
[data-demo="service"] .hero-box { border-radius: 6px; box-shadow: none; background: #26221d; }
[data-demo="service"] .hero::before, [data-demo="service"] .section::before, [data-demo="service"] .section::after { content: none; }
[data-demo="service"] h1 { max-width: 12ch; font-size: clamp(42px, 4.6vw, 66px); line-height: 1.04; letter-spacing: -.045em; animation: none; }
[data-demo="service"] .kicker { border-radius: 0; padding: 0; background: none; font-size: 13px; letter-spacing: .025em; text-transform: none; }
[data-demo="service"] .call, [data-demo="service"] .ghost { border-radius: 4px; }
[data-demo="service"] .response { background: transparent; box-shadow: none; border-radius: 0; border: 0; border-left: 1px solid #625b54; }
[data-demo="service"] .job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-demo="service"] .job, [data-demo="service"] .equip { box-shadow: none; border-radius: 4px; }
[data-demo="service"] .job:hover, [data-demo="service"] .equip:hover { transform: none; }

@media (max-width: 767px) {
  #designprov-banner { padding: 10px 20px; font-size: 12px; align-items: flex-start; }
  .demo-tag { font-size: 11px; }
  .demo-contact { margin: 32px 16px; grid-template-columns: minmax(0, 1fr); gap: 28px; }
  [data-demo="tech"] h1, [data-demo="service"] h1 { max-width: 100%; }
  [data-demo="tech"] .nav-cta, [data-demo="service"] .header-inner > .call { display: none; }
  [data-demo="service"] .alert { display: none; }
  [data-demo="service"] .header { padding-top: 0; }
  [data-demo="hantverk"] .hero { padding-block: 36px 56px; }
  [data-demo="retail"] .hero { padding-top: 32px; }
  [data-demo="retail"] .hero-media { min-height: 360px; }
  [data-demo="hantverk"] .hero-frame { aspect-ratio: auto; }
  [data-demo="logistik"] .hero { padding-block: 40px; }
  [data-demo="logistik"] .cards, [data-demo="service"] .job-grid { grid-template-columns: minmax(0, 1fr); }
  [data-demo="service"] .response { border-left: 0; border-top: 1px solid #625b54; padding: 24px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Second design pass: editorial photography and a useful interactive example. */
.editorial-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.concept-caption { position: absolute; bottom: 16px; left: 16px; z-index: 2; padding: 6px 10px; background: #fff9ecef; color: #45382c; font: 11px/1.5 system-ui, sans-serif; }
[data-demo="retail"] .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); max-width: 1400px; margin: 0 auto; padding: 40px 40px 64px; gap: 48px; overflow: visible; }
[data-demo="retail"] .hero-text { width: auto; padding: 0; }
[data-demo="retail"] .hero-media { width: auto; margin: 0; min-height: 0; height: clamp(460px, 44vw, 600px); }
[data-demo="retail"] .hero-media-main { width: 100%; }
[data-demo="retail"] .hero-media-main::after { content: none; }
[data-demo="retail"] .hero-lead { font-weight: 400; font-size: 17px; max-width: 37ch; }
[data-demo="retail"] .btn-dark { border-radius: 2px; text-transform: none; letter-spacing: .02em; font-size: 14px; }
[data-demo="hantverk"] .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; }
[data-demo="hantverk"] .hero-text, [data-demo="hantverk"] .hero-media { grid-column: auto; min-width: 0; }
[data-demo="hantverk"] .hero-frame { height: clamp(440px, 42vw, 580px); aspect-ratio: auto; }
[data-demo="hantverk"] .hero-frame::after { content: none; }
[data-demo="hantverk"] .hero-title { max-width: 10ch; }
[data-demo="hantverk"] .hero-lead { max-width: 36ch; }
[data-demo="hantverk"] .btn-dark, [data-demo="hantverk"] .btn-outline { text-transform: none; letter-spacing: .015em; font-size: 14px; }
.operations-board { background: #f2f6f5; color: #203a40; border: 1px solid #c0d2d0; border-radius: 12px; padding: clamp(22px, 3vw, 36px); box-shadow: 0 24px 64px #081a2426; min-width: 0; font-family: Geist, system-ui, sans-serif; }
.operations-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; padding-bottom: 24px; }
.sample-label { font-size: 11px; font-weight: 400; color: #4e696f; }
.demo-switcher { display: flex; gap: 4px; padding: 4px; background: #e2eae8; border-radius: 6px; margin-bottom: 32px; }
.demo-switcher button { flex: 1; min-width: 0; padding: 10px 8px; border: 0; background: transparent; border-radius: 3px; color: #405d62; font: 500 13px/1.5 Geist, sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.demo-switcher button[aria-pressed="true"] { background: #fff; color: #173d43; box-shadow: 0 2px 4px #173d4310; }
.demo-switcher button:hover { color: #173d43; background: #f8fbfa; }
.demo-switcher button:active { transform: translateY(1px); }
.operations-panels { min-height: 310px; }
.operations-panels section { padding: 0; margin: 0; }
.operations-panels .operations-kicker { color: #517577; font-size: 12px; margin: 0 0 8px; }
.operations-panels h2 { color: #203a40; font: 600 clamp(24px, 2.2vw, 30px)/1.2 Geist, sans-serif; letter-spacing: -.035em; margin: 0 0 12px; }
.operations-panels p { color: #52686b; font-size: 14px; line-height: 1.6; }
.operations-panels dl { margin-top: 24px; }
.operations-panels dl > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid #d2dedb; font-size: 13px; }
.operations-panels dd { text-align: right; color: #315c54; }
.operations-panels dd i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #4e8175; margin-right: 6px; }
.operations-panels .attention { color: #785a2c; }
.operations-footnote { border-top: 1px solid #d2dedb; padding-top: 18px; margin-top: 8px; font-size: 11px; line-height: 1.5; color: #52686b; }
[data-demo="tech"] .top-zone::before { opacity: .12; }
[data-demo="tech"] .hero { padding-top: 56px; }
[data-demo="service"] .hero-box { background: #f5eee4; color: #26221d; }
[data-demo="service"] .hero-main { padding: clamp(24px, 4vw, 52px); border-bottom-color: #d8cec2; gap: 48px; }
[data-demo="service"] .hero-main h1 { color: #26221d; }
[data-demo="service"] .hero-main .lead { color: #625b54; }
[data-demo="service"] .kicker { color: #865723; }
[data-demo="service"] .response { border-color: #d8cec2; }
[data-demo="service"] .response h2 { color: #26221d; font-size: 26px; }
[data-demo="service"] .response-row { border-color: #d8cec2; }
[data-demo="service"] .response-row span { color: #865723; }
[data-demo="service"] .response-row p { color: #625b54; }
[data-demo="service"] .hero-main .ghost { border-color: #c6b5a1; color: #26221d; }
[data-demo="service"] .hero-strip { background: #26221d; color: #fffdf9; }
[data-demo="service"] .hero-box a:focus-visible { outline-color: #865723; }
[data-demo="logistik"] #snow-container, [data-demo="logistik"] .frost-deco { display: none; }
[data-demo="logistik"] .hero { min-height: auto; padding-block: 56px; }
[data-demo="logistik"] .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; }
[data-demo="logistik"] .cold-chain { border-radius: 4px; }
@media (max-width: 767px) {
  [data-demo="retail"] .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px 24px 48px; }
  [data-demo="retail"] .hero-media { min-height: 0; height: 420px; }
  [data-demo="hantverk"] .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  [data-demo="hantverk"] .hero-frame { height: 420px; }
  .operations-panels { min-height: 340px; }
  .operations-panels dl > div { gap: 12px; flex-wrap: wrap; }
  .operations-panels dd { text-align: left; }
  [data-demo="service"] .hero-main { gap: 28px; }
  [data-demo="logistik"] .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-switcher button { transition: none; }
}