/* Rytful Media — shared styles (neobrutalism system) */
/* Self-hosted display font — preloaded so hero/headings paint correctly on first load (no FOUT swap). */
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/archivo-black-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/archivo-black-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
:root{
  --bg:#efece1;--ink:#15151b;--card:#fffdf5;--line:#15151b;--muted:#6b6960;--shadow:#15151b;
  --band:#15151b;--band-tx:#f3f1e7;--band-mut:#bdbbb0;--grid:rgba(21,21,27,.06);
  --lime:#c6f432;--purple:#7c5cfc;--pink:#c6f432;--cyan:#c6f432;
}
[data-theme="dark"]{
  --bg:#111118;--ink:#f3f1e7;--card:#1e1e28;--line:#f3f1e7;--muted:#9a988e;--shadow:#000000;
  --band:#08080c;--band-tx:#f3f1e7;--band-mut:#9a988e;--grid:rgba(255,255,255,.05);
}
body{background:var(--bg);font-family:'Space Grotesk',sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
*{transition:background-color .4s ease,border-color .4s ease}
::selection{background:var(--lime);color:#15151b}
/* Early cover on in-site navigations: hides the pre-boot (headerless) paint until the
   shutter takes over. Added by the head script when arriving via a page transition. */
html.ryt-cover::before{content:"";position:fixed;inset:0;background:var(--band);z-index:8999;pointer-events:none}
@media (pointer:fine){html.ryt-cursor a,html.ryt-cursor button,html.ryt-cursor input,html.ryt-cursor textarea,html.ryt-cursor select,html.ryt-cursor [data-magnetic],html.ryt-cursor [data-drag],html.ryt-cursor [data-filter],html.ryt-cursor [data-svc],html.ryt-cursor body{cursor:none}}
[data-lucide]{display:inline-flex}

/* form controls (contact) */
input,textarea,select{font-family:'Space Mono',monospace;font-size:15px;color:var(--ink);background:var(--bg);border:3px solid var(--line);padding:13px 14px;width:100%;outline:none}
input:focus,textarea:focus,select:focus{box-shadow:4px 4px 0 var(--lime)}
input::placeholder,textarea::placeholder{color:var(--muted)}

/* keyframes */
@keyframes kuro-blink{0%,90%,100%{background-position-x:0%}93%,96%{background-position-x:11.1111%}}
@keyframes kuro-talk{0%,49%{background-position-x:0%}50%,100%{background-position-x:22.2222%}}
@keyframes kuro-run{0%,49%{background-position-x:33.3333%}50%,100%{background-position-x:44.4444%}}
@keyframes kuro-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes wiggle{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes wig{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes bob-arrow{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes glitch1{0%,38%,100%{clip-path:inset(0 0 100% 0);transform:translate(0,0)}4%{clip-path:inset(8% 0 64% 0);transform:translate(-5px,1px)}10%{clip-path:inset(46% 0 22% 0);transform:translate(5px,-1px)}16%{clip-path:inset(20% 0 50% 0);transform:translate(-3px,2px)}22%{clip-path:inset(70% 0 8% 0);transform:translate(4px,0)}28%{clip-path:inset(0 0 92% 0);transform:translate(-2px,0)}}
@keyframes glitch2{0%,42%,100%{clip-path:inset(100% 0 0 0);transform:translate(0,0)}6%{clip-path:inset(62% 0 14% 0);transform:translate(5px,-1px)}14%{clip-path:inset(28% 0 44% 0);transform:translate(-5px,1px)}24%{clip-path:inset(78% 0 4% 0);transform:translate(3px,1px)}32%{clip-path:inset(12% 0 70% 0);transform:translate(-3px,-1px)}}
@keyframes steam-rise{0%{transform:translateY(8px);opacity:0}40%{opacity:.7}100%{transform:translateY(-22px);opacity:0}}
@keyframes spark{0%,100%{transform:scale(0);opacity:0}50%{transform:scale(1);opacity:1}}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1.25)}}
@keyframes confetti-fall{0%{transform:translateY(-14px) rotate(0);opacity:0}12%{opacity:1}100%{transform:translateY(70px) rotate(240deg);opacity:0}}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
@keyframes wave-bar{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
@keyframes typedot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
@keyframes flowdot{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@keyframes pulse-ring{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.8);opacity:0}}
@keyframes pop-in{0%{transform:translateY(14px) scale(.96);opacity:0}100%{transform:none;opacity:1}}
@keyframes blinkdot{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes eq{0%{height:18%}100%{height:100%}}
@keyframes plane{0%{transform:translate(0,0) rotate(0);opacity:0}15%{opacity:1}100%{transform:translate(46px,-30px) rotate(12deg);opacity:0}}
.svc-panel{animation:pop-in .45s cubic-bezier(.2,.85,.25,1)}

/* ---- responsive (home) ---- */
@media (max-width:900px){
  [data-grid]{grid-template-columns:repeat(2,1fr) !important}
  [data-quotes]{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width:620px){
  [data-grid]{grid-template-columns:1fr !important}
  [data-quotes]{grid-template-columns:1fr !important}
  .pricing-grid{grid-template-columns:1fr !important}
}
@media (max-width:520px){
  .hero-drag-tag{top:198px !important;right:48px !important}
  .hero-cost-tag{top:316px !important;left:108px !important}
}

/* ---- responsive (work) ---- */
@media (max-width:680px){
  .stats-grid{grid-template-columns:repeat(2,1fr) !important;gap:16px 20px !important}
  .feat-row{flex-direction:column !important}
  .feat-body{order:1 !important;padding:24px !important}
  .feat-media{order:2 !important;border:0 !important;border-top:3px solid var(--line) !important}
  .hero-tag{display:none !important}
  .cta-sprite{display:none !important}
}

/* ---- responsive (services) ---- */
@media (max-width:720px){
  .svc-explorer{grid-template-columns:1fr !important}
  .svc-rail{position:static !important}
  [data-steps]{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width:480px){
  [data-steps]{grid-template-columns:1fr !important}
}

/* ---- responsive (about) ---- */
@media (max-width:820px){[data-values]{grid-template-columns:repeat(2,1fr) !important}}
@media (max-width:480px){[data-values]{grid-template-columns:1fr !important}}

/* ---- responsive (contact) ---- */
@media (max-width:760px){
  .contact-cards{grid-template-columns:1fr !important}
  .contact-cards > div:first-child{order:2 !important}
  .contact-cards > div:nth-child(2){order:1 !important}
}

/* ---- shared nav ---- */
@media (max-width:860px){.nav-links{display:none !important}}
/* smaller logo + mascot in the nav on mobile only */
@media (max-width:600px){
  #nav droco-sprite canvas{width:41px !important;height:28px !important}
  #nav > a:first-child span{font-size:16px !important}
}
/* hero animated vector art — desktop decoration only, never over mobile content */
.hero-art{position:absolute;top:-30px;right:-40px;width:min(46vw,520px);height:min(46vw,520px);z-index:0;pointer-events:none;opacity:.5}
@media (max-width:900px){.hero-art{display:none !important}}