/* 2026-09-04 approved hero. Canon: planning/step5-hero-approved.md */
.c-hero{
  position:relative;
  min-height:100svh;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:#101a2c;
  color:#fff;
}
.c-hero::after{display:none}
.c-hero .c-hero__mosaic{
  position:absolute;
  z-index:0;
  inset:-5%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:7px;
  transform:scale(1.08);
}
.c-hero .c-hero__tile{margin:0;perspective:1400px;background:#1a3045}
.c-hero .c-hero__tile-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d}
.c-hero .c-hero__tile-face{position:absolute;inset:0;display:block;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.c-hero .c-hero__tile-front{transform:rotateY(180deg)}
.c-hero .c-hero__tile-front img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.c-hero .c-hero__mosaic{counter-reset:tile}
.c-hero .c-hero__tile-back{background:rgba(31,63,82,.96);box-shadow:inset 0 0 0 1px rgba(232,240,245,.13)}
.c-hero .c-hero__tile:nth-child(3n+2) .c-hero__tile-back{background:rgba(47,78,99,.94)}
.c-hero .c-hero__tile:nth-child(3n) .c-hero__tile-back{background:rgba(27,67,72,.95)}
.c-hero .c-hero__tile-back::before{content:"";position:absolute;inset:14px;border:1px solid rgba(237,243,246,.1)}
.c-hero .c-hero__tile-back::after{counter-increment:tile;content:counter(tile,decimal-leading-zero);position:absolute;top:15px;left:17px;color:rgba(240,245,246,.42);font:600 10px/1 'Space Grotesk',sans-serif;letter-spacing:.16em}
.c-hero .c-hero__tile:nth-child(7) .c-hero__tile-back{box-shadow:inset 0 0 0 2px rgba(218,125,78,.72)}
.c-hero .c-hero__intro-logo{position:absolute;z-index:2;top:50%;left:50%;width:clamp(190px,22vw,330px);pointer-events:none;opacity:0;transform:translate(-50%,-50%);filter:drop-shadow(0 8px 24px rgba(4,11,20,.25))}
.c-hero .c-hero__intro-logo img{display:block;width:100%;height:auto}
.c-hero .c-hero__intro-logo-base{position:relative;z-index:1}
.c-hero .c-hero__intro-logo-runner{position:absolute;z-index:3;inset:0;display:block;transform-origin:9% 55%}
.c-hero .c-hero__intro-logo-accent{position:absolute;z-index:3;inset:0}
.c-hero .c-hero__intro-logo-shadow{position:absolute;z-index:0;left:7.2%;top:59%;width:27px;height:5px;border-radius:50%;background:rgba(235,241,242,.5);filter:blur(3px);transform-origin:center;will-change:transform,opacity}
.c-hero .c-hero__tile:nth-child(1) .c-hero__tile-front img{object-position:35% 18%}.c-hero .c-hero__tile:nth-child(2) .c-hero__tile-front img{object-position:52% 18%}.c-hero .c-hero__tile:nth-child(3) .c-hero__tile-front img{object-position:42% 22%}.c-hero .c-hero__tile:nth-child(4) .c-hero__tile-front img{object-position:48% 16%}.c-hero .c-hero__tile:nth-child(5) .c-hero__tile-front img{object-position:44% 20%}.c-hero .c-hero__tile:nth-child(6) .c-hero__tile-front img{object-position:54% 18%}
.c-hero .c-hero__veil{position:absolute;z-index:1;inset:0;background:linear-gradient(105deg,rgba(10,18,32,.94) 0%,rgba(13,25,43,.82) 39%,rgba(13,25,43,.57) 64%,rgba(13,25,43,.67) 100%);backdrop-filter:blur(2px)}
.c-hero .c-hero__veil::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 72%,rgba(5,12,23,.52));pointer-events:none}
.c-hero .c-hero__liquid{position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.c-hero .kfc-copy{position:absolute;z-index:3;left:clamp(28px,7vw,124px);top:50%;bottom:auto;max-width:min(760px,66vw);text-shadow:0 3px 22px rgba(4,11,20,.38);transform:translateY(-50%)}
.c-hero .kfc-copy h1{margin:0 0 18px;color:#fff;font-size:clamp(52px,6.4vw,94px);line-height:1.04;letter-spacing:-.065em;font-weight:900}
.c-hero .c-title-one,.c-hero .c-title-two,html.js .c-hero h1 .c-title-one,html.js .c-hero h1 .c-title-two{display:inline-block;white-space:nowrap;opacity:1!important;visibility:visible!important;filter:none!important;transform:none!important;clip-path:none!important;animation:none!important}
.c-hero .kfc-copy .kfc-accent{display:inline-block;color:#e99a70;opacity:1!important;visibility:visible!important;filter:none!important;clip-path:none!important}
.c-hero .kfc-copy>p{margin:0;color:rgba(255,255,255,.88);font-size:clamp(15px,1.55vw,21px);font-weight:600;opacity:1;filter:none;transform:none;animation:none}
.c-hero .kfc-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px;opacity:1;filter:none;transform:none;animation:none}
.c-hero .kfc-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:13px 22px;border:1px solid #e4885a;background:#d36d3d;color:#fff;text-decoration:none;font-weight:700;text-shadow:none;transition:transform .25s var(--ease),background .25s var(--ease)}
.c-hero .kfc-actions a:hover{transform:translateY(-2px);background:#e17a4b}.c-hero .kfc-actions a+a{border-color:rgba(255,255,255,.72);background:rgba(255,255,255,.08);color:#fff;backdrop-filter:blur(8px)}.c-hero .kfc-actions a+a:hover{background:rgba(255,255,255,.16)}
.c-header:not(.is-scrolled) .c-header__pill{background:rgba(255,255,255,.86);border-color:rgba(255,255,255,.34);backdrop-filter:blur(18px) saturate(140%)}
.c-header:not(.is-scrolled) .c-header__logo>span:last-child,.c-header:not(.is-scrolled) .c-header__nav a{color:#16233b;text-shadow:none}

@media(max-width:720px){
  .c-hero{height:max(700px,100svh);min-height:700px}
  .c-hero .c-hero__mosaic{inset:-12%;gap:4px;transform:scale(1.14)}
  .c-hero .c-hero__intro-logo{width:min(58vw,270px)}
  .c-hero .kfc-copy{left:24px;right:22px;top:50%;bottom:auto;max-width:none}
  .c-hero .kfc-copy h1{font-size:clamp(43px,12.2vw,58px);line-height:1.07}
  .c-hero .c-title-one,.c-hero .c-title-two{white-space:normal}
  .c-hero .kfc-actions{display:grid;max-width:330px}
  .c-hero .kfc-actions a{min-height:50px;padding:12px 15px}
  .c-hero .c-hero__veil{background:linear-gradient(180deg,rgba(10,18,32,.46) 0%,rgba(10,18,32,.55) 27%,rgba(10,18,32,.88) 58%,rgba(10,18,32,.97) 100%);backdrop-filter:blur(1px)}
}
@media(prefers-reduced-motion:reduce){
  .c-hero .c-hero__tile-inner{animation:none!important;transition:none!important;transform:rotateY(180deg)!important}
  .c-hero .kfc-copy>*{animation:none!important;transition:none!important;filter:none!important;opacity:1!important;transform:none!important}
  .c-hero .c-hero__liquid{display:none}
  .c-hero .c-hero__intro-logo{display:none}
}