/* Homepage - direction C "full model", picked by Kamil 2026-09-24. One layer: replaces the old home.css,
   editorial-home.css and the MP4 acquisition film on this page. Loads after tokens/site/confident.
   Black and white with Tiffany as the accent; square geometry; nothing rotated. Page surfaces follow the theme tokens;
   the film is a fixed black stage with white example cards in both themes. */
body[data-page=home] { --hc-tiff: #81d8d0; --hc-tiff-ink: #81d8d0; --hc-black: #171717; --hc-grey: #555; --hc-line: #dcdcda; --hc-pad: clamp(24px, 4.5vw, 72px) }

/* Hero: after Kamil's Victoria Beckham reference - label, one serif sentence with one italic word, a centred still
   on the same grey as the page, two '+' callouts, then the actions. */
.hc-hero { max-width: 1800px; margin: 0 auto; padding-inline: var(--hc-pad); text-align: center }
.hc-intro { max-width: 960px; margin: 0 auto; padding: 48px 0 0 }
.hc-hero h1 { font: 400 clamp(28px, 3.1vw, 44px)/1.32 var(--font-serif); letter-spacing: -.005em; color: var(--ink); max-width: 25em; margin: 0 auto; text-wrap: balance }
.hc-hero h1 em { font-style: italic }
.hc-sub { font: 400 clamp(17px, 1.4vw, 20px)/1.5 var(--font-body); color: var(--ink); max-width: 36em; margin: 18px auto 0 }
.hc-sub em { font: italic 400 1.08em var(--font-serif) }
/* The garden etching: wide, fading into the page at both ends. On a phone the centre of the garden fills the width. */
.hc-garden { max-width: 1500px; margin: 12px auto 0 }
.gw-view { position: relative; overflow: hidden }
.gw-stage { position: relative; aspect-ratio: 1600 / 551; background: #e2e0e1 }
.gw-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.gw-sway { position: absolute; top: 0; background-repeat: no-repeat; transform-origin: 50% 100%; animation: gw-breeze 7.2s ease-in-out infinite; will-change: transform }
@keyframes gw-breeze { 0%, 100% { transform: skewX(0deg) } 28% { transform: skewX(-1.15deg) } 52% { transform: skewX(.35deg) } 74% { transform: skewX(-.6deg) } }
.gw-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.gw-water { fill: none; stroke: #308a82; stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 1.8 2.6; opacity: .8; vector-effect: non-scaling-stroke; animation: gw-flow .7s linear infinite }
@keyframes gw-flow { to { stroke-dashoffset: -4.4 } }
/* Garden strips (generated from gardenStrips in templates.mjs; the CSP blocks inline styles). */
.gw-sway { background-image: image-set(url(/assets/home/garden-band-1400.webp) 1x, url(/assets/home/garden-band-2800.webp) 2x) }
.gw-s1 { left: 0.000%; width: 12.500%; height: 39.020%; background-size: 800.000% auto; background-position: 0.000% 0; animation-delay: -7.20s }
.gw-s2 { left: 12.500%; width: 6.750%; height: 39.020%; background-size: 1481.481% auto; background-position: 13.405% 0; animation-delay: -6.98s }
.gw-s3 { left: 19.250%; width: 11.375%; height: 31.760%; background-size: 879.121% auto; background-position: 21.721% 0; animation-delay: -6.85s }
.gw-s4 { left: 30.625%; width: 6.375%; height: 31.760%; background-size: 1568.627% auto; background-position: 32.710% 0; animation-delay: -6.65s }
.gw-s5 { left: 37.000%; width: 8.125%; height: 29.038%; background-size: 1230.769% auto; background-position: 40.272% 0; animation-delay: -6.53s }
.gw-s6 { left: 45.125%; width: 9.562%; height: 30.853%; background-size: 1045.752% auto; background-position: 49.896% 0; animation-delay: -6.39s }
.gw-s7 { left: 54.688%; width: 8.312%; height: 29.038%; background-size: 1203.008% auto; background-position: 59.646% 0; animation-delay: -6.22s }
.gw-s8 { left: 63.000%; width: 5.750%; height: 31.760%; background-size: 1739.130% auto; background-position: 66.844% 0; animation-delay: -6.07s }
.gw-s9 { left: 68.750%; width: 10.312%; height: 31.760%; background-size: 969.697% auto; background-position: 76.655% 0; animation-delay: -5.96s }
.gw-s10 { left: 79.062%; width: 7.812%; height: 39.020%; background-size: 1280.000% auto; background-position: 85.763% 0; animation-delay: -5.78s }
.gw-s11 { left: 86.875%; width: 13.125%; height: 39.020%; background-size: 761.905% auto; background-position: 100.000% 0; animation-delay: -5.64s }
.gw-w1 { animation-delay: -0.00s }
.gw-w2 { animation-delay: -0.17s }
.gw-w3 { animation-delay: -0.34s }
.gw-w4 { animation-delay: -0.51s }
.gw-w5 { animation-delay: -0.68s }
.gw-w6 { animation-delay: -0.85s }
.gw-ripple, .gw-bird { fill: none; stroke: #308a82; stroke-width: 1px; stroke-linecap: round; vector-effect: non-scaling-stroke }
.hc-actions { display: flex; justify-content: center; align-items: center; gap: 34px; flex-wrap: wrap; margin: 24px 0 0 }
/* The path (Kamil 2026-09-29): one framed plane like the routes below; the numerals light up in Tiffany as the path
   moves on, I to IV, then III lights once more for the return, and the cycle starts again. 10s. */
.hc-path { max-width: 1320px; margin: 88px auto 104px; padding: 64px 56px 60px; text-align: left; background: var(--paper-soft); border: 1px solid color-mix(in srgb, var(--ink) 24%, var(--paper-soft)); box-shadow: inset 0 0 0 7px var(--paper-soft), inset 0 0 0 8px var(--line) }
.hc-path h2 { font: 400 clamp(34px, 3.4vw, 52px)/1.06 var(--font-serif); letter-spacing: -.015em; margin-bottom: 52px }
.hc-path h2 em { font-style: italic }
.hc-path ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px }
.hc-path li span { display: block; font: italic 400 clamp(30px, 2.6vw, 40px)/1 var(--font-serif); color: color-mix(in srgb, var(--ink) 22%, var(--paper-soft)) }
.hc-path h3 { font: 400 clamp(22px, 1.8vw, 26px)/1.15 var(--font-serif); margin: 18px 0 12px }
.hc-path p { font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 300px }
.hc-path li:nth-child(1) span { animation: hp-1 10s ease-in-out infinite } .hc-path li:nth-child(2) span { animation: hp-2 10s ease-in-out infinite }
.hc-path li:nth-child(3) span { animation: hp-3 10s ease-in-out infinite } .hc-path li:nth-child(4) span { animation: hp-4 10s ease-in-out infinite }
@keyframes hp-1 { 0%, 2% { color: color-mix(in srgb, var(--ink) 22%, var(--paper-soft)) } 6%, 90% { color: #81d8d0 } 96%, 100% { color: color-mix(in srgb, var(--ink) 22%, var(--paper-soft)) } }
@keyframes hp-2 { 0%, 18% { color: color-mix(in srgb, var(--ink) 22%, var(--paper-soft)) } 22%, 90% { color: #81d8d0 } 96%, 100% { color: color-mix(in srgb, var(--ink) 22%, var(--paper-soft)) } }
@keyframes hp-3 { 0%, 34% { color: color-mix(in srgb, var(--ink) 22%, var(--paper-soft)) } 38%, 64% { color: #81d8d0 } 67%, 70% { color: color-mix(in srgb, var(--ink) 22%, var(--paper-soft)) } 74%, 90% { color: #81d8d0 } 96%, 100% { color: color-mix(in srgb, var(--ink) 22%, var(--paper-soft)) } }
@keyframes hp-4 { 0%, 50% { color: color-mix(in srgb, var(--ink) 22%, var(--paper-soft)) } 54%, 90% { color: #81d8d0 } 96%, 100% { color: color-mix(in srgb, var(--ink) 22%, var(--paper-soft)) } }
@media (prefers-reduced-motion: reduce) { .hc-path li span { animation: none; color: #81d8d0 } }
.hc-cta { background: var(--hc-tiff); color: #111; min-height: 52px; padding: 17px 28px; display: inline-flex; gap: 22px; align-items: center; font: 500 13px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .14em; transition: background .15s, transform .16s cubic-bezier(.23, 1, .32, 1) }
.hc-cta:active { transform: scale(.98) }
.hc-secondary { font: 500 13px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .14em; padding-block: 12px; color: var(--ink); border-bottom: 1px solid var(--ink) }
@media (hover: hover) and (pointer: fine) { .hc-cta:hover { background: #a3e3dd } .hc-secondary:hover { border-color: #81d8d0; color: #81d8d0 } }

/* Film: four scenes, 5s each, 20s loop (Kamil 2026-09-29: 3.5s per scene was too fast; the 25s shoe film was too slow). Scene k enters at k*5s. */
.hc-film { position: relative; background: var(--surface); color: var(--ink); height: 600px; overflow: hidden; text-align: left }
.hc-scene { position: absolute; inset: 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 8%; align-items: center; padding: 48px 6% 68px; opacity: 0; animation: hc-scene 20s infinite cubic-bezier(.2, 0, 0, 1) }
.hc-s2 { animation-delay: -15s } .hc-s3 { animation-delay: -10s } .hc-s4 { animation-delay: -5s }
@keyframes hc-scene { 0%, 22.5% { opacity: 1; transform: none } 25%, 97.5% { opacity: 0; transform: translateY(10px) } 100% { opacity: 1; transform: none } }
.hc-scene-title h2 { font: 400 clamp(42px, 4.2vw, 64px)/1.06 var(--font-serif); letter-spacing: -.015em; margin: 0 0 20px; color: var(--ink) }
.hc-scene-title p { font-size: 15px; color: var(--muted); max-width: 315px }
.hc-film-bottom { position: absolute; bottom: 20px; left: 6%; right: 6%; display: flex; justify-content: space-between; align-items: center; z-index: 2 }
.hc-progress { display: flex; gap: 0; margin-left: -4px }
/* Each tick is a button: a 36 x 32 hit area around the 2 px line; a click jumps the film to that scene (site.js). */
.hc-progress button { display: grid; place-items: center; width: 36px; height: 32px; padding: 0; background: none; border: 0; cursor: pointer }
.hc-progress i { display: block; height: 2px; width: 28px; background: #a9a6a7; animation: hc-tick 20s infinite; transition: height .15s }
.hc-progress button:nth-child(2) i { animation-delay: -15s } .hc-progress button:nth-child(3) i { animation-delay: -10s } .hc-progress button:nth-child(4) i { animation-delay: -5s }
@media (hover: hover) and (pointer: fine) { .hc-progress button:hover i { height: 4px } }
.hc-progress button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px }
/* The active scene's tick is Tiffany blue #81D8D0 (Kamil 2026-09-26). */
@keyframes hc-tick { 0%, 22.5% { background: var(--hc-tiff) } 25%, 100% { background: #a9a6a7 } }
/* The outcome lands a beat into its scene. */
.hc-toast { animation: hc-beat 20s infinite cubic-bezier(.23, 1, .32, 1) }
.hc-s2 .hc-toast { animation-delay: -15s } .hc-s3 .hc-toast { animation-delay: -10s } .hc-s4 .hc-toast { animation-delay: -5s }
@keyframes hc-beat { 0%, 3.5% { opacity: 0; transform: translateY(6px) scale(.98) } 6.5%, 22.5% { opacity: 1; transform: none } 25%, 100% { opacity: 0 } }
.hc-film.is-paused * { animation-play-state: paused !important }
:root[data-theme=dark] .hc-film { outline: 1px solid var(--line) }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .hc-film { outline: 1px solid var(--line) } }
/* Pause: set like the navigation, tracked caps with a hairline glyph (two strokes, or a thin play wedge), no box, no
   circle. Kamil 2026-09-25: visible for everyone, but it has to belong to the design. */
.hc-film-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 0 0 12px; background: none; border: 0; color: var(--muted); font: 500 11px/1 var(--font-display); text-transform: uppercase; letter-spacing: .18em; cursor: pointer; transition: color .15s }
.hc-film-toggle i { position: relative; width: 7px; height: 9px; border-inline: 1px solid currentColor }
.hc-film-toggle.is-play i { width: 0; height: 0; border: 0; border-left: 7px solid currentColor; border-block: 4.5px solid transparent }
.hc-film-toggle span { padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color .15s }
@media (hover: hover) and (pointer: fine) { .hc-film-toggle:hover { color: var(--ink) } .hc-film-toggle:hover span { border-bottom-color: var(--hc-tiff) } }

/* Example cards inside the film */
.hc-card { background: #fff; color: var(--hc-black); max-width: 580px; width: 100%; justify-self: end; min-width: 0 }
.hc-card h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; line-height: 1.05; color: var(--hc-black) }
.hc-card p { color: var(--hc-grey) }
.hc-card svg { width: 20px; height: 20px; flex-shrink: 0 }
.hc-card img { display: block; object-fit: cover; background: #ecebe8 }
.hc-mast { padding: 15px 22px; border-bottom: 1px solid var(--hc-line); display: flex; justify-content: space-between; gap: 20px; font: 500 20px/1.2 var(--font-display) }
.hc-mast span { font: 12px/1.6 var(--font-body); color: #666 }
.hc-article-body { display: grid; grid-template-columns: 1fr 1fr }
.hc-article-body img { width: 100%; height: 100%; min-height: 330px }
.hc-article-body > div { padding: 24px 22px }
.hc-article h3 { font-size: 30px }
.hc-article ol { list-style: none; padding: 0; margin: 22px 0 0; font-size: 13px }
.hc-article li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hc-line) }
.hc-article li b { font: 500 13px var(--font-display); color: #666 }
.hc-pill { margin-left: auto; background: var(--hc-tiff); padding: 3px 10px; font-size: 11px }
.hc-mail { padding: 28px }
.hc-mail-top { display: flex; justify-content: space-between; border-bottom: 1px solid #ccc; padding-bottom: 18px; font-size: 11px; color: var(--hc-grey) }
.hc-mail h3 { font-size: 38px; margin-top: 24px }
.hc-feature { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; margin-top: 24px }
.hc-feature img { width: 150px; height: 100px }
.hc-feature strong { display: block; font: 500 22px/1.15 var(--font-display) }
.hc-feature span { display: block; font-size: 12px; color: var(--hc-tiff-ink); margin-top: 12px }
.hc-mail-link { border-top: 1px solid #ddd; padding-top: 18px; margin-top: 24px; font-size: 13px }
.hc-mail-link strong { font-weight: 400; color: var(--hc-tiff-ink) }
.hc-order { padding-bottom: 24px }
.hc-order h3 { font-size: 36px; margin: 30px 26px 0 }
.hc-line { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; margin: 24px 26px 0; padding: 16px 0; border-block: 1px solid var(--hc-line) }
.hc-line img { width: 120px; height: 80px }
.hc-line strong { display: block; font: 500 19px/1.2 var(--font-display) }
.hc-line span, .hc-source span { font-size: 12px; color: #666 }
.hc-source { display: flex; justify-content: space-between; margin: 14px 26px 0; font-size: 13px }
.hc-source b { font-weight: 500; color: var(--hc-tiff-ink) }
.hc-quote { padding-bottom: 22px }
.hc-quote-top { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: center; padding: 20px 24px 6px }
.hc-quote-top img { width: 170px; height: 110px }
.hc-quote h3 { font-size: 32px }
.hc-field { margin: 0 24px; padding: 13px 0; border-bottom: 1px solid #999; display: flex; justify-content: space-between; font-size: 13px }
.hc-action { margin: 18px 24px 0; display: flex; justify-content: space-between; background: var(--hc-tiff); padding: 14px 18px; font-size: 14px }
.hc-toast { display: flex; align-items: center; gap: 10px; margin: 16px 24px 0; padding: 12px 14px; background: var(--hc-black); color: #fff; font-size: 13px }
.hc-toast svg { color: var(--hc-tiff) }
.hc-call { padding: 26px 24px 24px }
.hc-call-top { display: flex; justify-content: space-between; font-size: 12px; color: #666; font-variant-numeric: tabular-nums }
.hc-live { display: flex; align-items: center; gap: 8px; color: var(--hc-black) }
/* A call in progress: a live dot with a soft pulse and checks, in our Tiffany (green 2026-09-26, Tiffany since 2026-09-29). */
.hc-live i { width: 8px; height: 8px; border-radius: 50%; background: #81d8d0; animation: hc-pulse 1.6s ease-out infinite }
@keyframes hc-pulse { 0% { box-shadow: 0 0 0 0 rgba(129, 216, 208, .55) } 70% { box-shadow: 0 0 0 7px rgba(129, 216, 208, 0) } 100% { box-shadow: 0 0 0 0 rgba(129, 216, 208, 0) } }
.hc-call h3 { font-size: 34px; margin-top: 22px }
.hc-call > p { font-size: 14px; margin-top: 8px }
.hc-call ul { list-style: none; padding: 0; margin: 20px 0 0 }
.hc-call li { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--hc-line); font-size: 14px }
.hc-call li svg { color: #81d8d0 }
.hc-call .hc-toast { margin: 18px 0 0 }
/* Scene 3 as a call screen (Kamil 2026-09-26, "zmiana B"): a live call in progress - green dot, a handset in a green
   ring with two soft rings going out, the caller in serif, the timer, a green voice line, the three checks in a row. */
.hc-callscreen { padding: 26px 28px 24px; text-align: center }
.cs-top { display: flex; justify-content: space-between; align-items: center; font: 500 10px/1 var(--font-display); text-transform: uppercase; letter-spacing: .2em; color: #777 }
.cs-live { display: flex; align-items: center; gap: 8px; color: #111 }
.cs-live i { width: 7px; height: 7px; border-radius: 50%; background: #81d8d0; animation: hc-pulse 1.6s ease-out infinite }
.cs-ring { position: relative; width: 74px; height: 74px; margin: 22px auto 16px; border-radius: 50%; border: 1px solid #81d8d0; display: grid; place-items: center }
.cs-ring::before, .cs-ring::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid #81d8d0; animation: cs-wave 2.4s cubic-bezier(.2, .6, .3, 1) infinite }
.cs-ring::after { animation-delay: 1.2s }
@keyframes cs-wave { 0% { transform: scale(1); opacity: .8 } 100% { transform: scale(1.7); opacity: 0 } }
.cs-ring svg { width: 26px; height: 26px; color: #111 }
.hc-callscreen h3 { font: 400 30px/1.1 var(--font-serif); letter-spacing: -.01em; margin: 0 }
.cs-sub { font-size: 13px; color: #666; margin-top: 8px }
.cs-timer { font: 400 15px/1 var(--font-serif); font-variant-numeric: tabular-nums; letter-spacing: .06em; color: #111; margin-top: 14px }
.cs-bars { display: flex; justify-content: center; align-items: center; gap: 3px; height: 26px; margin: 14px 0 4px }
.cs-bars b { display: block; width: 2px; height: 6px; border-radius: 1px; background: #81d8d0; animation: cs-bar 1.1s ease-in-out infinite }
.cs-bars b:nth-child(4n+1) { animation-delay: -.2s } .cs-bars b:nth-child(4n+2) { animation-delay: -.55s } .cs-bars b:nth-child(4n+3) { animation-delay: -.85s } .cs-bars b:nth-child(4n) { animation-delay: -.35s }
.cs-bars b:nth-child(3n) { animation-duration: .9s } .cs-bars b:nth-child(5n) { animation-duration: 1.35s }
@keyframes cs-bar { 0%, 100% { height: 5px } 50% { height: 24px } }
.cs-facts { list-style: none; padding: 14px 0 0; margin: 14px 0 0; border-top: 1px solid var(--hc-line); display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: #333 }
.cs-facts li { display: flex; align-items: center; gap: 6px }
.cs-facts svg { width: 14px; height: 14px; color: #81d8d0 }
.hc-callscreen .hc-toast { margin: 16px 0 0; text-align: left }
/* Scene 4 (Kamil 2026-09-26, "W1"): the job as a timeline beside a real roofer photo; the booked visit breathes. */
.hc-job { padding-bottom: 22px }
.hc-job-body { display: grid; grid-template-columns: 190px 1fr; gap: 22px; padding: 20px 24px 0 }
.hc-job-body img { width: 190px; height: 190px; object-fit: cover; display: block }
.hc-job-label { font: 500 10px/1 var(--font-display); text-transform: uppercase; letter-spacing: .2em; color: #777 }
.hc-job h3 { font: 400 26px/1.1 var(--font-serif); letter-spacing: -.01em; margin: 10px 0 14px }
.hc-job ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--hc-line) }
.hc-job li { position: relative; padding: 4px 8px 8px 18px; margin-bottom: 4px; font-size: 12px; color: #333 }
.hc-job li span { display: block; color: #999; font-size: 11px; margin-top: 2px }
.hc-job li b { position: absolute; left: -7px; top: 4px; width: 13px; height: 13px; background: #fff; display: grid; place-items: center }
.hc-job.hc-card li b svg { width: 13px; height: 13px; color: #81d8d0 }
.hc-job li.is-booked { color: #111; animation: hc-booked 2.4s ease-in-out infinite }
.hc-job li.is-booked b { left: -4px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #81d8d0; animation: hc-pulse 1.6s ease-out infinite }
@keyframes hc-booked { 0%, 100% { background: rgba(129, 216, 208, 0) } 50% { background: rgba(129, 216, 208, .22) } }
.hc-job .hc-toast { margin: 16px 24px 0 }
/* Scene 2 (Kamil 2026-09-26, "K1"): a driver photo beside a dashboard gauge. On the film's 14 s clock the scene is
   on screen from 25% to 47.5%: the needle sweeps round while cover is compared, lands on "Quotes ready", then the
   enquiry toast arrives (the shared hc-beat toast keeps its own timing). */
.hc-drive { display: grid; grid-template-columns: 1fr 1.05fr }
.dv-photo { overflow: hidden; min-height: 360px }
.dv-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 55%; display: block }
.dv-body { padding: 20px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px }
.dv-label { font: 500 10px/1 var(--font-display); text-transform: uppercase; letter-spacing: .2em; color: #777 }
.hc-drive h3 { font: 400 22px/1.1 var(--font-serif); letter-spacing: -.01em; margin: 8px 0 0 }
.dv-body > p { font-size: 13px; line-height: 1.5; color: #555; margin: 4px 0 2px }
/* Scene 2 card (Kamil 2026-09-26, "U1"): an auto insurance ID card on its own 3.5 s loop (= one scene, so it restarts
   whenever the scene comes round): it slides in with a slight turn, a sheen crosses it, the chip breathes, the rows
   fill in one by one, and a "Quote requested" stamp thumps down; then the shared toast arrives. */
.hc-drive .dv-body { align-items: stretch; text-align: left }
.ic-card { position: relative; overflow: hidden; margin-top: 8px; border: 1px solid #d9d7d8; border-radius: 10px; padding: 14px 16px 44px; background: linear-gradient(135deg, #fff, #f5f5f5); box-shadow: 0 14px 24px -20px rgba(0, 0, 0, .5); perspective: 800px; animation: ic-in 5s cubic-bezier(.2, .8, .2, 1) infinite }
@keyframes ic-in { 0% { opacity: 0; transform: translateY(14px) rotateX(18deg) rotate(-2deg) } 12%, 100% { opacity: 1; transform: none } }
.ic-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e4e2e3; padding-bottom: 8px; margin-bottom: 8px }
.ic-top b { font: 500 9px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase }
.ic-chip { width: 26px; height: 18px; border-radius: 3px; background: #81d8d0; animation: ic-chip 1.4s ease-in-out infinite }
@keyframes ic-chip { 0%, 100% { box-shadow: 0 0 0 0 rgba(129, 216, 208, .6) } 50% { box-shadow: 0 0 0 5px rgba(129, 216, 208, 0) } }
.ic-row { display: flex; justify-content: space-between; font-size: 11px; padding: 4px 0; color: #777 }
.ic-row em { font-style: normal; color: #111; font-weight: 500; opacity: 0; animation-duration: 5s; animation-iteration-count: infinite }
.ic-row:nth-of-type(2) em { animation-name: ic-v2 } .ic-row:nth-of-type(3) em { animation-name: ic-v3 } .ic-row:nth-of-type(4) em { animation-name: ic-v4 } .ic-row:nth-of-type(5) em { animation-name: ic-v5 }
@keyframes ic-v2 { 0%, 14% { opacity: 0; transform: translateX(8px); filter: blur(3px) } 21%, 100% { opacity: 1; transform: none; filter: none } }
@keyframes ic-v3 { 0%, 23% { opacity: 0; transform: translateX(8px); filter: blur(3px) } 30%, 100% { opacity: 1; transform: none; filter: none } }
@keyframes ic-v4 { 0%, 32% { opacity: 0; transform: translateX(8px); filter: blur(3px) } 39%, 100% { opacity: 1; transform: none; filter: none } }
@keyframes ic-v5 { 0%, 41% { opacity: 0; transform: translateX(8px); filter: blur(3px) } 48%, 100% { opacity: 1; transform: none; filter: none } }
.ic-stamp { position: absolute; right: 14px; bottom: 12px; border: 2px solid #81d8d0; color: #81d8d0; padding: 5px 8px; font: 500 9px/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; opacity: 0; transform: rotate(-8deg) scale(1.8); animation: ic-stamp 5s cubic-bezier(.3, 1.5, .5, 1) infinite }
@keyframes ic-stamp { 0%, 52% { opacity: 0; transform: rotate(-8deg) scale(1.8) } 58% { opacity: 1; transform: rotate(-8deg) scale(.92) } 63%, 100% { opacity: 1; transform: rotate(-8deg) scale(1) } }
.ic-shine { position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent); transform: skewX(-18deg); animation: ic-shine 5s ease-in-out infinite; pointer-events: none }
@keyframes ic-shine { 0%, 30% { left: -40% } 48%, 100% { left: 130% } }
.hc-drive .hc-toast { margin: 6px 0 0; align-self: stretch; text-align: left; white-space: nowrap }
/* Scene 1 (Kamil 2026-09-26, "V3"): the reader photo beside the guide's contents. While the scene is on screen
   (0 to 22.5% of the 14 s film) the reading place moves through the three chapters; the quotes button breathes. */
.hc-guide { display: grid; grid-template-columns: 1.05fr 1fr }
.gd-photo { overflow: hidden; min-height: 330px }
.gd-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 60%; display: block }
.gd-body { padding: 24px 24px 22px; display: flex; flex-direction: column }
.gd-label { font: 500 10px/1 var(--font-display); text-transform: uppercase; letter-spacing: .2em; color: #777 }
.hc-guide h3 { font: 400 24px/1.08 var(--font-serif); letter-spacing: -.01em; margin: 10px 0 14px }
.hc-guide ol { list-style: none; margin: 0 0 18px; padding: 0 }
.hc-guide li { display: grid; grid-template-columns: 28px 1fr; padding: 10px 0; border-top: 1px solid var(--hc-line); font-size: 13px; color: #999 }
.hc-guide li b { font: italic 400 14px var(--font-serif) }
.hc-guide li:nth-child(1) { animation: gd-ch1 20s infinite } .hc-guide li:nth-child(2) { animation: gd-ch2 20s infinite } .hc-guide li:nth-child(3) { animation: gd-ch3 20s infinite }
@keyframes gd-ch1 { 0%, 6.8% { color: #111; box-shadow: inset 2px 0 0 #81d8d0; padding-left: 10px } 7.2%, 100% { color: #999; box-shadow: none; padding-left: 0 } }
@keyframes gd-ch2 { 0%, 7%, 14.6%, 100% { color: #999; box-shadow: none; padding-left: 0 } 7.4%, 14.2% { color: #111; box-shadow: inset 2px 0 0 #81d8d0; padding-left: 10px } }
@keyframes gd-ch3 { 0%, 14.4%, 23%, 100% { color: #999; box-shadow: none; padding-left: 0 } 14.8%, 22.6% { color: #111; box-shadow: inset 2px 0 0 #81d8d0; padding-left: 10px } }
.gd-cta { margin-top: auto; align-self: flex-start; background: #81d8d0; color: #111; padding: 11px 16px; font: 500 10px/1 var(--font-display); text-transform: uppercase; letter-spacing: .16em; animation: rd-breathe 1.8s ease-in-out infinite }
@keyframes rd-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(129, 216, 208, .55) } 50% { box-shadow: 0 0 0 7px rgba(129, 216, 208, 0) } }


/* Arrow icon inside the actions */
.hc-cta .arrow, .hc-secondary .arrow { margin-left: 0; width: 14px; height: 14px }
.hc-secondary { display: inline-flex; align-items: center; gap: 8px }
.hc-route strong .arrow { margin-left: 0; width: 16px; height: 16px }
.hc-brands { padding-top: 90px }

/* Owned-brand strip: brand marks keep their own colours on a white plate in both themes */
/* Full-bleed white band: several brand logos carry their own white ground, so they sit on white (Kamil 2026-09-24). */
.hc-brands { max-width: none; margin: 80px 0 0; padding: 52px max(var(--hc-pad), calc((100% - 1800px) / 2 + var(--hc-pad))); display: flex; align-items: center; gap: 48px; background: #fff; color: #111 }
.hc-brands > p { font: 400 21px/1.35 var(--font-serif); flex: 0 0 240px; color: #111 }
.hc-brands > p a { display: inline-flex; align-items: center; gap: 8px; color: #81d8d0; font: 15px var(--font-body); margin-top: 10px; text-decoration: underline; text-underline-offset: 4px }
.hc-brands ul { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 32px }
.hc-brands li { min-width: 0 }
.hc-brands li a { display: block; padding: 6px }
.hc-brands .brand-logo { max-width: 100% }
.hc-brands .brand-logo { height: 30px; width: auto; object-fit: contain }
.hc-brand-ndr .brand-logo, .hc-brand-bob .brand-logo { height: 40px }
.hc-brand-justice .brand-logo { height: 22px }

/* Two routes: square planes, light and inverted */
.hc-routes { max-width: 1800px; margin: 0 auto; padding: 80px var(--hc-pad) 96px; gap: 16px; display: grid; grid-template-columns: 1fr 1fr }
.hc-route { padding: 56px 52px 48px; background: var(--paper-soft); border: 1px solid color-mix(in srgb, var(--ink) 24%, var(--paper-soft)); box-shadow: inset 0 0 0 7px var(--paper-soft), inset 0 0 0 8px var(--line); display: flex; flex-direction: column; min-height: 430px; color: var(--ink) }
.hc-route h2 { font: 400 clamp(42px, 4vw, 64px)/1.04 var(--font-serif); letter-spacing: -.015em; margin: 0 0 22px; color: inherit }
.hc-route p { font-size: 16px; color: var(--muted); max-width: 420px }
.hc-route strong { margin-top: auto; padding: 36px 0 12px; font-weight: 500; font-size: 15px; display: flex; justify-content: space-between; border-bottom: 1px solid currentColor }
.hc-route .arrow { transition: transform .18s cubic-bezier(.23, 1, .32, 1) }
/* Two quiet light-grey planes in a double hairline frame, like house stationery: set apart from the page without
   becoming the loudest thing on it (Kamil 2026-09-24, after white + black and white + Tiffany). */
.hc-route .arrow { color: #81d8d0 }
/* Choosing a route: the plane lifts a touch (scale 1.02), its outer rule darkens and the headline turns true Tiffany
   #81D8D0 (Kamil 2026-09-26: exactly this colour; low contrast on the light plane, accepted because it is a hover
   state over a headline that reads in ink otherwise). No glow (Kamil). */
.hc-route { transition: transform .4s cubic-bezier(.23, 1, .32, 1), border-color .2s ease }
.hc-route h2 { transition: color .25s ease }
.hc-route:focus-visible { transform: scale(1.02); border-color: var(--ink) }
.hc-route:focus-visible h2 { color: #81d8d0 }
@media (hover: hover) and (pointer: fine) { .hc-route:hover { transform: scale(1.02); border-color: var(--ink) } .hc-route:hover h2 { color: #81d8d0 } .hc-route:hover .arrow { transform: translate(3px, -3px) } }
.hc-route:active { transform: scale(1.01) }

@media (max-width: 1000px) {
  .hc-job-body { grid-template-columns: 120px 1fr; gap: 16px } .hc-job-body img { width: 120px; height: 120px }
  .hc-scene { gap: 5%; padding-inline: 4%; grid-template-columns: .9fr 1.1fr }
  .hc-article-body { grid-template-columns: 1fr } .hc-article-body img { min-height: 0; height: 170px }
  .hc-brands { flex-direction: column; align-items: flex-start } .hc-brands > p { flex: none } .hc-brands ul { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 28px 40px }
}
@media (max-width: 700px) {
  .hc-hero { padding-inline: 24px } .hc-intro { padding-top: 28px } .hc-hero h1 { font-size: 26px; line-height: 1.34 }
  .hc-garden { margin-inline: -24px }   .gw-view { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent) }
  .gw-stage { width: 200%; margin-left: -50% }
  .hc-actions { flex-direction: column; gap: 14px; margin: 26px 0 0 } .hc-path { margin: 56px auto 64px; padding: 40px 26px 36px } .hc-path h2 { margin-bottom: 32px } .hc-path ol { grid-template-columns: 1fr; gap: 28px }
  .hc-film { margin-inline: -24px; height: 700px }
  .hc-scene { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 30px 24px 65px; gap: 24px }
  .hc-scene-title h2 { font-size: 38px; margin: 0 0 12px } .hc-scene-title h2 br { display: none } .hc-scene-title p { font-size: 13px; max-width: none }
  .hc-card { justify-self: stretch; max-width: none }
  .hc-film-bottom { left: 24px; right: 24px }
  .hc-article-body { grid-template-columns: 1fr 1fr } .hc-article-body img { height: 100%; min-height: 250px }
  .hc-article h3 { font-size: 24px } .hc-article li { font-size: 12px } .hc-pill { display: none }
  .hc-mail, .hc-call { padding: 22px } .hc-mail h3, .hc-order h3 { font-size: 30px }
  .hc-feature { grid-template-columns: 100px 1fr } .hc-feature img { width: 100px; height: 70px } .hc-feature strong { font-size: 20px }
  .hc-quote-top { grid-template-columns: 110px 1fr } .hc-quote-top img { width: 110px; height: 80px } .hc-quote h3 { font-size: 26px }
  .hc-call h3 { font-size: 28px }
  .hc-drive { grid-template-columns: 1fr } .dv-photo { min-height: 0; height: 150px } .dv-body { padding: 14px 16px } .hc-drive h3 { font-size: 20px } .dv-body > p { display: none }   .hc-guide { grid-template-columns: 1fr } .gd-photo { min-height: 0; height: 150px } .gd-body { padding: 16px 18px 14px } .hc-guide li { padding: 8px 0 } .hc-guide h3 { font-size: 22px; margin: 8px 0 10px } .hc-guide ol { margin-bottom: 14px }
  .hc-job-body { grid-template-columns: 110px 1fr; gap: 14px; padding: 16px 18px 0 } .hc-job-body img { width: 110px; height: 110px } .hc-job h3 { font-size: 22px; margin: 8px 0 10px } .hc-job .hc-toast { margin: 12px 18px 0 }
  .hc-callscreen { padding: 18px 18px 16px } .cs-ring { width: 52px; height: 52px; margin: 12px auto 10px } .cs-ring svg { width: 20px; height: 20px }
  .hc-callscreen h3 { font-size: 24px } .cs-sub { margin-top: 6px } .cs-timer { margin-top: 8px } .cs-bars { height: 18px; margin: 8px 0 2px }
  .cs-facts { padding-top: 10px; margin-top: 10px; gap: 4px 12px; font-size: 11px } .hc-callscreen .hc-toast { margin-top: 12px; padding: 10px 12px }
  .hc-brands { padding: 44px 24px } .hc-brands ul { display: grid; grid-template-columns: 1fr 1fr; gap: 20px }
  .hc-routes { grid-template-columns: 1fr; padding-inline: 24px } .hc-route { padding: 36px 26px; min-height: 0 } .hc-route h2 { font-size: 44px }
}
@media (prefers-reduced-motion: reduce) {
  .gw-sway, .gw-water { animation: none }
  .hc-scene, .hc-toast, .hc-progress i, .hc-live i, .cs-live i, .cs-ring::before, .cs-ring::after, .cs-bars b, .hc-job li.is-booked, .hc-job li.is-booked b, .hc-guide li, .gd-cta, .ic-card, .ic-chip, .ic-row em, .ic-stamp, .ic-shine { animation: none } .ic-row em, .ic-stamp { opacity: 1 } .hc-scene { opacity: 0 } .hc-s1 { opacity: 1 }
  .hc-progress button:first-child i { background: var(--hc-tiff) }
  .hc-film[data-scene] .hc-scene { opacity: 0 } .hc-film[data-scene] .hc-progress i { background: #a9a6a7 }
  .hc-film[data-scene='0'] .hc-s1, .hc-film[data-scene='1'] .hc-s2, .hc-film[data-scene='2'] .hc-s3, .hc-film[data-scene='3'] .hc-s4 { opacity: 1 }
  .hc-film[data-scene='0'] .hc-progress button:nth-child(1) i, .hc-film[data-scene='1'] .hc-progress button:nth-child(2) i, .hc-film[data-scene='2'] .hc-progress button:nth-child(3) i, .hc-film[data-scene='3'] .hc-progress button:nth-child(4) i { background: var(--hc-tiff) } .hc-film-toggle { display: none } .hc-cta, .hc-route, .hc-route h2, .hc-route .arrow { transition: none }
}