:root {
  --blue: #00a0e9;
  --yellow: #ffe544;
  --ink: #333;
  --footer: #202834;
  --font-ja: 'Zen Kaku Gothic Antique', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-en: 'Poppins', var(--font-ja);
  --font-notes: 'Noto Sans JP', var(--font-ja);
  /* Shared text roles agreed in the 2026-09-17 design review. */
  --body-size: 16px;
  --body-leading: 2;
  --body-tracking: .04em;
  --body-weight: 400;
  --body-emphasis-weight: 700;
  --breadcrumb-size: 10px;
  --breadcrumb-weight: 500;
  --breadcrumb-tracking: .1em;
  --section-heading-size-sp: 28px;
  --section-heading-tracking-sp: .1em;
}
@media (max-width: 767px) {
  :root {
    --body-size: 14px;
    --body-tracking: .05em;
    --breadcrumb-size: 12px;
    --breadcrumb-weight: 700;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; color: var(--ink); background: #fff; font-family: var(--font-ja); font-size: 16px; -webkit-font-smoothing: antialiased; }
body:has(dialog[open]) { overflow: hidden; }
/* Fade a cover instead of the body so fixed backgrounds keep their positioning. */
.page-intro {
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: #fff;
  pointer-events: none;
  animation: page-intro-failsafe .8s ease 2s both;
}
.page-intro.is-ready { animation-name: page-intro-out; animation-delay: .12s; }
@keyframes page-intro-out {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}
@keyframes page-intro-failsafe {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
/* Nested emphasis must not request a synthetic 900 weight from a 700 parent. */
strong, b { font-weight: 700; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 5px; }
.news-section a:focus-visible, .company-links a:focus-visible, .recruit-section a:focus-visible, .inner-main a:focus-visible, dialog a:focus-visible, dialog button:focus-visible { outline-color: #006899; }
h1, h2, p { margin: 0; }
mark { color: var(--yellow); background: none; }
.icon { flex: 0 0 auto; }
.wide-container { width: calc(100% - 80px); max-width: 1360px; margin-inline: auto; }
.content-container { width: calc(100% - 160px); max-width: 1152px; margin-inline: auto; }
.skip-link { position: absolute; z-index: 100; left: 24px; top: -90px; padding: 16px 24px; background: #fff; color: #006899; border-radius: 5px; }
.skip-link:focus { top: 10px; }

/* Header is laid over the same Figma background as the hero. */
.site-header { position: absolute; z-index: 10; inset: 0 0 auto; min-height: 96px; width: 100%; max-width: 1600px; margin-inline: auto; padding: 20px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #fff; }
.header-logo { flex: 0 0 120px; }
.header-logo img { width: 120px; height: 27px; object-fit: contain; }
.nav-list { display: flex; align-items: center; gap: 24px; list-style: none; padding: 0; margin: 0; }
.primary-nav { margin-right: auto; margin-left: 24px; }
.primary-nav .nav-list { gap: clamp(14px, 1.55vw, 24px); }
.primary-nav a { display: block; font-size: 14px; line-height: 2; font-weight: 700; letter-spacing: .1em; white-space: nowrap; transition: color .2s; }
.primary-nav a:hover, .footer-nav a:hover { color: var(--yellow); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-phone { display: block; white-space: nowrap; }
.header-phone > span { display: flex; align-items: center; gap: 2px; }
.header-phone strong { font-family: var(--font-en); font-size: 24px; line-height: 28px; font-weight: 500; letter-spacing: -.04em; }
.header-phone small { display: block; font-family: var(--font-notes); font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: .02em; font-feature-settings: "palt"; text-align: center; }
.pill { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 60px; min-width: 270px; padding: 10px 16px 10px 32px; border: 0; border-radius: 100px; font-size: 18px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; transition: background-color .2s, transform .2s, box-shadow .2s; }
.pill .icon { width: 36px; height: 36px; transition: transform .2s; }
.pill:hover { transform: translateY(-2px); box-shadow: 0 6px 22px #003d5614; }
.pill:hover .icon { transform: translateX(3px); }
.pill--white { background: #fff; color: #333; }
.pill--yellow { background: var(--yellow); color: #333; }
.pill--yellow:hover { background: #fff178; }
.pill--outline { border: 1px solid #bdbdbd; min-width: 232px; min-height: 64px; padding-left: 40px; background: #fff; font-size: 18px; letter-spacing: 0; }
.pill--outline > [lang="en"] { font-family: var(--font-en); font-weight: 600; letter-spacing: .02em; }
.header-actions .pill { border-radius: 8px; min-width: 0; min-height: 48px; justify-content: center; padding: 12px 20px; font-size: 14px; letter-spacing: .01em; white-space: nowrap; }
.menu-toggle { display: none; border: 1px solid #ffffff70; border-radius: 50%; width: 46px; height: 46px; padding: 13px 11px; background: transparent; flex-shrink: 0; }
.menu-toggle span { display: block; width: 22px; height: 1px; margin: 4px 0; background: #fff; }

/* Preserve the Figma outline while separating its baked-in artwork from the base. */
.service-world {
  --service-reveal-base: linear-gradient(var(--blue) 29%, transparent 34%);
  position: relative;
  isolation: isolate;
  clip-path: inset(0);
  color: #fff;
  padding-bottom: 160px;
}
/* Clip the moving background only; service cards can overlap its curved edge. */
.service-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  isolation: isolate;
  clip-path: inset(0);
  background-image: var(--service-reveal-base), url('../images/service-background.png');
  background-position: center top;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* The exported background's white area is opaque; clip to its blue contour only. */
  mask: url('../images/service-mask.svg') center top / 100% 100% no-repeat;
  -webkit-mask: url('../images/service-mask.svg') center top / 100% 100% no-repeat;
}
/* Follow the viewport until the artwork reaches its contact-section placement. */
.hero-flow {
  position: fixed;
  z-index: 0;
  inset: 0 0 auto;
  height: max(49.1493vw, 660px);
  overflow: hidden;
  mix-blend-mode: difference;
  transform: translate3d(0, var(--flow-stop-offset, 0px), 0);
  pointer-events: none;
  user-select: none;
}
.hero-flow[data-failed] { display: none; }
.hero-flow-surface {
  position: absolute;
  inset: 0;
  /* The soft edge travels left to right; the artwork itself stays in place. */
  mask-image: linear-gradient(to right, #000 33.333%, transparent 66.667%);
  mask-size: 300% 100%;
  mask-position: 100% 0;
  mask-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to right, #000 33.333%, transparent 66.667%);
  -webkit-mask-size: 300% 100%;
  -webkit-mask-position: 100% 0;
  -webkit-mask-repeat: no-repeat;
}
.hero-flow-artwork {
  width: 100%;
  height: 100%;
  object-fit: fill;
  mask-image: linear-gradient(#000 58%, transparent 100%);
  -webkit-mask-image: linear-gradient(#000 58%, transparent 100%);
}
.hero-flow[data-ready] .hero-flow-surface {
  animation: hero-artwork-reveal 2.8s linear both;
}
@keyframes hero-artwork-reveal {
  /* Preserve the original first second, then give the last 22% a longer settle. */
  from {
    mask-position: 100% 0;
    -webkit-mask-position: 100% 0;
    animation-timing-function: cubic-bezier(.5546755, 0, .5324793, .6198432);
  }
  35.714286% {
    mask-position: 22.443869% 0;
    -webkit-mask-position: 22.443869% 0;
    animation-timing-function: cubic-bezier(.1148763, .5810095, .509351, 1);
  }
  to { mask-position: 0% 0; -webkit-mask-position: 0% 0; }
}
.hero-flow[data-paused="true"] .hero-flow-surface,
body:has(dialog[open]) .hero-flow-surface { animation-play-state: paused; }
.hero-flow[data-complete] .hero-flow-surface { animation: none; mask-image: none; -webkit-mask-image: none; }
.service-world:has(.hero-flow[data-failed]) { --service-reveal-base: linear-gradient(transparent, transparent); }
.hero { height: 660px; max-width: 1440px; margin-inline: auto; position: relative; z-index: 1; padding: 296px 120px 0; }
.services { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(32px, 3.333333vw, 48px); font-weight: 700; line-height: 1.5; letter-spacing: .1em; }
.hero h1 mark, .hero-phrase { white-space: nowrap; }
.hero-line { display: block; overflow: clip; }
.hero-line-text { display: block; }
.hero-company { margin-top: 32px; display: flex; align-items: center; gap: 24px; font-size: 20px; font-weight: 700; line-height: 30px; letter-spacing: .02em; }
.hero-company span + span { border-left: 1px solid #fff; padding-left: 24px; font-family: var(--font-en); font-weight: 600; letter-spacing: .05em; }
.scroll-cue { position: absolute; width: 132px; height: 150px; right: 132px; top: 353px; }
.scroll-cue-orbit { position: absolute; top: 0; left: 0; width: 132px; height: 142px; transform-origin: 66px 66px; transition: transform .75s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.scroll-cue-words { position: absolute; width: 111px; height: 33px; top: 0; left: 10px; }
.scroll-cue-service { position: absolute; width: 75px; height: 20px; top: 122px; left: 28px; }
.scroll-cue-ring { position: absolute; width: 132px; height: 76px; left: 0; top: 34px; }
.scroll-cue-arrow { position: absolute; width: 51px; height: 51px; left: 40px; top: 42px; }
.scroll-cue:focus-visible .scroll-cue-orbit { transform: rotate(180deg); }
.scroll-cue:focus-visible .scroll-cue-arrow { animation: scroll-cue-bounce .65s cubic-bezier(.3, .65, .35, 1); }
@media (hover: hover) and (pointer: fine) {
  .scroll-cue:hover .scroll-cue-orbit { transform: rotate(180deg); }
  .scroll-cue:hover .scroll-cue-arrow { animation: scroll-cue-bounce .65s cubic-bezier(.3, .65, .35, 1); }
}
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(8px); }
  75% { transform: translateY(-1px); }
}
.featured-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.service-card { display: block; position: relative; width: 100%; min-width: 0; overflow: hidden; isolation: isolate; border-radius: 8px; }
.service-card-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.65,.2,1); }
.service-card::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.service-card:hover .service-card-image { transform: scale(1.035); }
.service-card--featured { aspect-ratio: 432 / 600; min-height: 480px; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; }
.service-card--featured::after { background: linear-gradient(180deg, #0003 0%, #0003 45%, #0006 68%, #000e 100%); }
.service-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.service-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-en); font-size: 20px; line-height: 28px; letter-spacing: .16em; font-weight: 500; }
.service-label .icon { width: 24px; height: 24px; }
.netyou-logo { width: 110px; height: 33px; object-fit: contain; }
.service-card--featured h2 { font-size: clamp(28px, 2.77778vw, 40px); line-height: 1.2; letter-spacing: .02em; font-weight: 700; }
.service-brand, .service-title { display: block; }
.service-brand { font-weight: 700; letter-spacing: .02em; }
.service-title { white-space: nowrap; }
.service-card--featured .service-card-content > p { margin-top: 16px; font-size: 14px; line-height: 1.8; }
.card-more { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 20px; font-family: var(--font-en); font-size: 18px; font-weight: 600; line-height: 32px; }
.card-more .icon { width: 32px; height: 32px; transition: transform .2s; }
.service-card:hover .card-more .icon { transform: translateX(4px); }
.services-intro { text-align: center; padding: 32px 12px 40px; border-bottom: 1px solid #ffffff80; margin-bottom: 40px; font-size: 16px; line-height: 32px; font-weight: 700; letter-spacing: .1em; }
.business-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
.service-card--business { aspect-ratio: 664 / 400; min-height: 360px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.service-card--business::after { background: linear-gradient(180deg, #003b4920 0%, #00627e12 28%, #00607899 62%, #00607ddd 100%); }
.service-card--movie::after, .service-card--starlink::after { background: linear-gradient(180deg, #00152330 0%, #00506c40 40%, #004b6ee8 100%); }
.service-card--business h2 { font-size: 32px; line-height: 1; letter-spacing: .1em; font-weight: 700; }
.service-card--business p { margin-top: 8px; font-size: 16px; font-weight: 700; letter-spacing: .1em; line-height: 32px; }
.service-card--business .card-more { margin-top: 12px; }

/* News and three company entry points. */
.section-eyebrow { font-family: var(--font-en); font-size: 20px; font-weight: 600; line-height: 30px; letter-spacing: .05em; color: var(--blue); }
.section-title h2 { margin-top: 12px; font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: .1em; }
.news-section { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 96px; padding-top: 120px; }
.news-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #dedede; }
.news-item { border-bottom: 1px solid #dedede; }
.news-item > a { display: grid; grid-template-columns: auto auto minmax(0, 1fr) 40px; gap: 24px; align-items: center; padding: 24px 32px; min-height: 88px; transition: background .2s; }
.news-item > a:hover { background: #f3faff; }
.news-item time { font-family: var(--font-en); font-size: 16px; line-height: 26px; font-weight: 500; color: #858585; letter-spacing: .05em; white-space: nowrap; }
.news-category { display: inline-block; padding: 4px 12px; border-radius: 30px; font-size: 14px; font-weight: 700; line-height: 18px; color: var(--blue); background: #f1f3f6; white-space: nowrap; font-feature-settings: "palt"; }
.news-text { font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: .04em; font-feature-settings: "palt"; }
.news-item .icon { width: 40px; height: 40px; }
.news-empty { padding: 32px; border-block: 1px solid #ddd; }
.company-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 100px; }
.company-card { position: relative; width: 100%; min-width: 0; aspect-ratio: 432 / 320; display: flex; align-items: flex-end; justify-content: space-between; padding: 24px; border-radius: 8px; overflow: hidden; color: #fff; isolation: isolate; }
.company-card-image { position: absolute; z-index: -1; width: 100%; height: 100%; inset: 0; object-fit: cover; transition: transform .65s; }
.company-card:hover .company-card-image { transform: scale(1.04); }
.company-card-label { font-size: 32px; font-weight: 700; line-height: 48px; white-space: nowrap; }
.company-card > .icon { width: 48px; height: 48px; }

/* Native SVG keeps the traced loop/photo at their design size and extends its tails. */
.recruit-contact { margin-top: 56px; overflow: hidden; }
.recruit-section { position: relative; height: 768px; max-width: 1440px; margin-inline: auto; }
.recruit-art { --recruit-bleed: max(0px, calc((100vw - 1440px) / 2)); position: absolute; top: 0; left: 0; width: 823px; height: 1099px; }
.recruit-ribbon-layer { position: absolute; z-index: 2; left: calc(-1 * var(--recruit-bleed)); width: calc(823px + var(--recruit-bleed)); height: 1099px; overflow: hidden; }
.recruit-ribbon { position: absolute; z-index: 2; left: 0; width: 100%; height: 1099px; max-width: none; }
.recruit-people { position: absolute; top: 153px; left: 192px; width: 432px; height: 452px; border-radius: 50%; }
.recruit-content { position: relative; z-index: 3; padding-top: 184px; width: 560px; margin-left: 760px; }
.recruit-content > p { margin-top: 48px; font-size: 18px; font-weight: 700; line-height: 36px; letter-spacing: .04em; font-feature-settings: "palt"; }
.recruit-content > .pill { margin-top: 64px; }
.contact-section { position: relative; z-index: 4; isolation: isolate; clip-path: inset(0); height: 849px; margin-top: -237px; padding: 348px 40px 80px; text-align: center; color: #fff; mask: url('../images/contact-mask.png') center top / 100% 100% no-repeat; -webkit-mask: url('../images/contact-mask.png') center top / 100% 100% no-repeat; }
.contact-section::before { content: ''; position: absolute; z-index: -2; inset: 0; background: linear-gradient(105deg,#0696ce 5%,#139ed1 85%); }
.contact-section::after { content: ''; display: none; position: absolute; z-index: -1; inset: 0; background: url('../images/contact-background.png') center top / 100% 100% no-repeat; mix-blend-mode: soft-light; pointer-events: none; }
.contact-section .hero-flow { z-index: -1; height: var(--contact-artwork-height, 849px); mix-blend-mode: soft-light; }
.contact-section .hero-flow-artwork { object-fit: fill; object-position: center top; mask-image: linear-gradient(#000 calc(100% - var(--contact-flow-fade, 160px)), transparent 100%); -webkit-mask-image: linear-gradient(#000 calc(100% - var(--contact-flow-fade, 160px)), transparent 100%); }
.contact-section:has(.hero-flow[data-failed])::after { display: block; }
.contact-section .section-eyebrow { color: #fff; }
.contact-description { margin-top: 48px; font-size: 18px; font-weight: 700; line-height: 36px; letter-spacing: .04em; font-feature-settings: "palt"; }
.contact-actions { margin-top: 64px; display: flex; justify-content: center; gap: 16px; }
.contact-phone { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 16px; }
.contact-phone > a { display: flex; align-items: center; gap: 6px; }
.contact-phone strong { font-family: var(--font-en); font-weight: 600; font-size: 32px; line-height: 48px; letter-spacing: .04em; }
.contact-phone > span { font-family: var(--font-notes); font-weight: 500; font-size: 15px; white-space: nowrap; }

.site-footer { position: relative; z-index: 5; padding: 80px max(40px, calc((100% - 1280px) / 2)); background: var(--footer); color: #fff; }
.footer-main { display: grid; grid-template-columns: minmax(370px,1fr) auto 240px; gap: 40px; padding-bottom: 64px; }
.footer-logo { display: block; width: 200px; }
.footer-logo img { width: 200px; height: 45px; }
.footer-company address { margin-top: 32px; font-style: normal; font-size: 16px; font-weight: 500; line-height: 1.6; }
.footer-nav { display: flex; gap: 48px; padding-top: 4px; }
.footer-nav ul { margin: 0; padding: 0; list-style: none; }
.footer-nav li + li { margin-top: 24px; }
.footer-nav a { font-size: 16px; line-height: 1.2; font-weight: 700; letter-spacing: .1em; white-space: nowrap; transition: color .2s; }
.footer-actions { display: flex; flex-direction: column; gap: 12px; }
.footer-actions .pill { gap: 10px; padding-left: 24px; min-width: 0; width: 240px; min-height: 56px; padding-block: 10px; font-size: 16px; }
.footer-bottom { border-top: 1px solid #ffffff60; padding-top: 64px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.privacy-link { font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.footer-end { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.back-to-top { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-en); font-size: 16px; font-weight: 600; }
.back-to-top .icon { width: 24px; height: 24px; transition: transform .2s; }
.back-to-top:hover .icon { transform: translateY(-4px); }
.footer-end small { font-family: var(--font-en); font-size: 10px; font-weight: 400; }

/* JS opts in individual content, leaving layout and fixed-background ancestors intact. */
.reveal-pending { opacity: 0; transform: translate3d(0, 26px, 0); }
[data-reveal="pop"].reveal-pending { transform: translate3d(0, 32px, 0) scale(.96); }
[data-reveal="photo"].reveal-pending { transform: scale(.96); }
[data-reveal="headline"].reveal-pending { transform: translate3d(0, 38px, 0); }
[data-reveal="heading"].reveal-pending { transform: translate3d(0, 22px, 0); }
.is-revealing {
  animation: content-rise .85s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms) both;
  will-change: opacity, transform;
}
[data-reveal="pop"].is-revealing {
  transform-origin: 50% 60%;
  animation-name: content-pop;
  animation-duration: .78s;
}
[data-reveal="photo"].is-revealing { animation-name: content-photo; animation-duration: 1s; }
[data-reveal="headline"].is-revealing { animation-name: content-headline; animation-duration: 1.05s; }
[data-reveal="heading"].is-revealing { animation-name: content-heading; animation-duration: .9s; }
@keyframes content-headline {
  from { opacity: 0; transform: translate3d(0, 38px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes content-heading {
  from { opacity: 0; transform: translate3d(0, 22px, 0); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
@keyframes content-rise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes content-pop {
  0% { opacity: 0; transform: translate3d(0, 32px, 0) scale(.96); }
  65% { opacity: 1; transform: translate3d(0, -4px, 0) scale(1.008); animation-timing-function: ease-in-out; }
  82% { opacity: 1; transform: translate3d(0, 1px, 0) scale(.998); animation-timing-function: ease-out; }
  100% { opacity: 1; transform: none; }
}
@keyframes content-photo {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}

/* Soft reveal for the photographic archive and contact backgrounds. */
.sv-hero--archive[data-ribbon] .sv-hero-image,
.sv-contact[data-ribbon]::after {
  mask-image: linear-gradient(to right, #000 33.333%, transparent 66.667%);
  mask-size: 300% 100%;
  mask-position: 100% 0;
  mask-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to right, #000 33.333%, transparent 66.667%);
  -webkit-mask-size: 300% 100%;
  -webkit-mask-position: 100% 0;
  -webkit-mask-repeat: no-repeat;
}
.sv-hero--archive[data-ribbon="revealing"] .sv-hero-image,
.sv-contact[data-ribbon="revealing"]::after {
  animation: ribbon-unfold 2.2s cubic-bezier(.2, .6, .3, 1) both;
}
@keyframes ribbon-unfold {
  from { mask-position: 100% 0; -webkit-mask-position: 100% 0; }
  to { mask-position: 0% 0; -webkit-mask-position: 0% 0; }
}
.sv-hero--archive[data-ribbon="complete"] .sv-hero-image,
.sv-contact[data-ribbon="complete"]::after { mask-image: none; -webkit-mask-image: none; }
.sv-hero--archive[data-ribbon-paused="true"] .sv-hero-image,
.sv-contact[data-ribbon-paused="true"]::after,
.sv-hero--archive[data-ribbon-visible="false"] .sv-hero-image,
.sv-contact[data-ribbon-visible="false"]::after,
body:has(dialog[open]) [data-ribbon]::before,
body:has(dialog[open]) [data-ribbon]::after,
body:has(dialog[open]) [data-ribbon] > img { animation-play-state: paused; }


/* Dialogs use native focus management, Escape, and backdrop dismissal. */
dialog { color: var(--ink); border: 0; }
dialog::backdrop { background: #071925a8; backdrop-filter: blur(5px); }
.dialog-close { display: grid; place-items: center; border: 1px solid #ddd; background: #fff; color: var(--ink); width: 44px; height: 44px; border-radius: 50%; font-size: 28px; font-weight: 400; line-height: 1; }
.download-dialog { max-width: 580px; width: calc(100% - 40px); border-radius: 16px; padding: 64px 48px 48px; text-align: center; }
.download-dialog .dialog-close { position: absolute; top: 16px; right: 16px; }
.download-dialog h2 { font-size: 32px; margin-top: 12px; }
.download-dialog > p:not(.section-eyebrow) { margin: 24px 0 32px; line-height: 2; font-size: 15px; }
.download-phone { display: block; color: #007eb7; font-family: var(--font-en); font-size: 28px; font-weight: 600; margin: 24px 0 4px; }
.download-dialog > small { font-size: 12px; }
.mobile-menu { width: 100%; max-width: 520px; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; background: #058fc9; color: #fff; padding: 24px; }
.mobile-menu-heading { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-en); font-size: 20px; letter-spacing: .12em; }
.mobile-menu .nav-list { display: block; margin-top: 24px; }
.mobile-menu .nav-list a { display: block; padding: 17px 6px; border-bottom: 1px solid #ffffff55; font-weight: 700; }
.mobile-menu-actions { display: grid; gap: 12px; margin-top: 28px; }
.mobile-menu-actions .pill { min-width: 0; }
.mobile-menu-phone { display: block; font-family: var(--font-en); font-size: 26px; font-weight: 600; margin-top: 24px; text-align: center; }
.mobile-menu-hours { margin-top: 4px; text-align: center; font-size: 11px; }

.site-header--inner { position: relative; max-width: none; background: #058fc9; }
.inner-main { padding-block: 96px 120px; min-height: 60vh; }
.inner-main > h1, .inner-main article > h1 { font-size: clamp(26px, 3vw, 40px); line-height: 1.6; margin: 24px 0 48px; }
.article-container { max-width: 960px; width: calc(100% - 80px); margin-inline: auto; }
.article-date { display: block; color: #858585; margin-top: 24px; }
.article-content { font-size: 17px; line-height: 2; overflow-wrap: anywhere; }
.article-content p { margin-block: 1em; }
.article-content a { color: #0078af; text-decoration: underline; }
.article-content :is(img, iframe) { max-width: 100%; }
.news-list--archive { margin-block: 48px; }
.text-link { display: inline-block; margin-top: 48px; color: #0078af; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.pagination { margin-block: 32px; }
.page-numbers { padding: 8px 14px; }
.page-numbers.current { color: #fff; background: #0078af; border-radius: 6px; }

@media (min-width: 1600px) {
  .hero { max-width: 1520px; }
  .site-header { max-width: 1600px; }
}
/* Keep the service preview in the first viewport on short desktop screens. */
@media (min-width: 1121px) and (max-height: 740px) {
  .hero {
    --hero-shortfall: clamp(0px, calc(740px - 100svh), 300px);
    height: calc(660px - var(--hero-shortfall));
    padding-top: calc(296px - var(--hero-shortfall) * .6);
  }
  .hero .scroll-cue { top: calc(353px - var(--hero-shortfall) * .6); }
}
@media (max-width: 1300px) {
  .site-header { gap: 16px; padding-inline: 32px; }
  .primary-nav { margin-left: 8px; }
  .primary-nav .nav-list { gap: 14px; }
  .header-actions { gap: 8px; }
  .header-actions .pill { padding-inline: 12px; }
  .header-phone strong { font-size: 21px; }
  .header-phone small { font-size: 8px; }
  .hero { padding-inline: 8.3333%; }
  .hero-company { font-size: 17px; }
  .scroll-cue { right: 7%; }
  .service-card--featured { padding: 24px; min-height: 440px; }
  .service-card--business h2 { font-size: 28px; }
  .service-card--business p { font-size: 13px; line-height: 28px; }
  .news-section { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; }
  .news-item > a { padding-inline: 16px; gap: 16px; }
  .company-card-label { font-size: 27px; }
  .recruit-art { left: -50px; }
  .recruit-content { margin-left: 53%; width: 40%; }
  .footer-main { grid-template-columns: minmax(320px,1fr) auto 216px; gap: 28px; }
  .footer-nav { gap: 28px; }
  .footer-actions .pill { width: 216px; padding-left: 24px; font-size: 14px; gap: 12px; }
}
@media (max-width: 1120px) {
  .primary-nav { display: none; }
  .menu-toggle { display: block; }
  .header-actions { margin-left: auto; gap: 16px; }
  .hero { height: 560px; padding-top: 248px; }
  .hero h1 { font-size: 34px; letter-spacing: .07em; }
  .scroll-cue { top: 384px; right: 9%; width: 100px; height: 112px; transform: scale(.76); transform-origin: top right; }
  .featured-services { gap: 20px; }
  .service-card--featured { min-height: 415px; padding: 20px; }
  .service-label { font-size: 14px; gap: 6px; letter-spacing: .1em; }
  .service-label .icon { width: 18px; height: 18px; }
  .netyou-logo { width: 84px; height: 26px; }
  .service-card--featured h2 { font-size: 25px; }
  .card-more { font-size: 14px; }
  .services-intro { font-size: 13px; line-height: 28px; }
  .business-services { gap: 24px; }
  .service-card--business { min-height: 330px; padding: 20px; }
  .service-card--business h2 { font-size: 24px; }
  .service-card--business p { font-size: 12px; line-height: 26px; }
  .service-world { padding-bottom: 112px; }
  .content-container { width: calc(100% - 96px); }
  .section-title h2 { font-size: 42px; }
  .news-section { grid-template-columns: 180px 1fr; gap: 32px; padding-top: 80px; }
  .news-item > a { grid-template-columns: auto 1fr 32px; gap: 12px; }
  .news-item time { font-size: 14px; }
  .news-category { justify-self: start; font-size: 12px; }
  .news-text { grid-column: 1 / 3; font-size: 14px; }
  .news-item .icon { grid-column: 3; grid-row: 1 / 3; width: 32px; height: 32px; }
  .company-links { margin-top: 80px; gap: 24px; }
  .company-card { min-height: 220px; padding: 18px; }
  .company-card-label { font-size: 23px; }
  .company-card > .icon { width: 36px; height: 36px; }
  .recruit-art { transform: scale(.78); transform-origin: top left; left: -32px; }
  .recruit-content { padding-top: 120px; margin-left: 53%; width: 42%; }
  .recruit-content > p { margin-top: 32px; font-size: 14px; line-height: 30px; letter-spacing: .06em; }
  .recruit-content > .pill { margin-top: 40px; }
  .recruit-section { height: 640px; }
  .contact-section { height: 750px; padding-top: 310px; }
  .contact-description { margin-top: 32px; font-size: 14px; }
  .contact-actions { margin-top: 48px; }
  .footer-main { grid-template-columns: 1fr auto; gap: 40px; }
  .footer-nav { grid-column: 2; grid-row: 1; }
  .footer-actions { flex-direction: row; grid-column: 1 / -1; }
  .footer-actions .pill { width: 240px; }
  .site-footer { padding-block: 56px; }
}
@media (max-width: 767px) {
  html { scroll-padding-top: 20px; }
  .wide-container, .content-container { width: calc(100% - 40px); }
  .site-header { min-height: 80px; padding: 16px 20px; gap: 12px; }
  .header-logo { flex-basis: 110px; }
  .header-logo img { width: 110px; height: 25px; }
  .header-phone, .header-download { display: none !important; }
  .header-actions .pill { min-height: 42px; font-size: 11px; padding: 10px 14px; }
  .menu-toggle { width: 42px; height: 42px; padding: 10px 9px; }
  .hero { height: auto; min-height: 436px; padding: 168px 24px 112px; }
  .hero h1 { font-size: clamp(24px, 4.9vw, 36px); line-height: 1.85; letter-spacing: .075em; overflow-wrap: anywhere; }
  .hero-company { align-items: flex-start; flex-direction: column; gap: 4px; margin-top: 24px; font-size: 12px; line-height: 22px; }
  .hero-company span + span { padding-left: 0; border: 0; font-size: 10px; }
  .scroll-cue { top: auto; bottom: 20px; right: 26px; transform: scale(.56); height: 132px; width: 132px; transform-origin: right bottom; }
  .service-world { padding-bottom: 72px; }
  .service-backdrop { background-size: 100% 100%, auto 100%; background-position: 46% top; mask-size: auto 100%; mask-position: 46% top; -webkit-mask-size: auto 100%; -webkit-mask-position: 46% top; }
  .hero-flow-artwork { object-fit: cover; object-position: 46% top; }
  .featured-services { grid-template-columns: 1fr; gap: 20px; }
  .service-card--featured { min-height: 0; aspect-ratio: 432 / 500; padding: 24px; }
  .service-card--featured h2 { font-size: clamp(27px, 7.2vw, 38px); }
  .service-card--featured .service-card-image { object-position: center 43%; }
  .service-label { font-size: 16px; letter-spacing: .14em; }
  .service-label .icon { width: 20px; height: 20px; }
  .netyou-logo { width: 100px; height: 30px; }
  .card-more { font-size: 14px; margin-top: 16px; }
  .services-intro { padding: 28px 2px; margin-bottom: 28px; font-size: 12px; text-align: left; line-height: 2.2; letter-spacing: .04em; }
  .services-intro br { display: none; }
  .business-services { grid-template-columns: 1fr; gap: 20px; }
  .service-card--business { aspect-ratio: auto; min-height: 340px; padding: 22px; }
  .service-card--business h2 { font-size: clamp(20px, 5.4vw, 28px); line-height: 1.5; letter-spacing: .07em; }
  .service-card--business p { margin-top: 10px; font-size: 12px; line-height: 2; letter-spacing: .04em; }
  .service-card--business .card-more { margin-top: 16px; }
  .service-card--business::after { background: linear-gradient(180deg,#00293420 5%,#00577170 38%,#004d6be8 100%); }
  .section-eyebrow { font-size: 15px; line-height: 24px; }
  .section-title h2 { margin-top: 8px; font-size: 34px; line-height: 1.5; letter-spacing: .12em; }
  .news-section { display: block; padding-top: 64px; }
  .news-content { margin-top: 28px; }
  .news-item > a { padding: 20px 4px; gap: 10px 12px; }
  .news-item time { font-size: 13px; }
  .news-text { font-size: 14px; line-height: 26px; }
  .news-category { font-size: 11px; line-height: 16px; padding: 3px 10px; }
  .pill { min-width: 248px; min-height: 56px; padding-left: 28px; font-size: 16px; }
  .pill--outline { min-width: 196px; min-height: 56px; padding-left: 28px; font-size: 15px; }
  .pill--outline .icon { width: 32px; height: 32px; }
  .company-links { grid-template-columns: 1fr; gap: 20px; margin-top: 64px; }
  .company-card { aspect-ratio: 432 / 280; min-height: 0; padding: 24px; }
  .company-card-label { font-size: 26px; line-height: 40px; }
  .company-card > .icon { width: 40px; height: 40px; }
  .company-card-image { object-position: center; }
  .recruit-contact { margin-top: 40px; }
  .recruit-section { height: auto; padding: 408px 24px 135px; }
  .recruit-art { --recruit-bleed: max(0px, calc((50vw - 226px) / .56)); left: calc(50% - 226px); top: 0; height: 740px; clip-path: inset(0 -100vw); transform: scale(.56); }
  .recruit-ribbon { mask-image: linear-gradient(#000 680px, transparent 740px); -webkit-mask-image: linear-gradient(#000 680px, transparent 740px); }
  .recruit-content { width: 100%; margin: 0; padding: 0; }
  .recruit-content > p { margin-top: 24px; font-size: 14px; line-height: 2.2; }
  .recruit-content > .pill { margin-top: 28px; }
  .contact-section { height: auto; min-height: 580px; margin-top: -80px; padding: 126px 24px 72px; }
  .contact-section {
    mask-image: url('../images/contact-mask.png'), linear-gradient(#000,#000);
    -webkit-mask-image: url('../images/contact-mask.png'), linear-gradient(#000,#000);
    mask-size: 100% 240px, 100% calc(100% - 239px);
    -webkit-mask-size: 100% 240px, 100% calc(100% - 239px);
    mask-position: center top, center bottom;
    -webkit-mask-position: center top, center bottom;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
  }
  .contact-section::after { background-size: auto 100%; }
  .contact-section .hero-flow-artwork { object-fit: cover; }
  .contact-description { margin-top: 24px; font-size: 12px; line-height: 2.2; text-align: left; }
  .contact-actions { flex-direction: column; align-items: center; gap: 14px; margin-top: 32px; }
  .contact-actions .pill { width: min(100%, 320px); min-width: 0; }
  .contact-phone { flex-direction: column; gap: 2px; margin-top: 24px; }
  .contact-phone strong { font-size: 28px; line-height: 42px; }
  .contact-phone .icon { width: 28px; height: 28px; }
  .contact-phone > span { font-size: 11px; }
  .site-footer { padding: 48px 24px 32px; }
  .footer-main { display: flex; flex-direction: column; gap: 32px; padding-bottom: 36px; }
  .footer-logo, .footer-logo img { width: 160px; height: 36px; }
  .footer-company address { margin-top: 24px; font-size: 11px; line-height: 24px; }
  .footer-nav { justify-content: space-between; gap: 16px; padding-top: 0; }
  .footer-nav a { font-size: 12px; letter-spacing: .05em; }
  .footer-nav li + li { margin-top: 16px; }
  .footer-actions { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .footer-actions .pill { width: 100%; font-size: 15px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; padding-top: 32px; gap: 28px; }
  .privacy-link { font-size: 11px; }
  .footer-end { width: 100%; gap: 24px; }
  .back-to-top { font-size: 16px; }
  .footer-end small { align-self: flex-start; font-size: 8px; line-height: 1.8; }
  .download-dialog { padding: 64px 24px 36px; }
  .download-dialog h2 { font-size: 27px; }
  .download-dialog .pill { min-width: 0; width: 100%; }
  .download-dialog > p:not(.section-eyebrow) { font-size: 14px; }
  .desktop-break { display: none; }
  .inner-main { padding-block: 48px 72px; }
  .article-container { width: calc(100% - 40px); }
  .article-content { font-size: 15px; }
}
@media (min-width: 768px) and (max-width: 950px) {
  .service-card--featured { padding: 16px; }
  .service-card-top { flex-direction: column; }
  .netyou-logo { align-self: flex-end; }
  .service-card--featured h2 { font-size: 20px; }
  .service-title { white-space: normal; }
  .service-card--business { min-height: 380px; }
  .service-card--business h2 { font-size: 22px; }
  .service-card--business p { line-height: 24px; }
  .company-card { padding: 16px; }
  .company-card-label { font-size: 20px; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .featured-services { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
  .service-card--featured { padding: 16px; min-height: 350px; aspect-ratio: auto; }
  .service-card--featured h2 { font-size: 21px; }
  .service-title { white-space: normal; }
  .service-card-top { flex-direction: column; }
  .netyou-logo { width: 72px; height: 24px; align-self: flex-end; }
  .service-label { font-size: 12px; }
  .company-links { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
  .company-card { min-height: 200px; padding: 14px; align-items: flex-start; flex-direction: column; justify-content: flex-end; gap: 10px; }
  .company-card-label { font-size: 19px; white-space: normal; }
  .company-card .icon { align-self: flex-end; }
}
@media (max-width: 359px) {
  .site-header { gap: 8px; padding-inline: 16px; }
  .header-logo, .header-logo img { width: 94px; flex-basis: 94px; }
  .header-actions .pill { padding-inline: 10px; font-size: 10px; }
  .hero { padding-inline: 20px; }
  .hero h1 { font-size: 22px; }
  .service-card--featured { padding: 20px; }
  .service-card--featured h2 { font-size: 25px; }
  .service-card--business { min-height: 372px; padding: 20px; }
  .recruit-section { padding-top: 368px; }
  .recruit-art { left: calc(50% - 205px); transform: scale(.5); }
  .footer-company address { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .page-intro { display: none; }
  .reveal-pending, .is-revealing { opacity: 1; transform: none; }
  [data-reveal].reveal-pending { transform: none; }
  .scroll-cue:is(:hover, :focus-visible) .scroll-cue-orbit { transform: none; }
  .hero-flow { display: none; }
  .service-world { --service-reveal-base: linear-gradient(transparent, transparent); }
  .contact-section::after { display: block; }
  .recruit-art[data-ribbon] .recruit-ribbon-layer, .sv-ribbon[data-ribbon]::before,
  .sv-hero--archive[data-ribbon] .sv-hero-image, .sv-contact[data-ribbon]::after { mask-image: none; -webkit-mask-image: none; }
  .recruit-art[data-ribbon], .sv-ribbon[data-ribbon]::before { translate: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.footer-actions .pill > span { white-space: nowrap; }

/* Continuous SVG paint: one image, with additive reveal lanes at crossings. */
.ribbon-drawing { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ribbon-piece:not([data-draw]) .ribbon-ink { mask: none; }
.ribbon-pen { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.ribbon-piece[data-draw="pending"] .ribbon-pen { stroke-dashoffset: 1; opacity: 0; }
.recruit-art[data-ribbon], .sv-ribbon--vector > .ribbon-drawing { translate: 0 var(--ribbon-drift, 0px); }
.recruit-ribbon.ribbon-drawing { z-index: 2; height: 1099px; }
@media (max-width: 767px) {
  .sv-ribbon--vector .ribbon-layout { transform: scale(var(--mobile-ribbon-scale, .3)); }
}
@media (prefers-reduced-motion: reduce) {
  .ribbon-piece .ribbon-ink { mask: none !important; }
  .recruit-art[data-ribbon], .sv-ribbon--vector > .ribbon-drawing { translate: none; }
}

/* Both FV strokes reveal the same image through a soft, cumulative mask.
   Keep the final mask in place: completion must not change any rendered pixel. */
.hero-flow--vector .hero-flow-surface { mask-image: none; -webkit-mask-image: none; animation: none; }
.hero-wave-drawing { display: block; overflow: visible; }
.hero-wave-pen { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.hero-flow--vector[data-ready] .hero-wave-pen--upper { animation: hero-wave-draw-upper 2.65s cubic-bezier(.2,.55,.24,1) both; }
.hero-flow--vector[data-ready] .hero-wave-pen--lower { animation: hero-wave-draw-lower 2.85s .12s cubic-bezier(.2,.55,.24,1) both; }
@keyframes hero-wave-draw-upper { from { stroke-dashoffset: 1; } to { stroke-dashoffset: .3; } }
@keyframes hero-wave-draw-lower { from { stroke-dashoffset: 1; } to { stroke-dashoffset: .3; } }
.hero-flow--vector[data-paused="true"] .hero-wave-pen,
body:has(dialog[open]) .hero-wave-pen { animation-play-state: paused; }
@media (max-width: 767px) {
  .hero-wave-drawing { width: max(100%, 1343px); max-width: none; margin-left: calc((100vw - max(100vw, 1343px)) * .46); }
}

/* WordPress-generated captions and accessible control descriptions. */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (min-width: 1200px) {
 .section-eyebrow { line-height: 20px; }
 .section-title h2 { margin-top: 24px; }
 .recruit-section { height: 706px; }
 .recruit-art { top: -64px; }
 .recruit-content { padding-top: 120px; }
 .recruit-contact .contact-section { margin-top: -237px; padding-top: 349px; padding-bottom: 120px; }
 .recruit-contact .contact-description { margin-top: 64px; }
 .recruit-contact .contact-phone { margin-top: 24px; }
 .recruit-contact .contact-phone strong { line-height: 32px; }
}

@media (min-width: 1200px) {
 .service-card--featured { padding: 30px; }
 .service-card--featured::after { background: linear-gradient(180deg,#0003 0%,#0000 24%,#0000 50%,#000000e0 100%),linear-gradient(#0000003d,#0000003d); }
 .service-card--business { padding-top: 30px; padding-bottom: 30px; }
 .service-card--business p { margin-top: 16px; }
 .service-card--business::after { background: linear-gradient(180deg,rgba(0,96,140,.16),rgba(0,96,140,0) 24%,rgba(0,96,140,.8) 80%); }
}

/* Figma's source photographs and crop; custom CMS photographs keep the standard cover behavior. */
.company-card--figma::before { content: ''; position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg,#00000029 0%,transparent 23.25%,transparent 53.69%,#000c 100%); pointer-events: none; }
.company-card--figma .company-card-label, .company-card--figma > .icon { position: relative; z-index: 1; }
.company-card--company .company-card-image { max-width: none; width: 119.906%; height: 121.405%; left: -19.993%; top: -15.827%; object-fit: fill; }