/* ==========================================================================
   RIKEN MEDIA DESIGNS — shared stylesheet (every page loads this)
   Page-specific styles live next to each page:
     assets/css/home.css, services/services.css, contact/contact.css,
     portal/login/login.css, portal/dashboard/dashboard.css
   ========================================================================== */


:root{
  --ink:#0B0F0C;
  --ink-2:#10160F;
  --paper:#F4F3EC;
  --white:#FFFFFF;
  --green:#1B7A40;
  --green-deep:#0E4A24;
  --green-bright:#22A855;
  --green-soft:#DCEADE;
  --line-on-dark:rgba(244,243,236,0.14);
  --line-on-light:rgba(11,15,12,0.12);
  --muted-on-dark:#A9B3A6;
  --muted-on-light:#4B5A4C;
  --max:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Space Grotesk',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
section{position:relative;overflow:hidden;}
.on-dark{background:var(--ink);color:var(--paper);}
.on-paper{background:var(--paper);color:var(--ink);}
.on-green{background:var(--green);color:var(--ink);}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:700;line-height:1.02;margin:0;letter-spacing:-0.01em;}
p{line-height:1.6;margin:0;}
.lede{font-size:1.15rem;max-width:46ch;}
.on-dark .lede{color:var(--muted-on-dark);}
.on-paper .lede{color:var(--muted-on-light);}


/* ---------- shape primitives ---------- */
.qc{position:absolute;border-radius:0 0 100% 0;}
.qc.tr{border-radius:0 0 0 100%;}
.qc.br{border-radius:100% 0 0 0;}
.qc.bl{border-radius:0 100% 0 0;}
.ring{position:absolute;border-radius:50%;border-style:solid;background:transparent;}
.dot-grid{position:absolute;background-image:radial-gradient(currentColor 2.4px, transparent 2.4px);background-size:22px 22px;color:var(--green);opacity:0.55;}
.checker{position:absolute;background-image:
    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor),
    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
  background-size:28px 28px;background-position:0 0, 14px 14px;color:var(--green);opacity:0.9;}
.stripes{position:absolute;background-image:repeating-linear-gradient(-45deg, currentColor 0 10px, transparent 10px 24px);color:var(--green);}
.tri{position:absolute;width:0;height:0;}
.arrow-rule{display:flex;align-items:center;gap:0;}
.arrow-rule .bar{flex:1;height:2px;background:currentColor;}
.arrow-rule .diamond{width:9px;height:9px;background:currentColor;transform:rotate(45deg);flex-shrink:0;}

/* ---------- nav (shared across every page) ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(11,15,12,0.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line-on-dark);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;max-width:var(--max);margin:0 auto;gap:20px;}
.logo{display:flex;flex-direction:column;line-height:0.92;}
.logo .r1{font-family:'Fraunces',serif;font-weight:700;font-size:1.35rem;letter-spacing:0.01em;}
.logo .r2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:0.62rem;letter-spacing:0.22em;color:var(--green-bright);margin-top:3px;}
nav.links{display:flex;gap:30px;align-items:center;}
nav.links a{font-size:0.95rem;color:var(--muted-on-dark);transition:color .15s ease;}
nav.links a:hover, nav.links a.active{color:var(--paper);}
.nav-actions{display:flex;align-items:center;gap:12px;}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 26px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:0.95rem;
  border:2px solid transparent;cursor:pointer;transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn-sm{padding:10px 18px;font-size:0.85rem;}
.btn-primary{background:var(--green-bright);color:var(--ink);}
.btn-primary:hover{background:var(--paper);color:var(--ink);transform:translateY(-2px);}
.btn-outline-dark{border-color:var(--paper);color:var(--paper);}
.btn-outline-dark:hover{background:var(--paper);color:var(--ink);}
.btn-outline-ink{border-color:var(--ink);color:var(--ink);}
.btn-outline-ink:hover{background:var(--ink);color:var(--paper);}
.btn-login{border-color:var(--line-on-dark);color:var(--muted-on-dark);position:relative;}
.btn-login:hover{border-color:var(--green-bright);color:var(--paper);}
.btn-login .soon{font-size:0.62rem;letter-spacing:0.08em;background:var(--green-deep);color:var(--green-bright);padding:2px 6px;margin-left:2px;}
.burger{display:none;background:none;border:none;color:var(--paper);cursor:pointer;padding:6px;}
.mobile-panel{display:none;flex-direction:column;gap:18px;padding:22px 28px 28px;border-top:1px solid var(--line-on-dark);background:var(--ink);}
.mobile-panel.open{display:flex;}
@media (max-width:860px){
  nav.links{display:none;}
  .nav-actions{display:none;}
  .burger{display:block;}
}

/* ---------- labels + section heads ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:0.8rem;font-weight:600;letter-spacing:0.16em;color:var(--green-bright);margin-bottom:22px;}
.eyebrow .dot{width:7px;height:7px;background:var(--green-bright);border-radius:50%;}
.section-head{max-width:60ch;margin-bottom:56px;}
.section-head h2{font-size:clamp(2rem,4vw,2.9rem);}

/* ---------- page hero (services / contact / dashboard) ---------- */
.page-hero{padding:80px 0 64px;}
.page-hero .eyebrow{margin-bottom:20px;}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);max-width:16ch;color:var(--white);}
.page-hero .lede{margin-top:20px;}

/* ---------- forms (contact + login) ---------- */
.form-row{display:flex;flex-direction:column;gap:8px;}
.form-row label{font-size:0.85rem;color:var(--muted-on-dark);}
.form-row input, .form-row select, .form-row textarea{
  background:var(--ink-2);border:1px solid var(--line-on-dark);color:var(--paper);
  padding:13px 14px;font-family:'Space Grotesk',sans-serif;font-size:0.95rem;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{outline:2px solid var(--green-bright);outline-offset:1px;border-color:var(--green-bright);}
.form-row textarea{resize:vertical;min-height:120px;}
.form-note{font-size:0.82rem;color:var(--muted-on-dark);}
.form-status{font-size:0.88rem;color:var(--green-bright);min-height:1.2em;}

.form-status.error{color:#E2725B;}

/* ---------- final cta ---------- */
.final-cta{padding:120px 0;text-align:left;}
.final-cta .ring{width:300px;height:300px;border-width:22px;border-color:var(--ink);opacity:0.15;top:-120px;left:-80px;}
.final-cta h2{font-size:clamp(2.4rem,6vw,4rem);color:var(--ink);max-width:15ch;}
.final-cta .lede{color:var(--ink);opacity:0.8;margin-top:18px;}
.final-cta .cta-row{margin-top:36px;align-items:center;}
.final-cta .price-note{font-size:0.9rem;opacity:0.75;margin-top:14px;}
.final-cta .wa-number{margin-top:26px;font-weight:600;font-size:1.05rem;display:flex;align-items:center;gap:10px;}

/* ---------- footer ---------- */
footer{padding:70px 0 34px;border-top:1px solid var(--line-on-dark);}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;}
.footer-brand .logo{margin-bottom:14px;}
.footer-brand p{font-size:0.92rem;color:var(--muted-on-dark);max-width:32ch;}
.footer-col h4{font-size:0.78rem;letter-spacing:0.12em;color:var(--green-bright);font-weight:600;margin-bottom:16px;}
.footer-col a, .footer-col span{display:block;font-size:0.9rem;color:var(--muted-on-dark);margin-bottom:10px;}
.footer-col a:hover{color:var(--paper);}
.footer-bottom{margin-top:60px;padding-top:26px;border-top:1px solid var(--line-on-dark);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:0.82rem;color:var(--muted-on-dark);}
@media (max-width:760px){ .footer-top{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .footer-top{grid-template-columns:1fr;} }

/* ---------- shared utility ---------- */
.cta-row{display:flex;gap:16px;flex-wrap:wrap;}
.hero-fade{opacity:0;transform:translateY(16px);animation:riseIn .7s ease forwards;}
.hero-fade.d1{animation-delay:.05s;}
.hero-fade.d2{animation-delay:.16s;}
.hero-fade.d3{animation-delay:.27s;}
.hero-fade.d4{animation-delay:.38s;}
@keyframes riseIn{to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){
  .hero-fade{animation:none;opacity:1;transform:none;}
  html{scroll-behavior:auto;}
}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--green-bright);outline-offset:3px;
}