/* yy Solutions — design system.
   Monochrome, industrial, instrument-like. A single scrolling company page
   over a fixed atmospheric field. Atmosphere is generated here; no third-party
   assets. */

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; }
img{ display:block; max-width:100%; }
button{ font:inherit; }
a{ color:inherit; }

:root{
  --ink:   rgba(255,255,255,.96);
  --muted: rgba(255,255,255,.54);
  --faint: rgba(255,255,255,.32);
  --dim:   rgba(255,255,255,.16);
  --line:  rgba(255,255,255,.10);
  --bg:    #050505;
  --gut:   clamp(22px, 5vw, 96px);   /* page side gutter */
  --sans:  "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
}

html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ============ fixed atmosphere ============ */
.yy-bg,.yy-grid,.yy-grain,.yy-flow,.yy-frame{
  position:fixed; inset:0; pointer-events:none;
}
.yy-bg{ z-index:-5; background:var(--bg); }
.yy-bg::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 78% -5%, rgba(255,255,255,.05), transparent 55%),
    radial-gradient(90% 60% at 15% 110%, rgba(150,168,188,.05), transparent 60%),
    linear-gradient(#080808,#030303);
}
.yy-bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(150% 100% at 50% 40%, transparent 42%, rgba(0,0,0,.7));
}
.yy-grid{
  z-index:-4; opacity:.45;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:clamp(64px,8vw,108px) clamp(64px,8vw,108px);
  -webkit-mask-image:radial-gradient(130% 120% at 50% 30%, #000 20%, transparent 92%);
          mask-image:radial-gradient(130% 120% at 50% 30%, #000 20%, transparent 92%);
}
.yy-flow{
  z-index:-3;
  -webkit-mask-image:radial-gradient(140% 120% at 60% 20%, #000 55%, transparent 100%);
          mask-image:radial-gradient(140% 120% at 60% 20%, #000 55%, transparent 100%);
  opacity:0; animation:yy-in 3.4s .4s forwards ease;
}
.yy-flow canvas{ width:100%; height:100%; display:block; }
.yy-grain{
  z-index:-2; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
/* fixed instrument corner ticks */
.yy-frame{ z-index:1; }
.yy-corner{ position:absolute; width:13px; height:13px; border:1px solid var(--dim); opacity:.7; }
.yy-corner.tl{ top:16px; left:16px; border-right:0; border-bottom:0; }
.yy-corner.tr{ top:16px; right:16px; border-left:0; border-bottom:0; }
.yy-corner.bl{ bottom:16px; left:16px; border-right:0; border-top:0; }
.yy-corner.br{ bottom:16px; right:16px; border-left:0; border-top:0; }

/* ============ top bar ============ */
.yy-top{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gut);
  border-bottom:1px solid transparent;
  background:linear-gradient(rgba(5,5,5,.72), rgba(5,5,5,0));
  transition:background .4s, border-color .4s, backdrop-filter .4s;
}
.yy-top.scrolled{
  background:rgba(6,6,6,.82);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  border-bottom-color:var(--line);
}
.yy-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.yy-brand img{ height:22px; width:auto; }
.yy-brand .wm{
  font-size:10px; letter-spacing:.4em; text-transform:uppercase; font-weight:400;
  color:var(--muted); padding-left:12px; border-left:1px solid var(--dim);
}
.yy-links{ display:flex; align-items:center; gap:clamp(18px,2.6vw,36px); }
.yy-links a{
  text-decoration:none; color:var(--muted); font-weight:400;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; transition:color .3s;
}
.yy-links a:hover{ color:var(--ink); }
.yy-links .yy-linkcta{
  color:var(--ink); border:1px solid rgba(255,255,255,.24);
  padding:9px 18px; transition:background .35s,color .35s,border-color .35s;
}
.yy-links .yy-linkcta:hover{ background:#fff; color:#050505; border-color:#fff; }

/* ============ layout ============ */
.yy-wrap{ max-width:1280px; margin:0 auto; padding:0 var(--gut); }
section{ scroll-margin-top:96px; }

/* reveal on scroll */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.08s; } .rv.d2{ transition-delay:.16s; }
.rv.d3{ transition-delay:.24s; } .rv.d4{ transition-delay:.32s; }

.yy-kicker{
  display:flex; align-items:center; gap:14px;
  font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--faint);
  margin-bottom:26px;
}
.yy-kicker::before{ content:""; width:34px; height:1px; background:var(--dim); }

/* ---- hero ---- */
.yy-hero{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding-top:96px; padding-bottom:80px;
}
.yy-hero .status{
  display:flex; align-items:center; gap:11px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
  margin-bottom:34px;
}
.yy-hero .status .dot{
  width:6px; height:6px; border-radius:50%; background:#fff;
  box-shadow:0 0 9px rgba(255,255,255,.7); animation:yy-pulse 2.6s infinite ease-in-out;
}
.yy-hero h1{
  margin:0; font-weight:300; letter-spacing:-.03em; line-height:1.02;
  font-size:clamp(2.9rem, 8vw, 7rem); max-width:16ch;
}
.yy-hero h1 em{ font-style:normal; color:var(--faint); }
.yy-lead{
  margin:clamp(26px,3.4vw,40px) 0 0; max-width:52ch;
  color:var(--muted); font-weight:300; font-size:clamp(15px,1.5vw,19px); line-height:1.6;
}
.yy-cta{
  margin-top:clamp(34px,4vw,52px); align-self:flex-start;
  display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink);
  border:1px solid rgba(255,255,255,.26); padding:16px 34px;
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  transition:background .4s,color .4s,border-color .4s;
}
.yy-cta .arw{ transition:transform .4s; }
.yy-cta:hover{ background:#fff; color:#050505; border-color:#fff; }
.yy-cta:hover .arw{ transform:translateX(5px); }

/* ---- generic section ---- */
.yy-section{ padding:clamp(80px,12vh,150px) 0; border-top:1px solid var(--line); }
.yy-section-h{
  font-weight:300; letter-spacing:-.02em; line-height:1.08;
  font-size:clamp(1.8rem,3.6vw,3rem); max-width:20ch; margin:0 0 clamp(40px,6vw,72px);
}
.yy-section-h em{ font-style:normal; color:var(--faint); }

/* ---- capabilities grid ---- */
.yy-caps{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.yy-cap{ background:var(--bg); padding:clamp(26px,3vw,44px); }
.yy-cap .no{ font-size:11px; letter-spacing:.14em; color:var(--faint); }
.yy-cap h3{ margin:18px 0 12px; font-weight:400; font-size:clamp(1.2rem,2vw,1.6rem); letter-spacing:-.01em; }
.yy-cap p{ margin:0; color:var(--muted); font-weight:300; font-size:14px; line-height:1.6; max-width:34ch; }

/* ---- approach steps ---- */
.yy-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,4vw,60px); }
.yy-step .no{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); padding-bottom:18px; border-bottom:1px solid var(--dim); display:block; }
.yy-step h3{ margin:22px 0 12px; font-weight:300; font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.02em; }
.yy-step p{ margin:0; color:var(--muted); font-weight:300; font-size:14px; line-height:1.6; }

/* ---- why / value row ---- */
.yy-vals{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px); }
.yy-val h3{ margin:0 0 10px; font-weight:400; font-size:15px; letter-spacing:.01em; }
.yy-val p{ margin:0; color:var(--muted); font-weight:300; font-size:14px; line-height:1.6; }

/* ---- contact ---- */
.yy-contact-h{ font-weight:300; letter-spacing:-.03em; font-size:clamp(2.2rem,5vw,3.6rem); margin:0 0 14px; }
.yy-contact p.lead{ color:var(--muted); font-weight:300; font-size:clamp(15px,1.5vw,18px); max-width:46ch; margin:0 0 34px; }
.yy-form{ display:flex; gap:10px; width:min(520px,100%); }
.yy-form input{
  flex:1; min-width:0; background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--ink);
  padding:17px 20px; font-family:inherit; font-size:14px; letter-spacing:.02em; outline:none;
  transition:border-color .3s, background .3s;
}
.yy-form input::placeholder{ color:var(--faint); }
.yy-form input:focus{ border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.07); }
.yy-form button{
  background:#fff; color:#050505; border:none; padding:17px 32px; cursor:pointer;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; transition:opacity .3s;
}
.yy-form button:hover{ opacity:.86; }
.yy-form button:disabled{ opacity:.5; cursor:default; }
.yy-note{ margin-top:20px; font-size:11px; letter-spacing:.06em; color:var(--faint); }
.yy-done{ color:var(--muted); font-weight:300; font-size:16px; margin-top:8px; }

/* ---- footer ---- */
.yy-foot{
  border-top:1px solid var(--line); padding:36px 0 44px;
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint);
}
.yy-foot .brand{ display:flex; align-items:center; gap:10px; }
.yy-foot img{ height:15px; width:auto; opacity:.8; }

/* ---- 404 ---- */
.yy-404{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
.yy-404 h1{ font-size:clamp(3rem,10vw,7rem); font-weight:300; margin:0 0 12px; letter-spacing:-.03em; }
.yy-404 p{ color:var(--muted); font-weight:300; }
.yy-404 a{ color:var(--ink); border-bottom:1px solid var(--dim); text-decoration:none; }

@keyframes yy-in{ from{opacity:0} to{opacity:1} }
@keyframes yy-pulse{ 0%,100%{opacity:1} 50%{opacity:.15} }

/* ============ responsive ============ */
@media (max-width:760px){
  .yy-brand .wm{ letter-spacing:.3em; padding-left:10px; }  /* keep "SOLUTIONS" visible */
  .yy-links{ gap:14px; }
  .yy-links a.nav-only{ display:none; }   /* collapse section links, keep CTA */
  .yy-links .yy-linkcta{ padding:9px 15px; font-size:10px; letter-spacing:.14em; }
  .yy-hero .status{ flex-wrap:wrap; font-size:9px; letter-spacing:.16em; }
  .yy-caps{ grid-template-columns:1fr; }
  .yy-steps{ grid-template-columns:1fr; gap:36px; }
  .yy-vals{ grid-template-columns:1fr; gap:28px; }
  .yy-form{ flex-direction:column; }
  .yy-form input, .yy-form button{ width:100%; }
}
/* smallest phones: drop the top-bar button so the "yy Solutions" lockup always fits
   (the hero and contact sections still carry the call to action) */
@media (max-width:430px){
  .yy-links .yy-linkcta{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  .rv{ opacity:1; transform:none; }
}