/* =========================================================
   合同会社アニー — Pattern A+  "VIEWFINDER"
   ========================================================= */
:root {
  --paper: #ecebe5;
  --paper2: #e2e0d8;
  --ink: #0d0d0f;
  --ink2: #18181c;
  --blue: #1f45ff;
  --blue2: #3d63ff;
  --red: #ff3a1f;
  --white: #fbfaf6;
  --cyan: #18d8ff;
  --mute: #5b5b62;
  --mute-d: #a7a7ad;
  --line-d: #34343a;
  --jp: "Dela Gothic One", "Noto Sans CJK JP", "Hiragino Sans", sans-serif;
  --sans: "Zen Kaku Gothic New", "Noto Sans CJK JP", "Hiragino Sans", system-ui, sans-serif;
  --en: "Archivo", "Noto Sans CJK JP", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --e: cubic-bezier(0.16, 1, 0.3, 1);
  --pop: cubic-bezier(0.34, 1.8, 0.5, 1);
  --gut: 22px;
  --max: 1320px;
  --hd: 72px;
  --d: 0.1s; /* hero start offset (set to ~1.05s while intro plays) */
}
html.has-intro {
  --d: 1.05s;
}
@media (min-width: 768px) {
  :root {
    --gut: 40px;
  }
}
@media (min-width: 1080px) {
  :root {
    --gut: 56px;
    --hd: 84px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  background: var(--paper);
  overflow-x: clip;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hd) + 12px);
}
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
svg,
canvas {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: 0;
  cursor: pointer;
}
ul,
ol {
  list-style: none;
}
h1,
h2,
h3,
h4 {
  font-weight: 400;
}
.mono {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.en {
  font-family: var(--en);
  font-stretch: 125%;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.jp {
  font-family: var(--jp);
  font-weight: 400;
}
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
}
.sp-only {
  display: initial;
}
.pc-only {
  display: none;
}
@media (min-width: 1080px) {
  .sp-only {
    display: none;
  }
  .pc-only {
    display: initial;
  }
}

/* focus */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible,
.menu :focus-visible,
.contact-cta :focus-visible {
  outline-color: #fff;
}
.skip {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 300;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  transition: top 0.3s var(--e);
}
.skip:focus {
  top: 12px;
}

/* paper grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  opacity: 0.1;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ================= HUD ================= */
.hud {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  mix-blend-mode: difference;
  color: #fff;
}
.hud .c {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
}
.hud .tl {
  top: 8px;
  left: 8px;
  border-right: 0;
  border-bottom: 0;
}
.hud .tr {
  top: 8px;
  right: 8px;
  border-left: 0;
  border-bottom: 0;
}
.hud .bl {
  bottom: 8px;
  left: 8px;
  border-right: 0;
  border-top: 0;
}
.hud .br {
  bottom: 8px;
  right: 8px;
  border-left: 0;
  border-top: 0;
}
.hud .meta {
  position: absolute;
  bottom: 13px;
  left: 38px;
  right: 38px;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.08em;
}
.hud .prog {
  position: absolute;
  top: 3px;
  left: 38px;
  right: 38px;
  height: 2px;
  background: rgba(255, 255, 255, 0.22);
}
.hud .prog i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--sp, 0));
  background: #fff;
}
@media (min-width: 1080px) {
  .hud .c {
    width: 28px;
    height: 28px;
  }
  .hud .tl,
  .hud .tr {
    top: 12px;
  }
  .hud .tl,
  .hud .bl {
    left: 12px;
  }
  .hud .tr,
  .hud .br {
    right: 12px;
  }
  .hud .bl,
  .hud .br {
    bottom: 12px;
  }
  .hud .meta {
    left: 52px;
    right: 52px;
    bottom: 18px;
    font-size: 10px;
  }
  .hud .prog {
    left: 52px;
    right: 52px;
    top: 5px;
  }
}

/* ================= HEADER ================= */
.hd {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  height: var(--hd);
  transition:
    background 0.4s,
    box-shadow 0.4s,
    transform 0.5s var(--e);
}
.hd .in {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: none;
  padding: 0 var(--gut);
}
.hd.is-solid {
  background: rgba(236, 235, 229, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(13, 13, 15, 0.12);
}
.hd.is-hidden {
  transform: translateY(-100%);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--en);
  font-stretch: 112%;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1;
}
.logo svg {
  width: 30px;
  height: auto;
}
.rec {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  padding: 7px 11px;
  border-radius: 99px;
  background: var(--ink);
  color: var(--white);
  line-height: 1;
}
.rec i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  animation: blink 1s steps(1) infinite;
}
.rec span {
  font-variant-numeric: tabular-nums;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.hd .r {
  display: flex;
  align-items: center;
  gap: 10px;
}
.burger {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--blue);
  display: grid;
  place-content: center;
  gap: 5px;
  box-shadow: 3px 3px 0 var(--ink);
  transition:
    transform 0.25s var(--e),
    box-shadow 0.25s var(--e);
}
.burger:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
.burger i {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  transition:
    transform 0.4s var(--e),
    width 0.4s var(--e);
}
.burger i:nth-child(2) {
  width: 12px;
  margin-left: 6px;
}
.burger:hover i:nth-child(2) {
  width: 18px;
  margin-left: 0;
}
.nav-pc {
  display: none;
}
@media (min-width: 1080px) {
  .nav-pc {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .nav-pc a {
    position: relative;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background 0.25s;
  }
  .nav-pc a small {
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--mute);
    line-height: 1;
    margin-bottom: 3px;
  }
  .nav-pc a:hover {
    background: rgba(13, 13, 15, 0.06);
  }
  .nav-pc a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 2px;
    background: var(--blue);
  }
  .nav-pc .cta {
    margin-left: 8px;
    background: var(--ink);
    color: var(--white);
    padding: 13px 18px;
    border-radius: 12px;
    box-shadow: 3px 3px 0 var(--blue);
  }
  .nav-pc .cta:hover {
    background: var(--ink2);
  }
  .nav-pc .cta small {
    color: #9aa3ff;
  }
  .logo {
    font-size: 22px;
  }
  .logo svg {
    width: 36px;
  }
}

/* ================= MENU (channel switch) ================= */
.menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  color: var(--white);
}
.menu.is-open,
.menu.is-closing {
  display: block;
}
.menu .scr {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: center;
  clip-path: inset(50% 0 50% 0);
}
.menu.is-open .scr {
  animation: crtOn 0.55s var(--e) 0.12s forwards;
}
.menu.is-closing .scr {
  clip-path: inset(0);
  animation: crtOff 0.42s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}
@keyframes crtOn {
  0% {
    clip-path: inset(50% 0 50% 0);
    filter: brightness(3);
  }
  45% {
    clip-path: inset(49.6% 0 49.6% 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
    filter: none;
  }
}
@keyframes crtOff {
  0% {
    clip-path: inset(0);
  }
  60% {
    clip-path: inset(49.6% 0 49.6% 0);
    filter: brightness(3);
  }
  100% {
    clip-path: inset(49.6% 50% 49.6% 50%);
    filter: brightness(3);
  }
}
.menu .static {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: #777
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2 -0.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-blend-mode: multiply;
}
.menu.is-open .static {
  animation:
    stat 0.5s steps(1) forwards,
    statMove 0.08s steps(2) 6;
}
.menu.is-closing .static {
  animation:
    stat2 0.3s steps(1) forwards,
    statMove 0.08s steps(2) 4;
}
@keyframes stat {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 0.85;
  }
  55% {
    opacity: 0.4;
  }
  80%,
  100% {
    opacity: 0;
  }
}
@keyframes stat2 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.7;
  }
  70% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes statMove {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: -60px 40px;
  }
  100% {
    background-position: 30px -50px;
  }
}
.menu .body {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  padding: calc(var(--hd) + 10px) var(--gut) 40px;
  display: flex;
  flex-direction: column;
}
.menu.is-open .body {
  animation: fade 0.35s ease 0.5s forwards;
}
.menu.is-closing .body {
  opacity: 0;
}
@keyframes fade {
  to {
    opacity: 1;
  }
}
.menu .bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--hd);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gut);
  z-index: 2;
  opacity: 0;
}
.menu.is-open .bar {
  animation: fade 0.3s ease 0.45s forwards;
}
.menu .bar .logo {
  color: var(--white);
}
.menu .close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 8px 0 16px;
  border-radius: 99px;
  background: var(--white);
  color: var(--ink);
  font-size: 11px;
}
.menu .close b {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--red);
  position: relative;
}
.menu .close b::before,
.menu .close b::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 14px;
  height: 2px;
  background: #fff;
  transform: rotate(45deg);
}
.menu .close b::after {
  transform: rotate(-45deg);
}
.menu .now {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--mute-d);
  margin-bottom: 18px;
}
.menu .now i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  animation: blink 1s steps(1) infinite;
}
.menu .chs {
  border-top: 1.5px solid var(--line-d);
}
.menu .chs a,
.menu .chs .dis {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1.5px solid var(--line-d);
  transform: translateY(16px);
  opacity: 0;
}
.menu.is-open .chs a,
.menu.is-open .chs .dis {
  animation: mIn 0.6s var(--e) forwards;
  animation-delay: calc(0.52s + var(--i) * 45ms);
}
@keyframes mIn {
  to {
    transform: none;
    opacity: 1;
  }
}
.menu .chs .no {
  font-family: var(--en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.03em;
  color: var(--blue2);
}
.menu .chs .t {
  font-family: var(--jp);
  font-size: 24px;
  line-height: 1.25;
}
.menu .chs .t small {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--mute-d);
  letter-spacing: 0.12em;
  margin-top: 5px;
}
.menu .chs .ar {
  font-family: var(--en);
  font-size: 18px;
  color: var(--mute-d);
  transition:
    transform 0.3s var(--e),
    color 0.3s;
}
.menu .chs a:hover .t,
.menu .chs a:focus-visible .t {
  text-shadow:
    3px 0 0 var(--red),
    -3px 0 0 var(--cyan);
}
.menu .chs a:hover .ar {
  transform: translateX(4px);
  color: #fff;
}
.menu .chs .dis {
  color: #77777e;
}
.menu .chs .dis .no {
  color: #55555c;
}
.menu .chs .sb {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border: 1px solid #66666e;
  border-radius: 5px;
  vertical-align: 1px;
}
.menu .foot {
  margin-top: auto;
  padding-top: 28px;
  display: grid;
  gap: 16px;
}
.menu .foot .sm {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12.5px;
  color: var(--mute-d);
}
.menu .foot .sm a:hover {
  color: #fff;
}
.menu .mcta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
  padding: 0 10px 0 22px;
  border-radius: 16px;
  background: var(--blue);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.04em;
}
.menu .mcta span {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: #fff;
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 18px;
}
@media (min-width: 1080px) {
  .menu .body {
    padding: calc(var(--hd) + 40px) var(--gut) 50px;
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 60px;
    align-content: start;
  }
  .menu .chs .t {
    font-size: 40px;
  }
  .menu .chs .no {
    font-size: 40px;
  }
  .menu .chs a,
  .menu .chs .dis {
    grid-template-columns: 110px 1fr auto;
    padding: 20px 0;
  }
  .menu .foot {
    margin-top: 0;
    padding-top: 30px;
    align-content: start;
  }
}
html.menu-open {
  overflow: hidden;
}

/* ================= INTRO ================= */
.intro {
  position: fixed;
  inset: 0;
  z-index: 250;
  pointer-events: none;
  display: none;
}
html.has-intro .intro {
  display: grid;
}
.intro .slices {
  grid-area: 1/1;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
}
.intro .slices i {
  background: var(--ink);
  animation: slR 0.7s var(--e) forwards;
  animation-delay: calc(0.95s + var(--k) * 45ms);
}
.intro .slices i:nth-child(even) {
  animation-name: slL;
}
@keyframes slR {
  to {
    transform: translateX(105%);
  }
}
@keyframes slL {
  to {
    transform: translateX(-105%);
  }
}
.intro .sl {
  grid-area: 1/1;
  position: relative;
  z-index: 2;
  animation: out 0.01s linear 0.95s forwards;
}
.intro .sb {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: #fff;
}
.intro .sb .big {
  font-family: var(--en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 40px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.intro .sb .m {
  font-size: 11px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.intro .sb .m i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  animation: blink 0.5s steps(1) infinite;
}
.intro .sb .bar {
  width: 160px;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.intro .sb .bar u {
  display: block;
  height: 100%;
  background: #fff;
  transform-origin: left;
  animation: load 0.85s var(--e) 0.05s both;
}
@keyframes load {
  from {
    transform: scaleX(0);
  }
}
@keyframes out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
.intro .cb {
  position: absolute;
  left: 0;
  right: 0;
  top: 39%;
  height: 22%;
  display: flex;
  opacity: 0;
  animation: cbf 0.5s steps(1) 0.55s 1 both;
}
.intro .cb b {
  flex: 1;
}
@keyframes cbf {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.intro .skipbtn {
  position: absolute;
  right: 20px;
  bottom: 26px;
  z-index: 3;
  pointer-events: auto;
  color: #fff;
  font-size: 11px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 99px;
  animation: out 0.01s linear 0.95s forwards;
}
.intro .skipbtn:hover {
  background: rgba(255, 255, 255, 0.12);
}
html.intro-done .intro {
  display: none;
}

/* ================= HERO ================= */
.hero {
  position: relative;
  min-height: max(100svh, 760px);
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--hd) + 14px) 0 104px;
}
#dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.hero .scan {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(0deg, rgba(13, 13, 15, 0.035) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.hero .wrap {
  position: relative;
}
.ttl-box {
  position: relative;
}
.ttl {
  font-family: var(--jp);
  font-weight: 400;
  font-size: min(calc((100vw - 2 * var(--gut)) / 4.08), 150px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  margin-left: -0.04em;
}
.ttl .l {
  display: block;
  white-space: nowrap;
}
.ttl .pc-br {
  display: none;
}
.ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(60%) rotate(8deg) scale(0.9);
  animation: slam 0.9s var(--e) both;
  animation-delay: calc(var(--d) + 0.2s + var(--i) * 55ms);
}
@keyframes slam {
  0% {
    opacity: 0;
    transform: translateY(60%) rotate(8deg) scale(0.9);
    text-shadow:
      10px 0 0 var(--red),
      -10px 0 0 var(--blue2);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: none;
    text-shadow:
      0 0 0 transparent,
      0 0 0 transparent;
  }
}
.kw {
  position: relative;
  display: inline-block;
  color: #fff;
  background: var(--blue);
  padding: 0 0.07em 0 0.05em;
  margin: 0 0.02em 0 -0.05em;
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  border-radius: 6px;
  transform: rotate(-2.5deg);
  line-height: 1.08;
  transform-origin: left center;
  animation: boxin 0.7s var(--pop) both;
  animation-delay: calc(var(--d) + 0.4s);
}
@keyframes boxin {
  from {
    transform: scaleX(0) rotate(-2.5deg);
  }
  to {
    transform: rotate(-2.5deg);
  }
}
.kw::before,
.kw::after {
  content: attr(data-t);
  position: absolute;
  inset: 0 0.07em 0 0.05em;
  opacity: 0;
  pointer-events: none;
}
.kw::before {
  color: var(--red);
  animation: g1 4.2s steps(1) infinite;
  animation-delay: calc(var(--d) + 2s);
}
.kw::after {
  color: var(--cyan);
  mix-blend-mode: multiply;
  animation: g2 4.2s steps(1) infinite;
  animation-delay: calc(var(--d) + 2s);
}
@keyframes g1 {
  0%,
  88%,
  100% {
    opacity: 0;
    transform: none;
    clip-path: inset(0);
  }
  89% {
    opacity: 0.9;
    transform: translate(-6px, 2px);
    clip-path: inset(10% 0 55% 0);
  }
  91% {
    opacity: 0.9;
    transform: translate(5px, -2px);
    clip-path: inset(60% 0 8% 0);
  }
  93% {
    opacity: 0.9;
    transform: translate(-3px, 0);
    clip-path: inset(30% 0 40% 0);
  }
  95% {
    opacity: 0;
  }
}
@keyframes g2 {
  0%,
  88%,
  100% {
    opacity: 0;
    transform: none;
  }
  89% {
    opacity: 0.9;
    transform: translate(6px, -1px);
    clip-path: inset(50% 0 20% 0);
  }
  91% {
    opacity: 0.9;
    transform: translate(-5px, 2px);
    clip-path: inset(5% 0 70% 0);
  }
  94% {
    opacity: 0;
  }
}
.stk {
  position: absolute;
  font-family: var(--en);
  font-stretch: 110%;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 7px 12px;
  border-radius: 99px;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  animation: pop 0.7s var(--pop) both;
  white-space: nowrap;
}
.stk.s1 {
  right: 0;
  top: 2px;
  background: var(--blue);
  color: #fff;
  transform: rotate(8deg);
  animation-delay: calc(var(--d) + 1.3s);
}
@keyframes pop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-40deg);
  }
  100% {
    opacity: 1;
  }
}
.badge {
  position: absolute;
  right: -8px;
  top: 2.72em;
  font-size: min(calc((100vw - 2 * var(--gut)) / 4.08), 150px);
  width: 112px;
  height: 112px;
  animation: pop 0.8s var(--pop) both;
  animation-delay: calc(var(--d) + 1.15s);
}
.badge .ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--paper);
  border-radius: 50%;
  border: 2px solid var(--ink);
  animation: spin 12s linear infinite;
}
.badge .core {
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  background: var(--red);
  display: grid;
  place-items: center;
  box-shadow: 3px 3px 0 var(--ink);
}
.badge .core svg {
  width: 36px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.tape {
  position: relative;
  margin: 20px calc(-1 * var(--gut) - 12px) 0;
  transform: rotate(-4deg);
  background: var(--ink);
  color: var(--white);
  padding: 10px calc(var(--gut) + 16px) 11px;
  font-family: var(--jp);
  font-size: 21px;
  letter-spacing: 0.06em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 8px 0 rgba(31, 69, 255, 0.9);
  clip-path: inset(0 100% 0 0);
  animation: tape 0.8s var(--e) forwards;
  animation-delay: calc(var(--d) + 1.05s);
}
.tape small {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #9aa3ff;
}
@keyframes tape {
  to {
    clip-path: inset(0 0 0 0);
  }
}
.lead {
  margin-top: 26px;
  font-size: 12.5px;
  line-height: 1.85;
  font-weight: 700;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 11px 14px;
  box-shadow: 4px 4px 0 var(--ink);
  opacity: 0;
  animation: fu 0.9s var(--e) forwards;
  animation-delay: calc(var(--d) + 1.35s);
}
@keyframes fu {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero-cta {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  align-items: stretch;
  opacity: 0;
  animation: fu 0.9s var(--e) forwards;
  animation-delay: calc(var(--d) + 1.5s);
}
.bigbtn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 62px;
  padding: 0 10px 0 22px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--white);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.04em;
  box-shadow: 4px 4px 0 var(--blue);
  transition:
    transform 0.3s var(--e),
    box-shadow 0.3s var(--e);
}
.bigbtn:hover {
  box-shadow: 6px 6px 0 var(--blue);
}
.bigbtn:active {
  transform: translate(3px, 3px) !important;
  box-shadow: 1px 1px 0 var(--blue);
}
.bigbtn .ar {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 11px;
  background: var(--blue);
  display: grid;
  place-items: center;
  font-size: 18px;
  overflow: hidden;
}
.bigbtn .ar span {
  display: block;
  animation: arr 1.8s var(--e) infinite;
  animation-delay: calc(var(--d) + 3s);
}
@keyframes arr {
  0%,
  60% {
    transform: none;
  }
  30% {
    transform: translateY(120%);
  }
  31% {
    transform: translateY(-120%);
  }
}
.circ {
  width: 62px;
  height: 62px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--ink);
  display: grid;
  place-items: center;
  background: var(--paper);
  transition:
    transform 0.3s var(--e),
    background 0.3s;
}
.circ svg {
  width: 26px;
  height: 26px;
}
.circ:hover {
  background: var(--white);
}
.tick {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  height: 46px;
  display: flex;
  background: var(--blue);
  color: #fff;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
  transform: translateY(260%);
  animation: tk 0.9s var(--e) forwards;
  animation-delay: calc(var(--d) + 1.65s);
}
@keyframes tk {
  to {
    transform: none;
  }
}
.tick .lab {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  background: var(--red);
  font-size: 10.5px;
  font-weight: 700;
  border-right: 2px solid var(--ink);
  z-index: 2;
}
.tick .lab i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: blink 1s steps(1) infinite;
}
.mq {
  display: flex;
  width: max-content;
  animation: mq 28s linear infinite;
}
.mq span {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 18px;
  white-space: nowrap;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.mq span::after {
  content: "";
  width: 9px;
  height: 9px;
  background: currentColor;
  transform: rotate(45deg);
}
@keyframes mq {
  to {
    transform: translateX(-50%);
  }
}
.monitor {
  display: none;
}

@media (min-width: 768px) {
  .hero {
    padding-top: calc(var(--hd) + 50px);
  }
  .badge {
    width: 150px;
    height: 150px;
    right: 0;
  }
  .badge .core {
    inset: 32px;
  }
  .badge .core svg {
    width: 48px;
  }
  .stk.s1 {
    font-size: 15px;
    padding: 9px 16px;
  }
  .tape {
    font-size: 30px;
  }
  .lead {
    font-size: 15px;
    max-width: 560px;
    padding: 16px 20px;
  }
  .hero-cta {
    max-width: 560px;
  }
}
@media (min-width: 1080px) {
  .hero {
    min-height: max(100svh, 760px);
    padding: calc(var(--hd) + 56px) 0 140px;
  }
  .ttl {
    font-size: min(calc(100vw * 0.62 / 7.15), 142px);
    line-height: 1.1;
  }
  .ttl .l {
    display: inline;
  }
  .ttl .pc-br {
    display: block;
  }
  .badge {
    font-size: inherit;
    width: 150px;
    height: 150px;
    top: auto;
    bottom: -8px;
    right: auto;
    left: calc(min(calc(100vw * 0.62 / 7.15), 142px) * 6.05);
  }
  .stk.s1 {
    right: auto;
    left: calc(min(calc(100vw * 0.62 / 7.15), 142px) * 5.7);
    top: -26px;
  }
  .tape {
    margin: 42px calc(-1 * var(--gut) - 20px) 0;
    font-size: 34px;
    transform: rotate(-2.2deg);
    padding: 12px calc(var(--gut) + 20px);
  }
  .hero-bottom {
    display: flex;
    align-items: flex-end;
    gap: 28px;
    margin-top: 40px;
    max-width: calc(100% - 400px);
  }
  .lead {
    margin-top: 0;
    flex: 1;
    max-width: 520px;
  }
  .hero-cta {
    margin-top: 0;
    flex: none;
    width: 340px;
  }
  .monitor {
    display: block;
    position: absolute;
    right: var(--gut);
    top: calc(var(--hd) + 40px);
    width: min(25vw, 340px);
    aspect-ratio: 9/16;
    max-height: calc(100% - var(--hd) - 220px);
    border: 2px solid var(--ink);
    border-radius: 22px;
    overflow: hidden;
    background: var(--blue);
    box-shadow: 8px 8px 0 var(--ink);
    opacity: 0;
    animation: monIn 1s var(--e) forwards;
    animation-delay: calc(var(--d) + 0.9s);
    z-index: 1;
  }
  .tick {
    bottom: 56px;
    height: 54px;
  }
  .tick .lab {
    font-size: 12px;
    padding: 0 18px;
  }
  .mq span {
    font-size: 17px;
  }
}
@keyframes monIn {
  from {
    opacity: 0;
    transform: translateY(30px) rotate(3deg);
  }
  to {
    opacity: 1;
    transform: rotate(1.5deg);
  }
}
.monitor img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.25) brightness(1.05);
  mix-blend-mode: multiply;
}
.monitor::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(236, 235, 229, 0.55) 0.9px, transparent 1.3px) 0 0/4px 4px,
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.monitor .ui {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
}
.monitor .ui .t {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.monitor .live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--red);
  font-size: 10px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 6px;
}
.monitor .live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: blink 1s steps(1) infinite;
}
.monitor .ui .b {
  font-size: 10px;
  line-height: 1.6;
  background: rgba(13, 13, 15, 0.75);
  padding: 10px 12px;
  border-radius: 10px;
}
.monitor .ui .b b {
  display: block;
  font-family: var(--jp);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-top: 3px;
}
.monitor .hearts {
  position: absolute;
  right: 16px;
  bottom: 90px;
  width: 40px;
  height: 260px;
  z-index: 2;
}
.monitor .hearts b {
  position: absolute;
  bottom: 0;
  left: 12px;
  font-size: 18px;
  color: #fff;
  opacity: 0;
  animation: rise 4s ease-in infinite;
}
.monitor .hearts b:nth-child(2) {
  left: 2px;
  animation-delay: 1.3s;
  color: var(--red);
}
.monitor .hearts b:nth-child(3) {
  left: 20px;
  animation-delay: 2.6s;
  font-size: 14px;
}
@keyframes rise {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.6);
  }
  15% {
    opacity: 1;
  }
  50% {
    transform: translate(-12px, -120px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(6px, -240px) scale(1.1);
  }
}

/* ================= COMMON SECTION ================= */
.sec {
  position: relative;
  overflow: clip;
}
.slate {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  padding: 0 var(--gut);
  max-width: var(--max);
  margin: 0 auto;
}
.slate .bars {
  display: flex;
  width: 56px;
  height: 14px;
  border: 1.5px solid currentColor;
  flex: none;
  overflow: hidden;
}
.slate .bars b {
  flex: 1;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--e);
}
.slate .bars b:nth-child(1) {
  background: #fbfaf6;
}
.slate .bars b:nth-child(2) {
  background: #ffe14a;
}
.slate .bars b:nth-child(3) {
  background: var(--cyan);
}
.slate .bars b:nth-child(4) {
  background: #2bd96b;
}
.slate .bars b:nth-child(5) {
  background: #ff3ad1;
}
.slate .bars b:nth-child(6) {
  background: var(--red);
}
.slate .bars b:nth-child(7) {
  background: var(--blue);
}
.slate.in .bars b {
  transform: none;
}
.slate.in .bars b:nth-child(2) {
  transition-delay: 0.04s;
}
.slate.in .bars b:nth-child(3) {
  transition-delay: 0.08s;
}
.slate.in .bars b:nth-child(4) {
  transition-delay: 0.12s;
}
.slate.in .bars b:nth-child(5) {
  transition-delay: 0.16s;
}
.slate.in .bars b:nth-child(6) {
  transition-delay: 0.2s;
}
.slate.in .bars b:nth-child(7) {
  transition-delay: 0.24s;
}
.slate .no {
  font-weight: 700;
  white-space: nowrap;
}
.slate .ln {
  flex: 1;
  height: 1.5px;
  background: currentColor;
  opacity: 0.35;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--e) 0.1s;
}
.slate.in .ln {
  transform: none;
}
.slate .ti {
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s steps(14) 0.3s;
}
.slate.in .ti {
  clip-path: inset(0);
}
@media (min-width: 1080px) {
  .slate {
    font-size: 11px;
  }
  .slate .bars {
    width: 72px;
    height: 16px;
  }
}

.rv {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1s var(--e),
    transform 1.1s var(--e);
}
.rv.in {
  opacity: 1;
  transform: none;
}
.flick.in {
  animation: flick 0.5s steps(1);
}
@keyframes flick {
  0% {
    text-shadow:
      6px 0 0 var(--red),
      -6px 0 0 var(--cyan);
    transform: translateX(-3px);
  }
  20% {
    text-shadow:
      -4px 0 0 var(--red),
      4px 0 0 var(--cyan);
    transform: translateX(2px);
  }
  40% {
    text-shadow:
      2px 0 0 var(--red),
      -2px 0 0 var(--cyan);
    transform: none;
  }
  60%,
  100% {
    text-shadow: none;
  }
}
html.capture .rv,
html.capture .slate .bars b,
html.capture .slate .ln,
html.capture .slate .ti {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
}

/* ================= ABOUT ================= */
.about {
  padding: 84px 0 84px;
  background: var(--paper);
}
.kin {
  margin-top: 28px;
  font-family: var(--jp);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.kin .r {
  display: block;
  white-space: nowrap;
  font-size: clamp(70px, 20vw, 200px);
  will-change: transform;
}
.kin .r1 {
  transform: translateX(calc(var(--gut) - var(--p, 0.5) * 60px + 30px));
}
.kin .r2 {
  transform: translateX(calc(-70px + var(--p, 0.5) * 60px));
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}
.kin .r2 .f {
  color: var(--blue);
  -webkit-text-stroke: 0;
}
.about-grid {
  margin-top: 40px;
  display: grid;
  gap: 30px;
}
.about-body p {
  font-size: 15px;
  line-height: 2.05;
  font-weight: 500;
}
.about-body p .dc {
  font-family: var(--jp);
  font-size: 44px;
  float: left;
  line-height: 1;
  margin: 6px 10px 0 0;
  color: var(--blue);
}
.polar {
  position: relative;
  margin: 10px 0 0 26px;
  max-width: 340px;
  padding: 10px 10px 40px;
  background: var(--white);
  box-shadow: 6px 6px 0 var(--ink);
  border: 2px solid var(--ink);
  transform: rotate(3deg);
}
.polar img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.polar .cap {
  position: absolute;
  left: 12px;
  bottom: 11px;
  font-size: 10px;
}
.polar .tag {
  position: absolute;
  left: -26px;
  top: -18px;
  transform: rotate(-10deg);
  background: var(--blue);
  color: #fff;
  font-family: var(--jp);
  font-size: 15px;
  padding: 8px 14px;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  z-index: 2;
}
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  margin-top: 6px;
}
.duo > div {
  padding: 18px 16px 16px;
  position: relative;
}
.duo > div + div {
  border-left: 2px solid var(--ink);
  background: var(--ink);
  color: var(--white);
}
.duo .k {
  font-size: 10px;
  display: flex;
  justify-content: space-between;
}
.duo .v {
  margin-top: 10px;
  font-family: var(--jp);
  font-size: 26px;
  line-height: 1.2;
}
.duo .v small {
  display: block;
  font-family: var(--en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0;
  margin-top: 10px;
  opacity: 0.55;
}
.duo .meter {
  margin-top: 14px;
  height: 6px;
  border-radius: 9px;
  background: rgba(13, 13, 15, 0.12);
  overflow: hidden;
}
.duo > div + div .meter {
  background: rgba(255, 255, 255, 0.15);
}
.duo .meter i {
  display: block;
  height: 100%;
  background: var(--blue);
  transform-origin: left;
  animation: fast 1.6s var(--e) infinite;
}
.duo > div + div .meter i {
  background: #fff;
  animation: last 6s linear infinite;
}
@keyframes fast {
  0% {
    transform: scaleX(0);
  }
  60%,
  100% {
    transform: scaleX(1);
  }
}
@keyframes last {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
@media (min-width: 1080px) {
  .about {
    padding: 130px 0 120px;
  }
  .kin {
    margin-top: 40px;
  }
  .about-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 70px;
    align-items: start;
    margin-top: 70px;
  }
  .about-body p {
    font-size: 17px;
    line-height: 2.2;
  }
  .about-body .duo {
    margin-top: 46px;
  }
  .polar {
    margin: 0 0 0 40px;
    max-width: 480px;
  }
  .polar .tag {
    font-size: 19px;
  }
}

/* ================= SERVICES (channel guide) ================= */
.guide {
  background: var(--ink);
  color: var(--white);
  padding: 84px 0 0;
}
.guide .slate {
  color: var(--mute-d);
}
.guide-h {
  margin-top: 22px;
}
.guide-h .t {
  font-family: var(--en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(64px, 18.5vw, 150px);
  line-height: 0.86;
  letter-spacing: -0.04em;
}
.guide-h .t span {
  display: block;
}
.guide-h .t .o {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--white);
}
.guide-h .t .bl {
  color: var(--blue2);
}
.guide-h p {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--mute-d);
}
.dial-wrap {
  position: sticky;
  top: calc(var(--hd) + 8px);
  z-index: 6;
  max-width: var(--max);
  margin: 28px auto 0;
  padding: 0 var(--gut);
  transition: top 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.hd-up .dial-wrap {
  top: 10px;
}
html.capture .dial-wrap {
  position: relative;
  top: 0;
}
.dial-wrap {
  margin-bottom: 34px;
}
.chs {
  position: relative;
}
.dial {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1.5px solid var(--line-d);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(13, 13, 15, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dial a {
  padding: 10px 0 8px;
  text-align: center;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--mute-d);
  border-right: 1.5px solid var(--line-d);
  transition:
    background 0.3s,
    color 0.3s;
}
.dial a:last-child {
  border: 0;
}
.dial a b {
  display: block;
  font-family: var(--en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 21px;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.dial a.on {
  background: var(--blue);
  color: #fff;
}
.dial a:hover:not(.on) {
  background: #222228;
}
.chn {
  position: relative;
  padding: 76px 0 70px;
  overflow: clip;
  scroll-margin-top: calc(var(--hd) + 60px);
}
.chn .no {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  line-height: 0.8;
}
.chn .no b {
  font-family: var(--en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(110px, 31vw, 200px);
  letter-spacing: -0.06em;
}
.chn .no span {
  font-size: 10px;
  padding-bottom: 10px;
  line-height: 1.5;
}
.chn .cat {
  margin-top: 22px;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 99px;
  border: 1.5px solid currentColor;
}
.chn h3 {
  margin-top: 16px;
  font-family: var(--jp);
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.chn p.desc {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 2;
  font-weight: 500;
}
.go {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 60px;
  padding: 0 9px 0 20px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.03em;
  transition:
    transform 0.3s var(--e),
    filter 0.3s;
}
.go:hover {
  filter: brightness(1.08);
}
.go i {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 17px;
  transition: transform 0.35s var(--e);
}
.go:hover i {
  transform: translateX(3px) rotate(-8deg);
}
.duotone {
  position: relative;
  overflow: hidden;
  background: var(--blue);
}
.duotone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.25) brightness(1.05);
  mix-blend-mode: multiply;
  transition: transform 1.2s var(--e);
}
.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(236, 235, 229, 0.55) 0.9px, transparent 1.3px) 0 0/4px 4px;
  mix-blend-mode: screen;
  pointer-events: none;
}
.chn:hover .duotone img {
  transform: scale(1.04);
}
.c1 {
  background: var(--paper);
  color: var(--ink);
}
.c1 .media {
  position: relative;
  margin: 26px calc(-1 * var(--gut)) 0 40px;
}
.c1 .ph {
  height: 330px;
  border: 2px solid var(--ink);
  border-right: 0;
  border-radius: 22px 0 0 22px;
}
.c1 .ph .live {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
}
.c1 .ph .live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: blink 1s steps(1) infinite;
}
.c1 .no b {
  color: var(--blue);
}
.c1 .go {
  background: var(--ink);
  color: #fff;
}
.c1 .go i {
  background: var(--blue);
}
.c1 .sticker {
  position: absolute;
  left: -28px;
  bottom: -30px;
  z-index: 3;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--jp);
  font-size: 16px;
  line-height: 1.15;
  text-align: center;
  transform: rotate(-12deg);
  box-shadow: 3px 3px 0 var(--ink);
}
.c2 {
  background: var(--blue);
  color: #fff;
}
.c2 .no b {
  color: transparent;
  -webkit-text-stroke: 2px #fff;
}
.c2 .split {
  position: relative;
  margin-top: 26px;
  height: 250px;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
.c2 .split img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c2 .split .r,
.c2 .split .c {
  mix-blend-mode: screen;
  opacity: 0;
}
.c2 .split .r {
  filter: grayscale(1) sepia(1) saturate(8) hue-rotate(-40deg);
  animation: shR 4s steps(1) infinite;
}
.c2 .split .c {
  filter: grayscale(1) sepia(1) saturate(8) hue-rotate(150deg);
  animation: shC 4s steps(1) infinite;
}
@keyframes shR {
  0%,
  84%,
  92%,
  100% {
    opacity: 0;
    transform: none;
  }
  85% {
    opacity: 0.8;
    transform: translate(-8px, 0);
  }
  88% {
    opacity: 0.8;
    transform: translate(5px, 2px);
  }
  91% {
    opacity: 0.8;
    transform: none;
  }
}
@keyframes shC {
  0%,
  84%,
  92%,
  100% {
    opacity: 0;
    transform: none;
  }
  85% {
    opacity: 0.8;
    transform: translate(8px, 0);
  }
  88% {
    opacity: 0.8;
    transform: translate(-5px, -2px);
  }
  91% {
    opacity: 0.8;
    transform: none;
  }
}
.c2 .bubble {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: #fff;
  color: var(--ink);
  font-family: var(--jp);
  font-size: 15px;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.c2 .go {
  background: #fff;
  color: var(--ink);
}
.c2 .go i {
  background: var(--ink);
  color: #fff;
}
.c3 {
  background: var(--ink);
  color: var(--white);
}
.c3 .no b {
  color: var(--white);
}
.c3 .lens {
  position: relative;
  width: min(320px, 82vw);
  aspect-ratio: 1;
  margin: 30px auto 0;
}
.c3 .lens .photo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--white);
}
.c3 .lens .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.35);
  object-position: 30% 60%;
}
.c3 .lens svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: spin 18s linear infinite;
}
.c3 .lens .pin {
  position: absolute;
  right: 0;
  top: 9%;
  background: var(--red);
  color: #fff;
  font-family: var(--en);
  font-stretch: 110%;
  font-weight: 800;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 99px;
  border: 2px solid var(--white);
  transform: rotate(10deg);
}
.c3 .cat {
  color: #a7b4ff;
}
.c3 .go {
  background: var(--blue);
  color: #fff;
}
.c3 .go i {
  background: #fff;
  color: var(--blue);
}
.c4 {
  background: var(--paper2);
  color: var(--ink);
}
.c4 .no b em {
  font-style: normal;
  color: var(--blue);
}
.browser {
  position: relative;
  margin-top: 28px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 6px 6px 0 var(--blue);
}
.browser .bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
}
.browser .bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
}
.browser .bar i:nth-child(1) {
  background: var(--red);
}
.browser .bar span {
  margin-left: 8px;
  flex: 1;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid var(--ink);
  font-size: 8.5px;
  line-height: 13px;
  padding-left: 7px;
  text-transform: lowercase;
}
.browser img {
  width: 100%;
  aspect-ratio: 1152/720;
  object-fit: cover;
}
.browser .stk2 {
  position: absolute;
  right: -6px;
  bottom: 18px;
  background: var(--ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 7px 12px;
  transform: rotate(-5deg);
  border: 2px solid var(--white);
}
.c4 .note {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--mute);
}
.c4 .go {
  background: var(--blue);
  color: #fff;
}
.c4 .go i {
  background: var(--ink);
  color: #fff;
}
.c4 .chips {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.c4 .chips li {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 8px;
  background: var(--white);
  border: 1.5px solid var(--ink);
}
@media (min-width: 768px) {
  .chn .inner {
    max-width: 640px;
  }
  .c2 .split {
    height: 360px;
  }
}
@media (min-width: 1080px) {
  .guide {
    padding-top: 130px;
  }
  .guide-h p {
    font-size: 14px;
  }
  .guide-top {
    display: block;
  }
  .dial-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: -64px;
  }
  .dial {
    width: 420px;
  }
  .dial a {
    padding: 14px 0 12px;
    font-size: 10px;
  }
  .dial a b {
    font-size: 28px;
  }
  .chn {
    padding: 120px 0;
  }
  .chn .inner {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
  }
  .chn .txt {
    grid-column: 1;
    grid-row: 1;
  }
  .chn .media,
  .chn .split,
  .chn .lens,
  .chn .browser-wrap {
    grid-column: 2;
    grid-row: 1;
  }
  .chn.rev .txt {
    grid-column: 2;
  }
  .chn.rev .media,
  .chn.rev .split,
  .chn.rev .lens,
  .chn.rev .browser-wrap {
    grid-column: 1;
  }
  .chn h3 {
    font-size: 40px;
  }
  .chn p.desc {
    font-size: 16px;
  }
  .go {
    max-width: 440px;
  }
  .c1 .media {
    margin: 0;
  }
  .c1 .ph {
    height: 520px;
    border-right: 2px solid var(--ink);
    border-radius: 22px;
    box-shadow: 8px 8px 0 var(--ink);
  }
  .c1 .sticker {
    width: 130px;
    height: 130px;
    font-size: 21px;
    left: -50px;
    bottom: -40px;
  }
  .c2 .split {
    height: 480px;
    margin-top: 0;
  }
  .c3 .lens {
    width: min(520px, 38vw);
    margin: 0 auto;
  }
  .c3 .lens .pin {
    font-size: 15px;
  }
  .browser {
    margin-top: 0;
  }
}

/* ================= TATE ================= */
.tate {
  background: var(--ink);
  color: var(--white);
  padding: 84px 0 40px;
}
.tate .slate {
  color: #8b8b93;
}
.tate .stage {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 30px;
  height: clamp(700px, 190vw, 1100px);
}
.tate .col {
  writing-mode: vertical-rl;
  font-family: var(--jp);
  font-size: clamp(92px, 25vw, 150px);
  line-height: 1;
  letter-spacing: -0.02em;
  background:
    radial-gradient(circle, rgba(160, 182, 255, 0.9) 1.3px, transparent 1.9px) 0 0/7px 7px,
    linear-gradient(170deg, #3d63ff, #1f45ff 55%, #5b7cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pan 14s ease-in-out infinite alternate;
}
.tate .col.two {
  background:
    url(../img/consulting-640.webp) center/cover,
    linear-gradient(180deg, #fbfaf6, #c9c6bc);
  background-blend-mode: multiply;
  -webkit-background-clip: text;
  background-clip: text;
  margin-top: clamp(110px, 28vw, 170px);
  animation-direction: alternate-reverse;
}
@keyframes pan {
  from {
    background-position: 0% 30%;
  }
  to {
    background-position: 100% 70%;
  }
}
.tate .side {
  position: absolute;
  left: var(--gut);
  bottom: 30px;
  writing-mode: vertical-rl;
  font-size: 10px;
  color: #8b8b93;
}
.tate .side2 {
  position: absolute;
  right: var(--gut);
  top: 10px;
  writing-mode: vertical-rl;
  font-family: var(--jp);
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--blue2);
}
@media (min-width: 1080px) {
  .tate {
    padding: 130px 0 80px;
  }
  .tate .stage {
    height: auto;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: 60px;
  }
  .tate .col,
  .tate .col.two {
    writing-mode: horizontal-tb;
    font-size: min(10.5vw, 170px);
    margin: 0;
    line-height: 1.12;
  }
  .tate .col.two {
    order: 2;
    margin-left: 12vw;
  }
  .tate .col {
    order: 1;
    margin-right: 8vw;
  }
  .tate .side {
    position: static;
    writing-mode: horizontal-tb;
    order: 3;
    margin-top: 40px;
    font-size: 11px;
  }
  .tate .side2 {
    position: static;
    writing-mode: horizontal-tb;
    order: 0;
    margin-bottom: 30px;
    font-size: 20px;
  }
}

/* ================= GUIDE TEASER ================= */
.gtea {
  background: var(--paper);
  padding: 84px 0 90px;
}
.gtea h2 {
  margin-top: 24px;
  font-family: var(--en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(56px, 16vw, 140px);
  line-height: 0.88;
  letter-spacing: -0.04em;
}
.gtea h2 .o {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}
.gtea .lead2 {
  margin-top: 16px;
  font-size: 13px;
  color: var(--mute);
}
.gcards {
  margin-top: 34px;
  display: grid;
  gap: 18px;
}
.gcard {
  position: relative;
  display: block;
  border: 2px solid var(--ink);
  border-radius: 22px;
  padding: 22px 20px 20px;
  background: var(--white);
  box-shadow: 5px 5px 0 var(--ink);
  transition:
    transform 0.35s var(--e),
    box-shadow 0.35s var(--e);
  overflow: hidden;
}
.gcard:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--ink);
}
.gcard.b {
  background: var(--blue);
  color: #fff;
}
.gcard .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
}
.gcard .eptag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
}
.gcard.b .eptag {
  background: #fff;
  color: var(--blue);
}
.gcard h3 {
  margin-top: 18px;
  font-family: var(--jp);
  font-size: 26px;
  line-height: 1.35;
}
.gcard p {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.8;
}
.gcard .go2 {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 900;
  font-size: 13px;
  padding-top: 14px;
  border-top: 1.5px solid currentColor;
}
.gcard .big {
  position: absolute;
  right: -6px;
  top: 30px;
  font-family: var(--en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 110px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px currentColor;
  opacity: 0.18;
  pointer-events: none;
}
@media (min-width: 768px) {
  .gcards {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1080px) {
  .gtea {
    padding: 130px 0;
  }
  .gtea-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
  }
  .gcard {
    padding: 34px 32px 30px;
  }
  .gcard h3 {
    font-size: 34px;
  }
  .gcard .big {
    font-size: 180px;
  }
}

/* ================= CREDITS ================= */
.credits {
  background: var(--ink);
  color: var(--white);
  padding: 84px 0 90px;
}
.credits .slate {
  color: #8b8b93;
}
.roll {
  margin-top: 50px;
  display: grid;
  gap: 44px;
  text-align: center;
}
.roll .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: #8b8b93;
}
.roll .v {
  margin-top: 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.9;
}
.roll .v.big {
  font-family: var(--jp);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.3;
}
.roll .v li {
  font-size: 15px;
}
.roll .end {
  font-family: var(--en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(52px, 15vw, 120px);
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.roll .end svg {
  width: 64px;
  margin: 0 auto 20px;
}
@media (min-width: 1080px) {
  .credits {
    padding: 130px 0;
  }
  .roll {
    grid-template-columns: repeat(2, 1fr);
    text-align: left;
    gap: 60px 80px;
    margin-top: 80px;
  }
  .roll .v.big {
    font-size: 52px;
  }
  .roll .v li {
    font-size: 18px;
  }
  .roll .end {
    grid-column: 1/-1;
    text-align: center;
    margin-top: 30px;
  }
}

/* ================= CONTACT CTA ================= */
.contact-cta {
  background: var(--blue);
  color: #fff;
  padding: 84px 0 90px;
}
.contact-cta .slate {
  color: #c9d3ff;
}
.contact-cta .huge {
  margin-top: 26px;
  font-family: var(--jp);
  font-size: clamp(96px, 27vw, 230px);
  line-height: 1;
  letter-spacing: -0.05em;
}
.contact-cta .huge span {
  display: block;
}
.contact-cta .huge .o {
  color: transparent;
  -webkit-text-stroke: 2px #fff;
}
.contact-cta .sub {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 700;
}
.board {
  position: relative;
  height: 260px;
  margin-top: 26px;
}
.board a {
  position: absolute;
  font-weight: 900;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 12px;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  white-space: nowrap;
  transition:
    transform 0.3s var(--e),
    box-shadow 0.3s var(--e);
}
.board a:hover {
  box-shadow: 5px 5px 0 var(--ink);
}
.board a:nth-child(1) {
  left: 0;
  top: 6px;
  background: #fff;
  color: var(--ink);
  transform: rotate(-5deg);
}
.board a:nth-child(2) {
  right: 0;
  top: 48px;
  background: var(--red);
  transform: rotate(6deg);
}
.board a:nth-child(3) {
  left: 14px;
  top: 108px;
  background: var(--ink);
  transform: rotate(3deg);
}
.board a:nth-child(4) {
  right: 4px;
  top: 156px;
  background: var(--paper);
  color: var(--ink);
  transform: rotate(-7deg);
}
.board a:nth-child(5) {
  left: 4px;
  top: 210px;
  background: #fff;
  color: var(--blue);
  transform: rotate(-2deg);
}
.magnet {
  position: relative;
  display: grid;
  place-items: center;
  width: 210px;
  height: 210px;
  margin: 26px auto 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  border: 2px solid var(--ink);
  transition: transform 0.4s var(--e);
}
.magnet svg.ring2 {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  animation: spin 14s linear infinite;
}
.magnet b {
  font-family: var(--jp);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  text-align: center;
}
.magnet b i {
  display: block;
  font-style: normal;
  font-size: 26px;
  color: var(--blue);
}
@media (min-width: 1080px) {
  .contact-cta {
    padding: 130px 0;
  }
  .cc-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: start;
  }
  .cc-grid > :last-child {
    padding-top: 34px;
  }
  .board {
    height: 330px;
    margin-top: 0;
  }
  .board a {
    font-size: 16px;
    padding: 12px 18px;
  }
  .board a:nth-child(3) {
    top: 130px;
  }
  .board a:nth-child(4) {
    top: 190px;
  }
  .board a:nth-child(5) {
    top: 260px;
  }
  .magnet {
    width: 250px;
    height: 250px;
    margin-top: 40px;
  }
}

/* ================= FOOTER ================= */
.ft {
  background: var(--paper);
  padding: 60px 0 30px;
  overflow: clip;
}
.ft-grid {
  display: grid;
  gap: 30px;
}
.ft .fl {
  display: grid;
  border-top: 2px solid var(--ink);
}
.ft .fl a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 2px solid var(--ink);
  font-weight: 900;
  font-size: 16px;
  transition:
    padding 0.3s var(--e),
    color 0.3s;
}

.ft .fl a:hover {
  padding-left: 8px;
  color: var(--blue);
}
.ft .fl .dis {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 2px solid var(--ink);
  font-weight: 900;
  font-size: 16px;
  color: #8a8a90;
}
.ft .fl .dis small {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 4px 7px;
}
.ft .sm {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 12.5px;
  font-weight: 500;
}
.ft .sm a:hover {
  color: var(--blue);
}
.ft .row {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
}
@media (min-width: 1080px) {
  .ft {
    padding: 90px 0 40px;
  }
  .ft-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: start;
  }
    .ft .fl a,
  .ft .fl .dis {
    font-size: 20px;
    padding: 18px 0;
  }
}

/* ================= SUB PAGES ================= */
.phero {
  position: relative;
  padding: calc(var(--hd) + 44px) 0 46px;
  overflow: clip;
  border-bottom: 2px solid var(--ink);
}
.phero .crumb {
  font-size: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--mute);
}
.phero .crumb a:hover {
  color: var(--ink);
}
.phero h1 {
  margin-top: 22px;
  font-family: var(--jp);
  font-size: clamp(46px, 13vw, 120px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.phero h1 .o {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}
.phero .en2 {
  margin-top: 14px;
  font-family: var(--en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--blue);
}
.phero p.intro-t {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 500;
  line-height: 2;
  max-width: 640px;
}
.phero .bars-deco {
  position: absolute;
  right: var(--gut);
  top: calc(var(--hd) + 40px);
  display: flex;
  width: 84px;
  height: 22px;
  border: 2px solid var(--ink);
}
.phero .bars-deco b {
  flex: 1;
}
.page-body {
  padding: 56px 0 90px;
}
@media (min-width: 1080px) {
  .phero {
    padding: calc(var(--hd) + 80px) 0 70px;
  }
  .phero .bars-deco {
    width: 140px;
    height: 30px;
  }
  .page-body {
    padding: 90px 0 130px;
  }
}

/* contact page */
.cform {
  display: grid;
  gap: 26px;
}
.cform .two {
  display: grid;
  gap: 26px;
}
@media (min-width: 768px) {
  .cform .two {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}
.cf-grid {
  display: grid;
  gap: 40px;
}
.cf-side .note2 {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.9;
}
.cf-side .mini {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: var(--mute);
}
.fld label,
.fld legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}
.req,
.opt {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 6px;
  line-height: 1.3;
}
.req {
  background: var(--red);
  color: #fff;
}
.opt {
  border: 1.5px solid var(--ink);
}
.ctl {
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 14px;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 3px 3px 0 var(--ink);
  transition:
    box-shadow 0.25s var(--e),
    transform 0.25s var(--e),
    border-color 0.25s;
}
.ctl:focus {
  outline: none;
  box-shadow: 5px 5px 0 var(--blue);
  border-color: var(--blue);
}
textarea.ctl {
  min-height: 190px;
  resize: vertical;
  line-height: 1.8;
}
.fld.err .ctl {
  border-color: var(--red);
  box-shadow: 3px 3px 0 var(--red);
}
.emsg {
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 6px;
}
.emsg:empty,
.emsg[hidden] {
  display: none;
}
.emsg::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 11px;
}
fieldset.fld {
  border: 0;
}
.types {
  display: grid;
  gap: 10px;
}
.types label {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition:
    background 0.25s,
    color 0.25s,
    box-shadow 0.25s var(--e),
    transform 0.25s var(--e);
}
.types label:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}
.types input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.types .chno {
  font-family: var(--en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 16px;
  color: var(--blue);
  min-width: 36px;
}
.types input:checked + label {
  background: var(--blue);
  color: #fff;
  box-shadow: 3px 3px 0 var(--ink);
}
.types input:checked + label .chno {
  color: #fff;
}
.types input:focus-visible + label {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.fld.err .types label {
  border-color: var(--red);
}
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.agree {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  cursor: pointer;
}
.agree input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 26px;
  height: 26px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  display: grid;
  place-items: center;
  box-shadow: 2px 2px 0 var(--ink);
  margin-top: 1px;
  cursor: pointer;
}
.agree input:checked {
  background: var(--blue);
}
.agree input:checked::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.agree a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fail {
  padding: 14px 16px;
  border: 2px solid var(--red);
  border-radius: 14px;
  background: #fff1ee;
  color: var(--red);
  font-weight: 700;
  font-size: 13.5px;
}
.submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 68px;
  padding: 0 10px 0 26px;
  border-radius: 18px;
  background: var(--ink);
  color: var(--white);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.06em;
  box-shadow: 5px 5px 0 var(--blue);
  transition:
    transform 0.25s var(--e),
    box-shadow 0.25s var(--e);
}
.submit:hover {
  box-shadow: 7px 7px 0 var(--blue);
}
.submit:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--blue);
}
.submit .ar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--red);
  display: grid;
  place-items: center;
  font-size: 18px;
}
.submit[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}
.formnote {
  font-size: 11.5px;
  color: var(--mute);
  line-height: 1.7;
}
@media (min-width: 1080px) {
  .cf-grid {
    grid-template-columns: 380px 1fr;
    gap: 90px;
    align-items: start;
  }
  .cf-side {
    position: sticky;
    top: calc(var(--hd) + 30px);
  }
  .types {
    grid-template-columns: 1fr 1fr;
  }
  .types .full {
    grid-column: 1/-1;
  }
  .two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
  .submit {
    max-width: 420px;
  }
}

/* privacy */
.pv-grid {
  display: grid;
  gap: 40px;
}
.pv-toc {
  display: none;
}
.pv-body section {
  padding: 30px 0;
  border-top: 2px solid var(--ink);
}
.pv-body section:first-child {
  border-top: 0;
  padding-top: 0;
}
.pv-body h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--jp);
  font-size: 22px;
  line-height: 1.4;
}
.pv-body h2 .n {
  font-family: var(--en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 28px;
  color: var(--blue);
  letter-spacing: -0.03em;
}
.pv-body p,
.pv-body li {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 2;
}
.pv-body p + p,
.pv-body p + ul,
.pv-body ul + p {
  margin-top: 12px;
}
.pv-body h2 + p,
.pv-body h2 + ul {
  margin-top: 14px;
}
.pv-body ul {
  display: grid;
  gap: 6px;
}
.pv-body li {
  position: relative;
  padding-left: 20px;
}
.pv-body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.85em;
  width: 8px;
  height: 8px;
  background: var(--blue);
  transform: rotate(45deg);
}
.pv-lead {
  font-size: 15px;
  font-weight: 700;
  line-height: 2;
  padding: 20px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
  margin-bottom: 34px;
}
.pv-sign {
  margin-top: 30px;
  text-align: right;
  font-weight: 900;
}
.btn-ink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 10px 0 22px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 4px 4px 0 var(--blue);
  margin-top: 16px;
}
.btn-ink span {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--blue);
  display: grid;
  place-items: center;
}
@media (min-width: 1080px) {
  .pv-grid {
    grid-template-columns: 280px 1fr;
    gap: 90px;
    align-items: start;
  }
  .pv-toc {
    display: block;
    position: sticky;
    top: calc(var(--hd) + 30px);
    border-top: 2px solid var(--ink);
  }
  .pv-toc a {
    display: flex;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1.5px solid rgba(13, 13, 15, 0.15);
    font-size: 13px;
    font-weight: 700;
  }
  .pv-toc a b {
    font-family: var(--en);
    font-stretch: 125%;
    font-weight: 900;
    color: var(--blue);
    min-width: 22px;
  }
  .pv-toc a:hover {
    color: var(--blue);
  }
  .pv-body h2 {
    font-size: 28px;
  }
  .pv-body p,
  .pv-body li {
    font-size: 16px;
  }
}

/* guide index */
.eps {
  display: grid;
  gap: 14px;
}
.ep {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr 26px;
  gap: 12px;
  align-items: center;
  padding: 18px 16px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
  transition:
    transform 0.3s var(--e),
    box-shadow 0.3s var(--e),
    background 0.3s;
}
.ep:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.ep:hover .n {
  color: var(--red);
}
.ep .n {
  font-family: var(--en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.04em;
  color: var(--blue);
  line-height: 1;
  transition: color 0.3s;
}
.ep .n small {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--mute);
  margin-bottom: 4px;
}
.ep .tag {
  display: block;
  width: fit-content;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--ink);
  color: #fff;
  margin-bottom: 7px;
}
.ep .t {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.65;
}
.ep .a {
  font-family: var(--en);
  font-weight: 800;
  font-size: 18px;
}
.xlink {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px;
  border-radius: 20px;
  background: var(--blue);
  color: #fff;
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  font-weight: 900;
  font-size: 16px;
}
.xlink small {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  opacity: 0.8;
  margin-bottom: 4px;
}
.xlink span.ar {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 12px;
  background: #fff;
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 18px;
}
@media (min-width: 768px) {
  .eps {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1080px) {
  .eps {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .ep {
    grid-template-columns: 1fr;
    align-content: start;
    padding: 22px 22px 24px;
    min-height: 220px;
  }
  .ep .a {
    position: absolute;
    right: 20px;
    bottom: 18px;
  }
  .ep .n {
    font-size: 44px;
  }
}

/* stand by / 404 / thanks */
.sby {
  position: relative;
  min-height: max(100svh, 720px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--hd) + 40px) var(--gut) 90px;
  overflow: hidden;
  isolation: isolate;
}
.sby .cbars {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: flex;
  opacity: 0.95;
}
.sby .cbars b {
  flex: 1;
}
.sby .cbars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24%;
  background: linear-gradient(
    90deg,
    #1f45ff 0 14%,
    #0d0d0f 14% 28%,
    #ff3ad1 28% 42%,
    #0d0d0f 42% 57%,
    #18d8ff 57% 71%,
    #0d0d0f 71% 85%,
    #fbfaf6 85%
  );
}
.sby.ink .cbars {
  opacity: 0.18;
}
.sby .noise {
  position: absolute;
  inset: -20%;
  z-index: -1;
  opacity: 0.2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: statMove 0.2s steps(2) infinite;
}
.sby .card {
  min-width: 0;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 26px;
  box-shadow: 8px 8px 0 var(--ink);
  padding: 34px 24px 30px;
  max-width: 560px;
  width: 100%;
}
.sby .card .mono {
  font-size: 10.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sby .card .mono i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  animation: blink 1s steps(1) infinite;
}
.sby .card h1 {
  margin-top: 16px;
  font-family: var(--en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(38px, 11vw, 92px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.sby .card h2 {
  margin-top: 16px;
  font-family: var(--jp);
  font-size: 24px;
  line-height: 1.4;
}
.sby .card p {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.9;
}
.sby .card .acts {
  margin-top: 24px;
  display: grid;
  gap: 10px;
}
.sby .card .acts a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 10px 0 20px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 14px;
  border: 2px solid var(--ink);
}
.sby .card .acts a span {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
}
.sby .card .acts a.p {
  background: var(--ink);
  color: #fff;
}
.sby .card .acts a.p span {
  background: var(--blue);
}
.sby .card .acts a.s {
  background: var(--white);
}
.sby .card .acts a.s span {
  background: var(--ink);
  color: #fff;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
  .intro {
    display: none !important;
  }
  .rv {
    opacity: 1;
    transform: none;
  }
  .mq {
    animation: none !important;
  }
  .kw::before,
  .kw::after {
    display: none;
  }
}

/* ---- typographic polish: phrase-aware Japanese line breaking ---- */
p,
li,
dd,
dt,
h2,
h3,
.lead,
label,
.emsg,
.ep .t,
.pv-toc a,
.gcard p {
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* contact side monitor (desktop) + menu monitor (desktop) */
.cf-tv,
.m-tv {
  display: none;
}
@media (min-width: 1080px) {
  .cf-tv {
    display: block;
    margin-top: 34px;
    max-width: 340px;
    aspect-ratio: 4/3;
    position: relative;
    border: 2px solid var(--ink);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 6px 6px 0 var(--ink);
    background: var(--ink);
  }
  .cf-tv .bars {
    position: absolute;
    inset: 0 0 26% 0;
    display: flex;
  }
  .cf-tv .bars b {
    flex: 1;
  }
  .cf-tv .bars b:nth-child(1) {
    background: #fbfaf6;
  }
  .cf-tv .bars b:nth-child(2) {
    background: #ffe14a;
  }
  .cf-tv .bars b:nth-child(3) {
    background: #18d8ff;
  }
  .cf-tv .bars b:nth-child(4) {
    background: #2bd96b;
  }
  .cf-tv .bars b:nth-child(5) {
    background: #ff3ad1;
  }
  .cf-tv .bars b:nth-child(6) {
    background: #ff3a1f;
  }
  .cf-tv .bars b:nth-child(7) {
    background: #1f45ff;
  }
  .cf-tv::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 3px);
    animation: scanY 6s linear infinite;
    pointer-events: none;
  }
  .cf-tv .lbl {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    color: #fff;
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .cf-tv .lbl b {
    font-family: var(--en);
    font-stretch: 125%;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: -0.01em;
  }
  .m-tv {
    display: block;
    position: relative;
    aspect-ratio: 16/10;
    border: 2px solid #2a2a30;
    border-radius: 18px;
    overflow: hidden;
    background: var(--blue);
    margin-bottom: 6px;
  }
  .m-tv img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.25);
    mix-blend-mode: multiply;
  }
  .m-tv::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(236, 235, 229, 0.5) 0.9px, transparent 1.3px) 0 0/4px 4px;
    mix-blend-mode: screen;
  }
  .m-tv .live {
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: 6px;
  }
  .m-tv .live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: blink 1s steps(1) infinite;
  }
  .m-tv .cap {
    position: absolute;
    right: 14px;
    bottom: 12px;
    z-index: 2;
    font-size: 10px;
    color: #fff;
    letter-spacing: 0.1em;
  }
  .menu .foot {
    margin-top: 0;
    align-content: start;
  }
}
@keyframes scanY {
  to {
    background-position: 0 60px;
  }
}
html.capture .cf-side,
html.capture .pv-toc {
  position: static !important;
}

/* =========================================================
   KIT — 新しいセクション／ページを同じ世界観で追加するための汎用パーツ
   （既存ページでは未使用。DESIGN_SYSTEM.md の「新しいセクションの追加」参照）
   ========================================================= */
.kit {
  padding: 84px 0 90px;
  background: var(--paper);
  color: var(--ink);
}
.kit.is-dark {
  background: var(--ink);
  color: var(--white);
}
.kit.is-blue {
  background: var(--blue);
  color: #fff;
}
.kit > .slate {
  margin-bottom: 26px;
}
.kit-h {
  font-family: var(--en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(56px, 16vw, 140px);
  line-height: 0.88;
  letter-spacing: -0.04em;
}
.kit-h span {
  display: block;
}
.kit-h .o {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}
.kit.is-dark .kit-h .o,
.kit.is-blue .kit-h .o {
  -webkit-text-stroke-color: #fff;
}
.kit-h .bl {
  color: var(--blue);
}
.kit.is-dark .kit-h .bl {
  color: var(--blue2);
}
.kit.is-blue .kit-h .bl {
  color: var(--ink);
}
.kit-jp {
  margin-top: 20px;
  font-family: var(--jp);
  font-weight: 400;
  font-size: clamp(26px, 6.4vw, 44px);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.kit-lead {
  margin-top: 16px;
  max-width: 640px;
  font-size: 14px;
  font-weight: 500;
  line-height: 2;
}
.kit-grid {
  margin-top: 36px;
  display: grid;
  gap: 18px;
}
.kit-card {
  position: relative;
  display: block;
  min-width: 0;
  border: 2px solid var(--ink);
  border-radius: 22px;
  padding: 22px 20px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transition:
    transform 0.35s var(--e),
    box-shadow 0.35s var(--e);
}
.kit.is-dark .kit-card,
.kit.is-blue .kit-card {
  box-shadow: 5px 5px 0 var(--blue2);
}
.kit.is-blue .kit-card {
  box-shadow: 5px 5px 0 var(--ink);
}
a.kit-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--ink);
}
.kit-card .k {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
}
.kit-card h3 {
  margin-top: 14px;
  font-family: var(--jp);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
}
.kit-card p {
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.9;
}
.kit-act {
  margin-top: 36px;
}
.kit.is-dark .btn-ink {
  background: var(--white);
  color: var(--ink);
}
.kit-h,
.kit-jp,
.kit-lead,
.kit-card p {
  word-break: auto-phrase;
  text-wrap: pretty;
}
@media (min-width: 768px) {
  .kit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  .kit {
    padding: 120px 0 130px;
  }
  .kit-grid.col3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .kit-lead {
    font-size: 15px;
  }
}

/* Receipt title stays within its 560px card; mobile sizing is retained. */
@media (min-width: 768px) {
  .sby .card h1.received-title {font-size:64px;}
}
/* ================= ICONS (inline SVG — never text glyphs) ================= */
.ic{display:block;width:1em;height:1em;flex:none;overflow:visible}
.ic-inline{display:inline-block;vertical-align:-.14em;margin-left:.35em}
.tate .side .ic-inline{transform:rotate(90deg);margin:.35em 0 0}
@media (min-width:1080px){.tate .side .ic-inline{transform:none;margin:0 0 0 .35em}}

/* icon sizes inside existing button slots (glyph slots used font-size; svg = 1em) */
.magnet b i .ic{margin:6px auto 0}
.sby .card .acts a span .ic,.btn-ink span .ic{width:16px;height:16px}
.gcard .go2 .ic{width:16px;height:16px}
.intro .skipbtn .ic-inline{width:.95em;height:.95em;margin-left:.3em;vertical-align:-.12em}
.monitor .hearts b .ic{width:1em;height:1em}
/* ================= FOOTER NAV — shared ================= */
.ft .fl a::after{content:none}
.ft .fl a .t{min-width:0}
.ft .fl .fx{flex:none;position:relative}
/* ---------- 案A  CHANNEL BUTTON (pressed tile, arrow slides out & re-enters) ---------- */
.ft .fl--a a{padding:13px 0;gap:16px}
.ft .fl--a .fx{width:40px;height:40px;border:2px solid var(--ink);border-radius:10px;background:var(--ink);color:#fff;
  box-shadow:4px 4px 0 var(--blue);overflow:hidden;transition:transform .28s var(--e),box-shadow .28s var(--e),background-color .2s}
.ft .fl--a .fx-in{position:absolute;inset:0}
.ft .fl--a .fx .ic{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;transition:transform .42s var(--e)}
.ft .fl--a .fx .ic+.ic{transform:translateX(-170%)}
.ft .fl--a a:active .fx,.ft .fl--a a:focus-visible .fx{transform:translate(4px,4px);box-shadow:0 0 0 var(--blue);background:var(--blue)}
.ft .fl--a a:active .fx .ic,.ft .fl--a a:focus-visible .fx .ic{transform:translateX(170%)}
.ft .fl--a a:active .fx .ic+.ic,.ft .fl--a a:focus-visible .fx .ic+.ic{transform:none;transition-delay:.06s}
@media (hover:hover){
  .ft .fl--a a:hover .fx{transform:translate(4px,4px);box-shadow:0 0 0 var(--blue);background:var(--blue)}
  .ft .fl--a a:hover .fx .ic{transform:translateX(170%)}
  .ft .fl--a a:hover .fx .ic+.ic{transform:none;transition-delay:.06s}
}
@media (prefers-reduced-motion:reduce){.ft .fl--a .fx,.ft .fl--a .fx .ic{transition:none}}

/* Supplied artwork: preserve the complete framing; remove the old photo zoom. */
.about .polar img{object-fit:contain}
.c3 .lens .photo img{transform:none;object-position:center}
.c3 .lens .ring text{font-stretch:normal;letter-spacing:0}
/* Reduced motion keeps state feedback in color, without positional changes. */
@media (prefers-reduced-motion:reduce){
 .ft .fl--a a:is(:hover,:focus-visible,:active) .fx{transform:none;box-shadow:4px 4px 0 var(--blue)}
 .ft .fl--a a:is(:hover,:focus-visible,:active) .fx .ic{transform:none}
 .ft .fl--a a:is(:hover,:focus-visible,:active) .fx .ic+.ic{transform:translateX(-170%)}
}
/* Keep the channel label clear of the circular lettering. */
.c3 .lens{margin-bottom:38px}
.c3 .lens .pin{top:auto;bottom:-34px;right:50%;transform:translateX(50%) rotate(-5deg);white-space:nowrap}

/* CH.01 supplied illustration and single-line company heading. */
.hero .monitor img{object-position:50% center}
.c1 .ph img{object-position:center}
.sby .card h1.company-title{font-size:clamp(28px,8.5vw,64px);white-space:nowrap}