/* The home page: the hero with its film, bonfire and heat, the statement with its photo, the service area cards,
   the iterations fuse, the own platforms and the promises. */

/* Hero */
/* With the header bar above it, 85svh tall in all (of the small viewport, so it does not jump when a phone's browser
   bars slide away); the body keeps the copy at its foot. */
.hero { position: relative; overflow: hidden; isolation: isolate; min-height: calc(85svh - var(--hdr-h)); display: flex; flex-direction: column; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; opacity: .4; z-index: -2; }
.hero-scrim { position: absolute; inset: 0; z-index: -1; display: none; background: linear-gradient(180deg, rgba(23,21,19,.78) 0%, rgba(23,21,19,0) 26%, rgba(23,21,19,0) 68%, rgba(23,21,19,.7) 100%); }
:root[data-theme="dark"] .hero-scrim { background: linear-gradient(180deg, rgba(14,13,11,.8) 0%, rgba(14,13,11,0) 26%, rgba(14,13,11,0) 68%, rgba(14,13,11,.72) 100%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-scrim { background: linear-gradient(180deg, rgba(14,13,11,.8) 0%, rgba(14,13,11,0) 26%, rgba(14,13,11,0) 68%, rgba(14,13,11,.72) 100%); }
}
.hero.video-mode .hero-scrim { display: block; }
.hero.video-mode .hero-video { opacity: 1; left: auto; right: 0; width: 62%; object-position: 60% 50%; mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 50%); }
.hero.video-mode .hero-heat { display: none; }
/* The heat: one soft ember glow rising from under the bonfire. */
.hero-heat { position: absolute; z-index: -1; right: -10%; bottom: -45%; width: 1000px; height: 1000px; border-radius: 50%; background: radial-gradient(closest-side, rgba(240,90,26,.26), rgba(240,90,26,.06) 55%, rgba(240,90,26,0)); pointer-events: none; }
.hero-body { flex: 1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; align-items: end; padding-top: clamp(32px, 6svh, 96px); padding-bottom: clamp(40px, 7svh, 104px); }
.hero-copy { display: flex; flex-direction: column; gap: clamp(16px, 3svh, 32px); min-width: 0; }
/* The headline and lead follow the screen's height, so the copy fits the 85svh hero. */
.hero-title { font-size: clamp(40px, 6.4svh, 70px); line-height: .95; max-width: 10.5em; }
.hero-lead { font-size: clamp(17px, 2.2svh, 22px); max-width: 24em; }
/* The lead types itself after the headline, a little faster. */
.hero-lead.typed { --typed-start: 950ms; --step: 55ms; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }

/* Bonfire */
.bonfire-wrap { display: flex; justify-content: center; min-width: 0; }
.bonfire { max-width: 100%; max-height: 45svh; height: auto; overflow: visible; }
.log { animation: appear .8s ease-out both; }
.log2 { animation-delay: .3s; }
.ember-bed { animation: appear 1s ease-out .6s both; }
.flame-grow { transform-box: fill-box; transform-origin: 50% 100%; animation: grow 1.6s cubic-bezier(.2,.7,.2,1) both; }
.flame-grow.f1 { animation-delay: .9s; }
.flame-grow.f2 { animation-delay: 1.3s; }
.flame-grow.f3 { animation-delay: 1.6s; }
.flicker { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.7s ease-in-out infinite alternate; }
.flicker.s2 { animation-duration: 1.3s; animation-delay: -.6s; }
.flicker.s3 { animation-duration: 2.1s; animation-delay: -1.1s; }
.spark { transform-box: fill-box; transform-origin: center; animation: fly linear infinite both; }
.k0 { animation-duration: 3s; animation-delay: 2.2s; }
.k1 { animation-duration: 2.4s; animation-delay: 2.9s; }
.k2 { animation-duration: 2.8s; animation-delay: 2.5s; }
.k3 { animation-duration: 2.2s; animation-delay: 3.4s; }
.k4 { animation-duration: 2.6s; animation-delay: 3.1s; }
.k5 { animation-duration: 3.2s; animation-delay: 2.7s; }
.k6 { animation-duration: 2s; animation-delay: 3.8s; }
.glow { animation: fadein 2s ease-out 1.4s both; }
@keyframes appear { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes grow { from { transform: scaleY(0) scaleX(.6); } to { transform: scaleY(1) scaleX(1); } }
@keyframes flicker { 0% { transform: scaleY(1) skewX(0); } 35% { transform: scaleY(1.06) skewX(-2deg); } 70% { transform: scaleY(.96) skewX(2deg); } 100% { transform: scaleY(1.03) skewX(-1deg); } }
@keyframes fly { 0% { transform: translateY(90px) scale(.4); opacity: 0; } 45% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-110px) scale(.55); opacity: 0; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* Statement */
.statement-section { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px 48px; padding-top: 136px; padding-bottom: 136px; }
.statement-photo { aspect-ratio: 3 / 4; align-self: start; }
.statement-body { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.statement { font-size: 39px; line-height: 1.2; letter-spacing: -.02em; font-weight: 300; max-width: 22em; }

/* What we do */
.services-section { padding-bottom: 136px; display: flex; flex-direction: column; gap: 48px; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.svc-cards { list-style: none; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.svc-card { position: relative; display: block; border-radius: 12px; color: #F3F2EF; }
.svc-card .photo { aspect-ratio: 4 / 5; }
/* A plain shade at the foot of the card keeps its title readable on any photo. */
.svc-card .photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(14,13,11,0) 50%, rgba(14,13,11,.72) 100%); }
.svc-card-body { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.svc-card-line { font-size: 15px; line-height: 1.4; color: rgba(243,242,239,.8); }
.svc-card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 24px; font-weight: 400; letter-spacing: -.02em; line-height: 1.15; }
.svc-card-title svg { flex: 0 0 auto; transition: translate .3s; }
/* On hover a card lifts a little on a soft shadow and its arrow leans forward. */
.svc-card { transition: translate .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s; }
@media (hover: hover) {
  .svc-card:hover { translate: 0 -4px; box-shadow: 0 18px 40px -24px rgba(14,13,11,.55); }
  .svc-card:hover .svc-card-title svg { translate: 6px 0; }
}

/* Iterations */
.process { padding-top: 128px; padding-bottom: 136px; display: flex; flex-direction: column; gap: 104px; }
.fuse-wrap { position: relative; }
.fuse { list-style: none; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.fuse-line { position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: linear-gradient(90deg, #4A4540 0%, #8A5A3C 38%, #F05A1A 72%, #FFB547 100%); }
.fuse li { position: relative; display: flex; flex-direction: column; gap: 12px; }
.node { width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid #6B645D; box-sizing: border-box; }
.n2 { border-color: #B8653A; }
.n3 { border-color: #F05A1A; }
.n4 { border-color: #FFB547; background: #FFB547; box-shadow: 0 0 0 6px rgba(255,181,71,.18), 0 0 24px rgba(240,90,26,.6); }
.step-n { font-size: 14px; color: var(--muted); padding-top: 20px; }
.loop { position: absolute; left: 7px; right: calc((100% - 96px) / 4 - 9px); top: -44px; height: 52px; border: 1.5px dashed rgba(243,242,239,.5); border-bottom: 0; border-radius: 20px 20px 0 0; pointer-events: none; }
.loop::after { content: ""; position: absolute; left: -6px; bottom: 8px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid rgba(243,242,239,.7); }
.loop-label { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); padding: 0 16px; background: var(--bg); color: var(--muted); font-size: 14px; white-space: nowrap; }
.loop-note { display: none; align-items: center; gap: 10px; margin-top: 32px; color: var(--muted); font-size: 15px; }

/* Own platforms */
.platforms { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px 72px; align-items: start; padding-top: 136px; padding-bottom: 136px; }
.platforms-copy { display: flex; flex-direction: column; gap: 24px; }
.platforms-text { font-size: 18px; max-width: 30em; }
.cap { list-style: none; padding: 0; border-top: 1.5px solid var(--fg); }
.cap li { display: flex; align-items: baseline; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); font-size: 19px; font-weight: 300; letter-spacing: -.01em; }
.cap li::before { content: ""; flex: 0 0 12px; height: 1.5px; margin-top: .8em; background: var(--ember); align-self: flex-start; }

/* Promises */
.promises { padding-top: 112px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 56px; }

/* Scroll-linked motion of the home page: the hero copy lifts and fades as it leaves, the film drifts, and the fuse
   lights step by step; everything else uses the shared reveals. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-copy { animation: hero-out linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .hero-video { animation: hero-drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .bonfire-wrap { animation: hero-sink linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .fuse-wrap { view-timeline-name: --fuse; }
    .fuse-line { transform-origin: left center; animation: rv-line linear both; animation-timeline: --fuse; animation-range: entry 0px entry 520px; }
    .fuse .node { animation: node-on linear both; animation-timeline: --fuse; }
    .fuse li > :not(.node) { animation: rv-rise linear both; animation-timeline: --fuse; }
    .fuse li:nth-child(1) > * { animation-range: entry 40px entry 200px; }
    .fuse li:nth-child(2) > * { animation-range: entry 150px entry 310px; }
    .fuse li:nth-child(3) > * { animation-range: entry 260px entry 420px; }
    .fuse li:nth-child(4) > * { animation-range: entry 370px entry 530px; }
    .loop { animation: loop-draw linear both; animation-timeline: --fuse; animation-range: entry 520px entry 720px; }
    .fuse li:nth-child(1) > .node { animation: node-on linear both, relight linear both; animation-timeline: --fuse, --fuse; animation-range: entry 40px entry 200px, entry 700px entry 760px; }
    @media (max-width: 900px) {
      .fuse-line { transform-origin: center top; animation-name: rv-line-y; animation-range: entry 0% entry 100%; }
      .fuse li:nth-child(n) > * { animation-timeline: view(); animation-range: entry 0px entry 200px; }
    }
  }
}
@keyframes hero-out { to { opacity: .2; transform: translateY(-60px); } }
@keyframes hero-sink { to { transform: translateY(60px); } }
@keyframes hero-drift { to { transform: translateY(140px) scale(1.04); } }
@keyframes node-on { from { border-color: #3A3631; background: var(--bg); box-shadow: none; } }
@keyframes relight { to { border-color: #FFB547; box-shadow: 0 0 0 6px rgba(255,181,71,.16), 0 0 18px rgba(240,90,26,.45); } }
@keyframes loop-draw { from { clip-path: inset(-40px -12px 0 100%); } to { clip-path: inset(-40px -12px 0 -12px); } }

@media (max-width: 900px) {
  .hero-copy .btn { flex: 1 1 auto; }
  .hero-title { font-size: 52px; }
  .hero-body { grid-template-columns: repeat(1, minmax(0, 1fr)); padding-top: 48px; padding-bottom: 64px; }
  .hero-scrim, :root[data-theme="dark"] .hero-scrim, :root:not([data-theme="light"]) .hero-scrim { background: linear-gradient(180deg, rgba(23,21,19,.9) 0%, rgba(23,21,19,.7) 55%, rgba(23,21,19,.2) 100%); }
  .hero.video-mode .hero-video { left: 0; width: 100%; top: auto; bottom: 0; height: 400px; object-position: 60% 50%; mask-image: linear-gradient(180deg, transparent 0%, #000 45%); }
  .hero.video-mode .hero-body { padding-bottom: 300px; }
  .hero.video-mode .hero-scrim { display: none; }
  .bonfire { width: 320px; height: 277px; }
  .statement { font-size: 26px; }
  .statement-photo { aspect-ratio: 16 / 10; }
  .svc-card .photo { aspect-ratio: 4 / 3; }
  .svc-card-body { left: 18px; right: 18px; bottom: 16px; }
  .svc-card-title { font-size: 20px; }
  .fuse { grid-template-columns: repeat(1, minmax(0, 1fr)); padding-left: 36px; }
  .fuse-line { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, #4A4540 0%, #8A5A3C 38%, #F05A1A 72%, #FFB547 100%); }
  .fuse li .node { position: absolute; left: -36px; top: 4px; }
  .step-n { padding-top: 0; }
  .loop { display: none; }
  .loop-note { display: flex; }
}

/* Phones held upright: the hero shows the copy first and a smaller bonfire under it, its buttons one per row; the
   headline follows the screen's width; the sections and the fuse sit closer together. */
@media (max-width: 600px) {
  .hero-title { font-size: clamp(35px, 9.7vw, 48px); }
  .hero-body { gap: 24px; padding-top: 32px; padding-bottom: 40px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .bonfire { width: 240px; height: 208px; }
  .statement-section { padding-top: 72px; padding-bottom: 72px; gap: 28px; }
  .statement { font-size: clamp(20px, 5.9vw, 26px); }
  .services-section { padding-bottom: 80px; gap: 32px; }
  .svc-cards { gap: 16px; }
  .svc-card-title { font-size: 18px; }
  .svc-card-line { font-size: 14px; }
  .process { padding-top: 72px; padding-bottom: 80px; gap: 48px; }
  .fuse { gap: 32px; }
  .platforms { padding-top: 72px; padding-bottom: 80px; gap: 32px; }
  .platforms-text { font-size: 17px; }
  .cap li { font-size: 17px; padding: 16px 0; }
  .promises { padding-top: 72px; padding-bottom: 80px; gap: 32px; }
}

/* Upright screens (phones and tablets held upright): the hero fills the first screen, the fire at its top fading out
   downwards and the headline, lead and buttons at its foot. The bonfire drawing, when shown, goes above the copy too. */
@media (max-width: 900px) and (orientation: portrait) {
  .hero { min-height: calc(100svh - var(--hdr-h)); }
  .hero.video-mode .hero-video { top: 0; bottom: auto; height: 58%; object-position: 60% 50%; mask-image: linear-gradient(180deg, #000 50%, transparent 100%); }
  .hero.video-mode .hero-body { padding-bottom: 40px; }
  .bonfire-wrap { order: -1; align-self: start; }
  .hero-heat { top: -25%; bottom: auto; right: -50%; width: 760px; height: 760px; }
}