/* Home page section layout: grounds, padding, grids and column splits.
   Components come from components.css; the values follow docs/redesign/design/reference/home.html. */

/* ---------- Shared ---------- */
.home-layer { position: relative; }
.home-ground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hero ---------- */
/* Capped below the component's 124px: at 124px "to working software" no longer fits the 1120px column, so wide screens get more than three lines */
.isw-hero__title { font-size: clamp(48px, 7.8vw, 112px); }
.isw-hero__body .isw-badge { align-self: flex-start; margin: 0 0 var(--space-24); }
.home-hero__foot { display: flex; flex-wrap: wrap; gap: var(--space-28) 56px; align-items: flex-end; justify-content: space-between; margin-top: clamp(32px, 4vw, 52px); }
.home-hero__lead { margin: 0; flex: 0 1 560px; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.55; font-weight: 500; }
.home-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); }
.home-hero__aside { position: absolute; top: 40px; right: clamp(20px, 5vw, 80px); display: flex; flex-direction: column; align-items: center; gap: var(--space-12); }
.home-hero__credit { writing-mode: vertical-rl; font-size: 13px; font-weight: 700; letter-spacing: .2em; opacity: .85; }
.home-hero__cue { position: relative; width: 2px; height: 64px; overflow: hidden; background: rgba(255,255,255,.3); }
.home-hero__cue > span { position: absolute; left: 0; top: 0; width: 2px; height: 18px; background: var(--white); animation: home-cue 2.2s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes home-cue { 0% { transform: translateY(0); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateY(46px); opacity: 0; } }
@media (max-width: 760px) { .home-hero__aside { display: none; } }

/* ---------- The shift (10x) ---------- */
.home-shift { background: var(--white); overflow: hidden; }
.home-shift__inner { max-width: var(--container); margin: 0 auto; padding: var(--site-section-y) clamp(20px, 5vw, 80px); display: flex; flex-wrap: wrap; gap: var(--space-32) var(--space-64); align-items: center; }
.home-shift__numeral { flex: 0 1 auto; margin-left: -0.04em; background-image: url('/img/redesign/tremola.webp'); }
@media (max-width: 600px) { .home-shift__numeral { background-image: url('/img/redesign/tremola-portrait.webp'); } }
.tint .home-shift__numeral { background-image: url('/img/redesign/tremola-red.webp'); }
@media (max-width: 600px) { .tint .home-shift__numeral { background-image: url('/img/redesign/tremola-red-portrait.webp'); } }
.home-shift__text { flex: 1 1 400px; }
.home-shift__title { margin: 0; font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 54px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 900; text-wrap: balance; }
.home-shift__text p { margin: var(--space-14) 0 0; color: var(--text-muted); }
.home-shift__title + p { margin-top: var(--space-24); }

/* ---------- Engineering statement ---------- */
.home-statement { position: relative; overflow: hidden; padding-top: clamp(56px, 5.5vw, 88px); padding-bottom: clamp(56px, 5.5vw, 88px); background: var(--ink-900); color: var(--white); }
.home-statement__shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--overlay-ink) 0%, rgba(20,2,3,.55) 60%, rgba(20,2,3,.2) 100%); }
.home-statement__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: var(--space-24) 56px; max-width: 900px; margin-top: clamp(40px, 5vw, 64px); color: var(--on-dark-body); }
.home-statement__cols p { margin: 0; }

/* ---------- What we deliver ---------- */
.home-services { background: var(--blush-100); }
.home-services__grid { --isw-min: 520px; margin-top: clamp(48px, 6vw, 80px); }
.home-services__callout { margin-top: var(--space-20); }
.home-services__callout *:focus-visible { outline-color: var(--white); }

/* ---------- How we work ---------- */
.home-how { position: relative; overflow: hidden; background: var(--red-900); color: var(--white); }
.home-how__shade { position: absolute; inset: 0; background: var(--overlay-red); }
.home-how__lead { flex-basis: 500px; }
.home-how__loop { margin: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 64px); }
/* Hovering a station in the loop lifts its step card, and hovering a card enlarges its station */
.isw-step { transition: transform .35s cubic-bezier(.2,.85,.2,1), box-shadow .35s, background-color .35s, border-color .35s; }
.home-station { transform-box: fill-box; transform-origin: center; transition: transform .35s cubic-bezier(.2,.85,.2,1); }
.isw-step:hover,
.home-how:has(.home-station--1:hover) .isw-step:nth-child(1),
.home-how:has(.home-station--2:hover) .isw-step:nth-child(2),
.home-how:has(.home-station--3:hover) .isw-step:nth-child(3),
.home-how:has(.home-station--4:hover) .isw-step:nth-child(4) { transform: translateY(-6px) scale(1.03); box-shadow: var(--shadow-raised); }
.isw-step:not(.isw-step--active):hover,
.home-how:has(.home-station--1:hover) .isw-step:nth-child(1):not(.isw-step--active),
.home-how:has(.home-station--2:hover) .isw-step:nth-child(2):not(.isw-step--active),
.home-how:has(.home-station--3:hover) .isw-step:nth-child(3):not(.isw-step--active),
.home-how:has(.home-station--4:hover) .isw-step:nth-child(4):not(.isw-step--active) { background-color: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); }
.home-station:hover,
.home-how:has(.isw-step:nth-child(1):hover) .home-station--1,
.home-how:has(.isw-step:nth-child(2):hover) .home-station--2,
.home-how:has(.isw-step:nth-child(3):hover) .home-station--3,
.home-how:has(.isw-step:nth-child(4):hover) .home-station--4 { transform: scale(1.15); }

/* ---------- For technical leaders ---------- */
.home-tech { overflow: hidden; background: var(--ink-900); color: var(--white); }
.home-tech__inner { display: flex; flex-wrap: wrap; gap: 56px 72px; align-items: center; }
.home-tech__text { flex: 1.1 1 480px; }
.home-tech__intro { margin: var(--space-24) 0 0; font-size: clamp(18px, 1.4vw, 20px); color: var(--on-dark-muted); }
.home-tech__dl { margin-top: var(--space-40); }
.home-tech__figure { flex: 1 1 420px; display: flex; justify-content: center; }
/* Hexagon positions on the ring, clockwise from the top */
.isw-orbit__anchor:nth-child(1) { left: 50%; top: 4%; }
.isw-orbit__anchor:nth-child(2) { left: 89.8%; top: 27%; }
.isw-orbit__anchor:nth-child(3) { left: 89.8%; top: 73%; }
.isw-orbit__anchor:nth-child(4) { left: 50%; top: 96%; }
.isw-orbit__anchor:nth-child(5) { left: 10.2%; top: 73%; }
.isw-orbit__anchor:nth-child(6) { left: 10.2%; top: 27%; }

/* ---------- Ways to work with us ---------- */
.home-ways { background: var(--white); }
.home-ways__grid { margin-top: clamp(48px, 6vw, 80px); }
.home-ways__contracts { margin: var(--space-28) 0 0; font-family: var(--font-display); font-size: 19px; font-weight: 700; }
/* The dashed slot fades out as the bubblehead lands and back in as it leaves (same 4.8s loop as isw-dropin) */
.isw-bub-slot::before { animation: home-slot 4.8s cubic-bezier(.3,0,.3,1) infinite; }
@keyframes home-slot { 0%, 10% { opacity: 1; } 22%, 86% { opacity: 0; } 94%, 100% { opacity: 1; } }
/* With reduced motion the bubblehead sits in the slot, so the outline stays hidden */
@media (prefers-reduced-motion: reduce) { .isw-bub-slot::before { opacity: 0; } }
/* Five bubbles are 304px wide: on the narrowest phones drop one so the row stays inside the card */
@media (max-width: 379px) { .home-ways .isw-bub:last-child { display: none; } }

/* ---------- What we stand for ---------- */
.home-values { position: relative; overflow: hidden; background: var(--red-900); color: var(--white); }
.home-values .home-ground { object-position: center 30%; }
.home-values__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(60,3,8,.15) 0%, rgba(40,3,6,.55) 45%, rgba(20,2,3,.92) 78%); }
/* The large top is where the team photo shows */
.home-values__inner { padding: clamp(220px, 26vw, 380px) clamp(20px, 5vw, 80px) var(--site-section-y); }
.home-values__subtitle { margin: 0; flex: 0 1 460px; font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); line-height: 1.3; font-weight: 700; }
.home-values__grid { --isw-min: 320px; gap: var(--space-40) var(--space-48); margin-top: clamp(48px, 5vw, 72px); }

/* ---------- Customers ---------- */
.home-customers { background: var(--blush-100); }
.home-customers__head { padding: var(--site-section-y) clamp(20px, 5vw, 80px) 0; display: flex; flex-wrap: wrap; gap: var(--space-32) var(--space-64); align-items: flex-end; justify-content: space-between; }
.home-customers__head .isw-title-lg { flex: 1 1 520px; }
.home-customers__head .isw-logos { flex: 1 1 520px; }
/* Each logo's width and height attributes set its optical size */
.home-customers .isw-logo-tile img { max-height: none; height: auto; }
/* The first card lines up with the section title (the content column's left edge); 100% is the row's width, so the scrollbar is not counted */
.home-quotes { --home-quotes-inset: max(clamp(20px, 5vw, 80px), calc((100% - 1280px) / 2)); margin-top: clamp(56px, 6vw, 88px); padding-bottom: var(--site-section-y); scroll-padding-inline: var(--home-quotes-inset); }
.home-quotes__track { display: flex; gap: var(--space-20); width: max-content; padding: 0 var(--home-quotes-inset); }
.home-quote--wide { width: min(560px, 84vw); }
.home-quote--wide blockquote { font-size: 22px; }
.home-quote--medium { width: min(520px, 84vw); }
.home-initials--ink { background: var(--ink-800); }

/* ---------- FAQ ---------- */
.home-faq { background: var(--white); }
.home-faq__inner { display: flex; flex-wrap: wrap; gap: var(--space-48) var(--space-64); align-items: flex-start; }
.home-faq__head { flex: 1 1 380px; display: flex; flex-direction: column; gap: var(--space-24); }
.home-faq__title { font-size: clamp(46px, 5.4vw, 88px); line-height: .92; letter-spacing: -0.045em; }
.home-faq__more { margin: 0; font-size: 20px; font-weight: 500; }
.home-faq__more a { font-weight: 800; color: var(--red-700); }
.home-faq__list { flex: 1.5 1 560px; }

/* ---------- Locations ---------- */
.home-locations { background: var(--ink-900); color: var(--white); }
.home-locations__head { display: flex; flex-wrap: wrap; gap: var(--space-24) var(--space-64); align-items: flex-end; justify-content: space-between; }
.home-locations__title { margin: 0; flex: 1 1 560px; font-family: var(--font-display); font-size: clamp(40px, 4.8vw, 76px); line-height: .98; letter-spacing: -0.04em; font-weight: 900; }
.home-locations__intro { margin: 0; flex: 1 1 400px; font-size: clamp(17px, 1.3vw, 19px); color: var(--on-dark-muted); }
.home-locations__grid { --isw-min: 460px; margin-top: clamp(48px, 6vw, 80px); }
.home-locations .isw-location__text { margin-bottom: var(--space-28); }
.home-location__photo--zug { object-position: 50% 85%; }
.home-location__photo--cluj { object-position: 44% 38%; }
.home-locations__map { height: clamp(320px, 36vw, 460px); margin-top: var(--space-20); overflow: hidden; border: 1px solid var(--ink-600); border-radius: var(--radius-lg); background: var(--ink-700); }

/* ---------- Contact ---------- */
.home-contact { position: relative; overflow: hidden; background: var(--red-900); color: var(--white); }
/* Headset on a laptop, cropped so the headset sits between the title and the form; a gentler zoom than the hero's keeps the photo sharp */
.home-contact__photo { object-position: 53% 49%; transform-origin: 55% 50%; animation: home-kb-soft 28s ease-in-out infinite alternate; }
@keyframes home-kb-soft { from { transform: scale(1.02); } to { transform: scale(1.08); } }
.home-contact__shade { position: absolute; inset: 0; background: rgba(20,2,3,.62); }
.home-contact__inner { padding: clamp(48px, 5vw, 80px) clamp(20px, 5vw, 80px); display: flex; flex-wrap: wrap; gap: var(--space-40) 72px; align-items: flex-start; }
/* The title sits above the intro in the left column, so the form starts level with it */
.home-contact__title { margin: 0 0 var(--space-32); font-family: var(--font-display); font-size: clamp(56px, 11vw, 168px); line-height: .86; letter-spacing: -0.055em; font-weight: 900; }
/* "Sprechen Sie" is much wider than "Talk to" and has to fit the half-width column */
:lang(de) .home-contact__title { font-size: clamp(44px, 5.2vw, 76px); }
.home-contact__intro { flex: 1 1 380px; }
.home-contact__intro p { margin: 0; max-width: 460px; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.55; font-weight: 500; }
.home-contact__form { flex: 1.2 1 460px; }
.home-contact__form .cf-turnstile { min-height: 65px; }
.home-contact__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16); }
/* On phones the label wraps (always in German), so the button spans the panel with the label left and the arrow right */
@media (max-width: 480px) { .home-contact__submit .isw-btn { width: 100%; justify-content: space-between; padding-top: 9px; padding-bottom: 9px; text-align: left; line-height: 1.15; } }
.home-contact__status { margin: 0; }
.home-contact__status:not(:empty) { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--radius-xs); background: var(--white); color: var(--ink-800); font-size: 16px; font-weight: 600; line-height: 1.4; }
.home-contact__status:not(:empty)::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: var(--radius-round); background: var(--live); }
.home-contact__status[data-state='error']::before { background: var(--red-500); }

/* ---------- Natural-colour photos (the default; html.tint switches the red treatment on) ---------- */
/* Neutral shades over the natural photos, dark enough for the white text */
html:not(.tint) .home-statement__shade { background: linear-gradient(90deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.55) 60%, rgba(10,10,10,.25) 100%); }
html:not(.tint) .home-how, html:not(.tint) .home-values, html:not(.tint) .home-contact { background: var(--ink-900); }
html:not(.tint) .home-how__shade { background: rgba(12,12,12,.78); }
html:not(.tint) .home-values__shade { background: linear-gradient(180deg, rgba(10,10,10,.1) 0%, rgba(10,10,10,.5) 45%, rgba(10,10,10,.9) 78%); }
html:not(.tint) .home-contact__shade { background: rgba(10,10,10,.66); }
/* Wide screens: title and form move apart and the headset in the photo shows in the gap, under a lighter shade.
   The form needs ~610px for its two field columns, so this only starts once 500 + 610 + gap fit */
@media (min-width: 1360px) {
    .home-contact__inner { justify-content: space-between; }
    /* 500px fits "Talk to" at the title's full 168px */
    .home-contact__intro { flex: 0 1 500px; }
    /* Content width: the form adds ~48px padding each side, ~610px in all */
    .home-contact__form { flex: 0 1 512px; }
    .home-contact__shade { background: linear-gradient(90deg, rgba(20,2,3,.85) 0%, rgba(20,2,3,.5) 30%, rgba(20,2,3,.08) 50%, rgba(20,2,3,.45) 66%, rgba(20,2,3,.6) 100%); }
    html:not(.tint) .home-contact__shade { background: linear-gradient(90deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.55) 30%, rgba(10,10,10,.15) 48%, rgba(10,10,10,.62) 62%, rgba(10,10,10,.74) 100%); }
}

/* ---------- Scroll-driven parallax and rise-ins ---------- */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .home-parallax { animation: home-parallax linear both; animation-timeline: view(); }
        .home-rise { animation: home-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    }
}
@keyframes home-parallax { from { object-position: center 20%; } to { object-position: center 80%; } }
@keyframes home-rise { from { transform: translateY(70px); } to { transform: none; } }
/* Reduced motion is handled site-wide in site.css */