/**
 * Rialto: the .rlt design system.
 *
 * Loaded on the front page (page 54, an Elementor HTML widget) and on
 * /services/ (an ordinary Astra page whose post_content is .rlt markup).
 * Sections 1–5 are the shared system; 6 adapts it to a theme-hosted page and
 * 7 adds the two components /services/ needs that the front page never did.
 *
 * Extracted from the Elementor HTML widget on 2026-08-05.
 *
 * The whole of this file used to live in <style> tags inside that widget,
 * where kses strips it on save: which is how the front page lost every rule
 * on 2026-08-01 and rendered its CSS as literal text under the footer. The
 * widget now holds markup only, and a save can no longer damage the page.
 *
 * Loaded by mu-plugins/rialto-frontend-js.php, cache-busted on filemtime.
 * Deploys to wp-content/uploads/ and is NOT shipped by deploy.sh: it needs
 * its own scp, same as rialto.js.
 */

/* ============================================================
   1. Base: extracted verbatim from the widget's main <style>
   ============================================================ */

  /* ---- Elementor / theme wrapper reset (full-bleed) ---- */
  .elementor-section,.elementor-container,.elementor-row,.elementor-column,.elementor-column-wrap,.elementor-widget-wrap,.elementor-widget,.elementor-widget-html,.elementor-widget-container,.e-con,.e-con-inner,.e-con>.e-con-inner{margin:0 !important;padding:0 !important;max-width:none !important;width:100% !important}
  .elementor-section{width:100% !important}
  .rlt *{box-sizing:border-box}

  /* ---------- Brand tokens (these become the "brand kit") ---------- */
  .rlt{
    --bg:#0a0b0f;
    --bg-2:#0e1016;
    --surface:#14171f;
    --surface-2:#1a1e28;
    --text:#f4f5f7;
    --muted:#99a2b2;
    --line:rgba(255,255,255,.08);
    --accent:#ffb347;
    --accent-2:#ff6a3d;
    --cool:#48d6e6;
    --grad:linear-gradient(118deg,#ffb347 0%,#ff6a3d 100%);
    --grad-soft:linear-gradient(118deg,rgba(255,179,71,.16),rgba(255,106,61,.16));
    --maxw:1140px;
    --ease:cubic-bezier(.22,.61,.36,1);
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    line-height:1.6;
    display:block;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  html{scroll-behavior:smooth;scroll-padding-top:90px}
  body{overflow-x:hidden}
  .rlt h1,.rlt h2,.rlt h3,.rlt h4{font-family:'Sora',sans-serif;line-height:1.1;letter-spacing:-.02em;color:var(--text)}
  .rlt a{color:inherit;text-decoration:none}
  .rlt section{padding:clamp(70px,9vw,130px) 0;position:relative}
  .rlt .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .rlt .accent{color:var(--accent)}
  .rlt .gradtext{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .rlt .eyebrow{
    font-family:'Sora';font-size:.78rem;font-weight:700;letter-spacing:.22em;
    text-transform:uppercase;color:var(--accent);margin-bottom:18px;display:inline-flex;align-items:center;gap:10px
  }
  .rlt .eyebrow::before{content:"";width:28px;height:2px;background:var(--grad);display:inline-block}
  .rlt .section-title{font-size:clamp(1.9rem,4vw,3rem);font-weight:800;margin-bottom:18px}
  .rlt .lead{color:var(--muted);font-size:clamp(1rem,1.4vw,1.15rem);max-width:640px}

  /* ---------- Progress + Nav ---------- */
  .rlt #progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:100;transition:width .1s linear}
  .rlt nav{
    position:fixed;top:0;left:0;right:0;z-index:90;
    display:flex;align-items:center;justify-content:space-between;
    padding:16px clamp(20px,4vw,48px);
    background:rgba(10,11,15,0);
    border-bottom:1px solid transparent;
    transition:background .4s var(--ease),border-color .4s var(--ease),padding .4s var(--ease)
  }
  .rlt nav.scrolled{background:rgba(10,11,15,.78);border-bottom:1px solid var(--line);padding-top:12px;padding-bottom:12px}

  /* The blur lives on a pseudo-element, not on nav itself.
     backdrop-filter makes an element the containing block for its
     position:fixed descendants, so with it on nav the mobile drawer
     (.navlinks, inset:0 0 0 auto) sized itself to the 72px nav bar instead of
     the viewport, and its links spilled out above and below as loose floating
     buttons. Same visual, without capturing the drawer. */
  .rlt nav{isolation:isolate}
  .rlt nav::before{content:"";position:absolute;inset:0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:none;z-index:-1}
  /* Wordmark in flat accent, not the inherited white, so it reads as one
     object with the tile beside it. The .dot below sets its own colour, so the
     R square is unaffected by this. */
  /* The header carried a generic "R" tile beside the word RIALTO. It now
     carries the real mark, the same lion-and-wordmark file the Astra header
     uses on every other page, so the two headers agree.
     The source PNG is a flat black mark on transparency, so it is inverted to
     white here exactly as the child theme does it: brightness(0) flattens any
     stray tone to black first, so invert(1) lands on clean white and the
     original antialiasing survives. */
  /* flex:0 0 auto matters. nav is a flex row and .brand was shrinking to make
     room for the links: at 1366 the logo rendered 121x34 against a natural
     ratio of 3.797, so the wordmark was squeezed about 6% narrower than it
     should be. A logo is not a flexible box. max-width:none defends against
     the global img{max-width:100%} doing the same thing from the other side. */
  .rlt .brand{display:flex;align-items:center;line-height:0;flex:0 0 auto}
  .rlt .brand img{height:34px;width:auto;max-width:none;display:block;filter:brightness(0) invert(1)}
  @media(max-width:880px){.rlt .brand img{height:28px}}
  .rlt .brand .dot{width:30px;height:30px;border-radius:9px;background:var(--grad);display:grid;place-items:center;color:#0a0b0f;font-size:.82rem;font-weight:800}
  .rlt .navlinks{display:flex;gap:30px;align-items:center}
  .rlt .navlinks a{font-size:.9rem;color:var(--muted);font-weight:500;transition:color .25s;position:relative}
  .rlt .navlinks a:hover,.rlt .navlinks a.active{color:var(--text)}
  .rlt .navlinks a.active::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--grad);border-radius:2px}
  .rlt .nav-cta{padding:9px 18px;border-radius:999px;background:var(--grad);color:#0a0b0f !important;font-weight:700;font-size:.85rem}
  /* ---- client account access (login / sign up) ---- */
  .rlt .navlinks .nav-account{display:flex;align-items:center;gap:14px}
  .rlt .navlinks a.nav-login{font-size:.9rem;color:var(--muted);font-weight:600;white-space:nowrap}
  .rlt .navlinks a.nav-login:hover{color:var(--text)}
  .rlt .navlinks a.nav-signup{padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-weight:700;font-size:.85rem;white-space:nowrap;transition:border-color .25s,background .25s,color .25s}
  .rlt .navlinks a.nav-signup:hover{border-color:rgba(255,179,71,.55);background:rgba(255,179,71,.08);color:var(--text)}
  .rlt .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0}
  .rlt .burger span{width:24px;height:2px;background:var(--text);transition:.3s}

  /* ---------- Hero ---------- */
  .rlt #hero{min-height:100vh;display:flex;align-items:center;padding-top:120px;overflow:hidden}
  .rlt .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
  .rlt .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:sr-float 14s var(--ease) infinite alternate}
  .rlt .orb.a{width:520px;height:520px;background:radial-gradient(circle,#ff6a3d,transparent 65%);top:-120px;right:-80px}
  .rlt .orb.b{width:460px;height:460px;background:radial-gradient(circle,#ffb347,transparent 65%);bottom:-140px;left:-100px;animation-delay:-5s}
  .rlt .orb.c{width:340px;height:340px;background:radial-gradient(circle,#48d6e6,transparent 65%);top:40%;left:55%;opacity:.22;animation-delay:-9s}
  @keyframes sr-float{to{transform:translate3d(40px,-30px,0) scale(1.08)}}
  .rlt .grid-overlay{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);opacity:.5}
  .rlt .hero-grain{position:absolute;inset:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none}

  .rlt .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.5fr .9fr;gap:50px;align-items:center;width:100%}
  .rlt .status-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);font-size:.82rem;color:var(--muted);margin-bottom:26px}
  .rlt .status-pill .live{width:8px;height:8px;border-radius:50%;background:#39d98a;box-shadow:0 0 0 0 rgba(57,217,138,.6);animation:sr-pulse 2s infinite}
  @keyframes sr-pulse{70%{box-shadow:0 0 0 9px rgba(57,217,138,0)}100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}}
  .rlt .hero h1{font-size:clamp(2.7rem,7vw,5.4rem);font-weight:800;margin-bottom:10px}
  .rlt .hero .role{font-size:clamp(1.1rem,2.2vw,1.6rem);font-family:'Sora';font-weight:600;color:var(--text);margin-bottom:22px}
  .rlt .hero .role .accent{font-weight:700}
  .rlt .hero p.intro{color:var(--muted);font-size:clamp(1rem,1.5vw,1.18rem);max-width:560px;margin-bottom:34px}
  .rlt .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .rlt .btn{padding:13px 26px;border-radius:999px;font-weight:700;font-family:'Sora';font-size:.95rem;transition:transform .25s var(--ease),box-shadow .25s var(--ease);cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;gap:9px}
  /* Astra underlines every link inside .entry-content on its single
     templates, via .ast-single-post .entry-content a. That selector scores
     (0,2,1) and beats .rlt a at (0,1,1), so until 2026-08-24 there was a line
     drawn through the label of every pill button on the site, the primary buy
     CTA included, which made them read as unstyled links.

     Matched here at the same (0,2,1) and won on source order: this file is
     enqueued after the theme. Deliberately not scoped wider, because the
     "prefer to ask first" address in the start band is a genuine text link and
     should keep its underline. */
  .rlt a.btn{text-decoration:none}

  .rlt .btn-primary{background:var(--grad);color:#0a0b0f;box-shadow:0 10px 30px -10px rgba(255,106,61,.6)}
  .rlt .btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px -12px rgba(255,106,61,.7)}
  .rlt .btn-ghost{border-color:var(--line);color:var(--text);background:rgba(255,255,255,.02)}
  .rlt .btn-ghost:hover{transform:translateY(-3px);border-color:var(--accent)}
  .rlt .meta-row{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;color:var(--muted);font-size:.9rem}
  .rlt .meta-row span{display:inline-flex;align-items:center;gap:8px}
  .rlt .meta-row svg{width:16px;height:16px;stroke:var(--accent)}

  /* headshot card */
  .rlt .portrait{position:relative;justify-self:center}
  .rlt .portrait .frame{width:min(320px,72vw);aspect-ratio:4/5;border-radius:22px;background:linear-gradient(160deg,var(--surface-2),var(--surface));border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;position:relative;box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
  .rlt .portrait .mono{font-family:'Sora';font-weight:800;font-size:5.5rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .rlt .portrait .frame img.shot{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
  .rlt .portrait .badge{position:absolute;padding:11px 15px;border-radius:14px;background:rgba(20,23,31,.9);border:1px solid var(--line);backdrop-filter:blur(8px);font-size:.78rem;display:flex;align-items:center;gap:9px;box-shadow:0 14px 30px -16px rgba(0,0,0,.9)}
  .rlt .portrait .badge b{font-family:'Sora'}
  .rlt .portrait .badge .ic{width:30px;height:30px;border-radius:9px;background:var(--grad-soft);display:grid;place-items:center;color:var(--accent);font-weight:800;font-family:'Sora'}
  .rlt .portrait .b1{top:24px;left:-26px;animation:sr-float 7s var(--ease) infinite alternate}
  .rlt .portrait .b2{bottom:40px;right:-30px;animation:sr-float 8s var(--ease) infinite alternate-reverse}
  .rlt .scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;color:var(--muted);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:9px}
  .rlt .scroll-cue .mouse{width:23px;height:37px;border:2px solid var(--muted);border-radius:14px;position:relative}
  .rlt .scroll-cue .mouse::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:3px;height:7px;border-radius:2px;background:var(--accent);animation:sr-wheel 1.6s infinite}
  @keyframes sr-wheel{0%{opacity:0;top:7px}40%{opacity:1}100%{opacity:0;top:18px}}

  /* ---------- Reveal ---------- */
  .rlt .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .rlt .reveal.in{opacity:1;transform:none}
  .rlt .reveal.d1{transition-delay:.08s}.rlt .reveal.d2{transition-delay:.16s}.rlt .reveal.d3{transition-delay:.24s}.rlt .reveal.d4{transition-delay:.32s}.rlt .reveal.d5{transition-delay:.4s}

  /* ---------- Stats ---------- */
  .rlt #impact{background:linear-gradient(180deg,var(--bg),var(--bg-2))}
  .rlt .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
  .rlt .stat{padding:34px 28px;border-radius:18px;background:var(--surface);border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .35s var(--ease),border-color .35s}
  .rlt .stat::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
  .rlt .stat:hover{transform:translateY(-6px);border-color:rgba(255,179,71,.35)}
  .rlt .stat:hover::before{transform:scaleX(1)}
  .rlt .stat .num{font-family:'Sora';font-weight:800;font-size:clamp(2.4rem,4.4vw,3.4rem);line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .rlt .stat .label{margin-top:12px;color:var(--muted);font-size:.95rem}

  /* ---------- Summary split ---------- */
  .rlt #about .split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
  .rlt .about-copy p{color:var(--muted);margin-bottom:18px;font-size:1.05rem}
  .rlt .about-copy strong{color:var(--text);font-weight:600}
  .rlt .pillars{display:grid;gap:14px}
  .rlt .pillar{display:flex;gap:16px;padding:18px 20px;border-radius:14px;background:var(--surface);border:1px solid var(--line);transition:.3s}
  .rlt .pillar:hover{border-color:rgba(255,179,71,.35);transform:translateX(6px)}
  .rlt .pillar .ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--grad-soft);display:grid;place-items:center}
  .rlt .pillar .ic svg{width:22px;height:22px;stroke:var(--accent)}
  .rlt .pillar h4{font-size:1.02rem;margin-bottom:3px}
  .rlt .pillar p{color:var(--muted);font-size:.9rem}

  /* ---------- Timeline ---------- */
  .rlt #career{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
  .rlt .timeline{position:relative;margin-top:56px;padding-left:34px}
  .rlt .timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--accent),rgba(255,106,61,.15))}
  .rlt .tl-item{position:relative;padding-bottom:42px}
  .rlt .tl-item:last-child{padding-bottom:0}
  .rlt .tl-item::before{content:"";position:absolute;left:-34px;top:5px;width:18px;height:18px;border-radius:50%;background:var(--bg);border:3px solid var(--accent);box-shadow:0 0 0 4px rgba(255,179,71,.12);transition:.3s}
  .rlt .tl-item:hover::before{background:var(--accent);transform:scale(1.15)}
  .rlt .tl-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-bottom:6px}
  .rlt .tl-role{font-family:'Sora';font-weight:700;font-size:1.18rem}
  .rlt .tl-co{color:var(--accent);font-weight:600}
  .rlt .tl-date{margin-left:auto;font-size:.82rem;color:var(--muted);font-family:'Sora';white-space:nowrap;border:1px solid var(--line);padding:4px 11px;border-radius:999px}
  .rlt .tl-loc{font-size:.85rem;color:var(--muted);margin-bottom:12px}
  .rlt .tl-points{display:grid;gap:8px;margin:0;padding:0}
  .rlt .tl-points li{list-style:none;position:relative;padding-left:22px;color:var(--muted);font-size:.95rem}
  .rlt .tl-points li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--grad);transform:rotate(45deg)}
  .rlt .tl-points li b{color:var(--text);font-weight:600}
  .rlt .tl-early{margin-top:8px;padding:20px 22px;border-radius:14px;background:var(--surface);border:1px dashed var(--line);color:var(--muted);font-size:.92rem}
  .rlt .tl-early b{color:var(--text)}

  /* ---------- Skills ---------- */
  .rlt .skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 54px;margin-top:52px}
  .rlt .skill .skill-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
  .rlt .skill .skill-top span:first-child{font-family:'Sora';font-weight:600;font-size:1rem}
  .rlt .skill .pct{color:var(--accent);font-family:'Sora';font-weight:700;font-size:.9rem}
  .rlt .bar{height:9px;border-radius:999px;background:var(--surface-2);overflow:hidden}
  .rlt .bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--grad);transition:width 1.4s var(--ease)}
  .rlt .tools{margin-top:64px}
  .rlt .tools h3{font-size:1.15rem;margin-bottom:8px}
  .rlt .tools p.sub{color:var(--muted);font-size:.92rem;margin-bottom:22px}
  .rlt .chips{display:flex;flex-wrap:wrap;gap:11px}
  .rlt .chip{padding:10px 18px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:.9rem;font-weight:500;transition:.3s;cursor:default}
  .rlt .chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}

  /* ---------- Forms on .rlt pages (partner apply + information pack) ----------
     The partner shortcodes shipped with no styling at all, which on a dark page
     meant browser-default white boxes. These rules dress both of them, so the
     markup in the shortcode stays about structure and this file stays the one
     place the look is decided. */
  .rlt .rlt-form-card{margin-top:34px;padding:30px clamp(20px,3vw,34px);border-radius:18px;background:var(--surface);border:1px solid var(--line);max-width:680px}
  .rlt .rlt-form-foot{margin-top:18px;color:var(--muted);font-size:.9rem}
  .rlt .rlt-form-foot a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

  .rlt .rlt-partner-form,.rlt .rlt-pack-form{display:flex;flex-direction:column;gap:16px}
  .rlt .rlt-pack-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .rlt .rlt-partner-form label,.rlt .rlt-pack-form label{display:flex;flex-direction:column;gap:7px;font-size:.86rem;font-weight:600;color:var(--muted)}
  .rlt .rlt-partner-form input,.rlt .rlt-partner-form textarea,
  .rlt .rlt-pack-form input,.rlt .rlt-pack-form select{
    width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--line-2,var(--line));
    background:rgba(255,255,255,.03);color:var(--text);font-family:inherit;font-size:1rem;
    /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus. */
    transition:border-color .25s,background .25s
  }
  .rlt .rlt-partner-form input:focus,.rlt .rlt-partner-form textarea:focus,
  .rlt .rlt-pack-form input:focus,.rlt .rlt-pack-form select:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.05)}
  .rlt .rlt-partner-form textarea{resize:vertical;min-height:84px}
  .rlt .rlt-partner-form button,.rlt .rlt-pack-form button{align-self:flex-start;margin-top:4px;cursor:pointer;border:0}
  .rlt .rlt-partner-fine,.rlt .rlt-pack-fine{color:var(--muted);font-size:.84rem;line-height:1.6;margin:0}
  .rlt .rlt-partner-err,.rlt .rlt-pack-err{margin:0;padding:12px 15px;border-radius:11px;font-size:.9rem;color:#ffb4a8;background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.32)}
  .rlt .rlt-partner-done,.rlt .rlt-pack-done{padding:26px 28px;border-radius:16px;background:var(--surface);border:1px solid rgba(61,214,140,.34);max-width:680px;margin-top:34px}
  .rlt .rlt-partner-done h3,.rlt .rlt-pack-done h3{font-family:'Sora';font-weight:800;margin-bottom:9px}
  .rlt .rlt-partner-done p,.rlt .rlt-pack-done p{color:var(--muted);margin:0}
  /* Off-screen rather than display:none: a hidden field some bots still fill,
     which is the entire point of a honeypot. */
  .rlt .rlt-pack-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  @media(max-width:640px){
    .rlt .rlt-pack-row{grid-template-columns:1fr}
    .rlt .rlt-partner-form button,.rlt .rlt-pack-form button{align-self:stretch;text-align:center;justify-content:center}
  }

  .rlt .toolgroups{display:grid;gap:26px;margin-top:4px}
  .rlt .toolgroup .glabel{display:block;font-family:'Sora';font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:13px}
  .rlt .toolgroup .glabel::before{content:"";display:inline-block;width:18px;height:2px;background:var(--grad);vertical-align:middle;margin-right:9px}

  /* ---------- AI feature ---------- */
  .rlt #ai .ai-card{position:relative;border-radius:24px;padding:clamp(34px,5vw,64px);background:linear-gradient(135deg,var(--surface-2),var(--surface));border:1px solid var(--line);overflow:hidden}
  .rlt #ai .ai-card::after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,61,.4),transparent 65%);top:-120px;right:-90px;filter:blur(30px)}
  .rlt .ai-card .inner{position:relative;z-index:2;max-width:680px}
  .rlt .ai-card .tag{display:inline-flex;align-items:center;gap:9px;font-family:'Sora';font-weight:700;color:var(--accent);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
  .rlt .ai-card h3{font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:800;margin-bottom:16px}
  .rlt .ai-card p{color:var(--muted);font-size:1.08rem}
  .rlt .ai-card .ai-stats{display:flex;gap:40px;margin-top:30px;flex-wrap:wrap}
  .rlt .ai-card .ai-stats .n{font-family:'Sora';font-weight:800;font-size:1.7rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .rlt .ai-card .ai-stats small{color:var(--muted);display:block;font-size:.84rem}

  /* ---------- Beyond ---------- */
  .rlt #beyond{background:linear-gradient(180deg,var(--bg),var(--bg-2))}
  .rlt .beyond-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
  .rlt .bcard{padding:30px 26px;border-radius:18px;background:var(--surface);border:1px solid var(--line);transition:.35s}
  .rlt .bcard:hover{transform:translateY(-6px);border-color:rgba(255,179,71,.3)}
  .rlt .bcard .ic{width:50px;height:50px;border-radius:14px;background:var(--grad-soft);display:grid;place-items:center;margin-bottom:18px}
  .rlt .bcard .ic svg{width:25px;height:25px;stroke:var(--accent)}
  .rlt .bcard h4{font-size:1.12rem;margin-bottom:9px}
  .rlt .bcard p{color:var(--muted);font-size:.93rem}

  /* ---------- References ---------- */
  .rlt .refhead{font-family:'Sora';font-weight:800;font-size:1.5rem;margin-top:58px;margin-bottom:6px}
  .rlt .refs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
  .rlt .refcard{padding:22px 26px;border-radius:18px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;transition:.3s}
  .rlt .refcard:hover{border-color:rgba(255,179,71,.35);transform:translateY(-4px)}
  .rlt .refcard .who{display:flex;align-items:center;gap:13px}
  .rlt .refcard .who .av{width:46px;height:46px;border-radius:50%;background:var(--grad-soft);display:grid;place-items:center;color:var(--accent);font-family:'Sora';font-weight:700}
  .rlt .refcard .who b{font-family:'Sora';font-size:1rem;display:block}
  .rlt .refcard .who small{color:var(--muted);font-size:.84rem}
  .rlt .reflink{display:inline-flex;align-items:center;gap:7px;font-family:'Sora';font-weight:600;font-size:.85rem;color:var(--accent);padding:8px 15px;border:1px solid var(--line);border-radius:999px;transition:.3s}
  .rlt .reflink:hover{border-color:var(--accent);background:var(--grad-soft);transform:translateY(-2px)}

  /* ---------- Contact ---------- */
  .rlt #contact{text-align:center;background:radial-gradient(circle at 50% 120%,rgba(255,106,61,.14),transparent 60%)}
  .rlt #contact h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;margin-bottom:18px}
  .rlt #contact .lead{margin:0 auto 36px}
  .rlt .contact-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:46px}
  .rlt .contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:760px;margin:0 auto;text-align:left}
  .rlt .ccard{padding:22px;border-radius:16px;background:var(--surface);border:1px solid var(--line);transition:.3s}
  .rlt .ccard:hover{border-color:var(--accent);transform:translateY(-4px)}
  .rlt .ccard small{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}
  .rlt .ccard div{font-family:'Sora';font-weight:600;margin-top:6px;font-size:.98rem;word-break:break-word}

  .rlt footer.srf{padding:34px 0;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:.85rem}
  .rlt footer.srf .vtag{display:inline-block;margin-top:8px;font-size:.72rem;padding:4px 12px;border:1px solid var(--line);border-radius:999px;opacity:.7}

  /* ---------- Responsive ---------- */
  @media(max-width:880px){
    .rlt .hero-inner{grid-template-columns:1fr;gap:40px}
    .rlt .portrait{order:-1}
    .rlt #about .split{grid-template-columns:1fr;gap:34px}
    .rlt .skills-grid{grid-template-columns:1fr;gap:24px}
    .rlt .stats{grid-template-columns:1fr}
    .rlt .beyond-grid,.rlt .contact-cards{grid-template-columns:1fr}
    .rlt .refs{grid-template-columns:1fr}
    .rlt .navlinks{position:fixed;inset:0 0 0 auto;width:74%;max-width:320px;flex-direction:column;justify-content:center;gap:26px;background:rgba(12,14,20,.97);backdrop-filter:blur(14px);transform:translateX(100%);transition:transform .4s var(--ease);border-left:1px solid var(--line)}
    .rlt .navlinks.open{transform:none}
    .rlt .navlinks .nav-account{flex-direction:column;gap:22px}
    .rlt .burger{display:flex;z-index:95}
    .rlt .tl-date{margin-left:0}
  }
  @media(prefers-reduced-motion:reduce){.rlt *{animation:none !important;transition:none !important}.rlt .reveal{opacity:1;transform:none}}

/* ===== mode switch + visibility ===== */
.rlt .modeswitch{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px}
.rlt .modeswitch button{border:0;background:transparent;color:var(--muted);font-family:'Sora';font-weight:700;font-size:.8rem;padding:7px 15px;border-radius:999px;cursor:pointer;transition:.25s}
.rlt .modeswitch button:hover{color:var(--text)}
/* Mode visibility is keyed off <html>, not .rlt.
 *
 * A returning enterprise visitor used to need a synchronous <script> inside the
 * widget to set the mode before the chooser painted, and that script sat one
 * careless save away from being stripped along with the stylesheet. The head
 * script in rialto-frontend-js.php now stamps <html data-rlt-mode> before the
 * body paints, so there is no flash and nothing fragile in the widget.
 *
 * Both rules only ever HIDE. Nothing here forces a display value onto the
 * visible element, which matters because .m-sme / .m-ent are used on spans,
 * divs and whole sections alike: forcing `block` would break the inline ones.
 */
html:not([data-rlt-mode="ent"]) .rlt .modeswitch button[data-m="sme"],
html[data-rlt-mode="ent"] .rlt .modeswitch button[data-m="ent"]{background:var(--grad);color:#0a0b0f}
html:not([data-rlt-mode="ent"]) .rlt .m-ent{display:none !important}
html[data-rlt-mode="ent"] .rlt .m-sme{display:none !important}
.rlt.switching #hero,.rlt.switching #impact,.rlt.switching #approach,.rlt.switching #expertise,.rlt.switching #work{opacity:.1;transition:opacity .25s var(--ease)}
/* ===== process steps ===== */
.rlt .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:50px}
.rlt .step{padding:28px 24px;border-radius:18px;background:var(--surface);border:1px solid var(--line);transition:.35s}
.rlt .step:hover{transform:translateY(-6px);border-color:rgba(255,179,71,.3)}
.rlt .step .n{font-family:'Sora';font-weight:800;font-size:1.05rem;width:44px;height:44px;border-radius:12px;background:var(--grad-soft);color:var(--accent);display:grid;place-items:center;margin-bottom:16px}
.rlt .step h4{font-size:1.05rem;margin-bottom:8px}
.rlt .step p{color:var(--muted);font-size:.9rem}
/* ===== plans / engagements ===== */
.rlt .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.rlt .plan{padding:32px 28px;border-radius:20px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;transition:.35s;position:relative}
.rlt .plan:hover{transform:translateY(-6px);border-color:rgba(255,179,71,.35)}
.rlt .plan.feature{border-color:rgba(255,179,71,.5);background:linear-gradient(160deg,var(--surface-2),var(--surface))}
.rlt .plan .pop{position:absolute;top:-12px;left:28px;font-family:'Sora';font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#0a0b0f;background:var(--grad);padding:5px 12px;border-radius:999px}
.rlt .plan .pname{font-family:'Sora';font-weight:700;font-size:1.18rem;margin-bottom:10px}
.rlt .plan .price{font-family:'Sora';font-weight:800;font-size:2.1rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.rlt .plan .per{color:var(--muted);font-size:.85rem;margin:6px 0 18px}
.rlt .plan p.desc{color:var(--muted);font-size:.92rem;margin-bottom:24px;flex:1;line-height:1.55}
.rlt .plan .btn{width:100%;justify-content:center}
@media(max-width:880px){.rlt .steps{grid-template-columns:1fr 1fr}.rlt .plans{grid-template-columns:1fr}}
@media(max-width:560px){.rlt .steps{grid-template-columns:1fr}}
/* ===== upsell bounce + fine print ===== */
@keyframes rlt-attn{0%,100%{transform:translateY(0)}18%{transform:translateY(-13px)}36%{transform:translateY(0)}54%{transform:translateY(-8px)}72%{transform:translateY(0)}86%{transform:translateY(-3px)}}
.rlt .plan.attn{animation:rlt-attn 1.15s var(--ease) 2;border-color:rgba(255,179,71,.85) !important;box-shadow:0 26px 60px -22px rgba(255,140,26,.55)}
.rlt #morehelp{text-align:center;background:radial-gradient(circle at 50% 120%,rgba(255,106,61,.10),transparent 60%)}
.rlt #morehelp .lead{margin-left:auto;margin-right:auto}
.rlt .plan .fineprint{margin:-4px 0 16px;font-size:.76rem;color:var(--accent);font-weight:600}
.rlt .herolion{width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 16px 34px rgba(255,140,26,.28))}
.rlt .wrap{position:relative;z-index:1}
.rlt .plan .plan-incl{list-style:none;margin:2px 0 22px;padding:0;display:grid;gap:8px;text-align:left}
.rlt .plan .plan-incl li{position:relative;padding-left:23px;color:var(--muted);font-size:.86rem;line-height:1.4}
.rlt .plan .plan-incl li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--accent);font-weight:800;font-size:.82rem}
/* ===== billing-period toggle (Board Advisory: monthly vs annual) ===== */
.rlt .plan .billswitch{display:inline-flex;align-self:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;margin:0 0 14px}
.rlt .plan .billswitch button{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--muted);font-family:'Sora';font-weight:700;font-size:.72rem;padding:6px 13px;border-radius:999px;cursor:pointer;transition:.25s;white-space:nowrap}
.rlt .plan .billswitch button:hover{color:var(--text)}
.rlt .plan[data-billing="monthly"] .billswitch button[data-b="monthly"],
.rlt .plan[data-billing="annual"] .billswitch button[data-b="annual"]{background:var(--grad);color:#0a0b0f}
.rlt .plan .billswitch .bsave{font-size:.63rem;font-weight:800;letter-spacing:.03em;padding:2px 6px;border-radius:999px;background:rgba(255,179,71,.16);color:var(--accent);transition:.25s}
.rlt .plan[data-billing="annual"] .billswitch button[data-b="annual"] .bsave{background:rgba(10,11,15,.22);color:#0a0b0f}
.rlt .plan[data-billing="monthly"] .b-annual{display:none !important}
.rlt .plan[data-billing="annual"] .b-monthly{display:none !important}
/* ===== Rialto Bridge strip ===== */
.rlt #bridge{background:radial-gradient(ellipse at 78% 0%,rgba(255,106,61,.13),transparent 60%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* The eyebrow is gradient-clipped text; the mark opts out so its stroke isn't clipped to transparent. */
.rlt #bridge .bridge-mark{width:1.45em;height:1.45em;vertical-align:-.32em;margin-right:.4em;overflow:visible;color:var(--accent);-webkit-text-fill-color:currentColor}
.rlt .bridge-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:38px}
.rlt .bridge-head .lead{margin:14px 0 0;max-width:56ch}
.rlt .bridge-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;min-height:150px}
.rlt .bcard-art{display:flex;flex-direction:column;padding:26px 24px;border-radius:18px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:inherit;transition:transform .35s var(--ease),border-color .35s}
.rlt .bcard-art:hover{transform:translateY(-6px);border-color:rgba(255,179,71,.38)}
.rlt .bcard-art .tag{align-self:flex-start;font-family:'Sora';font-weight:800;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:rgba(255,179,71,.12);padding:4px 10px;border-radius:999px;margin-bottom:14px}
.rlt .bcard-art h4{font-family:'Sora';font-weight:700;font-size:1.04rem;line-height:1.3;margin-bottom:9px}
.rlt .bcard-art p{color:var(--muted);font-size:.88rem;line-height:1.55;flex:1;margin-bottom:16px}
.rlt .bcard-art .when{font-size:.76rem;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.rlt .bridge-skeleton{border-radius:18px;background:var(--surface);border:1px solid var(--line);min-height:190px;position:relative;overflow:hidden}
.rlt .bridge-skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);animation:rlt-shimmer 1.4s infinite}
@keyframes rlt-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.rlt .bridge-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:30px}
.rlt .bridge-foot .price{font-family:'Sora';font-weight:800;font-size:.9rem;color:var(--muted)}
.rlt .bridge-foot .price b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.25rem}
@media(max-width:980px){.rlt .bridge-cards{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.rlt .bridge-cards{grid-template-columns:1fr}}
.rlt #process::after,.rlt #expertise::after,.rlt #work::after,.rlt #contact::after,.rlt #morehelp::after{content:"";position:absolute;width:clamp(180px,26vw,330px);height:clamp(180px,26vw,330px);background-repeat:no-repeat;background-size:contain;background-position:center;opacity:.05;pointer-events:none;z-index:0}
.rlt #process::after{right:-20px;top:30px;background-image:url(/wp-content/uploads/rialto-icon-bridge.png)}
.rlt #expertise::after{left:-30px;bottom:10px;background-image:url(/wp-content/uploads/rialto-icon-mask.png)}
.rlt #work::after{right:-20px;bottom:20px;background-image:url(/wp-content/uploads/rialto-icon-gondola.png)}
.rlt #morehelp::after{left:-10px;top:20px;background-image:url(/wp-content/uploads/rialto-icon-mask.png)}
.rlt #contact::after{left:50%;transform:translateX(-50%);bottom:-30px;opacity:.06;background-image:url(/wp-content/uploads/rialto-lion-amber.png)}

/* ============================================================
   2. Breadth chips: was an inline <style> inside #breadth
   ============================================================ */
    #breadth .rlt-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:940px;margin:0 auto}
    #breadth .rlt-chips span{display:inline-block;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);color:#F4F5F7;font-size:.92rem;line-height:1.15}
    #breadth .rlt-chips .chip-more{background:linear-gradient(118deg,rgba(255,179,71,.16),rgba(255,106,61,.16));border-color:rgba(255,138,61,.55);color:#FFB347;font-weight:600}

/* ============================================================
   3. Deck lead capture: was an inline <style> inside #getdeck
   ============================================================ */
    #getdeck{padding:74px 24px}
    #getdeck .rlt-lead{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:540px;margin:0 auto}
    #getdeck .rlt-lead-email{flex:1 1 240px;min-width:220px;background:#14171F;border:1px solid rgba(255,255,255,.14);color:#F4F5F7;border-radius:10px;padding:13px 16px;font-size:15px;font-family:inherit}
    #getdeck .rlt-lead-email::placeholder{color:#7c8598}
    #getdeck .rlt-lead-email:focus{outline:none;border-color:#FF8A3D;box-shadow:0 0 0 2px rgba(255,138,61,.25)}
    #getdeck .rlt-lead-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
    #getdeck .rlt-lead .btn{white-space:nowrap;cursor:pointer;border:none}
    #getdeck .rlt-lead .btn[disabled]{opacity:.6;cursor:default}
    #getdeck .rlt-lead-msg{margin:18px auto 0;max-width:540px;font-size:14.5px;min-height:20px}
    #getdeck .rlt-lead-msg.ok{color:#7ee0a3;font-weight:600}
    #getdeck .rlt-lead-msg.err{color:#ff9f8a}
    #getdeck .rlt-lead-fine{color:#7c8598;font-size:12px;margin-top:14px}

/* ============================================================
   4. Hero audience switch  (replaces the full-screen chooser)
   ============================================================
   The chooser was an interstitial in front of the value proposition: a
   full-screen overlay that set body{overflow:hidden} and asked a first-time
   visitor to classify themselves before they had seen anything to classify
   themselves against. The switch asks the same question after the first
   sentence instead, and the localStorage contract behind it is unchanged.  */
.rlt .hero-switch{
  display:inline-flex;padding:3px;margin:0 0 20px;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03)
}
.rlt .hero-switch button{
  font-family:'Sora';font-size:.8rem;font-weight:700;padding:8px 17px;
  border:0;border-radius:999px;background:none;color:var(--muted);cursor:pointer;
  transition:color .2s var(--ease),background .2s var(--ease)
}
.rlt .hero-switch button:not([aria-selected="true"]):hover{color:var(--text)}
html:not([data-rlt-mode="ent"]) .rlt .hero-switch button[data-m="sme"],
html[data-rlt-mode="ent"] .rlt .hero-switch button[data-m="ent"]{background:var(--grad);color:#0a0b0f}

/* ============================================================
   5. Band hierarchy
   ============================================================
   Every section ran the same padding and the same eyebrow/title/lead opening,
   which at ten sections reads as undifferentiated: nothing in the scroll
   signalled that "Work with us" carries more weight than "Breadth". Three
   tiers now: structural bands take the raised ground, supporting bands keep
   the base, and connective bands compress. Tokens are untouched; this is
   spacing and ground only.  */
.rlt #breadth,.rlt #morehelp{padding:clamp(46px,6vw,78px) 0}
.rlt #work,.rlt #contact{background:linear-gradient(180deg,var(--bg-2),var(--bg))}

/* The bridge strip is server-rendered now, so the skeleton never paints.
   Kept as a safety net for the case where the shortcode returns nothing. */
.rlt .bridge-cards:empty{display:none}

/* ============================================================
   6. Theme-hosted .rlt pages  (/services/)
   ============================================================
   The front page gets its full-bleed for free: Elementor's wrappers are
   flattened by the reset at the top of this file. /services/ is a plain Astra
   page, so its .rlt root lands inside .entry-content: a centred, padded
   column. Left alone the dark bands stop short of the viewport edge and the
   design reads as a widget dropped into a white-page layout rather than as
   the front page.

   Two jobs, both keyed off body.rlt-host (added by rialto-frontend-js.php) or
   the .rlt-standalone modifier on the root itself, so nothing here can reach
   the front page.  */

/* Flatten the wrappers rather than break out of them.
 *
 * The obvious trick here is margin-left:calc(50% - 50vw) on the root, and it
 * is wrong twice: vw includes the scrollbar, so the element overhangs by half
 * a scrollbar on each side, and it only lands centred while every ancestor is
 * still centred: zeroing a container's `margin:0 auto` to kill its padding
 * silently shifts the whole page sideways.
 *
 * Widening the ancestors instead is what the Elementor reset at the top of
 * this file already does for the front page, and it has no vw in it at all.
 * If Astra's markup ever changes and a wrapper here stops matching, the page
 * renders narrow, not offset, and never with a horizontal scrollbar. */
/* The chain on this install, top to bottom, is
   #content.site-content > .ast-container > #primary > main.site-main >
   article.ast-article-single > .entry-content. Every one of them is listed:
   .site-main alone carries 20px of side padding and .ast-article-single 3em,
   so missing either leaves the dark bands inset from the viewport edge by an
   amount that reads as a mistake rather than as a margin. */
body.rlt-host .site-content,
body.rlt-host .site-content>.ast-container,
body.rlt-host #primary,
body.rlt-host .site-main,
body.rlt-host .ast-article-single,
body.rlt-host .entry-content{
  max-width:none;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:none;
}
.rlt-standalone{width:auto;max-width:none;margin:0}
/* Astra prints `.entry-content[data-ast-blocks-layout] > * {max-width:var(
   --wp--custom--ast-content-width-size)}` inline in the head, 1200px, and at
   (0,2,0) it beats a bare .rlt-standalone, which is how the bands ended up
   inset by 32px a side with every wrapper above them already full width. This
   selector exists only to out-specify that one. */
body.rlt-host .entry-content>.rlt-standalone{max-width:none;width:100%;margin:0}
body.rlt-host .entry-content>*:first-child{margin-top:0}

/* The hero carries its own <h1>. Astra's page title would sit above it as a
   second one: wrong twice over, visually and for the document outline. */
body.rlt-host .entry-header,
body.rlt-host .ast-single-entry-banner{display:none}

/* ============================================================
   7. Components /services/ needs
   ============================================================ */

/* ---- Case studies ----
   The card shell is .bcard's, deliberately: same surface, same hairline, same
   lift on hover. What differs is that a case is a narrative: sector, client,
   what happened, what it moved, so it stacks and pins its numbers to the
   bottom, which keeps the stat rows on a line across all three cards however
   unevenly the prose runs. */
.rlt .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.rlt .case{display:flex;flex-direction:column;padding:30px 26px;border-radius:18px;background:var(--surface);border:1px solid var(--line);transition:.35s}
.rlt .case:hover{transform:translateY(-6px);border-color:rgba(255,179,71,.3)}
.rlt .case .sector{align-self:flex-start;font-family:'Sora';font-weight:800;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:rgba(255,179,71,.12);padding:4px 10px;border-radius:999px;margin-bottom:14px}
.rlt .case h4{font-size:1.06rem;line-height:1.32;margin-bottom:8px}
.rlt .case .who{color:var(--muted);font-size:.8rem;margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.rlt .case h5{font-family:'Sora';font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.rlt .case h5~h5{margin-top:18px}
.rlt .case p.case-copy{color:var(--muted);font-size:.88rem;line-height:1.6;margin:0}
.rlt .case .tl-points{margin-top:2px}
.rlt .case .tl-points li{font-size:.86rem;line-height:1.5}
.rlt .case .tl-points li::before{top:8px}
/* margin-top:auto is what pins the numbers to the bottom of the card. */
.rlt .case-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
.rlt .case-stats div{text-align:center}
.rlt .case-stats strong{display:block;font-family:'Sora';font-weight:800;font-size:1.02rem;line-height:1.1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Two lines' worth whether the label needs them or not: the block is pinned by
   its bottom, so a label that wraps in one card and not the next would push
   that card's figure out of line with its neighbours. */
.rlt .case-stats span{display:block;color:var(--muted);font-size:.68rem;line-height:1.3;margin-top:5px;min-height:2.6em}
@media(max-width:980px){.rlt .cases{grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto}}

/* ---- Four engagement formats ----
   .plans is a three-up. Four cards in it leave a widow on the second row, so
   this is the 2×2 variant. The mobile rule has to be restated: the shared
   one at max-width:880px targets .plans alone and loses to .plans-2. */
.rlt .plans.plans-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:880px){.rlt .plans.plans-2{grid-template-columns:1fr}}

/* ---- Services hero ----
   Not #hero: that one is min-height:100vh because it is the whole first
   impression of the site. A section page opens, it does not land. The
   backdrop (.hero-bg and its orbs) is the shared one, so the two pages are
   recognisably the same place. */
.rlt #svc-hero{padding-top:clamp(104px,13vw,168px);padding-bottom:clamp(56px,7vw,96px);overflow:hidden}
.rlt #svc-hero h1{font-size:clamp(2.3rem,5.4vw,3.9rem);font-weight:800;margin-bottom:18px}

/* Copy-only heroes. The base .hero-inner is the front page's two-column grid
   and expects a portrait in column two. These pages have none, so without this
   their copy blocks alternate across the two columns and the h1 wraps a word at
   a time in a 436px cell. Any future portrait-less hero belongs here too. */
.rlt #svc-hero .hero-inner,
.rlt #pp-hero .hero-inner{display:block;max-width:760px}

/* Shortcode buttons ([rialto_enquiry_button]) render Gutenberg button markup.
   Inside a plan card that reads as a different design system; this is the
   adapter, kept narrow so it cannot affect buttons elsewhere on the site. */
.rlt .plan .wp-block-button{margin:0}
.rlt .plan .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:13px 26px;border-radius:999px;font-family:'Sora';font-weight:700;font-size:.95rem;background:var(--grad);color:#0a0b0f;border:1px solid transparent;transition:transform .25s var(--ease),box-shadow .25s var(--ease);box-shadow:0 10px 30px -10px rgba(255,106,61,.6)}
.rlt .plan .wp-block-button__link:hover{transform:translateY(-3px);box-shadow:0 18px 40px -12px rgba(255,106,61,.7);color:#0a0b0f}

  /* ---------- Legal pages (.rlt-legal) and the partner terms tickbox ----------
     Long-form prose rather than marketing sections, so the section padding and
     the display face both come down and the measure is capped where reading
     stops being comfortable. */
  .rlt.rlt-legal section{padding:clamp(48px,6vw,80px) 0}
  .rlt.rlt-legal .wrap{max-width:760px}
  .rlt.rlt-legal h1{font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:16px}
  .rlt.rlt-legal h2{font-size:1.12rem;margin:38px 0 12px;padding-top:22px;border-top:1px solid var(--line)}
  .rlt.rlt-legal p,.rlt.rlt-legal li{color:var(--muted);font-size:.96rem;line-height:1.75}
  .rlt.rlt-legal strong{color:var(--text);font-weight:600}
  .rlt.rlt-legal ul,.rlt.rlt-legal ol{margin:12px 0 12px 22px;display:flex;flex-direction:column;gap:9px}
  .rlt.rlt-legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
  .rlt.rlt-legal .lead{margin-bottom:26px}
  .rlt.rlt-legal .rlt-legal-note{padding:16px 18px;border-radius:12px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);margin-bottom:8px}
  .rlt.rlt-legal .rlt-legal-foot{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:.87rem}

  /* The tickbox is the whole point of the terms existing, so it is a target
     rather than a formality: full row, generous hit area, wraps cleanly. */
  .rlt .rlt-partner-terms{flex-direction:row;align-items:flex-start;gap:11px;font-weight:400;color:var(--muted);font-size:.88rem;line-height:1.6;cursor:pointer}
  .rlt .rlt-partner-terms input[type=checkbox]{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--accent-2);cursor:pointer}
  .rlt .rlt-partner-terms a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   8. /enterprise/  the single-audience cut of the front page
   ============================================================
   Same markup, rendered from the same design file, with the audience
   fixed server-side. Only two things differ: the switch has nothing
   to switch between, and the "need more help" band is an SME upsell
   that has no business on this page. */
body.rlt-ent-only .rlt .hero-switch,
body.rlt-ent-only .rlt #morehelp,
body.rlt-ent-only .rlt .modeswitch{display:none !important}

/* ============================================================
   10. Header: a second row for the utility controls
   ============================================================
   At 1366px, which is what most 14 inch laptops report, the single
   header row was completely full: .brand ended at x=172 and
   .navlinks began at exactly 172, so the logo had no clearance at
   all. At 1280 the row overflowed the bar by 71px.

   The seven section links and the Contact button stay on the first
   row. The audience switch and the login pair drop to a second row
   beneath, right aligned. Both are controls rather than navigation,
   and neither is what anyone reads a masthead for.

   Bounded at both ends on purpose. Below 881px the burger menu
   takes over and none of this applies. From 1500px up the single row
   has 85px or more of clearance and needs no help. The .navlinks strip is
   1175px wide at its natural size, and below 1500 it was being flex-shrunk
   into the logo rather than simply running out of room, which is why 1440
   still looked squashed at 25px of clearance. /enterprise/
   is excluded because it already hides the switch, which leaves its
   one row comfortable at every width down to the burger. */
@media (min-width:881px) and (max-width:1499px){

  body:not(.rlt-ent-only) .rlt nav .navlinks{flex-wrap:wrap;justify-content:flex-end;row-gap:12px}

  /* Contact is the primary action, so it stays up with the links. */
  body:not(.rlt-ent-only) .rlt nav .navlinks .nav-cta{order:0}

  /* A zero height, full width flex item. Everything ordered after it
     is pushed onto the next line, which is how the break is made
     without adding an element to the markup: this nav lives in an
     Elementor HTML widget, and not editing that widget is worth a
     pseudo-element. */
  body:not(.rlt-ent-only) .rlt nav .navlinks::after{content:"";flex:0 0 100%;height:0;order:1}

  body:not(.rlt-ent-only) .rlt nav .navlinks .modeswitch{order:2}
  body:not(.rlt-ent-only) .rlt nav .navlinks .nav-account{order:3}

  /* Two rows give the bar 108px of content height, and a 34px logo left 74px
     of it empty. 72px renders the wordmark at 273x72, which is within a pixel
     of the 274x72 the Astra header uses on every other page, so the masthead
     is finally the same size across the site. It does not make the bar any
     taller: the two rows of links are what set its height. */
  body:not(.rlt-ent-only) .rlt .brand img{height:72px}

  /* Two rows make the fixed bar 139px tall against a 120px hero
     offset, so the headline tucked underneath it. */
  body:not(.rlt-ent-only) .rlt #hero{padding-top:168px}

  /* Anchor jumps need the same allowance, and only on the page that
     actually has the taller bar: /services/ and the rest run Astra's
     header and would be over-offset by this. */
  html:has(body.home:not(.rlt-ent-only)){scroll-padding-top:150px}
}

/* ============================================================
   9. The "start here" band at the top of /services/
   ============================================================
   Built for one reader: someone standing up, holding an A5 flyer, who
   has just scanned a QR code that promised "Growth Plans from $599".
   Everything here is in service of letting that person act on a decision
   they have already made, on a phone, without scrolling.

   The card is deliberately quieter than the hero below it. It is the
   answer to a question the reader already asked, and an answer does not
   need to shout. */

  .rlt .startband{padding:26px 0 0}
  .rlt .startcard{
    display:grid;grid-template-columns:1.35fr .65fr;gap:30px;align-items:center;
    background:var(--surface,#14171f);border:1px solid var(--line);border-radius:22px;
    padding:30px 34px;position:relative;overflow:hidden
  }
  /* A single hairline of brand, rather than a gradient panel that would
     compete with the hero immediately underneath. */
  .rlt .startcard::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad)
  }
  .rlt .startcard .eyebrow{margin-bottom:12px}
  .rlt .starth{
    font-family:'Sora';font-weight:800;letter-spacing:-.02em;line-height:1.1;
    font-size:clamp(1.6rem,3.4vw,2.3rem);margin:0 0 10px
  }
  .rlt .startlead{color:var(--muted);font-size:1rem;line-height:1.6;margin:0 0 14px;max-width:52ch}
  .rlt .startlist{margin:0 0 14px;padding-left:20px;color:var(--text);font-size:.94rem;line-height:1.55}
  .rlt .startlist li{margin-bottom:6px}
  .rlt .startfine{color:var(--muted);font-size:.88rem;margin:0}
  .rlt .startact{display:flex;flex-direction:column;gap:11px;align-items:stretch}
  .rlt .startact .btn{justify-content:center;width:100%}
  .rlt .startask{margin:4px 0 0;font-size:.85rem;color:var(--muted);text-align:center}
  .rlt .startask a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

  /* The phone is the case that matters: this is what a QR scan opens.
     One column, the button before the fine print, nothing clever. */
  @media(max-width:860px){
    .rlt .startband{padding:18px 0 0}
    .rlt .startcard{grid-template-columns:1fr;gap:20px;padding:24px 22px;border-radius:18px}
    .rlt .startlead{font-size:.96rem}
    .rlt .startact{gap:10px}
  }

/* ============================================================
   9. Horizontal carousel
   ============================================================
   Used by the process and the case studies on /services/. Both were
   grids that went to a single tall column on a phone, which on a page
   reached by scanning a flyer meant the case studies alone ran past
   three screens before the price came back into view.

   Scrolling is native: scroll-snap does the work, the buttons are an
   enhancement, and with JavaScript off it is still a swipeable strip.
   Track padding matches .wrap so the first card lines up with the
   heading above it while the strip itself runs full bleed. */
.rlt .carousel{position:relative;margin-top:44px}
.rlt .carousel-track{
  display:grid;grid-auto-flow:column;
  /* Fixed, not minmax: a minmax track shrinks to its minimum to fit the
     container, so the strip never overflowed and never scrolled. A fixed
     width is what makes it a carousel. */
  grid-auto-columns:var(--card,360px);
  gap:18px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 24px 18px;margin:0 -24px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.rlt .carousel-track::-webkit-scrollbar{display:none}
.rlt .carousel-track > *{scroll-snap-align:start;min-width:0}
/* The track is the scroller, so the cards inside must not stretch to a
   shared row height: each keeps its own. */
.rlt .carousel-track > .step,
.rlt .carousel-track > .case{margin:0;height:auto}

.rlt .carousel-nav{display:flex;gap:8px;align-items:center;margin-top:4px}
.rlt .carousel-btn{
  width:42px;height:42px;flex:none;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--text);
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:border-color .25s var(--ease),background .25s var(--ease),opacity .25s
}
.rlt .carousel-btn:hover:not(:disabled){border-color:var(--accent);background:rgba(255,179,71,.08)}
.rlt .carousel-btn:disabled{opacity:.3;cursor:default}
.rlt .carousel-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.4}
/* Progress rail: how far through the strip you are, without a scrollbar. */
.rlt .carousel-rail{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-left:6px}
.rlt .carousel-rail i{display:block;height:100%;width:0;background:var(--grad);border-radius:2px;transition:width .2s linear}
.rlt .carousel-count{font-family:'Sora';font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:4px}

@media(max-width:640px){
  .rlt .carousel-track{--card:min(86vw,340px);padding-left:20px;padding-right:20px;margin:0 -20px}
}
@media(prefers-reduced-motion:reduce){
  .rlt .carousel-track{scroll-behavior:auto}
  .rlt .carousel-rail i{transition:none}
}
/* Case cards carry four headings, a list and three figures, so they need more
   width than a process step. At 360px three of them fit exactly inside the
   1140px wrap, which quietly turned the carousel back into the cramped 3-up
   grid it replaced. Wider cards mean it genuinely scrolls on a desktop too,
   and each one is readable rather than squeezed. */
.rlt #case-studies .carousel-track{--card:432px}
@media(max-width:640px){
  .rlt #case-studies .carousel-track{--card:min(88vw,340px)}
}