/*
  Shared base for the Randcore redesign prototype.

  Extracted verbatim from the pattern the home, work and Core Platform pages
  established, so nothing shifts visually. New pages link this and inline only
  what is specific to them. The three earlier pages still carry their own copy
  of this block; folding them onto this file is a separate, low-risk chore.

  Silver ground, navy ink, teal rationed to fills, rules and icons. Teal never
  carries text: #21c9d0 on white is 2.03:1, so --teal-strong (7.58:1) does that
  job. Radius and the tinted-shadow scale come from the duck.design teardown in
  docs/duck-mobile-reference.md.

  Author: Ethan Lowery | Randcore Development Pty Ltd
*/
:root{
  --ground:#f5f5f5;--ground-rgb:245,245,245;--surface:#fff;--wash:#efefef;
  --band:#021e32;--band-deep:#01121e;
  --ink:#021e32;--body:#566976;
  --teal:#21c9d0;--teal-strong:#035c70;
  --line:#e4e4e4;--line-strong:#d4d4d4;--chip:#eaeaea;--sh-tint:38,38,38;
  --r-card:15px;--r-panel:20px;--r-block:40px;--r-pill:100px;
  --sh-card:0 20px 47px rgba(var(--sh-tint),.09);
  --sh-soft:0 8px 22px rgba(var(--sh-tint),.07);
  --sh-lift:0 6px 16px rgba(var(--sh-tint),.10);
  --sh-float:0 10px 15px rgba(33,201,208,.22);
  --gut:20px;--max:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:'Geist',system-ui,sans-serif;
     font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.12;text-wrap:balance}
p{margin:0}ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{max-width:100%}
:focus-visible{outline:2.5px solid var(--teal-strong);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.t-hero{font-size:clamp(32px,7vw,54px)}
.t-sec{font-size:clamp(25px,4.4vw,38px)}
.lead{font-size:clamp(16px,2.2vw,18px);line-height:1.6;color:var(--body);max-width:56ch}
.kicker{font-family:'Geist Mono',monospace;font-size:13px;font-weight:500;letter-spacing:.1em;
        text-transform:uppercase;color:var(--teal-strong)}
.num{font-variant-numeric:tabular-nums}

/* Motion: one effect, a 18px rise, staggered. The duck.design restraint.
   Content is never gated on JS having run, so .no-js and reduced motion both
   land on plain visible markup. */
@keyframes rise{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
.r{opacity:0}.r.in{animation:rise .58s cubic-bezier(.22,.61,.36,1) both}
.r.in.d1{animation-delay:.08s}.r.in.d2{animation-delay:.16s}.r.in.d3{animation-delay:.24s}
.no-js .r{opacity:1}

/* The hero is above the fold by definition, so it must never wait for JS.
   Gating it on the IntersectionObserver held the LCP element at opacity:0 for
   the whole of parse plus an observer frame plus the stagger delay, and Chrome
   will not score a transparent element, so the largest paint could not be
   recorded until roughly 660ms after the script ran. These start on load. The
   observer still adds .in later, which is harmless: it is the same animation. */
.hero .r{animation:rise .58s cubic-bezier(.22,.61,.36,1) both}
.hero .r.d1{animation-delay:.08s}
.hero .r.d2{animation-delay:.16s}
.hero .r.d3{animation-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .r,.r.in{opacity:1!important;animation:none!important;transform:none!important}
  *{transition:none!important;scroll-behavior:auto!important}
}

/* header */
.hdr{position:sticky;top:0;z-index:70;--hdr-fg:var(--ink);--hdr-bg:rgba(var(--ground-rgb),.9);
     background:var(--hdr-bg);color:var(--hdr-fg);backdrop-filter:blur(14px);
     transition:background-color .28s ease,color .28s ease}
.hdr--dark{--hdr-fg:#fff;--hdr-bg:rgba(2,30,50,.72)}
.hdr__in{display:flex;align-items:center;gap:20px;height:76px;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.hdr__in>a:first-child{display:flex;align-items:center;min-height:48px}
.hdr__logo{height:34px;width:auto;display:block}
.hdr__nav{display:none;gap:2px;margin-left:6px}
.hdr__nav a{display:flex;align-items:center;font-size:15px;font-weight:500;padding:12px;border-radius:10px;
            min-height:44px;color:var(--hdr-fg)}
.hdr__nav a:hover{background:var(--wash);color:var(--teal-strong)}
.hdr--dark .hdr__nav a:hover{background:rgba(255,255,255,.14);color:#fff}
.hdr__sp{flex:1}
.hdr__in>.hdr__cta{display:none}
.hdr--dark .hdr__in>.hdr__cta{background:#fff;color:var(--ink)}
.burger{width:48px;height:48px;border-radius:50%;background:var(--surface);box-shadow:var(--sh-float);
        display:grid;place-items:center;transition:transform .22s}
.hdr--dark .burger{background:rgba(255,255,255,.16);box-shadow:none}
.burger i{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:background .2s}
.burger i::before,.burger i::after{content:'';position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s}
.burger i::before{top:-6px}.burger i::after{top:6px}
.hdr--dark .burger i,.hdr--dark .burger i::before,.hdr--dark .burger i::after{background:#fff}
body.nav-open .burger i{background:transparent}
body.nav-open .burger i::before{transform:translateY(6px) rotate(45deg)}
body.nav-open .burger i::after{transform:translateY(-6px) rotate(-45deg)}
.menu{position:fixed;inset:76px 0 0;z-index:60;background:var(--ground);padding:16px var(--gut) 48px;
      transform:translateX(100%);transition:transform .3s;visibility:hidden;overflow-y:auto}
body.nav-open .menu{transform:none;visibility:visible}
body.nav-open{overflow:hidden}
.menu a.m{display:flex;align-items:center;width:100%;min-height:60px;padding:17px 0;
      border-bottom:1px solid var(--line);font-size:17px;font-weight:700;letter-spacing:.02em}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
     border-radius:var(--r-pill);padding:14px 24px;font-size:14px;font-weight:700;letter-spacing:1.12px;
     text-transform:uppercase;white-space:nowrap;border:1.6px solid transparent;
     transition:background .2s,color .2s,border-color .2s,transform .18s}
.btn:active{transform:scale(.985)}
/* A long label pushed the button past the viewport, because .btn is nowrap and
   nothing capped its width. "Ask us what a move looks like" measured 346px in a
   360px window and cost /core-platform/ 28px of horizontal scroll. Every caller
   with a long label hits this, so the guard belongs on .btn rather than on the
   one button that was reported. The element selectors take this to (0,1,1) so it
   still wins where index, work and core-platform each redefine .btn at (0,1,0)
   in their own inlined style block. */
a.btn,button.btn{max-width:100%}
@media (max-width:520px){ a.btn,button.btn{white-space:normal;text-wrap:balance} }
.btn--ink{background:var(--ink);color:#fff}.btn--ink:hover{background:#062f4c}
.btn--out{border-color:var(--ink);color:var(--ink)}.btn--out:hover{background:var(--ink);color:#fff}
.btn--teal{background:var(--teal);color:var(--ink)}.btn--teal:hover{background:#3fd8de}
.btn--light{background:#fff;color:var(--ink)}
.btn--ghost{border-color:rgba(255,255,255,.34);color:#fff}.btn--ghost:hover{border-color:#fff}
.btn--full{display:flex;width:100%}
.arw{width:16px;height:16px;flex:none}
.chip{display:inline-flex;align-items:center;font-family:'Geist Mono',monospace;font-size:10.5px;
      letter-spacing:.09em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill);
      background:var(--chip);color:var(--teal-strong)}

section{padding:64px 0}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:32px;max-width:62ch}
.sec-head .kicker{display:flex;align-items:center;gap:10px}
.sec-head .kicker::after{content:'';flex:1;height:1px;background:var(--line-strong);max-width:110px}

.hero{padding:44px 0 48px}
.hero .lead{margin-top:18px}
.hero__cta{display:flex;flex-direction:column;gap:12px;margin-top:30px}

/* Dark block. A rounded object sitting on the ground rather than a full-bleed
   stripe, so the page reads as stacked cards. data-dark marks it for the
   header legibility check in base.js. */
.band{background:var(--band);color:#fff;border-radius:var(--r-block);padding:36px 22px}
.band h2,.band h3{color:#fff}.band .lead{color:#a9c0d0}.band .kicker{color:var(--teal)}
.band .sec-head .kicker::after{background:rgba(255,255,255,.16)}

/* Soft tinted card. Duck's quieter sibling to the dark band, for a section
   that needs separating without another dark stripe. */
.soft{background:var(--wash);border-radius:var(--r-block);padding:32px 22px}

.cta{position:relative;border-radius:var(--r-block);padding:38px 24px;overflow:hidden;
     background:linear-gradient(150deg,#21c9d0,#12b3bd)}
.cta::before{content:'';position:absolute;inset:0;opacity:.45;
  background:radial-gradient(56% 42% at 84% 90%, rgba(255,255,255,.5), transparent 62%),
             radial-gradient(3px 3px at 18px 18px, rgba(255,255,255,.4) 50%, transparent 51%) 0 0/26px 26px}
.cta>*{position:relative}
.cta .kicker{color:#023642}.cta h2{color:var(--ink);margin:12px 0}
.cta p{color:#023b47;font-size:15.5px;line-height:1.6;margin-bottom:26px;max-width:48ch}

.foot{padding:8px}
.foot__c{background:var(--band-deep);border-radius:var(--r-panel);padding:38px 20px 20px;color:#8ea9ba}
.foot__logo{display:block;height:64px;max-width:78%;width:auto;margin:0 auto 30px}
.foot__addr{text-align:center;font-size:14px;line-height:1.7;margin-bottom:22px}
.foot__addr a:hover{color:#fff}
.foot__base{margin-top:8px;padding-top:18px;border-top:1px solid rgba(255,255,255,.10);
            font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.04em;color:#6b8b9d;
            text-align:center;line-height:1.8}

/* Footer accordion. Duck's collapses do not actually animate; this one uses a
   grid-rows transition so it interpolates. */
.acc{border-top:1px solid rgba(255,255,255,.10)}
.acc:last-child{border-bottom:1px solid rgba(255,255,255,.10)}
.acc__h{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
        min-height:56px;padding:16px 0;font-size:16px;font-weight:700;color:#fff;text-align:left}
.acc__i{display:grid;place-items:center;width:26px;height:26px;flex:none;color:var(--teal);
        transition:transform .3s}
.acc__h[aria-expanded="true"] .acc__i{transform:rotate(180deg)}
.acc__p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.acc__p[data-open="true"]{grid-template-rows:1fr}
.acc__p>div{overflow:hidden}
.acc__p li a{display:flex;align-items:center;min-height:40px;font-size:14.5px;color:#8ea9ba}
.acc__p li a:hover{color:#fff}
.acc__p ul{padding-bottom:12px}

/* FAQ. Flat and open by default on wide screens is the Rackzar move; here it
   stays a disclosure so a long list does not push the CTA off the page. */
.faq{border-bottom:1px solid var(--line)}
.faq:first-child{border-top:1px solid var(--line)}
.faq__h{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
        min-height:60px;padding:18px 0;font-size:16.5px;font-weight:700;text-align:left;letter-spacing:-.01em}
.faq__i{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;
        background:var(--chip);color:var(--teal-strong);transition:transform .3s}
.faq__h[aria-expanded="true"] .faq__i{transform:rotate(180deg)}
.faq__p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.faq__p[data-open="true"]{grid-template-rows:1fr}
.faq__p>div{overflow:hidden}
.faq__p p{font-size:15px;color:var(--body);line-height:1.65;padding-bottom:20px;max-width:70ch}

@media (min-width:760px){
  :root{--gut:32px}
  section{padding:88px 0}
  .hero{padding:66px 0 64px}
  .hero__cta{flex-direction:row}
  .band{padding:56px 44px}
  .soft{padding:48px 44px}
  .cta{padding:56px 48px}
  .foot__c{padding:52px 44px 24px}
  .foot__logo{height:84px}
  .hdr__nav{display:flex}
  .hdr__in>.hdr__cta{display:inline-flex}
  .burger{display:none}.menu{display:none}
}
@media (min-width:1080px){
  .cta-grid{display:flex;align-items:center;justify-content:space-between;gap:48px}
  .cta p{margin-bottom:0}
}

/* ---------- desktop, the page runs on the footer's grid ----------
   The 1180 container leaves the page looking narrow beside the full-bleed
   footer card and the card rails. From 1280 up the page uses the footer's
   measurements instead: content starts 52px in (the footer card's 8px inset
   plus its 44px of padding), so the nav logo, the hero headline and the
   footer logo all sit on one left rule. */
@media (min-width:1280px){
  :root{--gut:52px}
  .wrap{max-width:none}
  .hdr__in{max-width:none}
  /* the rounded blocks pull back out to the footer card's 8px inset and make
     the remaining 44px up in their own padding, so their text stays on the
     same rule as everything above them */
  .wrap>.cta,.wrap>.band,.wrap>.soft{margin-left:-44px;margin-right:-44px;
                                     padding-left:44px;padding-right:44px}
  .cta{padding-top:64px;padding-bottom:64px}
}

/* ---- scene illustration in the pre-footer CTA ----
   Shown on phones too. It used to be display:none below 900px, which meant the
   majority of visitors never saw any artwork on the site at all. On one column
   it becomes the last row of the block rather than a floated companion, so it
   sits under the copy and the button instead of beside them. */
.cta__art{display:block;width:100%;max-width:260px;height:auto;margin:24px auto 0;
          filter:drop-shadow(0 10px 22px rgba(2,30,50,.10))}
.cta .cta__c p{margin-bottom:26px}
@media (min-width:900px){
  .cta-grid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px}
  .cta__c{max-width:52ch}
  .cta__art{width:290px;max-width:none;margin:0;flex:none}
}
@media (min-width:1180px){ .cta__art{width:340px} }

/* ---- What we do dropdown, shared nav ---- */
.hdr__nav>div{position:relative}
.hdr__nav button{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:15px;
                 font-weight:500;color:inherit;padding:9px 13px;border-radius:10px;cursor:pointer}
.hdr__nav a,.hdr__nav button{transition:background .18s,color .18s}
.hdr__nav a:hover,.hdr__nav button:hover{background:var(--wash);color:var(--teal-strong)}
.drop{position:absolute;top:calc(100% + 6px);left:0;min-width:290px;background:var(--surface);
      border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:8px;
      display:grid;opacity:0;visibility:hidden;transform:translateY(-6px);
      transition:opacity .18s,transform .18s,visibility .18s;z-index:40}
.hdr__nav>div:hover .drop,.hdr__nav>div:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{font-size:14.5px;font-weight:500;padding:10px 12px;border-radius:9px;white-space:nowrap}
.hdr--dark .drop a{color:var(--ink)}
.m-sub{display:grid;gap:2px;padding:6px 0 10px 14px}
.m-sub a{font-size:15px;color:var(--body);padding:8px 0}

/* ---- footer, duck.design layout: identity row, columns, base bar -------- */
.foot__top{display:grid;gap:22px;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot__soc{display:flex;gap:10px;flex-wrap:wrap}
.foot__soc a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);
             display:grid;place-items:center;color:#cfe0ea;transition:background .18s,color .18s}
.foot__soc a:hover{background:var(--teal);color:var(--band)}
.foot__soc svg{width:20px;height:20px}
.foot__cols{display:none}
.fcol h3{font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
         color:var(--teal);font-weight:500;margin-bottom:16px}
.fcol ul{display:grid;gap:11px}
.fcol a,.fcol span{font-size:14.5px;line-height:1.45;color:#a9c0d0}
.fcol a:hover{color:#fff}
@media (min-width:900px){
  .foot__top{grid-template-columns:1fr auto;align-items:center;gap:40px}
  .foot__logo{margin:0;height:56px;max-width:none}
  .foot__addr{text-align:right;margin-bottom:0}
  .foot__soc{justify-content:flex-end;margin-bottom:14px}
  .foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:36px 0 30px}
  #acc{display:none}
  .foot__base{text-align:left;border-top:1px solid rgba(255,255,255,.12);padding-top:22px}
}

/* On-this-page index. Used by the privacy policy, which is long enough that a
   reader arrives looking for one clause rather than reading it end to end. */
.toc{background:var(--surface);border-radius:var(--r-card);padding:22px 24px;box-shadow:var(--sh-soft);margin-bottom:26px}
.toc .kicker{margin-bottom:12px}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;display:grid;gap:7px}
.toc li{counter-increment:toc;font-size:15px;line-height:1.4}
.toc li::before{content:counter(toc) ".";color:var(--muted);font-variant-numeric:tabular-nums;margin-right:8px}
.toc a{color:var(--teal-strong);text-decoration:none;border-bottom:1px solid transparent}
.toc a:hover{border-bottom-color:currentColor}
@media (min-width:760px){.toc ol{grid-template-columns:1fr 1fr;gap:9px 32px}}

/* Skip link. There was none, so a keyboard user walked the whole header and the
   services dropdown before reaching the page. Visible only on focus, and it
   lands on a tabindex="-1" wrapper so focus really moves rather than just
   scrolling. */
.skip{position:absolute;left:8px;top:-60px;z-index:200;padding:12px 18px;border-radius:var(--r-pill);
      background:var(--band);color:#fff;font-size:14px;font-weight:600;transition:top .18s}
.skip:focus{top:8px}
#main:focus{outline:none}