/* Fixaline brand A facelift (pen/fixaline-a-ui-ux-20261112.pen), 13.11.2026 */
/* Home pages (/ and /fi/etusivu/). Everything is scoped to .a-home. */

.a-home { background: var(--a-bg, #0B0B0C); color: var(--a-text, #FFFFFF); font-family: var(--a-font, "Inter", system-ui, sans-serif); overflow-x: clip; }
.a-home .sec { padding: 96px max(var(--a-gutter, 24px), calc((100% - var(--a-max, 1280px)) / 2)); gap: 64px; background-color: var(--a-bg, #0B0B0C); }
.a-home .a-sec--alt { background-color: var(--a-surface, #17181A); }
.a-home .a-sec--ink { background-color: var(--a-ink, #000000); }
.a-home .sec.row { align-items: center; }
.a-home .sec.row > .col { flex: 1 1 0; min-width: 0; gap: 0; }

/* Headings: one cyan rule is the only ornament */
.a-home .h { font-family: var(--a-font, "Inter", system-ui, sans-serif); color: var(--a-text, #FFFFFF); letter-spacing: -.01em; }
.a-home .a-title { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.15; text-align: left; }
.a-home .a-title::after,
.a-home .a-hero__title::after { content: ""; display: block; width: 48px; height: 3px; margin-top: 20px; background: var(--a-cyan, #00A0E2); }
.a-home .h a { color: inherit; }
.a-home .h a:hover { color: var(--a-cyan, #00A0E2); }
.a-home .a-body { font-size: 17px; line-height: 1.6; color: var(--a-muted, #A3A6AD); margin-top: 24px; }
.a-home .a-body p { margin: 0 0 12px; }
.a-home .a-list { margin: 20px 0 0; padding: 0; list-style: none; color: var(--a-muted, #A3A6AD); font-size: 16px; line-height: 1.55; }
.a-home .a-list li { position: relative; padding: 0 0 0 28px; margin: 0 0 10px; }
.a-home .a-list li::before { content: ""; position: absolute; left: 0; top: .75em; width: 14px; height: 2px; background: var(--a-cyan, #00A0E2); }
.a-home .cta { margin: 24px 0 0; }
.a-home .a-btn--text { font-size: 15px; }
/* Section head: title and a short lead (pen "Section head"). */
.a-home .a-head { max-width: 720px; }

/* Hero: video stage, left-aligned title */
.a-home .a-hero { min-height: var(--mh, 720px); padding-top: 120px; padding-bottom: 96px; align-items: flex-start; background-color: var(--a-ink, #000000); }
.a-home .a-hero::before { opacity: .55; }
.a-home .a-hero__text { max-width: 640px; gap: 0; }
.a-home .a-hero__title { font-size: clamp(32px, 4vw, 56px); line-height: 1.1; font-weight: 700; text-align: left; color: var(--a-text, #FFFFFF); }
.a-home .a-hero__title::after { margin-top: 28px; }
.a-home .a-hero__lead { margin-top: 24px; font-size: 18px; line-height: 1.6; font-weight: 400; text-align: left; color: #D4D6DA; letter-spacing: 0; }

/* Product photos: white ground, 6 % padding (halved from 12 %, Olli 13.11.2026) */
.a-home .a-photo { display: block; background: var(--a-photo-bg, #FFFFFF); padding: 6%; }
.a-home .a-photo img { display: block; width: 100%; height: auto; }
.a-home .a-media { margin: 0; }
.a-home .a-media img { display: block; width: 100%; height: auto; }
/* Series photos keep one frame shape (pen 700 x 460 on desktop, 350 x 220 on a phone). The renders have wide
   white margins above and below the machines, so cover only trims white and the machines fill the frame. */
.a-home .a-split .a-photo img { aspect-ratio: 3 / 2; object-fit: cover; }

/* Our products: four cards on the dark stage */
.a-home .a-products { gap: 48px; }
.a-home .carousel.a-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; overflow: visible; scroll-snap-type: none; }
.a-home .a-cards .slide { flex: none; min-width: 0; }
.a-home .a-card { height: 100%; background: var(--a-surface-2, #202124); }
.a-home .a-card .card__link { display: flex; flex-direction: column; height: 100%; color: var(--a-text, #FFFFFF); }
.a-home .a-card .a-photo { display: block; }
.a-home .a-card .a-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: none; margin: 0; object-fit: contain; transform: none; transition: none; }
.a-home .a-products .carousel-wrap { width: 100%; }
.a-home .a-products .car-btn { display: none; }
.a-home .a-card .card__name { margin: 0; padding: 20px 20px 24px; font-size: 18px; line-height: 1.3; text-align: left; color: var(--a-text, #FFFFFF); }
.a-home .a-card .card__name::after { content: ""; display: block; width: 24px; height: 2px; margin-top: 12px; background: var(--a-cyan, #00A0E2); }
.a-home .a-card .card__link:hover .card__name,
.a-home .a-card .card__link:focus-visible .card__name { color: var(--a-cyan, #00A0E2); }
.a-home .a-card .card__link:focus-visible { outline: 2px solid var(--a-cyan, #00A0E2); outline-offset: 2px; }
/* A short note under the blue line, as on the series pages (Olli 13.11.2026). */
.a-home .a-card .card__name:has(+ .card__note) { padding-bottom: 12px; }
.a-home .a-card .card__note { margin: 0; padding: 0 20px 24px; font-size: 13px; line-height: 1.4; color: var(--a-muted, #A3A6AD); }

/* FIXER X: key figures and the model links (pen "Key figures" and "Models", P-22). */
.a-home .a-figures { display: flex; flex-wrap: wrap; gap: 24px 48px; margin: 24px 0 0; padding: 0; list-style: none; }
.a-home .a-figures li { display: flex; flex-direction: column; padding: 0; }
.a-home .a-figures__value { font-size: clamp(30px, 2.6vw, 38px); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--a-text, #FFFFFF); }
.a-home .a-figures__value::after { content: ""; display: block; width: 40px; height: 3px; margin-top: 8px; background: var(--a-cyan, #00A0E2); }
.a-home .a-figures__label { margin-top: 10px; font-size: 14px; line-height: 1.3; color: var(--a-muted, #A3A6AD); }
.a-home .a-models { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.a-home .a-models li { padding: 0; }
.a-home .a-models a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--a-text, #FFFFFF); color: var(--a-text, #FFFFFF); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.a-home .a-models a:hover { border-color: var(--a-cyan, #00A0E2); color: var(--a-cyan, #00A0E2); }
.a-home .a-models a:focus-visible { outline: 2px solid var(--a-cyan, #00A0E2); outline-offset: 2px; }

/* Tools, materials and accessories: four tools in a row, 2 x 2 on a phone (pen "Strip" / "Row", P-22). */
.a-home .a-tools { gap: 40px; }
.a-home .a-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 200px)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.a-home .a-tiles .a-photo { aspect-ratio: 20 / 17; padding: 0; }
.a-home .a-tiles .a-photo img { width: 100%; height: 100%; object-fit: cover; }
.a-home .a-tools .cta { margin: 0; }

/* Showroom: the address under the text. */
.a-home .a-address { margin: 8px 0 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--a-text, #FFFFFF); }

/* Award: the seal next to its text (pen "Achievers"). */
.a-home .sec.a-award { flex-direction: row; align-items: center; gap: 40px; padding-top: 64px; padding-bottom: 64px; border-top: 1px solid var(--a-line, #2B2C30); }
.a-home .a-award__seal { flex: 0 0 132px; margin: 0; }
.a-home .a-award__seal img { display: block; width: 132px; height: auto; }
.a-home .a-award__text { margin: 0; max-width: 80ch; font-size: 18px; line-height: 1.55; color: var(--a-text, #FFFFFF); }

/* Tablet */
@media (max-width: 1024px) {
  .a-home .carousel.a-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-home .sec { padding-top: 72px; padding-bottom: 72px; gap: 40px; }
}

/* Mobile */
@media (max-width: 767px) {
  .a-home .sec { padding: 56px 20px; gap: 32px; }
  .a-home .sec.row { flex-direction: column; align-items: stretch; }
  .a-home .a-hero { min-height: var(--mhm, 560px); padding-top: 96px; padding-bottom: 48px; justify-content: flex-end; }
  .a-home .a-hero__title { font-size: 30px; }
  .a-home .a-hero__lead { font-size: 16px; }
  .a-home .a-title { font-size: 26px; }
  .a-home .a-body { font-size: 16px; }
  .a-home .carousel.a-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .a-home .a-btn--secondary { width: 100%; }
}

/* Hero as in the pen design (Olli 13.11.2026): text and CTA buttons left, the video in a box on the right. */
.a-home .a-hero--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 56px; min-height: 0; padding: 72px max(var(--a-gutter, 48px), calc((100% - var(--a-max, 1280px)) / 2)); background: var(--a-ink, #000); }
.a-home .a-hero--split .a-hero__title { font-size: clamp(32px, 3.4vw, 50px); }
.a-home .a-hero--split .a-hero__text { max-width: none; }
.a-home .a-hero__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.a-home .a-hero__media { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--a-surface, #17181A); }
.a-home .a-hero__media .bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .a-home .a-hero--split { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px 20px; }
  .a-home .a-hero__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 480px) {
  .a-home .a-hero__cta .a-btn { flex: 1 1 100%; justify-content: center; }
}

/* The video fills the hero from its top to its bottom edge (Olli 13.11.2026); the text stays centred. */
.a-home .a-hero--split { align-items: stretch; padding-top: 0; padding-bottom: 0; min-height: 560px; }
.a-home .a-hero--split .a-hero__text { align-self: center; padding: 72px 0; }
.a-home .a-hero--split .a-hero__media { aspect-ratio: auto; height: 100%; min-height: 560px; }
@media (max-width: 900px) {
  .a-home .a-hero--split { min-height: 0; }
  .a-home .a-hero--split .a-hero__text { padding: 48px 0 0; }
  .a-home .a-hero--split .a-hero__media { min-height: 0; aspect-ratio: 4 / 3; }
}

/* Mobile and tablet as in the pen design "EN / Home · 390" (T5.2.2, 13.11.2026). */

/* Hero: the picture first and edge to edge, then the title, text and two equal buttons. The poster
   (a still of the same video) shows while the video loads, if it never starts, and with reduced motion. */
.a-home .a-hero__media { background: var(--a-ink, #000); }
.a-home .a-hero__media .bg-video { background: var(--a-ink, #000); }
@media (prefers-reduced-motion: reduce) {
  .a-home .a-hero__media .bg-video { display: block; }
}
@media (max-width: 900px) {
  .a-home .a-hero--split { gap: 0; padding: 0; }
  .a-home .a-hero--split .a-hero__media { order: -1; aspect-ratio: 16 / 9; height: auto; }
  /* The machines sit small in the middle of the frame: zoom in so they fill the narrow box. */
  .a-home .a-hero--split .a-hero__media .bg-video { transform: scale(1.6); }
  .a-home .a-hero--split .a-hero__text { padding: 24px 20px 40px; }
  .a-home .a-hero--split .a-hero__title { font-size: clamp(30px, 7.4vw, 40px); line-height: 1.12; }
  .a-home .a-hero__title::after { width: 60px; margin-top: 20px; }
  .a-home .a-hero__lead { margin-top: 20px; font-size: 16px; line-height: 1.55; }
  .a-home .a-hero__cta { margin-top: 24px; gap: 12px; }
}
@media (max-width: 767px) {
  .a-home .a-hero__cta { flex-direction: column; }
  .a-home .a-hero__cta .a-btn { width: 100%; flex: none; }
}

/* Our products: one card per row on a phone, two from 560 px, four on desktop. */
@media (max-width: 767px) {
  .a-home .a-products { gap: 28px; }
  .a-home .a-card .card__name { padding: 20px 20px 22px; font-size: 20px; }
  .a-home .a-card .card__note { font-size: 14px; }
}
@media (max-width: 559px) {
  .a-home .a-card .a-photo img { aspect-ratio: 35 / 18; }
}
@media (min-width: 560px) and (max-width: 767px) {
  .a-home .carousel.a-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Series, tools, showroom and award on a phone, in the order and with the content of the pen 390 frame. */
@media (max-width: 767px) {
  .a-home .sec.a-split { gap: 20px; }
  .a-home .a-body { margin-top: 20px; }
  .a-home .a-title { font-size: clamp(26px, 7vw, 30px); line-height: 1.12; }
  .a-home .a-title::after { width: 60px; }
  .a-home .a-split .a-photo img { aspect-ratio: 35 / 22; }
  .a-home .a-list li { margin-bottom: 8px; }
  /* Two figures side by side even at 360 px; a long label wraps under its own figure. */
  .a-home .a-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; margin-top: 20px; }
  .a-home .a-figures__value { font-size: 28px; }
  .a-home .a-figures__label { font-size: 13px; }
  /* The pen 390 frame leaves out the model links and the E-ROLLER feature list; both are on the series pages. */
  .a-home .a-models,
  .a-home .a-eroller .a-list { display: none; }
  .a-home .cta { margin-top: 20px; }
  /* E-ROLLER: title and text first, then the picture, the link last (pen order). */
  .a-home .sec.a-split.a-split--rev { gap: 0; }
  .a-home .a-split--rev > .col { display: contents; }
  .a-home .a-split--rev .a-photo { order: 1; margin-top: 20px; }
  .a-home .a-split--rev .cta { order: 2; }
  .a-home .a-tools { gap: 20px; }
  .a-home .a-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .a-home .a-tools .cta { margin-top: 0; }
  .a-home .sec.a-award { gap: 16px; align-items: flex-start; padding-top: 32px; padding-bottom: 32px; }
  .a-home .a-award__seal { flex-basis: 80px; }
  .a-home .a-award__seal img { width: 80px; }
  .a-home .a-award__text { font-size: 15px; }
}