/*
 * 7ven Media OnePage
 * Quiet, content-first design; glass is reserved for functional controls.
 * All selectors are scoped so the active block theme stays untouched.
 */

@font-face {
  font-family: "Junge Local";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/Junge-Regular.ttf") format("truetype");
}

:root {
  --s7m-ink: #1d1d1f;
  --s7m-secondary: #5f5f66;
  --s7m-paper: #ffffff;
  --s7m-mist: #f5f5f7;
  --s7m-sky: #eaf5ff;
  --s7m-blue: #0071e3;
  --s7m-deep-blue: #0a2540;
  --s7m-aqua: #8fd7f5;
  --s7m-coral: #ff8a71;
  --s7m-line: rgba(29, 29, 31, 0.1);
  --s7m-edge: max(1.25rem, 4vw, calc((100vw - 1240px) / 2));
}

.s7m-site,
.s7m-site-header {
  color: var(--s7m-ink);
  background: var(--s7m-paper);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.s7m-site { overflow: clip; }
.s7m-site :is(h1, h2, h3, p) { overflow-wrap: break-word; }
.s7m-site :is(h1, h2, h3) { color: inherit; font-family: inherit; font-weight: 650; letter-spacing: -0.055em; line-height: 0.99; }
.s7m-site :is(p, li, a), .s7m-site-header :is(p, a) { line-height: 1.48; }
.s7m-site a, .s7m-site-header a { color: inherit; }

/* Navigation is a functional layer, not a decorative card. */
.s7m-site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  box-sizing: border-box;
  min-height: 64px;
  padding: 0 var(--s7m-edge);
  background: rgba(255,255,255,.86);
  background: color-mix(in srgb, #ffffff 74%, transparent);
  border-bottom: 1px solid rgba(29, 29, 31, 0.06);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}

.s7m-site-header__inner { width: 100%; min-height: 64px; gap: .75rem 1.7rem; }
.s7m-wordmark { flex: 0 0 auto; margin: 0; color: var(--s7m-ink); font-family: "Junge Local", Georgia, "Times New Roman", serif; font-size: 1.55rem; font-weight: 400; letter-spacing: -0.045em; line-height: 1 !important; }
.s7m-wordmark a { text-decoration: none; }
.s7m-wordmark span { color: var(--s7m-secondary); font-weight: 400; }
.s7m-navigation { flex: 1 1 auto; justify-content: flex-end; color: #36363a; font-size: .8rem; font-weight: 500; }
.s7m-navigation .wp-block-navigation-item__content { text-decoration: none; }
.s7m-navigation .wp-block-navigation-item__content:hover,
.s7m-navigation .wp-block-navigation-item__content:focus-visible { color: var(--s7m-blue); }
.s7m-header-cta .wp-block-button__link {
  padding: .53rem .88rem;
  color: #fff;
  background: var(--s7m-blue);
  border: 1px solid var(--s7m-blue);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 180ms ease, transform 180ms ease;
}
.s7m-header-cta .wp-block-button__link:hover,
.s7m-header-cta .wp-block-button__link:focus-visible { background: #0077ed; transform: scale(1.025); }

/* Hero: one generous content surface, with a local render carrying the mood. */
.s7m-hero {
  position: relative;
  box-sizing: border-box;
  min-height: 720px;
  padding: clamp(5.5rem, 10vw, 10.5rem) var(--s7m-edge) 1.8rem;
  color: var(--s7m-ink);
  background-color: #f8fbff;
  background-image: url("assets/hero-liquid-studio.png");
  background-position: center;
  background-size: cover;
  isolation: isolate;
}
.s7m-hero::before { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.64) 33%, rgba(255,255,255,.04) 67%); }
.s7m-hero__grid { position: relative; min-height: 530px; gap: 2rem; align-items: flex-start !important; }
.s7m-hero__copy { flex: 0 1 620px; padding-top: clamp(.2rem, 3vw, 2.5rem); }
.s7m-kicker { margin: 0 0 1.1rem; color: var(--s7m-blue); font-size: .72rem; font-weight: 600; letter-spacing: .01em; }
.s7m-hero__title { max-width: 660px; margin: 0; font-size: clamp(3.7rem, 7vw, 6.8rem); }
.s7m-hero__title em,
.s7m-section-title em,
.s7m-contact__title em { color: var(--s7m-blue); font-family: inherit; font-style: normal; font-weight: inherit; }
.s7m-hero__lead { max-width: 475px; margin: 1.55rem 0 2rem; color: #3d3d42; font-size: clamp(1.08rem, 1.6vw, 1.35rem); letter-spacing: -0.018em; }
.s7m-site .wp-block-button__link { border: 1px solid currentColor; border-radius: 999px; font-size: .91rem; font-weight: 500; line-height: 1.2; text-decoration: none; transition: transform 180ms ease, color 180ms ease, background-color 180ms ease, border-color 180ms ease; }
.s7m-site .wp-block-button__link:hover,
.s7m-site .wp-block-button__link:focus-visible { transform: scale(1.025); }
.s7m-button-primary .wp-block-button__link { padding: .82rem 1.15rem; color: #fff; background: var(--s7m-blue); border-color: var(--s7m-blue); }
.s7m-button-primary .wp-block-button__link:hover { background: #0077ed; }
.s7m-button-secondary .wp-block-button__link { padding: .82rem 1.15rem; color: var(--s7m-blue); background: rgba(255,255,255,.6); border-color: rgba(0,113,227,.22); }
.s7m-button-secondary .wp-block-button__link:hover { background: #fff; border-color: rgba(0,113,227,.42); }

.s7m-hero__signal {
  position: absolute;
  right: clamp(0rem, 3vw, 2.5rem);
  bottom: 2.1rem;
  width: min(280px, 31vw);
  box-sizing: border-box;
  padding: 1.15rem 1.2rem;
  color: #17212b;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 1.35rem;
  box-shadow: 0 10px 30px rgba(26,68,93,.1), inset 0 1px 0 rgba(255,255,255,.65);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}
.s7m-hero__signal-label { margin: 0; color: #52616e; font-size: .72rem; font-weight: 500; }
.s7m-hero__signal-label strong { display: block; margin-top: .65rem; color: #17212b; font-size: 1.45rem; font-weight: 650; letter-spacing: -.05em; line-height: 1.05; }
.s7m-hero__signal-status { margin: .82rem 0 0; padding-top: .7rem; color: #52616e; border-top: 1px solid rgba(33,69,91,.13); font-size: .65rem; }
.s7m-ticker { justify-content: center; gap: clamp(1rem, 5vw, 4rem); width: 100%; margin: 0; padding: .2rem 0 0; color: #5e6671; }
.s7m-ticker p { display: flex; justify-content: center; gap: clamp(1rem, 5vw, 4rem); margin: 0; font-size: .78rem; font-weight: 500; letter-spacing: .01em; }
.s7m-ticker p span { white-space: nowrap; }

.s7m-section { box-sizing: border-box; padding: clamp(5.5rem, 10vw, 10rem) var(--s7m-edge); }
.s7m-section-intro { gap: 2rem; margin-bottom: clamp(3rem, 6vw, 5.4rem); }
.s7m-section-title { max-width: 900px; margin: 0; font-size: clamp(3rem, 6vw, 5.7rem); }
.s7m-section-note { max-width: 480px; margin: 0; color: var(--s7m-secondary); font-size: clamp(1rem, 1.4vw, 1.2rem); letter-spacing: -0.015em; }

/* Standard content materials sit below the interactive glass layer. */
.s7m-services { background: var(--s7m-paper); }
.s7m-service-grid { gap: 1.25rem; }
.s7m-service-card { position: relative; display: flex; flex-direction: column; min-height: 338px; padding: clamp(1.55rem, 3vw, 2.25rem); overflow: hidden; color: var(--s7m-ink); background: var(--s7m-mist); border: 1px solid rgba(29,29,31,.04); border-radius: 1.75rem; transition: transform 260ms ease, box-shadow 260ms ease; }
.s7m-service-card:hover { box-shadow: 0 14px 34px rgba(29,29,31,.09); transform: translateY(-.3rem); }
.s7m-service-card--app { background: #eef7ff; }
.s7m-service-card--web { background: #f5f4ff; }
.s7m-service-card--sound { background: #fff3ee; }
.s7m-service-card > :last-child { margin-top: auto; }
.s7m-service-index { margin: 0 0 3.5rem; color: var(--s7m-blue); font-size: .75rem; font-weight: 600; }
.s7m-service-card h3 { margin: 0; font-size: clamp(2rem, 3.5vw, 3rem); }
.s7m-service-card > p:not(.s7m-service-index):not(.s7m-card-arrow) { max-width: 24rem; color: #55555c; font-size: .94rem; }
.s7m-card-arrow { margin-bottom: 0; font-size: 1.5rem; line-height: 1 !important; }
.s7m-card-arrow a { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; color: #fff; background: var(--s7m-blue); border-radius: 50%; text-decoration: none; transition: transform 180ms ease, background-color 180ms ease; }
.s7m-card-arrow a:hover { background: #0077ed; transform: translateX(.22rem); }

.s7m-app-showcase { color: var(--s7m-ink); background: var(--s7m-mist); }
.s7m-app-showcase .s7m-kicker { color: var(--s7m-blue); }
.s7m-app-window { max-width: 450px; margin: auto; padding: .7rem; color: var(--s7m-ink); background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.82); border-radius: 2.1rem; box-shadow: 0 22px 60px rgba(38,67,86,.13), inset 0 1px 0 #fff; }
.s7m-app-window__top { display: flex; justify-content: space-between; margin: 0; padding: .45rem .65rem 1rem; color: #6e747b; font-size: .64rem; letter-spacing: .02em; }
.s7m-app-window__top span { color: var(--s7m-coral); letter-spacing: .12rem; }
.s7m-app-window__top strong { color: #4c5158; font-weight: 600; }
.s7m-app-window__screen { min-height: 342px; padding: 1.55rem; overflow: hidden; color: #fff; background: linear-gradient(150deg, #1397d1, #006edc); border-radius: 1.5rem; }
.s7m-app-window__eyebrow { margin: 0 0 3.2rem; color: #d9f6ff; font-size: .64rem; font-weight: 600; letter-spacing: .06em; }
.s7m-app-window__screen h3 { max-width: 310px; margin: 0; font-size: clamp(2.15rem, 4vw, 3.4rem); }
.s7m-app-window__chart { height: 88px; margin-top: 2.5rem; gap: .48rem; align-items: flex-end; }
.s7m-app-window__chart p { width: 100%; margin: 0; background: rgba(255,255,255,.86); border-radius: .35rem .35rem 0 0; animation: s7m-soft-bars 5.5s ease-in-out infinite alternate; }
.s7m-app-window__chart p:nth-child(1) { height: 25%; }
.s7m-app-window__chart p:nth-child(2) { height: 68%; animation-delay: -.7s; }
.s7m-app-window__chart p:nth-child(3) { height: 40%; animation-delay: -1.4s; }
.s7m-app-window__chart p:nth-child(4) { height: 82%; animation-delay: -2.1s; }
.s7m-app-window__chart p:nth-child(5) { height: 56%; animation-delay: -2.8s; }
.s7m-app-copy { padding-left: clamp(0rem, 5vw, 5.5rem); }
.s7m-checklist { margin: 1.75rem 0; padding: 0; list-style: none; color: #3f4147; font-weight: 500; }
.s7m-checklist li { padding: .56rem 0; border-bottom: 1px solid var(--s7m-line); }
.s7m-checklist li::before { margin-right: .7rem; color: var(--s7m-blue); content: "✓"; }
.s7m-text-button .wp-block-button__link { padding: 0; color: var(--s7m-blue); background: transparent; border: 0; border-radius: 0; text-decoration: none; }
.s7m-text-button .wp-block-button__link:hover { text-decoration: underline; text-underline-offset: .25rem; }

.s7m-process { background: var(--s7m-paper); }
.s7m-process-grid { margin-top: clamp(3rem, 6vw, 5.5rem); gap: 1rem; }
.s7m-process-step { min-height: 230px; padding: 1.5rem; background: #fbfbfc; border: 1px solid rgba(29,29,31,.05); border-radius: 1.45rem; }
.s7m-process-step__number { margin: 0 0 2.8rem; color: var(--s7m-blue); font-size: .75rem; font-weight: 600; }
.s7m-process-step h3 { margin: 0 0 .65rem; font-size: 1.65rem; }
.s7m-process-step p:last-child { max-width: 240px; margin-bottom: 0; color: var(--s7m-secondary); font-size: .93rem; }

.s7m-studio { color: var(--s7m-ink); background: var(--s7m-sky); }
.s7m-studio .s7m-kicker { color: var(--s7m-blue); }
.s7m-studio-signature { margin: 2.4rem 0 0; color: #4e82b2; font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 450; letter-spacing: -0.04em; line-height: 1.05 !important; }
.s7m-sound-meter { max-width: 500px; min-height: 342px; margin: auto; padding: 1.55rem; color: var(--s7m-ink); background: rgba(255,255,255,.63); border: 1px solid rgba(255,255,255,.78); border-radius: 2rem; box-shadow: 0 18px 45px rgba(80,129,162,.12), inset 0 1px 0 #fff; }
.s7m-sound-meter__caption { margin: 0; color: var(--s7m-secondary); font-size: .65rem; font-weight: 600; letter-spacing: .06em; }
.s7m-sound-meter__bars { height: 205px; gap: clamp(.28rem, 1vw, .65rem); align-items: center; }
.s7m-sound-meter__bars p { flex: 1 1 0; margin: 0; background: linear-gradient(180deg, #66caf1, #1675d1); border-radius: 999px; animation: s7m-sound 5.8s ease-in-out infinite alternate; }
.s7m-sound-meter__bars p:nth-child(1) { height: 28%; }
.s7m-sound-meter__bars p:nth-child(2) { height: 52%; animation-delay: -.8s; }
.s7m-sound-meter__bars p:nth-child(3) { height: 79%; animation-delay: -1.6s; }
.s7m-sound-meter__bars p:nth-child(4) { height: 42%; animation-delay: -2.4s; }
.s7m-sound-meter__bars p:nth-child(5) { height: 88%; animation-delay: -3.2s; }
.s7m-sound-meter__bars p:nth-child(6) { height: 65%; animation-delay: -4s; }
.s7m-sound-meter__bars p:nth-child(7) { height: 35%; animation-delay: -4.8s; }
.s7m-sound-meter__bars p:nth-child(8) { height: 58%; animation-delay: -5.6s; }
.s7m-sound-meter__bars p:nth-child(9) { height: 27%; animation-delay: -6.4s; }
.s7m-sound-meter__footer { display: flex; justify-content: space-between; margin: 0; padding-top: .8rem; color: #6a7782; border-top: 1px solid rgba(29,29,31,.08); font-size: .62rem; font-weight: 600; letter-spacing: .06em; }
.s7m-credits { justify-content: center; gap: .75rem 1.5rem; margin-top: clamp(4rem, 8vw, 7rem); }
.s7m-credits p { margin: 0; color: #6a7782; font-size: .72rem; font-weight: 600; letter-spacing: .035em; }

.s7m-contact { box-sizing: border-box; padding: clamp(5.5rem, 10vw, 9rem) var(--s7m-edge) clamp(2.6rem, 5vw, 4rem); color: #f5fbff; background: var(--s7m-deep-blue); }
.s7m-contact .s7m-kicker { color: var(--s7m-aqua); }
.s7m-contact__title { max-width: 950px; margin: 0; font-size: clamp(3.6rem, 7.6vw, 7.5rem); }
.s7m-contact__title em { color: var(--s7m-aqua); }
.s7m-contact__lead { max-width: 440px; margin: 1.6rem 0 0; color: #c6d9e9; font-size: 1.08rem; }
.s7m-contact__button .wp-block-button__link { padding: .83rem 1.12rem; color: #11314e; background: #fff; border-color: #fff; white-space: nowrap; }
.s7m-contact__button .wp-block-button__link:hover { color: #fff; background: var(--s7m-blue); border-color: var(--s7m-blue); }
.s7m-contact__details { gap: 1.5rem 3rem; margin-top: clamp(5rem, 10vw, 8rem); padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.23); }
.s7m-contact__details p { margin: 0; color: #c6d9e9; font-size: .87rem; }
.s7m-contact__details strong { color: var(--s7m-aqua); font-size: .66rem; font-weight: 600; letter-spacing: .06em; }
.s7m-contact__details a { color: #fff; text-underline-offset: .2rem; }
.s7m-footer { box-sizing: border-box; padding: 1.25rem var(--s7m-edge); color: #9ba7b0; background: #07192a; font-size: .73rem; }
.s7m-footer p { margin: 0; }
.s7m-footer a { color: #dce9f3; text-underline-offset: .2rem; }

@keyframes s7m-soft-bars { to { height: 78%; opacity: .72; } }
@keyframes s7m-sound { to { height: 18%; opacity: .65; } }

@media (max-width: 781px) {
  .s7m-site-header { position: relative; padding: .82rem var(--s7m-edge); }
  .s7m-site-header__inner { justify-content: center; min-height: 0; text-align: center; }
  .s7m-navigation { justify-content: center; }
  .s7m-header-cta { display: none; }
  .s7m-hero { min-height: 650px; padding-top: 5.2rem; background-position: 61% center; }
  .s7m-hero::before { background: linear-gradient(90deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.66) 75%, rgba(255,255,255,.35)); }
  .s7m-hero__grid { min-height: 525px; }
  .s7m-hero__signal { right: 0; bottom: 1.1rem; width: min(250px, 75vw); }
  .s7m-ticker, .s7m-ticker p { justify-content: flex-start; }
  .s7m-ticker p { gap: 1.4rem; overflow-x: auto; white-space: nowrap; }
  .s7m-section-intro { margin-bottom: 3rem; }
  .s7m-app-copy { padding: 3rem 0 0; }
  .s7m-contact .wp-block-buttons { justify-content: flex-start; margin-top: 2rem; }
  .s7m-credits { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .s7m-site *, .s7m-site-header * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}