/* One composition at every viewport: scalable type, in-flow content, full video coverage. */
:root { --site-gutter: clamp(20px, 4vw, 100px); }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { min-width: 0; }
.container { min-width: 0; max-width: 100%; padding: 0; }
.top-section.normal-section { position: relative; padding: 0; background: #000; }
.top-section > .container { position: relative; isolation: isolate; }
.top-section .video-container {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: #000 url('/media/direction/material-flow-poster-v1.jpg') center / cover no-repeat;
}
.top-section .video-container video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.top-section .video-container::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgb(0 0 0 / .28) 0%, rgb(0 0 0 / .10) 12%, transparent 28%,
    transparent 50%, rgb(0 0 0 / .08) 64%, rgb(0 0 0 / .32) 77%,
    rgb(0 0 0 / .70) 90%, rgb(0 0 0 / .94) 97%, #000 100%);
}
.top-section .brand-hero-copy {
  position: relative; z-index: 2; min-height: max(620px, 100svh);
  padding: clamp(164px, 19svh, 240px) var(--site-gutter) clamp(76px, 10svh, 132px);
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(100px, 18svh, 240px);
}
.top-section .brand-hero-message {
  margin: 0; max-width: 100%; color: #fff;
  font: 700 clamp(40px, 5.8vw, 112px)/1.04 'Poppins', 'Wanted Sans', sans-serif;
  letter-spacing: -.045em;
}
.top-section .brand-hero-message > span { display: block; }
.top-section .brand-hero-lockup {
  display: flex; flex-direction: column; align-self: flex-end; gap: .08em;
  max-width: 100%; text-align: right;
  font: 700 clamp(22px, 2.6vw, 48px)/1.3 'Wanted Sans', sans-serif;
  letter-spacing: -.045em;
}
.top-section .brand-hero-lockup > span { display: block; white-space: nowrap; }
.top-section .hero-scroll-cue { position: absolute; z-index: 3; left: var(--site-gutter); bottom: 24px; display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font: 500 12px/1.5 'Poppins', sans-serif; letter-spacing: .12em; }
.top-section .hero-scroll-cue:focus-visible { outline: 1px solid #fff; outline-offset: 6px; }
.services-section { padding: clamp(60px, 6vw, 120px) var(--site-gutter); }
.services-section .service-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 64px); }
.services-section .detail { padding: 0 0 0 clamp(14px, 2vw, 38px); min-width: 0; }
.services-section .detail:first-child { padding-left: 0; }
.services-section .txt1 { font-size: clamp(18px, 1.6vw, 30px); white-space: normal; margin-bottom: 16px; }
.services-section .txt1 span { font-size: .82em; }
.services-section .txt2 { font-size: clamp(14px, 1vw, 18px); line-height: 1.6; word-break: keep-all; }
#contact.normal-section { position: relative; padding: 0; }
#contact > .container { position: relative; isolation: isolate; }
#contact .video-container { position: absolute; inset: 0; width: 100%; height: 100%; }
#contact .section-content { position: relative; inset: auto; padding: clamp(76px, 8vw, 150px) var(--site-gutter); min-height: clamp(480px, 52vw, 960px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: 48px; }
#contact .signal-copy h2 { font-size: clamp(64px, 8.2vw, 158px); line-height: 1.04; }
#contact.is-media-playing .signal-lines b { animation-play-state: running; }
#contact .signal-contact { width: 100%; max-width: 460px; }
#contact .signal-contact > p { font-size: clamp(14px, 1.1vw, 18px); line-height: 1.65; margin-bottom: 30px; word-break: keep-all; }
#contact .signal-email { font-size: clamp(18px, 1.4vw, 26px); line-height: 1.5; overflow-wrap: anywhere; padding-bottom: 18px; user-select: text; }
#contact .project_btn { min-height: 58px; padding: 16px 0; margin-top: 30px; font-size: 16px; }
#contact .project_btn .arrow { font-size: 30px; }
.site-footer { padding: 36px var(--site-gutter) 44px; border-top: 1px solid #292929; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 26px 40px; background: #000; color: #c6c8ca; font: 400 14px/1.65 'Wanted Sans', sans-serif; }
.site-footer > * { min-width: 0; }
.site-footer .footer-label { margin: 0 0 8px; color: #929292; font-size: 12px; font-weight: 600; letter-spacing: .05em; }
.site-footer address { font-style: normal; }
.footer-email { user-select: text; overflow-wrap: anywhere; }
.footer-privacy { align-self: start; color: inherit; padding-block: 4px; }
.footer-copyright { grid-column: 1 / -1; font-size: 12px; color: #999; padding-right: 64px; }
/* A quiet circular control with a crisp vector arrow and an inset rim. */
.top-button {
  appearance: none; -webkit-appearance: none; position: fixed; z-index: 90;
  right: clamp(20px, 2.5vw, 36px); bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
  width: 64px; height: 64px; padding: 0; border: 1px solid rgb(255 255 255 / .30); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: rgb(17 17 17 / .82); color: #f5f5f0;
  box-shadow: 0 6px 24px rgb(0 0 0 / .22); cursor: pointer;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px);
  transition: opacity .25s ease, visibility .25s, transform .3s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.top-button::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgb(255 255 255 / .07); border-radius: inherit; pointer-events: none; }
.top-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.top-button > span { font: 700 12px/1 'Wanted Sans', sans-serif; letter-spacing: .08em; padding-left: .08em; }
.top-button.on { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.top-button.on:active { transform: scale(.94); }
.top-button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  .top-button:hover { background: #f5f5f0; color: #111; border-color: #f5f5f0; }
  .top-button:hover svg { transform: translateY(-2px); }
}
a:focus-visible, button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
@media (max-width: 1100px) {
  .services-section .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .services-section .detail { padding-left: 0; border-left: 0; }
  .services-section .txt1 { font-size: clamp(17px, 2.7vw, 28px); line-height: 1.25; }
  .site-footer { grid-template-columns: 1.3fr 1fr; }
  .footer-privacy { grid-column: 2; grid-row: 2; }
  .footer-copyright { grid-column: 1; grid-row: 2; padding-right: 0; }
}
@media (max-width: 700px) {
  .top-button { width: 56px; height: 56px; right: 20px; bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px)); }
  .top-button svg { width: 20px; height: 20px; }
  .top-section .brand-hero-copy {
    min-height: max(560px, 100svh); padding-top: calc(var(--header-height) + 52px);
    padding-bottom: clamp(64px, 9svh, 96px); gap: clamp(96px, 14svh, 180px);
  }
  .top-section .brand-hero-message { font-size: clamp(32px, 7.4vw, 48px); line-height: 1.08; }
  .top-section .brand-hero-message > span { text-wrap: balance; }
  .top-section .brand-hero-lockup { font-size: clamp(20px, 4.3vw, 28px); }
  #contact .section-content { grid-template-columns: minmax(0, 1fr); gap: 64px; min-height: 600px; }
  #contact .signal-copy h2 { font-size: clamp(56px, 17vw, 112px); }
  #contact .signal-contact { justify-self: end; max-width: 460px; }
  .site-footer { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .footer-privacy, .footer-copyright { grid-column: auto; grid-row: auto; }
  .footer-copyright { padding-right: 84px; }
}
@media (max-width: 360px) { .services-section .service-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-height: 500px) and (min-width: 701px) {
  .top-section .brand-hero-copy { min-height: 500px; padding-top: calc(var(--header-height) + 32px); padding-bottom: 64px; gap: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .top-button, .top-button svg { transition: none; }
  .top-button.on:active, .top-button:hover svg { transform: none; }
  .top-section .video-container, #contact .video-container, #contact .signal-lines b { animation: none; }
}