/* ============================================
   ROTHWELL DIGITAL — SHARED STYLESHEET
   Light / bright blue theme — Aug 2026
   Edit colours here once, applies to all pages.
   ============================================ */

:root{
  /* Backgrounds */
  --bg:#FFFFFF;
  --bg-tint:#F4F8FF;        /* soft blue-white panel */
  --bg-deep:#EAF1FF;        /* stronger blue tint band */
  --ink-panel:#0B1B3A;      /* rare dark panel for contrast moments */

  /* Blues */
  --blue:#1B5CFF;           /* primary action blue */
  --blue-deep:#0B3BC4;      /* hover / depth */
  --blue-soft:#7FA7FF;      /* light decorative */

  /* Text */
  --text:#0A1731;           /* near-navy body text */
  --text-mid:#3A4A66;
  --muted:#6B7B99;
  --line:rgba(11,27,58,0.10);
  --line-strong:rgba(11,27,58,0.18);

  /* Type */
  --mono:'Geist Mono',ui-monospace,monospace;
  --body:'Geist',-apple-system,BlinkMacSystemFont,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ---------- utility ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--blue);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:18px;height:1px;background:var(--blue);display:inline-block;}
em{font-style:italic;color:var(--blue);font-family:var(--serif);}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  *{animation:none !important;}
}

/* ---------- nav ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
nav{max-width:1180px;margin:0 auto;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;}
.logo{font-family:var(--mono);font-weight:600;font-size:14px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text);}
.logo span{color:var(--blue);}
.nav-links{display:flex;gap:34px;list-style:none;}
.nav-links a{
  font-family:var(--mono);font-size:13px;letter-spacing:0.04em;
  color:var(--muted);text-transform:uppercase;transition:color .2s ease;
}
.nav-links a:hover,.nav-links a.active{color:var(--text);}
.nav-cta{
  font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:0.04em;
  background:var(--blue);color:#fff;padding:11px 20px;border-radius:4px;font-weight:600;
  transition:background .2s ease;
}
.nav-cta:hover{background:var(--blue-deep);}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue);outline-offset:3px;
}

/* ---------- mobile nav toggle ---------- */
.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;
  width:38px;height:38px;align-items:center;justify-content:center;flex:none;
}
.nav-toggle span{
  display:block;width:22px;height:2px;background:var(--text);position:relative;
  transition:background .2s ease;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:'';position:absolute;left:0;width:22px;height:2px;background:var(--text);
  transition:transform .25s ease,top .25s ease;
}
.nav-toggle span::before{top:-7px;}
.nav-toggle span::after{top:7px;}
.nav-toggle.open span{background:transparent;}
.nav-toggle.open span::before{top:0;transform:rotate(45deg);}
.nav-toggle.open span::after{top:0;transform:rotate(-45deg);}

/* ---------- buttons ---------- */
.btn-primary{
  font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:0.04em;
  background:var(--blue);color:#fff;padding:15px 26px;font-weight:600;border-radius:4px;
  display:inline-block;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  border:none;cursor:pointer;
}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-2px);box-shadow:0 10px 26px rgba(27,92,255,0.22);}
.btn-ghost{
  font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:0.04em;
  border:1px solid var(--line-strong);color:var(--text);padding:15px 26px;border-radius:4px;
  display:inline-block;transition:border-color .2s ease,color .2s ease;
}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);}

/* ---------- sticky mobile CTA (injected by motion.js, mobile only) ---------- */
#sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -12px rgba(11,27,58,0.22);
}
#sticky-cta a{display:block;text-align:center;width:100%;}
@media (max-width:640px){
  #sticky-cta.show{display:block;}
}

/* ---------- page head (inner pages) ---------- */
.page-head{padding:160px 0 72px;border-bottom:1px solid var(--line);background:var(--bg-tint);}
.page-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,5.2vw,60px);line-height:1.1;max-width:800px;margin:20px 0 22px;}
.page-head p{color:var(--text-mid);font-size:17px;max-width:560px;}

/* ---------- section shared ---------- */
section.block{padding:104px 0;}
.section-head{max-width:640px;margin-bottom:60px;}
.section-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,46px);line-height:1.15;margin-top:16px;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:60px 0 36px;background:var(--bg-tint);}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px;}
.footer-brand .logo{margin-bottom:14px;display:inline-block;}
.footer-brand p{color:var(--muted);font-size:14px;max-width:280px;}
.footer-col h5{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;}
.footer-col a{display:block;font-size:14px;color:var(--text-mid);margin-bottom:11px;}
.footer-col a:hover{color:var(--blue);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  padding-top:28px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12px;color:var(--muted);
}

@media (max-width:860px){
  .logo{flex:1;}
  .nav-toggle{display:flex;}
  .nav-links{
    display:flex;flex-direction:column;
    position:absolute;top:100%;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 16px 28px -16px rgba(11,27,58,0.2);
    padding:6px 32px 18px;gap:0;
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;
    transition:max-height .3s ease,opacity .25s ease;
  }
  .nav-links.open{max-height:320px;opacity:1;pointer-events:auto;}
  .nav-links a{display:block;padding:14px 0;border-bottom:1px solid var(--line);}
  .footer-top{grid-template-columns:1fr 1fr;}
}

/* ============================================
   MOTION LAYER — Aug 2026
   All motion is disabled under prefers-reduced-motion
   (see the guard at the bottom of this file).
   ============================================ */

/* --- scroll progress bar --- */
#scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0%;
  background:linear-gradient(90deg,var(--blue),var(--blue-soft));
  z-index:200;transition:width .1s linear;
}

/* --- logo mark --- */
.logo{display:flex;align-items:center;gap:10px;}
.logo-mark{width:26px;height:26px;flex:none;overflow:visible;}
.logo-mark path,.logo-mark circle{
  stroke-dasharray:60;stroke-dashoffset:0;
}
.logo:hover .logo-mark{animation:mark-draw .9s ease forwards;}
@keyframes mark-draw{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(0deg);}
}
.logo-mark .node{transition:transform .4s cubic-bezier(.34,1.4,.5,1);transform-origin:46px 50px;}
.logo:hover .logo-mark .node{transform:scale(1.35);}

/* --- headline word reveal --- */
.rise{display:inline-block;overflow:hidden;vertical-align:bottom;}
.rise > span{
  display:inline-block;transform:translateY(110%);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.rise.in > span{transform:translateY(0);}

/* --- staggered fade for generic blocks --- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
.reveal.visible{opacity:1;transform:translateY(0);}

/* --- magnetic buttons --- */
.btn-primary,.btn-ghost,.nav-cta{will-change:transform;}

/* --- card lift + sheen --- */
.service-card,.why-card,.cap-card{position:relative;overflow:hidden;}
.service-card::after,.cap-card::after{
  content:'';position:absolute;top:0;left:-70%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(27,92,255,0.07),transparent);
  transform:skewX(-18deg);transition:left .65s ease;pointer-events:none;
}
.service-card:hover::after,.cap-card:hover::after{left:130%;}
.why-card{transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .3s ease;}
.why-card:hover{transform:translateY(-4px);border-color:var(--blue-soft);box-shadow:0 16px 36px -20px rgba(11,27,58,0.3);}

/* --- process row hover --- */
.process-item{transition:background .3s ease;position:relative;}
.process-item::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--blue);
  transform:scaleY(0);transform-origin:top;transition:transform .4s ease;
}
.process-item:hover::before{transform:scaleY(1);}
.process-item:hover{background:var(--bg-tint);}
.process-num{transition:transform .4s cubic-bezier(.34,1.4,.5,1);display:inline-block;}
.process-item:hover .process-num{transform:translateX(6px);}

/* --- marquee ticker --- */
.ticker{
  overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-tint);padding:16px 0;
}
.ticker-track{display:flex;width:max-content;animation:ticker-scroll 34s linear infinite;}
.ticker:hover .ticker-track{animation-play-state:paused;}
.ticker-track span{
  font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:0.14em;
  color:var(--muted);padding:0 26px;white-space:nowrap;display:flex;align-items:center;gap:26px;
}
.ticker-track span::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--blue-soft);}
@keyframes ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* --- counters --- */
.count-up{font-variant-numeric:tabular-nums;}

/* --- reduced motion guard --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1 !important;transform:none !important;}
  .rise > span{transform:none !important;}
}