:root{
  --midnight:#0B132B;
  --midnight-2:#07101f;
  --blue:#3B82F6;
  --blue-2:#1d6ff2;
  --slate:#64748B;
  --cloud:#F8FAFC;
  --mist:#E2E8F0;
  --ink:#0f172a;
  --white:#fff;
  --shadow:0 24px 80px rgba(2,12,27,.16);
  --radius:22px;
  --radius-sm:14px;
  --container:min(1180px, calc(100% - 40px));
}


* {
box-sizing:border-box}

html {
scroll-behavior:smooth}

body {
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  color:var(--ink);
  background:#fff;
line-height:1.6}

body.nav-open {
overflow:hidden}

img {
  max-width:100%;
display:block}

a {
  color:inherit;
text-decoration:none}

button,input,textarea {
font:inherit}

.container {
  width:var(--container);
margin-inline:auto}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
border:0}

.skip-link {
  position:fixed;
  left:16px;
  top:-60px;
  z-index:999;
  background:#fff;
  color:#000;
  padding:10px 14px;
border-radius:10px}

.skip-link:focus {
top:16px}

.site-header {
  position:fixed;
  z-index:100;
  top:0;
  left:0;
  right:0;
  padding:18px 0;
  color:#fff;
transition:.25s ease}

.site-header.is-scrolled {
  background:rgba(7,16,31,.92);
  backdrop-filter:blur(16px);
  box-shadow:0 8px 35px rgba(0,0,0,.18);
padding:11px 0}

.nav-wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
gap:30px}

.brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
min-width:0}


.site-nav {
  display:flex;
  align-items:center;
  gap:26px;
  font-size:14px;
font-weight:600}

.nav-link {
  position:relative;
color:rgba(255,255,255,.88)}

.nav-link:after {
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-9px;
  height:2px;
  background:var(--blue);
transition:.25s}

.nav-link:hover:after,.nav-link.is-active:after {
right:0}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  padding:14px 22px;
  font-weight:700;
  border:1px solid transparent;
  transition:.22s ease;
cursor:pointer}

.btn:hover {
transform:translateY(-2px)}

.btn-sm {
padding:10px 18px}

.btn-primary {
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  color:#fff;
box-shadow:0 12px 32px rgba(59,130,246,.28)}

.btn-outline {
  border-color:rgba(255,255,255,.65);
  color:#fff;
background:rgba(255,255,255,.02)}

.btn-light {
  border-color:#cbd5e1;
  background:#fff;
color:var(--ink)}

.nav-toggle {
  display:none;
  background:none;
  border:0;
padding:9px}

.nav-toggle span:not(.sr-only) {
  display:block;
  width:24px;
  height:2px;
  background:#fff;
margin:5px 0}

.hero {
  min-height:720px;
  padding:145px 0 85px;
  color:#fff;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
background:radial-gradient(circle at 79% 32%,rgba(59,130,246,.2),transparent 26%),linear-gradient(115deg,#07101f 0%,#0B132B 47%,#101a32 100%)}

.hero:after {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:44px 44px;
mask-image:linear-gradient(to right,black,transparent 78%)}


.eyebrow {
  font-size:12px;
  letter-spacing:2.5px;
  font-weight:800;
  text-transform:uppercase;
color:var(--blue)}

.hero .eyebrow {
color:#fff}

.hero h1,.section-title,.page-hero h1 {
  font-family:Montserrat,sans-serif;
  letter-spacing:-2px;
  line-height:1.04;
margin:14px 0 20px}


.hero-actions {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
margin:30px 0 33px}

.hero-points {
  display:flex;
  gap:26px;
flex-wrap:wrap}

.hero-point {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
color:#dbe3ee}

.hero-point i {
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  border:1px solid rgba(59,130,246,.5);
  border-radius:10px;
  color:var(--blue);
  font-style:normal;
font-weight:800}


.section {
padding:90px 0}

.section-head {
  text-align:center;
  max-width:740px;
margin:0 auto 46px}

.section-title {
font-size:clamp(34px,4vw,52px)}

.section-copy {
  color:var(--slate);
font-size:17px}


.section-actions {
  display:flex;
  justify-content:center;
margin-top:34px}


.process-intro {
padding-right:24px}


.quote-mark {
  font-size:70px;
  color:var(--blue);
line-height:1}


[data-reveal] {
  opacity:0;
  transform:translateY(22px);
transition:opacity .6s ease,transform .6s ease}

[data-reveal].is-visible {
  opacity:1;
transform:none}

@media (prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    animation:none!important;
  transition:none!important}

  [data-reveal] {
    opacity:1;
  transform:none}

}

@media (max-width:1050px) {
  .site-nav {
  gap:16px}


  .process-intro {
  grid-column:1/-1}


  .footer-grid {
  grid-template-columns:1.3fr 1fr 1fr}

  .footer-phrase {
  grid-column:1/-1}


}

@media (max-width:820px) {
  .site-header {
  background:rgba(7,16,31,.94)}

  .nav-toggle {
  display:block}

  .site-nav {
    position:fixed;
    inset:78px 18px auto 18px;
    background:#0b1629;
    border:1px solid rgba(255,255,255,.1);
    border-radius:18px;
    padding:22px;
    display:grid;
    gap:16px;
    transform:translateY(-16px);
    opacity:0;
    pointer-events:none;
  transition:.2s}

  .site-nav.is-open {
    transform:none;
    opacity:1;
  pointer-events:auto}

  .hero {
    padding-top:125px;
  min-height:auto}


  .footer-grid {
  grid-template-columns:1fr 1fr}

  .footer-grid>div:first-child {
  grid-column:1/-1}

}

@media (max-width:560px) {
  :root {
  --container:min(100% - 28px,1180px)}


  .hero h1 {
  font-size:45px}

  .hero-actions {
  display:grid}

  .hero-actions .btn {
  width:100%}


  .work-grid,.benefits,.process-grid,.footer-grid {
  grid-template-columns:1fr}

  .section {
  padding:68px 0}


  .footer-grid>div:first-child {
  grid-column:auto}

  .footer-phrase {
  grid-column:auto}

  .footer-bottom {
  display:grid}


  .hero-points {
  display:grid}

}

/* ========================================================== RichCodes Header + Hero v2 — approved visual direction Scope: header + hero only. Other homepage sections untouched. ========================================================== */ .brand {
  display:inline-flex;
  align-items:center;
min-width:0}


.hero {
  min-height:760px;
  padding:148px 0 88px;
background: radial-gradient(circle at 76% 34%,rgba(59,130,246,.18),transparent 29%), linear-gradient(115deg,#07101f 0%,#0B132B 48%,#101a32 100%)}


.hero h1 {
  font-size:clamp(54px,5.35vw,82px);
  max-width:760px;
letter-spacing:-3px}

.hero-copy {
  max-width:680px;
  font-size:18px;
line-height:1.62}

.hero-actions {
margin-top:31px}

.hero-points {
  margin-top:2px;
gap:30px}

.hero-point {
font-size:13px}

.hero-point small {
  text-transform:uppercase;
  letter-spacing:.8px;
  font-size:9px;
  font-weight:700;
color:#99a9bd}

.hero-point i {
  width:38px;
  height:38px;
  border-radius:9px;
font-size:18px}


/* =========================================================
   RICHCODES — HEADER + HERO V3
   ========================================================= */

/* ---------- HEADER LOGO ---------- */

.brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.brand-logo {
    display: block;
    width: auto;
    height: 72px;
    max-width: 430px;
    object-fit: contain;
}

.site-header {
    padding: 15px 0;
}

.site-header.is-scrolled {
    padding: 8px 0;
}

.site-header.is-scrolled .brand-logo {
    height: 60px;
}


/* ---------- HERO ---------- */

.hero {
    min-height: 820px;
    padding: 145px 0 70px;
}


.hero h1 {
    font-size: clamp(56px, 5.7vw, 82px);
    max-width: 700px;
}

.hero-copy {
    max-width: 650px;
}


/* ---------- HERO BENEFIT POINTS ---------- */

.hero-points {
    gap: 32px;
    margin-top: 6px;
}

.hero-point {
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
}

.hero-point i {
    width: 46px;
    height: 46px;
    border-radius: 9px;
    font-size: 22px;
    border: 1px solid rgba(59,130,246,.7);
}

.hero-point small {
    font-size: 11px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #aebfd6;
}


/* ---------- TABLET ---------- */

@media (max-width: 1050px) {

    .brand-logo {
        height: 62px;
        max-width: 360px;
    }


    .hero-point {
        font-size: 13px;
    }
}


/* ---------- MOBILE ---------- */

@media (max-width: 820px) {

    .brand-logo {
        height: 55px;
        max-width: 310px;
    }

    .hero {
        padding-top: 125px;
    }


    .hero-points {
        gap: 20px;
    }

    .hero-point i {
        width: 42px;
        height: 42px;
    }
}


/* ---------- SMALL MOBILE ---------- */

@media (max-width: 560px) {

    .brand-logo {
        height: 46px;
        max-width: 250px;
    }

    .hero h1 {
        font-size: 45px;
    }

    .hero-points {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   RICHCODES FULL-PHOTO HERO
   ========================================================= */

.hero.hero-photo {
    position: relative;

    min-height: 820px;

    padding:
        175px
        0
        80px;

    display: flex;
    align-items: center;

    background-image:
        linear-gradient(
            90deg,
            rgba(5, 15, 34, .97) 0%,
            rgba(5, 15, 34, .94) 25%,
            rgba(5, 15, 34, .76) 43%,
            rgba(5, 15, 34, .28) 60%,
            rgba(5, 15, 34, .05) 76%,
            rgba(5, 15, 34, .02) 100%
        ),
        url('/assets/images/richcodes-hero-bg.png');

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/* subtle darkening at very top for navigation */

.hero.hero-photo::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4, 12, 28, .46) 0%,
            rgba(4, 12, 28, .08) 24%,
            transparent 42%
        );

    pointer-events: none;
}


/* Keep content above overlays */

.hero-content {
    position: relative;
    z-index: 2;
}


/* LEFT CONTENT */

.hero-copy-area {
    width: min(620px, 48vw);
}


.hero-copy-area .eyebrow {
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 3px;
    text-transform: uppercase;

    margin-bottom: 24px;
}


/* HEADLINE */

.hero-copy-area h1 {
    margin: 0;

    max-width: 650px;

    font-family: "Montserrat", sans-serif;

    font-size: clamp(58px, 5.2vw, 82px);
    font-weight: 800;

    line-height: .96;
    letter-spacing: -3px;

    color: #ffffff;
}


.hero-copy-area h1 span {
    display: block;

    margin-top: 12px;

    color: #2f80ff;
}


/* DESCRIPTION */

.hero-copy-area .hero-copy {
    max-width: 610px;

    margin-top: 28px;

    font-size: 18px;
    line-height: 1.6;

    color: rgba(255, 255, 255, .92);
}


/* BUTTONS */

.hero-copy-area .hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 30px;
}


/* BENEFIT POINTS */

.hero-copy-area .hero-points {
    display: flex;

    gap: 30px;

    margin-top: 32px;
}


.hero-copy-area .hero-point {
    display: flex;
    align-items: center;

    gap: 11px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;
}


.hero-copy-area .hero-point svg {
    display: block;

    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    border: 0;
    border-radius: 0;

    background: none;

    color: #2782ff;
}


.hero-copy-area .hero-point small {
    display: block;

    margin-top: 3px;

    color: rgba(255, 255, 255, .72);

    font-size: 10px;
    font-weight: 500;

    letter-spacing: .7px;

    text-transform: uppercase;
}


/* =========================================================
   HERO RESPONSIVE — REFINED
   ========================================================= */

@media (max-width: 1050px) {

    .hero.hero-photo {
        min-height: 760px;

        padding:
            150px
            0
            65px;

        background-position: 61% center;
    }

    .hero-copy-area {
        width: 52%;
    }

    .hero-copy-area h1 {
        font-size: clamp(52px, 6.4vw, 70px);
    }

    .hero-copy-area .hero-copy {
        font-size: 17px;
    }

    .hero-copy-area .hero-points {
        gap: 20px;
    }

    .hero-copy-area .hero-point {
        font-size: 13px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 820px) {

    .hero.hero-photo {
        min-height: 720px;

        padding:
            130px
            0
            55px;

        background-image:
            linear-gradient(
                90deg,
                rgba(5,15,34,.97) 0%,
                rgba(5,15,34,.94) 45%,
                rgba(5,15,34,.72) 68%,
                rgba(5,15,34,.38) 100%
            ),
            url('/assets/images/richcodes-hero-bg.png');

        background-position: 67% center;
    }

    .hero-copy-area {
        width: 64%;
    }

    .hero-copy-area h1 {
        font-size: clamp(46px, 8vw, 62px);

        line-height: .98;
    }

    .hero-copy-area .hero-copy {
        max-width: 520px;

        font-size: 16px;
    }

    .hero-copy-area .hero-actions {
        margin-top: 24px;
    }

    .hero-copy-area .hero-points {
        margin-top: 26px;

        gap: 16px;

        flex-wrap: wrap;
    }

    .hero-copy-area .hero-point svg {
        width: 36px;
        height: 36px;

        flex-basis: 36px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .hero.hero-photo {
        background-image:
            linear-gradient(
                rgba(5,15,34,.96),
                rgba(5,15,34,.93)
            ),
            url('/assets/images/richcodes-hero-bg.png');

        background-position: 76% center;
    }

    .hero.hero-photo {
        padding-top: 112px;
        padding-bottom: 44px;
    }

    .hero-copy-area .eyebrow {
        margin-bottom: 18px;
    }

    .hero-copy-area .hero-copy {
        margin-top: 19px;
    }

    .hero-copy-area h1 {
        max-width: 100%;

        font-size: clamp(40px, 11vw, 48px);

        line-height: .98;

        letter-spacing: -1.8px;
    }

    .hero-copy-area h1 span {
        margin-top: 8px;
    }

    .hero-copy-area .hero-copy {
        max-width: 100%;

        margin-top: 22px;

        font-size: 15px;

        line-height: 1.55;
    }

    .hero-copy-area .hero-actions {
        display: grid;

        grid-template-columns: 1fr;

        gap: 12px;

        margin-top: 24px;
    }

    .hero-copy-area .hero-actions .btn {
        width: 100%;
    }

    .hero-copy-area .hero-points {
        display: grid;

        grid-template-columns: 1fr;

        gap: 13px;

        margin-top: 24px;
    }

    .hero-copy-area .hero-point {
        font-size: 13px;
    }

    .hero-copy-area .hero-point svg {
        width: 34px;
        height: 34px;

        flex-basis: 34px;
    }

    .hero-copy-area .hero-point small {
        font-size: 9px;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

    .hero.hero-photo {
        padding-top: 112px;

        background-position: 76% center;
    }

    .hero-copy-area h1 {
        font-size: 39px;
    }

    .hero-copy-area .hero-copy {
        font-size: 14px;
    }
}


/* =========================================================
   RICHCODES — FEATURED WORK
   ========================================================= */

.featured-work {
    position: relative;
    padding: 105px 0 110px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(59,130,246,.055),
            transparent 34%
        ),
        #ffffff;
}


/* ---------- SECTION HEADING ---------- */

.featured-work-head {
    max-width: 850px;
    margin-bottom: 58px;
}

.featured-work-head .eyebrow {
    margin-bottom: 10px;
}

.featured-work-head .section-title {
    margin-top: 0;
    margin-bottom: 16px;
}

.featured-work-head .section-copy {
    max-width: 760px;
    margin-inline: auto;
}


/* =========================================================
   PROJECT GRID
   ========================================================= */

.featured-projects {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    gap: 26px;
}


/* KAGE — LARGE */

.project-kage {
    grid-column: span 7;
}


/* HOWARD */

.project-howard {
    grid-column: span 5;
}


/* MADISON */

.project-madison {
    grid-column: span 5;
}


/* SUMMIT */

.project-summit {
    grid-column: span 7;
}


/* =========================================================
   CARD
   ========================================================= */

.featured-project {
    position: relative;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e3eaf3;
    border-radius: 20px;

    box-shadow:
        0 15px 45px rgba(15,23,42,.07);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.featured-project:hover {
    transform: translateY(-7px);

    border-color:
        rgba(59,130,246,.28);

    box-shadow:
        0 28px 70px rgba(15,23,42,.14);
}


/* =========================================================
   IMAGE
   ========================================================= */

.project-image {
    position: relative;

    overflow: hidden;

    background: #0b132b;

    aspect-ratio: 16 / 10;
}


.project-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform .6s cubic-bezier(.2,.8,.2,1);
}


.featured-project:hover .project-image img {
    transform: scale(1.035);
}


/* Slightly taller flagship images */

.project-kage .project-image,
.project-summit .project-image {
    aspect-ratio: 16 / 9;
}


/* =========================================================
   STATUS BADGE
   ========================================================= */

.project-status {
    position: absolute;

    left: 20px;
    top: 20px;

    display: inline-flex;
    align-items: center;

    min-height: 30px;

    padding: 7px 12px;

    border-radius: 999px;

    backdrop-filter: blur(10px);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.35px;

    text-transform: uppercase;

    box-shadow:
        0 8px 25px rgba(0,0,0,.15);
}


.project-status-live {
    color: #ffffff;

    background:
        rgba(13,31,58,.82);

    border:
        1px solid rgba(255,255,255,.22);
}


.project-status-concept {
    color: #0f172a;

    background:
        rgba(255,255,255,.90);

    border:
        1px solid rgba(255,255,255,.7);
}


/* =========================================================
   PROJECT INFORMATION
   ========================================================= */

.project-info {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 24px;

    padding: 22px 24px 24px;
}


.project-info h3 {
    margin: 0 0 7px;

    font-family: Montserrat, sans-serif;

    font-size: 22px;
    font-weight: 700;

    letter-spacing: -.4px;

    color: var(--ink);
}


.project-info p {
    margin: 0;

    font-size: 14px;
    line-height: 1.55;

    color: var(--slate);
}


/* ---------- ARROW ---------- */

.project-arrow {
    display: grid;

    place-items: center;

    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    border: 1px solid #d7e1ee;
    border-radius: 50%;

    color: var(--blue);

    font-size: 21px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        border-color .25s ease;
}


.featured-project:hover .project-arrow {
    background: var(--blue);

    color: #ffffff;

    border-color: var(--blue);

    transform: translateX(3px);
}


/* =========================================================
   VIEW ALL BUTTON
   ========================================================= */

.featured-work-actions {
    margin-top: 45px;
}


.featured-work-actions .btn {
    min-width: 170px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .featured-projects {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }


    .project-kage,
    .project-howard,
    .project-madison,
    .project-summit {
        grid-column: span 1;
    }


    .project-image,
    .project-kage .project-image,
    .project-summit .project-image {
        aspect-ratio: 16 / 10;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .featured-work {
        padding:
            76px
            0
            80px;
    }


    .featured-work-head {
        margin-bottom: 38px;
    }


    .featured-projects {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .project-info {
        padding:
            19px
            19px
            21px;
    }


    .project-info h3 {
        font-size: 19px;
    }


    .project-info p {
        font-size: 12px;
    }


    .project-status {
        left: 14px;
        top: 14px;
    }

}

/* =========================================================
   RICHCODES — WHY RICHCODES
   ========================================================= */

.why-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0 70px;

    color: #fff;

    background:
        radial-gradient(
            circle at 76% 0%,
            rgba(59, 130, 246, .17),
            transparent 30%
        ),
        radial-gradient(
            circle at 8% 100%,
            rgba(59, 130, 246, .08),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #06101f 0%,
            #08162a 48%,
            #0b1c35 100%
        );
}


/* subtle grid */

.why-section::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size: 52px 52px;

    pointer-events: none;
}


.why-section .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   TOP AREA
   ========================================================= */

.why-top {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(260px, .9fr)
        minmax(170px, .42fr);

    gap: 55px;

    align-items: center;

    margin-bottom: 52px;
}


/* INTRO */

.why-intro .eyebrow {
    margin-bottom: 14px;
}


.why-intro h2 {
    margin: 0 0 22px;

    max-width: 690px;

    font-family: Montserrat, sans-serif;

    font-size: clamp(46px, 4.7vw, 70px);

    font-weight: 800;

    line-height: .98;

    letter-spacing: -2.5px;

    color: #fff;
}


.why-intro h2 span {
    display: block;

    color: var(--blue);
}


.why-intro p {
    max-width: 760px;

    margin: 0;

    color: #c7d3e2;

    font-size: 17px;
    line-height: 1.7;
}


/* =========================================================
   NO TEMPLATES STATEMENT
   ========================================================= */

.why-statement {
    position: relative;

    transform: rotate(-4deg);

    color: #68a4ff;

    font-size: clamp(31px, 3vw, 47px);

    font-family:
        "Segoe Script",
        "Bradley Hand",
        cursive;

    line-height: 1.04;
}


.why-statement span {
    display: block;
}


.why-statement::after {
    content: "";

    display: block;

    width: 72%;
    height: 5px;

    margin-top: 13px;
    margin-left: 13%;

    border-radius: 999px;

    background: var(--blue);

    transform: rotate(-5deg);
}


/* =========================================================
   SMALL STUDIO TAGLINE
   ========================================================= */

.why-tagline {
    position: relative;

    padding-left: 26px;

    font-family: Montserrat, sans-serif;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.55;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #d9e2ef;
}


.why-tagline::before {
    content: "";

    position: absolute;

    left: 0;
    top: 4px;

    width: 2px;
    height: 100%;

    background:
        linear-gradient(
            var(--blue),
            rgba(59,130,246,0)
        );
}


.why-tagline span {
    display: block;
}


/* =========================================================
   CARDS
   ========================================================= */

.why-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;
}


.why-card {
    position: relative;

    min-height: 365px;

    padding: 30px 30px 32px;

    overflow: hidden;

    border:
        1px solid rgba(59,130,246,.42);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(12,30,55,.88),
            rgba(5,18,35,.95)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.why-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: -40px;
    top: -60px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.12),
            transparent 70%
        );

    pointer-events: none;
}


.why-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(59,130,246,.82);

    box-shadow:
        0 25px 60px rgba(0,0,0,.25),
        0 0 40px rgba(59,130,246,.07);
}


/* =========================================================
   ICONS
   ========================================================= */

.why-icon {
    position: relative;

    display: grid;
    place-items: center;

    width: 76px;
    height: 76px;

    margin-bottom: 27px;

    border-radius: 50%;

    border:
        1px solid rgba(59,130,246,.58);

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.17),
            rgba(59,130,246,.04) 60%,
            transparent 70%
        );

    box-shadow:
        0 0 30px rgba(59,130,246,.16);
}


.why-icon svg {
    width: 38px;
    height: 38px;

    fill: none;

    stroke: #60a5fa;

    stroke-width: 1.55;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   CARD TYPE
   ========================================================= */

.why-card h3 {
    margin: 0 0 16px;

    font-family: Montserrat, sans-serif;

    font-size: 22px;
    line-height: 1.1;

    color: #fff;
}


.why-card p {
    margin: 0;

    color: #c4d0df;

    font-size: 15px;
    line-height: 1.65;
}


/* =========================================================
   FOOTER LINE
   ========================================================= */

.why-footer {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 28px;

    margin-top: 42px;
}


.why-footer > span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(59,130,246,.72)
        );
}


.why-footer > span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(59,130,246,.72),
            transparent
        );
}


.why-footer p {
    margin: 0;

    color: #9aaabd;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.why-footer strong {
    color: #dbe6f4;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .why-top {
        grid-template-columns: 1.5fr 1fr;
    }


    .why-tagline {
        display: none;
    }


    .why-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .why-card {
        min-height: 320px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .why-section {
        padding:
            78px
            0
            58px;
    }


    .why-top {
        grid-template-columns: 1fr;

        gap: 30px;

        margin-bottom: 38px;
    }


    .why-intro h2 {
        font-size: 44px;

        letter-spacing: -2px;
    }


    .why-intro p {
        font-size: 16px;
    }


    .why-statement {
        max-width: 340px;

        font-size: 34px;
    }


    .why-grid {
        grid-template-columns: 1fr;
    }


    .why-card {
        min-height: auto;

        padding:
            26px
            24px
            28px;
    }


    .why-icon {
        width: 66px;
        height: 66px;
    }


    .why-icon svg {
        width: 33px;
        height: 33px;
    }


    .why-footer {
        grid-template-columns: 1fr;

        gap: 14px;

        text-align: center;
    }


    .why-footer > span {
        display: none;
    }

}

/* =========================================================
   RICHCODES — PROCESS
   ========================================================= */

.process-section {
    position: relative;

    padding: 110px 0 72px;

    background:
        radial-gradient(
            circle at 85% 12%,
            rgba(59,130,246,.07),
            transparent 28%
        ),
        #f8fafc;

    overflow: hidden;
}


.process-layout {
    display: grid;

    grid-template-columns:
        minmax(280px, .9fr)
        minmax(0, 2.1fr);

    gap: 70px;

    align-items: start;
}


/* =========================================================
   INTRO
   ========================================================= */

.process-intro h2 {
    margin: 12px 0 24px;

    font-family: Montserrat, sans-serif;

    font-size: clamp(44px, 4.6vw, 68px);

    line-height: .98;

    letter-spacing: -2.4px;

    color: var(--ink);
}


.process-intro h2 span {
    display: block;

    color: var(--blue);
}


.process-intro p {
    margin: 0;

    max-width: 390px;

    color: var(--slate);

    font-size: 17px;
    line-height: 1.7;
}


/* =========================================================
   JOURNEY
   ========================================================= */

.process-journey {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 28px;

    padding-top: 20px;
}


/* connecting line */

.process-journey::before {
    content: "";

    position: absolute;

    left: 7%;
    right: 7%;
    top: 45px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            rgba(59,130,246,.25),
            rgba(59,130,246,.65),
            rgba(59,130,246,.25)
        );
}


/* =========================================================
   STEP
   ========================================================= */

.process-step {
    position: relative;

    padding-top: 58px;
}


.process-number {
    position: absolute;

    left: 0;
    top: -2px;

    font-family: Montserrat, sans-serif;

    font-size: 56px;
    font-weight: 800;

    line-height: 1;

    color: rgba(59,130,246,.24);
}


.process-icon {
    position: relative;

    z-index: 2;

    display: grid;
    place-items: center;

    width: 72px;
    height: 72px;

    margin-bottom: 24px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #eef5ff,
            #dfeeff
        );

    border:
        1px solid #d2e4fb;

    box-shadow:
        0 12px 35px rgba(59,130,246,.08);
}


.process-icon svg {
    width: 34px;
    height: 34px;

    fill: none;

    stroke: var(--blue);

    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.process-step h3 {
    margin: 0 0 12px;

    font-family: Montserrat, sans-serif;

    font-size: 20px;

    color: var(--ink);
}


.process-step p {
    margin: 0;

    color: var(--slate);

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   FOOTER
   ========================================================= */

.process-footer {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 24px;

    margin-top: 58px;
}


.process-footer span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(59,130,246,.45)
        );
}


.process-footer span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(59,130,246,.45),
            transparent
        );
}


.process-footer p {
    margin: 0;

    color: #8493a6;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.4px;

    text-transform: uppercase;
}


.process-footer strong {
    color: var(--ink);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .process-layout {
        grid-template-columns: 1fr;

        gap: 48px;
    }


    .process-intro p {
        max-width: 620px;
    }


}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 820px) {

    .process-journey {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            42px
            28px;
    }


    .process-journey::before {
        display: none;
    }


    .process-step {
        padding-top: 48px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .process-section {
        padding:
            78px
            0
            56px;
    }


    .process-intro h2 {
        font-size: 43px;

        letter-spacing: -2px;
    }


    .process-journey {
        grid-template-columns: 1fr;

        gap: 34px;
    }


    .process-step {
        padding:
            0
            0
            0
            86px;

        min-height: 82px;
    }


    .process-number {
        display: none;
    }


    .process-icon {
        position: absolute;

        left: 0;
        top: 0;

        width: 64px;
        height: 64px;
    }


    .process-icon svg {
        width: 30px;
        height: 30px;
    }


    .process-footer {
        grid-template-columns: 1fr;

        text-align: center;
    }


    .process-footer span {
        display: none;
    }

}

.process-journey {
    padding-top: 42px;
}

.process-section {
    padding: 90px 0 58px;
}

.process-footer {
    margin-top: 38px;
}

/* =========================================================
   RICHCODES — PROCESS FINAL
   ========================================================= */

.process-section {
    position: relative;

    padding: 86px 0 42px;

    background:
        radial-gradient(
            circle at 85% 12%,
            rgba(59,130,246,.07),
            transparent 28%
        ),
        #f8fafc;

    overflow: hidden;
}


.process-layout {
    display: grid;

    grid-template-columns:
        minmax(250px, .82fr)
        minmax(0, 2.18fr);

    gap: 72px;

    align-items: start;
}


/* =========================================================
   LEFT INTRO
   ========================================================= */

.process-intro h2 {
    margin: 12px 0 24px;

    font-family: Montserrat, sans-serif;

    font-size: clamp(44px, 4.6vw, 68px);

    line-height: .98;

    letter-spacing: -2.4px;

    color: var(--ink);
}


.process-intro h2 span {
    display: block;

    color: var(--blue);
}


.process-intro p {
    margin: 0;

    max-width: 390px;

    color: var(--slate);

    font-size: 17px;
    line-height: 1.7;
}


/* =========================================================
   RIGHT SIDE WRAPPER
   ========================================================= */

.process-right {
    min-width: 0;
}


/* =========================================================
   JOURNEY
   ========================================================= */

.process-journey {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 28px;

    padding-top: 20px;
}


/*
   Line now runs through the center of the icon circles.
   Icon top = 77px
   Icon height = 72px
   Center = 113px
*/

.process-journey::before {
    content: "";

    position: absolute;

    left: 8%;
    right: 8%;

    top: 113px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            rgba(59,130,246,.22),
            rgba(59,130,246,.65),
            rgba(59,130,246,.22)
        );

    z-index: 0;
}


/* =========================================================
   STEP
   ========================================================= */

.process-step {
    position: relative;

    padding-top: 57px;

    z-index: 1;
}


.process-number {
    position: absolute;

    left: 8px;
    top: 0;

    font-family: Montserrat, sans-serif;

    font-size: 54px;
    font-weight: 800;

    line-height: 1;

    color: rgba(59,130,246,.22);
}


/* =========================================================
   ICON
   ========================================================= */

.process-icon {
    position: relative;

    z-index: 2;

    display: grid;
    place-items: center;

    width: 72px;
    height: 72px;

    margin-bottom: 24px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #eef5ff,
            #dfeeff
        );

    border:
        1px solid #d2e4fb;

    box-shadow:
        0 12px 35px rgba(59,130,246,.08);
}


.process-icon svg {
    width: 34px;
    height: 34px;

    fill: none;

    stroke: var(--blue);

    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   STEP TYPE
   ========================================================= */

.process-step h3 {
    margin: 0 0 12px;

    font-family: Montserrat, sans-serif;

    font-size: 20px;

    color: var(--ink);
}


.process-step p {
    margin: 0;

    color: var(--slate);

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   CENTERED HANDWRITING
   ========================================================= */

.process-note-centered {
    position: relative;

    width: fit-content;

    max-width: 760px;

    margin:
        54px
        auto
        0;

    padding:
        0
        18px
        12px;

    text-align: center;

    color: #5d8fd4;

    font-family:
        "Segoe Script",
        "Bradley Hand",
        cursive;

    font-size: 34px;

    line-height: 1.05;

    transform: rotate(-2deg);
}


.process-note-centered::after {
    content: "";

    position: absolute;

    left: 14%;
    right: 14%;
    bottom: 0;

    height: 4px;

    border-radius: 999px;

    background: var(--blue);

    transform: rotate(-2deg);
}


/* =========================================================
   FOOTER
   ========================================================= */

.process-footer {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 24px;

    margin-top: 30px;
}


.process-footer span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(59,130,246,.45)
        );
}


.process-footer span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(59,130,246,.45),
            transparent
        );
}


.process-footer p {
    margin: 0;

    color: #8493a6;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.4px;

    text-transform: uppercase;
}


.process-footer strong {
    color: var(--ink);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .process-layout {
        grid-template-columns: 1fr;

        gap: 42px;
    }


    .process-intro p {
        max-width: 620px;
    }


    .process-note-centered {
        margin-top: 30px;
    }

}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 820px) {

    .process-journey {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            38px
            28px;
    }


    .process-journey::before {
        display: none;
    }


    .process-step {
        padding-top: 52px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .process-section {
        padding:
            70px
            0
            44px;
    }


    .process-intro h2 {
        font-size: 43px;

        letter-spacing: -2px;
    }


    .process-journey {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .process-step {
        min-height: 78px;

        padding:
            0
            0
            0
            84px;
    }


    .process-number {
        display: none;
    }


    .process-icon {
        position: absolute;

        left: 0;
        top: 0;

        width: 62px;
        height: 62px;
    }


    .process-icon svg {
        width: 29px;
        height: 29px;
    }


    .process-note-centered {
        margin-top: 34px;

        font-size: 29px;
    }


    .process-footer {
        grid-template-columns: 1fr;

        margin-top: 25px;

        text-align: center;
    }


    .process-footer span {
        display: none;
    }

}


/* =========================================================
   RICHCODES — MEET RICH FINAL
   ========================================================= */

.meet-rich-section {
    padding: 92px 0;

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(59,130,246,.05),
            transparent 28%
        ),
        #ffffff;
}


.meet-rich-grid {
    display: grid;

    grid-template-columns:
        minmax(285px, .86fr)
        minmax(0, 1.28fr)
        minmax(255px, .72fr);

    gap: 48px;

    align-items: stretch;
}


/* =========================================================
   PHOTO
   ========================================================= */

.meet-rich-photo {
    position: relative;

    min-height: 690px;

    overflow: hidden;

    border-radius: 22px;

    background: #0b132b;

    box-shadow:
        0 24px 70px rgba(15,23,42,.16);
}


.meet-rich-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
       Keeps the face high enough and trims some sweater
       area from the bottom.
    */
    object-position: center 18%;
}


.meet-rich-photo::after {
    content: "";

    position: absolute;

    inset: auto 0 0;

    height: 35%;

    background:
        linear-gradient(
            transparent,
            rgba(5,13,28,.84)
        );

    pointer-events: none;
}


.meet-rich-photo-caption {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 25px;

    z-index: 2;

    color: #fff;
}


.rich-signature {
    margin-bottom: 4px;

    font-family:
        "Segoe Script",
        "Bradley Hand",
        cursive;

    font-size: 48px;

    line-height: 1;

    transform: rotate(-4deg);
}


.rich-roles {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: rgba(255,255,255,.8);
}


.rich-roles span {
    color: var(--blue);
}


/* =========================================================
   CENTER COPY
   ========================================================= */

.meet-rich-copy {
    padding-top: 14px;
}


.meet-rich-copy h2 {
    margin: 11px 0 7px;

    font-family: Montserrat, sans-serif;

    font-size: clamp(50px, 4.7vw, 70px);

    font-weight: 800;

    line-height: .98;

    letter-spacing: -2.7px;

    color: var(--ink);
}


.meet-rich-copy h2 span {
    color: var(--blue);
}


.meet-rich-copy h3 {
    margin: 0 0 30px;

    font-family: Montserrat, sans-serif;

    font-size: 22px;

    color: var(--blue);
}


.meet-rich-copy p {
    margin: 0 0 22px;

    color: var(--slate);

    font-size: 16px;

    line-height: 1.75;
}


.meet-rich-copy .btn {
    margin-top: 6px;
}


/* =========================================================
   RIGHT SIDE
   ========================================================= */

.meet-rich-side {
    display: grid;

    align-content: start;

    gap: 0;
}


/* =========================================================
   BENEFITS
   ========================================================= */

.rich-feature {
    display: grid;

    grid-template-columns: 52px 1fr;

    gap: 16px;

    align-items: center;

    padding: 22px 0;

    border-bottom: 1px solid #e3eaf2;
}


.rich-feature:first-child {
    padding-top: 5px;
}


.rich-feature-icon {
    display: grid;

    place-items: center;

    width: 50px;
    height: 50px;

    border-radius: 50%;

    background: #eef5ff;

    border: 1px solid #d8e7fb;

    font-family: Montserrat, sans-serif;

    font-size: 12px;
    font-weight: 800;

    color: var(--blue);
}


.rich-feature strong {
    display: block;

    margin-bottom: 4px;

    font-family: Montserrat, sans-serif;

    font-size: 15px;

    color: var(--ink);
}


.rich-feature span {
    display: block;

    color: var(--slate);

    font-size: 13px;

    line-height: 1.45;
}


/* =========================================================
   TESTIMONIAL
   ========================================================= */

.rich-quote {
    margin-top: 30px;

    padding: 28px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #f4f8ff,
            #edf4fc
        );

    border: 1px solid #dbe7f4;
}


.rich-quote .eyebrow {
    margin-bottom: 10px;
}


.rich-quote .quote-mark {
    margin-bottom: -12px;

    color: var(--blue);

    font-size: 56px;

    line-height: 1;
}


.rich-quote blockquote {
    margin: 0 0 18px;

    color: #334155;

    font-size: 15px;

    font-style: italic;

    line-height: 1.65;
}


.rich-quote cite {
    font-style: normal;

    font-size: 12px;
    font-weight: 700;

    color: var(--blue);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .meet-rich-grid {
        grid-template-columns:
            minmax(280px,.9fr)
            minmax(0,1.2fr);
    }


    .meet-rich-side {
        grid-column: 1 / -1;

        grid-template-columns:
            repeat(3,1fr);

        gap: 18px;
    }


    .rich-feature {
        border: 1px solid #e3eaf2;

        border-radius: 15px;

        padding: 20px;
    }


    .rich-feature:first-child {
        padding-top: 20px;
    }


    .rich-quote {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .meet-rich-section {
        padding: 72px 0;
    }


    .meet-rich-grid {
        grid-template-columns: 1fr;

        gap: 34px;
    }


    .meet-rich-photo {
        min-height: 560px;
    }


    .meet-rich-photo img {
        object-position: center 15%;
    }


    .meet-rich-copy {
        padding-top: 0;
    }


    .meet-rich-copy h2 {
        font-size: 48px;
    }


    .meet-rich-side {
        grid-template-columns: 1fr;
    }


    .rich-quote {
        grid-column: auto;
    }

}


/* =========================================================
   RICHCODES — FINAL CTA
   ========================================================= */

.cta-band {
    position: relative;
    overflow: hidden;

    padding: 92px 0 88px;

    color: #fff;
    text-align: center;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(59,130,246,.24),
            transparent 42%
        ),
        linear-gradient(
            120deg,
            #07101f 0%,
            #0b1830 52%,
            #10264a 100%
        );
}


/* subtle RichCodes grid */

.cta-band::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: .16;

    background-image:
        linear-gradient(
            rgba(255,255,255,.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.07) 1px,
            transparent 1px
        );

    background-size: 64px 64px;

    pointer-events: none;
}


/* blue glow */

.cta-band::after {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(59,130,246,.10);

    filter: blur(80px);

    pointer-events: none;
}


.cta-inner {
    position: relative;
    z-index: 2;

    max-width: 920px;
    margin: 0 auto;
}


.cta-band .eyebrow {
    margin-bottom: 18px;

    color: #5d9cff;
}


.cta-band h2 {
    margin: 0;

    font-family: Montserrat, sans-serif;

    font-size: clamp(44px, 5vw, 72px);

    font-weight: 800;

    line-height: 1.03;

    letter-spacing: -2.5px;
}


.cta-band h2 span {
    color: #3b82f6;
}


.cta-band p {
    max-width: 650px;

    margin: 25px auto 30px;

    color: #c9d5e5;

    font-size: 17px;

    line-height: 1.65;
}


.cta-band .btn {
    min-width: 220px;

    justify-content: center;

    box-shadow:
        0 14px 40px rgba(37,99,235,.28);
}


.cta-handwritten {
    position: relative;

    width: max-content;
    max-width: 100%;

    margin: 38px auto 0;

    padding-bottom: 11px;

    font-family:
        "Segoe Script",
        "Bradley Hand",
        cursive;

    font-size: clamp(20px, 2vw, 28px);

    color: #79aaff;

    transform: rotate(-1deg);
}


/* handwritten underline */

.cta-handwritten::after {
    content: "";

    position: absolute;

    left: 7%;
    right: 7%;
    bottom: 0;

    height: 3px;

    border-radius: 999px;

    background: #3b82f6;

    transform: rotate(-1deg);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .cta-band {
        padding: 72px 0 68px;
    }

    .cta-band h2 {
        font-size: 43px;
        letter-spacing: -1.5px;
    }

    .cta-band p {
        font-size: 16px;
    }

    .cta-handwritten {
        margin-top: 32px;
        font-size: 20px;
    }

}


/* =========================================================
   RICHCODES — FOOTER FINAL
   ========================================================= */

.site-footer {
    position: relative;

    padding:
        62px
        0
        24px;

    color: #dce5f0;

    background:
        radial-gradient(
            circle at 82% 0%,
            rgba(59,130,246,.10),
            transparent 30%
        ),
        #06101f;
}


/* =========================================================
   MAIN GRID
   ========================================================= */

.footer-grid {
    display: grid;

    grid-template-columns:
        1.55fr
        .65fr
        .85fr
        1fr;

    gap: 52px;

    align-items: start;
}


/* =========================================================
   BRAND
   ========================================================= */

.footer-logo {
    display: inline-block;
}


.footer-logo img {
    display: block;

    width: 310px;
    max-width: 100%;

    height: auto;
}


.footer-blurb {
    max-width: 390px;

    margin:
        20px
        0
        0;

    color: #91a4ba;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   COLUMN HEADINGS
   ========================================================= */

.site-footer h2 {
    margin:
        7px
        0
        18px;

    font-family: Montserrat, sans-serif;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #ffffff;
}


/* =========================================================
   LINKS
   ========================================================= */

.footer-links {
    display: grid;

    gap: 10px;

    color: #9fb0c3;

    font-size: 14px;
}


.footer-links a {
    width: fit-content;

    transition:
        color .2s ease,
        transform .2s ease;
}


.footer-links a:hover {
    color: #ffffff;

    transform: translateX(3px);
}


/* =========================================================
   CLOSING PHRASE
   ========================================================= */

.footer-phrase {
    padding-top: 5px;

    font-family: Montserrat, sans-serif;
}


.footer-phrase span {
    display: block;

    margin-bottom: 4px;

    color: #d9e4ef;

    font-size: 17px;
    font-weight: 600;
}


.footer-phrase strong {
    display: block;

    color: var(--blue);

    font-size: 24px;
    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -.5px;
}


.footer-phrase-line {
    width: 55px;
    height: 3px;

    margin-top: 18px;

    border-radius: 999px;

    background: var(--blue);
}


/* =========================================================
   BOTTOM ROW
   ========================================================= */

.footer-bottom {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 30px;

    margin-top: 52px;

    padding-top: 20px;

    border-top:
        1px solid rgba(255,255,255,.09);

    color: #74879c;

    font-size: 11px;
}


.footer-made strong {
    color: #9eb0c3;

    font-weight: 600;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .footer-grid {
        grid-template-columns:
            1.4fr
            .7fr
            .9fr;

        gap: 42px;
    }


    .footer-phrase {
        grid-column: 1 / -1;

        padding-top: 12px;
    }


    .footer-phrase strong br {
        display: none;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .site-footer {
        padding:
            50px
            0
            22px;
    }


    .footer-grid {
        grid-template-columns:
            1fr
            1fr;

        gap:
            36px
            28px;
    }


    .footer-brand-block {
        grid-column:
            1 / -1;
    }


    .footer-logo img {
        width: 270px;
    }


    .footer-phrase {
        grid-column:
            1 / -1;
    }


    .footer-bottom {
        display: grid;

        gap: 8px;

        margin-top: 38px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .footer-grid {
        grid-template-columns: 1fr;
    }


    .footer-brand-block,
    .footer-phrase {
        grid-column: auto;
    }

}


/* =========================================================
   RICHCODES — SERVICES HERO
   ========================================================= */

.services-hero {
    position: relative;
    overflow: hidden;

    padding:
        165px
        0
        105px;

    color: #fff;

    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(59,130,246,.20),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #06101f 0%,
            #09182d 48%,
            #10264a 100%
        );
}


/* subtle background grid */

.services-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    pointer-events: none;
}


.services-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0,1.55fr)
        minmax(300px,.75fr);

    gap: 80px;

    align-items: center;
}


/* =========================================================
   LEFT COPY
   ========================================================= */

.services-hero-copy .eyebrow {
    margin-bottom: 18px;
}


.services-hero-copy h1 {
    margin: 0;

    max-width: 850px;

    font-family: Montserrat, sans-serif;

    font-size: clamp(58px, 5.5vw, 84px);

    font-weight: 800;

    line-height: .97;

    letter-spacing: -3px;

    color: #fff;
}


.services-hero-copy h1 span {
    display: block;

    margin-top: 8px;

    color: var(--blue);
}


.services-hero-copy > p {
    max-width: 720px;

    margin:
        28px
        0
        0;

    color: #c7d3e2;

    font-size: 18px;

    line-height: 1.7;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.services-hero-actions {
    display: flex;

    align-items: center;

    gap: 28px;

    margin-top: 34px;
}


.services-text-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #dce7f5;

    font-size: 14px;
    font-weight: 600;

    transition:
        color .2s ease,
        gap .2s ease;
}


.services-text-link:hover {
    color: #fff;

    gap: 13px;
}


/* =========================================================
   RIGHT MESSAGE
   ========================================================= */

.services-hero-message {
    position: relative;

    padding-left: 32px;

    border-left:
        1px solid rgba(59,130,246,.40);
}


.services-script {
    color: #69a3ff;

    font-family:
        "Segoe Script",
        "Bradley Hand",
        cursive;

    font-size: clamp(34px,3vw,46px);

    line-height: 1.07;

    transform: rotate(-3deg);
}


.services-message-line {
    width: 78%;
    height: 4px;

    margin:
        17px
        0
        26px;

    border-radius: 999px;

    background: var(--blue);

    transform: rotate(-3deg);
}


.services-hero-message p {
    max-width: 270px;

    margin: 0;

    color: #9fb0c4;

    font-size: 14px;

    line-height: 1.7;
}


.services-hero-message strong {
    display: block;

    margin-bottom: 3px;

    color: #fff;

    font-family: Montserrat, sans-serif;

    font-size: 15px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

    .services-hero-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .services-hero-message {
        max-width: 500px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .services-hero {
        padding:
            125px
            0
            70px;
    }


    .services-hero-grid {
        gap: 42px;
    }


    .services-hero-copy h1 {
        font-size: 45px;

        letter-spacing: -2px;
    }


    .services-hero-copy > p {
        margin-top: 22px;

        font-size: 16px;
    }


    .services-hero-actions {
        display: grid;

        gap: 20px;

        margin-top: 28px;
    }


    .services-hero-actions .btn {
        width: 100%;
    }


    .services-hero-message {
        padding-left: 22px;
    }


    .services-script {
        font-size: 32px;
    }

}

/* =========================================================
   SERVICE FEATURE
   ========================================================= */

.service-feature {
    padding: 120px 0;
    background: #ffffff;
}

.service-feature-grid {
    display: grid;
    grid-template-columns: 90px minmax(0, 1.2fr) minmax(340px, .8fr);
    gap: 70px;
    align-items: start;
}


/* NUMBER */

.service-feature-number span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    border: 1px solid #cfe0fa;
    border-radius: 50%;

    background: #f1f6ff;

    color: #347ff5;

    font-size: 18px;
    font-weight: 800;
}


/* MAIN COPY */

.service-feature-main .eyebrow {
    margin-bottom: 22px;

    color: #347ff5;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 3px;
    text-transform: uppercase;
}

.service-feature-main h2 {
    max-width: 650px;

    margin: 0;

    color: #071328;

    font-family: "Montserrat", sans-serif;

    font-size: clamp(46px, 4.2vw, 68px);
    font-weight: 800;

    line-height: 1;
    letter-spacing: -2.5px;
}

.service-feature-main h2 span {
    display: block;
    color: #347ff5;
}

.service-feature-main p {
    max-width: 670px;

    margin: 24px 0 0;

    color: #64748b;

    font-size: 18px;
    line-height: 1.75;
}

.service-feature-main .service-feature-lead {
    margin-top: 30px;

    color: #334155;

    font-size: 21px;
    line-height: 1.65;
}

.service-feature-main .btn {
    margin-top: 34px;
}


/* SERVICE DETAILS */

.service-feature-details {
    padding: 38px;

    border: 1px solid #dce7f5;
    border-radius: 28px;

    background: #f7faff;

    box-shadow: 0 22px 60px rgba(15, 40, 80, .07);
}

.service-detail {
    display: flex;
    gap: 18px;

    padding: 22px 0;

    border-bottom: 1px solid #dce7f5;
}

.service-detail:first-child {
    padding-top: 0;
}

.service-detail:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.service-detail-check {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: #e6f0ff;
    color: #347ff5;

    font-size: 17px;
    font-weight: 800;
}

.service-detail h3 {
    margin: 2px 0 7px;

    color: #071328;

    font-size: 18px;
    font-weight: 800;
}

.service-detail p {
    margin: 0;

    color: #64748b;

    font-size: 15px;
    line-height: 1.55;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .service-feature-grid {
        grid-template-columns: 70px 1fr;
        gap: 40px;
    }

    .service-feature-details {
        grid-column: 2;
    }

}


@media (max-width: 700px) {

    .service-feature {
        padding: 80px 0;
    }

    .service-feature-grid {
        display: block;
    }

    .service-feature-number {
        margin-bottom: 30px;
    }

    .service-feature-number span {
        width: 58px;
        height: 58px;

        font-size: 16px;
    }

    .service-feature-main h2 {
        font-size: 43px;
        letter-spacing: -1.8px;
    }

    .service-feature-main .service-feature-lead {
        font-size: 19px;
    }

    .service-feature-main p {
        font-size: 16px;
    }

    .service-feature-details {
        margin-top: 50px;
        padding: 28px 24px;

        border-radius: 22px;
    }

}


.service-feature-grid-alt {
    grid-template-columns:
        90px
        minmax(320px, .72fr)
        minmax(0, 1.28fr);
}

.service-redesign-copy {
    padding-left: 30px;
}

.service-redesign-copy h2 {
    max-width: 760px;
}


/* =========================================================
   SERVICE 03 — ONGOING SUPPORT
   ========================================================= */

.service-support {
    position: relative;
    overflow: hidden;

    padding: 100px 0 86px;

    color: #fff;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(59,130,246,.18),
            transparent 32%
        ),
        linear-gradient(
            120deg,
            #06101f 0%,
            #0a1830 50%,
            #10264a 100%
        );
}


/* subtle grid */

.service-support::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size: 56px 56px;

    pointer-events: none;
}


.service-support .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   HEADER
   ========================================================= */

.service-support-head {
    display: grid;

    grid-template-columns:
        90px
        minmax(0,1fr);

    gap: 38px;

    align-items: start;

    margin-bottom: 48px;
}


.service-support-number span {
    border-color: rgba(59,130,246,.45);

    background: rgba(59,130,246,.10);

    color: #6aa4ff;
}


.service-support-copy .eyebrow {
    margin-bottom: 16px;
}


.service-support-copy h2 {
    margin: 0;

    max-width: 850px;

    font-family: Montserrat, sans-serif;

    font-size: clamp(48px, 4.5vw, 68px);

    font-weight: 800;

    line-height: .98;

    letter-spacing: -2.5px;
}


.service-support-copy h2 span {
    display: block;

    margin-top: 7px;

    color: var(--blue);
}


.service-support-copy p {
    max-width: 720px;

    margin:
        24px
        0
        0;

    color: #c2d0df;

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================================
   CARDS
   ========================================================= */

.service-support-grid {
    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 22px;
}


.support-card {
    padding: 30px;

    border:
        1px solid rgba(96,165,250,.28);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(13,31,57,.88),
            rgba(6,20,38,.95)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.support-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(96,165,250,.65);

    box-shadow:
        0 22px 55px rgba(0,0,0,.20);
}


.support-icon {
    display: grid;

    place-items: center;

    width: 66px;
    height: 66px;

    margin-bottom: 24px;

    border-radius: 50%;

    border:
        1px solid rgba(96,165,250,.5);

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.16),
            rgba(59,130,246,.03) 70%
        );
}


.support-icon svg {
    width: 31px;
    height: 31px;

    fill: none;

    stroke: #60a5fa;

    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.support-card h3 {
    margin: 0 0 14px;

    font-family: Montserrat, sans-serif;

    font-size: 20px;

    color: #fff;
}


.support-card p {
    margin: 0;

    color: #c4d0df;

    font-size: 15px;

    line-height: 1.65;
}


/* =========================================================
   HANDWRITTEN NOTE
   ========================================================= */

.service-support-note {
    position: relative;

    width: fit-content;

    max-width: 100%;

    margin:
        42px
        auto
        0;

    padding-bottom: 12px;

    text-align: center;

    color: #6ea7ff;

    font-family:
        "Segoe Script",
        "Bradley Hand",
        cursive;

    font-size: clamp(26px,2.7vw,38px);

    line-height: 1.1;

    transform: rotate(-2deg);
}


.service-support-note::after {
    content: "";

    position: absolute;

    left: 10%;
    right: 10%;
    bottom: 0;

    height: 4px;

    border-radius: 999px;

    background: var(--blue);

    transform: rotate(-2deg);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .service-support-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .service-support {
        padding:
            76px
            0
            62px;
    }


    .service-support-head {
        display: block;

        margin-bottom: 36px;
    }


    .service-support-number {
        margin-bottom: 28px;
    }


    .service-support-copy h2 {
        font-size: 43px;

        letter-spacing: -1.8px;
    }


    .service-support-copy p {
        font-size: 16px;
    }


    .support-card {
        padding: 26px 24px;
    }


    .service-support-note {
        margin-top: 34px;

        font-size: 28px;
    }

}

/* =========================================================
   SERVICES CTA
   ========================================================= */

.services-cta {
    position: relative;

    padding: 110px 0 105px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #eef5ff 100%
        );

    color: #07172e;
}


/* subtle grid */

.services-cta::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: .32;

    background-image:
        linear-gradient(rgba(47,128,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47,128,255,.08) 1px, transparent 1px);

    background-size: 80px 80px;

    pointer-events: none;
}


.services-cta-inner {
    position: relative;
    z-index: 1;

    max-width: 820px;

    margin: 0 auto;

    text-align: center;
}


.services-cta .eyebrow {
    margin-bottom: 22px;

    color: #4388ff;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 3px;
    text-transform: uppercase;
}


.services-cta h2 {
    margin: 0;

    font-family: "Montserrat", sans-serif;

    font-size: clamp(48px, 5vw, 72px);
    font-weight: 800;

    line-height: 1.02;
    letter-spacing: -2.5px;

    color: #08162d;
}

.services-cta h2 span {
    display: block;
    color: #3782ff;
}


.services-cta p {
    max-width: 690px;

    margin: 28px auto 0;

    color: #64748b;

    font-size: 18px;
    line-height: 1.7;
}


.services-cta .btn {
    margin-top: 34px;
}


.services-cta-note {
    display: inline-block;

    position: relative;

    margin-top: 48px;

    color: #65a0ff;

    font-family:
        "Segoe Script",
        "Bradley Hand",
        cursive;

    font-size: 34px;
    line-height: 1.1;

    transform: rotate(-1deg);
}


.services-cta-note::after {
    content: "";

    display: block;

    width: 92%;

    height: 4px;

    margin: 8px auto 0;

    border-radius: 999px;

    background: #3782ff;

    transform: rotate(-2deg);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .services-cta {
        padding: 80px 20px 76px;
    }


    .services-cta h2 {
        font-size: 46px;

        letter-spacing: -2px;
    }


    .services-cta p {
        margin-top: 24px;

        font-size: 17px;
        line-height: 1.65;
    }


    .services-cta .btn {
        display: flex;

        width: 100%;

        justify-content: center;

        margin-top: 30px;
    }


    .services-cta-note {
        margin-top: 42px;

        font-size: 29px;
    }

}

/* =========================================================
   RICHCODES — WORK HERO
   ========================================================= */

.work-hero {
    position: relative;
    overflow: hidden;

    padding:
        165px
        0
        105px;

    color: #fff;

    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(59,130,246,.19),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #06101f 0%,
            #09182d 48%,
            #10264a 100%
        );
}


/* subtle grid */

.work-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    pointer-events: none;
}


.work-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0,1.5fr)
        minmax(310px,.8fr);

    gap: 85px;

    align-items: center;
}


/* =========================================================
   MAIN COPY
   ========================================================= */

.work-hero-copy .eyebrow {
    margin-bottom: 18px;
}


.work-hero-copy h1 {
    margin: 0;

    max-width: 900px;

    font-family: Montserrat, sans-serif;

    font-size: clamp(58px,5.4vw,82px);

    font-weight: 800;

    line-height: .97;

    letter-spacing: -3px;

    color: #fff;
}


.work-hero-copy h1 span {
    display: block;

    margin-top: 8px;

    color: var(--blue);
}


.work-hero-copy > p {
    max-width: 720px;

    margin:
        28px
        0
        0;

    color: #c7d3e2;

    font-size: 18px;

    line-height: 1.7;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.work-hero-actions {
    display: flex;

    align-items: center;

    gap: 28px;

    margin-top: 34px;
}


.work-text-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #dce7f5;

    font-size: 14px;

    font-weight: 600;

    transition:
        color .2s ease,
        gap .2s ease;
}


.work-text-link:hover {
    color: #fff;

    gap: 13px;
}


/* =========================================================
   SIDE MESSAGE
   ========================================================= */

.work-hero-side {
    padding-left: 32px;

    border-left:
        1px solid rgba(59,130,246,.42);
}


.work-script {
    color: #69a3ff;

    font-family:
        "Segoe Script",
        "Bradley Hand",
        cursive;

    font-size: clamp(32px,2.9vw,44px);

    line-height: 1.08;

    transform: rotate(-3deg);
}


.work-script-line {
    width: 82%;

    height: 4px;

    margin:
        17px
        0
        25px;

    border-radius: 999px;

    background: var(--blue);

    transform: rotate(-3deg);
}


.work-hero-side p {
    max-width: 285px;

    margin: 0;

    color: #9fb0c4;

    font-size: 14px;

    line-height: 1.7;
}


.work-hero-side strong {
    display: block;

    margin-bottom: 4px;

    color: #fff;

    font-family: Montserrat, sans-serif;

    font-size: 15px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

    .work-hero-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .work-hero-side {
        max-width: 520px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .work-hero {
        padding:
            125px
            0
            72px;
    }


    .work-hero-grid {
        gap: 42px;
    }


    .work-hero-copy h1 {
        font-size: 45px;

        letter-spacing: -2px;
    }


    .work-hero-copy > p {
        margin-top: 22px;

        font-size: 16px;
    }


    .work-hero-actions {
        display: grid;

        gap: 20px;

        margin-top: 28px;
    }


    .work-hero-actions .btn {
        width: 100%;
    }


    .work-hero-side {
        padding-left: 22px;
    }


    .work-script {
        font-size: 31px;
    }

}

/* =========================================================
   RICHCODES — WORK / KAGE CASE (Section 01, scoped)
   ========================================================= */

.rc-kage-case {
    background: #fff;
    color: var(--ink);
    padding: 108px 0 96px;
}

.rc-kage-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 34px;
}

.rc-kage-number {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1.5px solid #cbd5e1;
    border-radius: 50%;
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
    color: var(--ink);
    background: #fff;
}

.rc-kage-live {
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--blue);
}

.rc-kage-grid {
    display: grid;
    grid-template-columns: 56% 44%;
    grid-template-areas:
        "visual heading"
        "visual body";
    gap: 28px 64px;
    align-items: start;
}

.rc-kage-heading {
    grid-area: heading;
    min-width: 0;
}

.rc-kage-visual {
    grid-area: visual;
    min-width: 0;
}

.rc-kage-body {
    grid-area: body;
    min-width: 0;
}

.rc-kage-eyebrow {
    margin-bottom: 14px;
}

.rc-kage-title {
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-size: clamp(34px, 3.4vw, 48px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.4px;
    color: var(--ink);
}

.rc-kage-title span {
    color: var(--blue);
}

.rc-kage-browser {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3eaf3;
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
}

.rc-kage-browser-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 18px;
    background: #f1f5f9;
    border-bottom: 1px solid #e3eaf3;
}

.rc-kage-browser-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}

.rc-kage-browser-bar span:first-child {
    background: var(--blue);
}

.rc-kage-browser img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 12 / 13;
    object-fit: cover;
    object-position: top center;
}

.rc-kage-body p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.7;
    color: #475569;
    max-width: 46ch;
}

.rc-kage-services {
    margin: 26px 0 28px;
}

.rc-kage-services-label {
    display: block;
    margin-bottom: 12px;
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--slate);
}

.rc-kage-services ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
    padding: 0;
}

.rc-kage-services li {
    padding: 8px 14px;
    border: 1px solid #e3eaf3;
    border-radius: 999px;
    background: #f8fafc;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
}

.rc-kage-btn {
    text-decoration: none;
}

.rc-kage-results {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 44px;
    margin: 72px 0 0;
    padding: 34px 0 0;
    border-top: 1px solid #e3eaf3;
}

.rc-kage-results li {
    display: grid;
    gap: 6px;
    align-content: start;
    padding-left: 28px;
    border-left: 1px solid #e3eaf3;
}

.rc-kage-results li:first-child {
    padding-left: 0;
    border-left: 0;
}

.rc-kage-result-num {
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
    color: var(--blue);
}

.rc-kage-results strong {
    font-family: Montserrat, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--ink);
}

.rc-kage-results span:last-child {
    font-size: 14px;
    line-height: 1.6;
    color: var(--slate);
}

@media (max-width: 960px) {
    .rc-kage-case {
        padding: 84px 0 72px;
    }

    .rc-kage-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "heading"
            "visual"
            "body";
        gap: 30px;
    }

    .rc-kage-browser img {
        aspect-ratio: 12 / 13;
    }

    .rc-kage-body p {
        max-width: 62ch;
    }

    .rc-kage-results {
        grid-template-columns: 1fr;
        gap: 26px;
        margin-top: 54px;
    }

    .rc-kage-results li {
        padding-left: 0;
        padding-top: 22px;
        border-left: 0;
        border-top: 1px solid #e3eaf3;
    }

    .rc-kage-results li:first-child {
        padding-top: 0;
        border-top: 0;
    }
}

@media (max-width: 600px) {
    .rc-kage-case {
        padding: 68px 0 60px;
    }

    .rc-kage-top {
        margin-bottom: 22px;
    }

    .rc-kage-number {
        width: 46px;
        height: 46px;
        font-size: 14px;
    }

    .rc-kage-title {
        font-size: 35px;
        letter-spacing: -1.1px;
    }

    .rc-kage-browser {
        border-radius: 16px;
    }

    .rc-kage-services li {
        font-size: 12.5px;
    }

    .rc-kage-btn {
        width: 100%;
    }
}

/* =========================================================
   RICHCODES — WORK / HOWARD CASE (Section 02, scoped)
   ========================================================= */

.rc-howard-case {
    background: #fff;
    color: var(--ink);
    padding: 108px 0 96px;
    border-top: 1px solid #e3eaf3;
}

.rc-howard-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 34px;
}

.rc-howard-number {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1.5px solid #cbd5e1;
    border-radius: 50%;
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
    color: var(--ink);
    background: #fff;
}

.rc-howard-live {
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--blue);
}

.rc-howard-grid {
    display: grid;
    grid-template-columns: 44% 56%;
    grid-template-areas:
        "heading visual"
        "body visual";
    gap: 28px 64px;
    align-items: start;
}

.rc-howard-heading {
    grid-area: heading;
    min-width: 0;
}

.rc-howard-visual {
    grid-area: visual;
    min-width: 0;
}

.rc-howard-body {
    grid-area: body;
    min-width: 0;
}

.rc-howard-eyebrow {
    margin-bottom: 14px;
}

.rc-howard-title {
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-size: clamp(34px, 3.4vw, 48px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.4px;
    color: var(--ink);
}

.rc-howard-title span {
    color: var(--blue);
}

.rc-howard-browser {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3eaf3;
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
    max-width: 100%;
}

.rc-howard-browser-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 18px;
    background: #f1f5f9;
    border-bottom: 1px solid #e3eaf3;
}

.rc-howard-browser-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}

.rc-howard-browser-bar span:first-child {
    background: var(--blue);
}

.rc-howard-browser img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 12 / 13;
    object-fit: cover;
    object-position: top center;
}

.rc-howard-body p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.7;
    color: #475569;
    max-width: 46ch;
}

.rc-howard-services {
    margin: 26px 0 28px;
}

.rc-howard-services-label {
    display: block;
    margin-bottom: 12px;
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--slate);
}

.rc-howard-services ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
    padding: 0;
}

.rc-howard-services li {
    padding: 8px 14px;
    border: 1px solid #e3eaf3;
    border-radius: 999px;
    background: #f8fafc;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
}

.rc-howard-btn {
    text-decoration: none;
}

.rc-howard-results {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 44px;
    margin: 72px 0 0;
    padding: 34px 0 0;
    border-top: 1px solid #e3eaf3;
}

.rc-howard-results li {
    display: grid;
    gap: 6px;
    align-content: start;
    padding-left: 28px;
    border-left: 1px solid #e3eaf3;
}

.rc-howard-results li:first-child {
    padding-left: 0;
    border-left: 0;
}

.rc-howard-result-num {
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
    color: var(--blue);
}

.rc-howard-results strong {
    font-family: Montserrat, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--ink);
}

.rc-howard-results span:last-child {
    font-size: 14px;
    line-height: 1.6;
    color: var(--slate);
}

@media (max-width: 960px) {
    .rc-howard-case {
        padding: 84px 0 72px;
    }

    .rc-howard-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "heading"
            "visual"
            "body";
        gap: 30px;
    }

    .rc-howard-browser {
        max-width: 560px;
    }

    .rc-howard-body p {
        max-width: 62ch;
    }

    .rc-howard-results {
        grid-template-columns: 1fr;
        gap: 26px;
        margin-top: 54px;
    }

    .rc-howard-results li {
        padding-left: 0;
        padding-top: 22px;
        border-left: 0;
        border-top: 1px solid #e3eaf3;
    }

    .rc-howard-results li:first-child {
        padding-top: 0;
        border-top: 0;
    }
}

@media (max-width: 600px) {
    .rc-howard-case {
        padding: 68px 0 60px;
    }

    .rc-howard-top {
        margin-bottom: 22px;
    }

    .rc-howard-number {
        width: 46px;
        height: 46px;
        font-size: 14px;
    }

    .rc-howard-title {
        font-size: 32px;
        letter-spacing: -1px;
        line-height: 1.12;
        overflow-wrap: break-word;
    }

    .rc-howard-browser {
        border-radius: 16px;
        max-width: none;
    }

    .rc-howard-browser img {
        aspect-ratio: 12 / 13;
    }

    .rc-howard-services li {
        font-size: 12.5px;
    }

    .rc-howard-btn {
        width: 100%;
    }
}

/* =========================================================
   RICHCODES — WORK / MADISON CASE (Section 03, scoped)
   ========================================================= */

.rc-madison-case {
    background: #fff;
    color: var(--ink);
    padding: 108px 0 96px;
    border-top: 1px solid #e3eaf3;
}

.rc-madison-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 34px;
}

.rc-madison-number {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1.5px solid #cbd5e1;
    border-radius: 50%;
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
    color: var(--ink);
    background: #fff;
}

.rc-madison-live {
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--blue);
}

.rc-madison-grid {
    display: grid;
    grid-template-columns: 56% 44%;
    grid-template-areas:
        "visual heading"
        "visual body";
    gap: 28px 64px;
    align-items: start;
}

.rc-madison-heading {
    grid-area: heading;
    min-width: 0;
}

.rc-madison-visual {
    grid-area: visual;
    min-width: 0;
}

.rc-madison-body {
    grid-area: body;
    min-width: 0;
}

.rc-madison-eyebrow {
    margin-bottom: 14px;
}

.rc-madison-title {
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-size: clamp(34px, 3.4vw, 48px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.4px;
    color: var(--ink);
}

.rc-madison-title span {
    color: var(--blue);
}

.rc-madison-browser {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3eaf3;
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
    max-width: 100%;
}

.rc-madison-browser-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 18px;
    background: #f1f5f9;
    border-bottom: 1px solid #e3eaf3;
}

.rc-madison-browser-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}

.rc-madison-browser-bar span:first-child {
    background: var(--blue);
}

.rc-madison-browser img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top center;
}

.rc-madison-body p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.7;
    color: #475569;
    max-width: 46ch;
}

.rc-madison-services {
    margin: 26px 0 28px;
}

.rc-madison-services-label {
    display: block;
    margin-bottom: 12px;
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--slate);
}

.rc-madison-services ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
    padding: 0;
}

.rc-madison-services li {
    padding: 8px 14px;
    border: 1px solid #e3eaf3;
    border-radius: 999px;
    background: #f8fafc;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
}

.rc-madison-btn {
    text-decoration: none;
    cursor: pointer;
}

.rc-madison-results {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 44px;
    margin: 72px 0 0;
    padding: 34px 0 0;
    border-top: 1px solid #e3eaf3;
}

.rc-madison-results li {
    display: grid;
    gap: 6px;
    align-content: start;
    padding-left: 28px;
    border-left: 1px solid #e3eaf3;
}

.rc-madison-results li:first-child {
    padding-left: 0;
    border-left: 0;
}

.rc-madison-result-num {
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
    color: var(--blue);
}

.rc-madison-results strong {
    font-family: Montserrat, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--ink);
}

.rc-madison-results span:last-child {
    font-size: 14px;
    line-height: 1.6;
    color: var(--slate);
}

@media (max-width: 960px) {
    .rc-madison-case {
        padding: 84px 0 72px;
    }

    .rc-madison-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "heading"
            "visual"
            "body";
        gap: 30px;
    }

    .rc-madison-browser {
        max-width: 100%;
    }

    .rc-madison-body p {
        max-width: 62ch;
    }

    .rc-madison-results {
        grid-template-columns: 1fr;
        gap: 26px;
        margin-top: 54px;
    }

    .rc-madison-results li {
        padding-left: 0;
        padding-top: 22px;
        border-left: 0;
        border-top: 1px solid #e3eaf3;
    }

    .rc-madison-results li:first-child {
        padding-top: 0;
        border-top: 0;
    }
}

@media (max-width: 600px) {
    .rc-madison-case {
        padding: 68px 0 60px;
    }

    .rc-madison-top {
        margin-bottom: 22px;
    }

    .rc-madison-number {
        width: 46px;
        height: 46px;
        font-size: 14px;
    }

    .rc-madison-title {
        font-size: 32px;
        letter-spacing: -1px;
        line-height: 1.12;
        overflow-wrap: break-word;
    }

    .rc-madison-browser {
        border-radius: 16px;
        max-width: none;
    }

    .rc-madison-services li {
        font-size: 12.5px;
    }

    .rc-madison-btn {
        width: 100%;
    }
}

/* =========================================================
   RICHCODES — WORK / SUMMIT CASE (Section 04, scoped)
   ========================================================= */

.rc-summit-case {
    background: #fff;
    color: var(--ink);
    padding: 108px 0 96px;
    border-top: 1px solid #e3eaf3;
}

.rc-summit-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 34px;
}

.rc-summit-number {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1.5px solid #cbd5e1;
    border-radius: 50%;
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
    color: var(--ink);
    background: #fff;
}

.rc-summit-live {
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--blue);
}

.rc-summit-grid {
    display: grid;
    grid-template-columns: 44% 56%;
    grid-template-areas:
        "heading visual"
        "body visual";
    gap: 28px 64px;
    align-items: start;
}

.rc-summit-heading {
    grid-area: heading;
    min-width: 0;
}

.rc-summit-visual {
    grid-area: visual;
    min-width: 0;
}

.rc-summit-body {
    grid-area: body;
    min-width: 0;
}

.rc-summit-eyebrow {
    margin-bottom: 14px;
}

.rc-summit-title {
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-size: clamp(34px, 3.4vw, 48px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.4px;
    color: var(--ink);
}

.rc-summit-title span {
    color: var(--blue);
}

.rc-summit-browser {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3eaf3;
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
    max-width: 100%;
}

.rc-summit-browser-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 18px;
    background: #f1f5f9;
    border-bottom: 1px solid #e3eaf3;
}

.rc-summit-browser-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}

.rc-summit-browser-bar span:first-child {
    background: var(--blue);
}

.rc-summit-browser img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 12 / 13;
    object-fit: cover;
    object-position: top center;
}

.rc-summit-body p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.7;
    color: #475569;
    max-width: 46ch;
}

.rc-summit-services {
    margin: 26px 0 28px;
}

.rc-summit-services-label {
    display: block;
    margin-bottom: 12px;
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--slate);
}

.rc-summit-services ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
    padding: 0;
}

.rc-summit-services li {
    padding: 8px 14px;
    border: 1px solid #e3eaf3;
    border-radius: 999px;
    background: #f8fafc;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
}

.rc-summit-btn {
    text-decoration: none;
    cursor: pointer;
}

.rc-summit-results {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 44px;
    margin: 72px 0 0;
    padding: 34px 0 0;
    border-top: 1px solid #e3eaf3;
}

.rc-summit-results li {
    display: grid;
    gap: 6px;
    align-content: start;
    padding-left: 28px;
    border-left: 1px solid #e3eaf3;
}

.rc-summit-results li:first-child {
    padding-left: 0;
    border-left: 0;
}

.rc-summit-result-num {
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
    color: var(--blue);
}

.rc-summit-results strong {
    font-family: Montserrat, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--ink);
}

.rc-summit-results span:last-child {
    font-size: 14px;
    line-height: 1.6;
    color: var(--slate);
}

@media (max-width: 960px) {
    .rc-summit-case {
        padding: 84px 0 72px;
    }

    .rc-summit-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "heading"
            "visual"
            "body";
        gap: 30px;
    }

    .rc-summit-browser {
        max-width: 560px;
    }

    .rc-summit-body p {
        max-width: 62ch;
    }

    .rc-summit-results {
        grid-template-columns: 1fr;
        gap: 26px;
        margin-top: 54px;
    }

    .rc-summit-results li {
        padding-left: 0;
        padding-top: 22px;
        border-left: 0;
        border-top: 1px solid #e3eaf3;
    }

    .rc-summit-results li:first-child {
        padding-top: 0;
        border-top: 0;
    }
}

@media (max-width: 600px) {
    .rc-summit-case {
        padding: 68px 0 60px;
    }

    .rc-summit-top {
        margin-bottom: 22px;
    }

    .rc-summit-number {
        width: 46px;
        height: 46px;
        font-size: 14px;
    }

    .rc-summit-title {
        font-size: 32px;
        letter-spacing: -1px;
        line-height: 1.12;
        overflow-wrap: break-word;
    }

    .rc-summit-browser {
        border-radius: 16px;
        max-width: none;
    }

    .rc-summit-browser img {
        aspect-ratio: 12 / 13;
    }

    .rc-summit-services li {
        font-size: 12.5px;
    }

    .rc-summit-btn {
        width: 100%;
    }
}

/* =========================================================
   RICHCODES — WORK CLOSING CTA (scoped)
   ========================================================= */

.rc-work-cta {
    background: var(--cloud);
    border-top: 1px solid #e3eaf3;
    padding: 112px 0 108px;
    text-align: center;
}

.rc-work-cta-inner {
    max-width: 780px;
    margin-inline: auto;
}

.rc-work-cta-eyebrow {
    margin-bottom: 16px;
}

.rc-work-cta-eyebrow::before {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 0 auto 20px;
    border-radius: 999px;
    background: var(--blue);
}

.rc-work-cta-title {
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-size: clamp(38px, 4.6vw, 60px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px;
    color: var(--ink);
    text-wrap: balance;
}

.rc-work-cta-title span {
    color: var(--blue);
}

.rc-work-cta-copy {
    max-width: 560px;
    margin: 22px auto 32px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--slate);
}

.rc-work-cta-btn {
    min-width: 240px;
    text-decoration: none;
}

.rc-work-cta-note {
    position: relative;
    width: max-content;
    max-width: 100%;
    margin: 36px auto 0;
    padding-bottom: 11px;
    font-family:
        "Segoe Script",
        "Bradley Hand",
        cursive;
    font-size: clamp(20px, 2vw, 27px);
    line-height: 1.3;
    color: var(--blue-2);
    transform: rotate(-1deg);
}

.rc-work-cta-underline {
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: #3b82f6;
    transform: rotate(-1deg);
}

@media (max-width: 960px) {
    .rc-work-cta {
        padding: 88px 0 84px;
    }
}

@media (max-width: 600px) {
    .rc-work-cta {
        padding: 72px 0 68px;
    }

    .rc-work-cta-inner {
        padding-inline: 4px;
    }

    .rc-work-cta-title {
        font-size: 36px;
        letter-spacing: -1.3px;
    }

    .rc-work-cta-copy {
        font-size: 16px;
        margin: 18px auto 28px;
    }

    .rc-work-cta-btn {
        width: 100%;
        min-width: 0;
    }

    .rc-work-cta-note {
        margin-top: 30px;
        font-size: 19px;
    }
}

/* =========================================================
   RICHCODES — PROCESS HERO (scoped)
   ========================================================= */

.rc-process-hero {
    position: relative;
    overflow: hidden;

    padding:
        165px
        0
        105px;

    color: #fff;

    background:
        radial-gradient(
            circle at 74% 22%,
            rgba(59,130,246,.20),
            transparent 30%
        ),
        linear-gradient(
            115deg,
            #06101f 0%,
            #0a1830 50%,
            #12295a 100%
        );
}

.rc-process-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    pointer-events: none;
}

.rc-process-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0,1.5fr)
        minmax(310px,.8fr);

    gap: 85px;

    align-items: center;
}

.rc-process-hero-copy .eyebrow {
    margin-bottom: 18px;
}

.rc-process-hero-copy h1 {
    margin: 0;

    font-family: Montserrat, sans-serif;

    font-size: clamp(56px,5.2vw,80px);

    font-weight: 800;

    line-height: .97;

    letter-spacing: -3px;

    color: #fff;
}

.rc-process-hero-copy h1 span {
    display: block;

    margin-top: 8px;

    color: var(--blue);
}

.rc-process-hero-copy > p {
    max-width: 640px;

    margin:
        28px
        0
        0;

    color: #c7d3e2;

    font-size: 18px;

    line-height: 1.7;
}

.rc-process-hero-actions {
    display: flex;

    align-items: center;

    gap: 28px;

    margin-top: 34px;
}

.rc-process-hero-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #dce7f5;

    font-size: 14px;

    font-weight: 600;

    transition:
        color .2s ease,
        gap .2s ease;
}

.rc-process-hero-link:hover {
    color: #fff;

    gap: 13px;
}

.rc-process-hero-side {
    padding-left: 32px;

    border-left:
        1px solid rgba(59,130,246,.42);
}

.rc-process-hero-script {
    color: #69a3ff;

    font-family:
        "Segoe Script",
        "Bradley Hand",
        cursive;

    font-size: clamp(30px,2.8vw,42px);

    line-height: 1.1;

    transform: rotate(-3deg);
}

.rc-process-hero-underline {
    width: 82%;

    height: 4px;

    margin:
        17px
        0
        25px;

    border-radius: 999px;

    background: var(--blue);

    transform: rotate(-3deg);
}

.rc-process-hero-note {
    max-width: 285px;

    margin: 0;

    color: #9fb0c4;

    font-size: 14px;

    line-height: 1.7;

    letter-spacing: .4px;
}

.rc-process-hero-note strong {
    display: block;

    margin-bottom: 4px;

    color: #fff;

    font-family: Montserrat, sans-serif;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}

@media (max-width: 950px) {

    .rc-process-hero-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .rc-process-hero-side {
        max-width: 520px;
    }

}

@media (max-width: 600px) {

    .rc-process-hero {
        padding:
            125px
            0
            72px;
    }

    .rc-process-hero-grid {
        gap: 42px;
    }

    .rc-process-hero-copy h1 {
        font-size: 45px;

        letter-spacing: -2px;
    }

    .rc-process-hero-copy > p {
        margin-top: 22px;

        font-size: 16px;
    }

    .rc-process-hero-actions {
        display: grid;

        gap: 20px;

        margin-top: 28px;
    }

    .rc-process-hero-actions .btn {
        width: 100%;
    }

    .rc-process-hero-side {
        padding-left: 22px;
    }

    .rc-process-hero-script {
        font-size: 30px;
    }

}

/* =========================================================
   RICHCODES — PROCESS TIMELINE (scoped)
   ========================================================= */

.rc-steps {
    background: #fff;
    color: var(--ink);
    padding: 110px 0 130px;
}

.rc-steps-head {
    max-width: 720px;
    margin: 0 auto 84px;
    text-align: center;
}

.rc-steps-head .eyebrow {
    margin-bottom: 16px;
}

.rc-steps-title-main {
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -1.6px;
    color: var(--ink);
}

.rc-steps-lead {
    max-width: 620px;
    margin: 20px auto 0;
    font-size: 17px;
    line-height: 1.7;
    color: var(--slate);
}

.rc-steps-timeline {
    position: relative;
    list-style: none;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0;
}

.rc-steps-timeline::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 50%;
    width: 2px;
    background: #dbe4f0;
    transform: translateX(-50%);
}

.rc-steps-item {
    position: relative;
    width: 50%;
    margin: 0 0 76px;
    padding: 0 68px 0 0;
}

.rc-steps-item:nth-child(even) {
    margin-left: 50%;
    padding: 0 0 0 68px;
}

.rc-steps-item:last-child {
    margin-bottom: 0;
}

.rc-steps-dot {
    position: absolute;
    top: 8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--blue);
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px rgba(59,130,246,.22);
}

.rc-steps-item:nth-child(odd) .rc-steps-dot {
    right: -8px;
}

.rc-steps-item:nth-child(even) .rc-steps-dot {
    left: -8px;
}

.rc-steps-content {
    position: relative;
}

.rc-steps-num {
    position: absolute;
    top: -34px;
    right: -8px;
    z-index: 0;
    font-family: Montserrat, sans-serif;
    font-size: 88px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -4px;
    color: rgba(59,130,246,.08);
    pointer-events: none;
    user-select: none;
}

.rc-steps-item:nth-child(even) .rc-steps-num {
    right: auto;
    left: -46px;
}

.rc-steps-label {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 8px;
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--blue);
}

.rc-steps-title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.8px;
    color: var(--ink);
}

.rc-steps-phrase {
    position: relative;
    z-index: 1;
    margin: 8px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--blue);
}

.rc-steps-accent {
    position: relative;
    z-index: 1;
    display: block;
    width: 44px;
    height: 3px;
    margin: 16px 0;
    border-radius: 999px;
    background: var(--blue);
}

.rc-steps-copy {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--slate);
    max-width: 40ch;
}

@media (max-width: 768px) {
    .rc-steps {
        padding: 84px 0 96px;
    }

    .rc-steps-head {
        margin-bottom: 56px;
    }

    .rc-steps-title-main {
        font-size: 33px;
        letter-spacing: -1.1px;
    }

    .rc-steps-lead {
        font-size: 16px;
    }

    .rc-steps-timeline::before {
        left: 9px;
        top: 6px;
        bottom: 6px;
    }

    .rc-steps-item,
    .rc-steps-item:nth-child(even) {
        width: 100%;
        margin: 0 0 52px;
        padding: 0 0 0 48px;
    }

    .rc-steps-item:last-child {
        margin-bottom: 0;
    }

    .rc-steps-item:nth-child(odd) .rc-steps-dot,
    .rc-steps-item:nth-child(even) .rc-steps-dot {
        left: 1px;
        right: auto;
        top: 6px;
    }

    .rc-steps-num {
        font-size: 72px;
        letter-spacing: -2px;
        top: -22px;
        right: 0;
    }

    .rc-steps-item:nth-child(even) .rc-steps-num {
        left: auto;
        right: 0;
    }

    .rc-steps-title {
        font-size: 23px;
    }

    .rc-steps-copy {
        max-width: none;
    }
}

/* =========================================================
   RICHCODES — PROCESS CLOSING CTA (scoped)
   ========================================================= */

.rc-process-cta {
    position: relative;
    overflow: hidden;

    padding: 112px 0 110px;

    text-align: center;

    color: #fff;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(59,130,246,.22),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #0a1730 0%,
            #06101f 100%
        );
}

.rc-process-cta::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.022) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    pointer-events: none;
}

.rc-process-cta-inner {
    position: relative;
    z-index: 2;

    max-width: 900px;
    margin-inline: auto;
}

.rc-process-cta-eyebrow {
    margin-bottom: 16px;
}

.rc-process-cta-eyebrow::before {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 0 auto 20px;
    border-radius: 999px;
    background: var(--blue);
}

.rc-process-cta-title {
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-size: clamp(38px, 4.6vw, 62px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px;
    color: #fff;
    text-wrap: balance;
}

.rc-process-cta-title span {
    color: var(--blue);
}

.rc-process-cta-copy {
    max-width: 620px;
    margin: 22px auto 34px;
    font-size: 17px;
    line-height: 1.7;
    color: #c9d5e5;
}

.rc-process-cta-btn {
    min-width: 240px;
    text-decoration: none;
}

.rc-process-cta-note {
    position: relative;
    width: max-content;
    max-width: 100%;
    margin: 38px auto 0;
    padding-bottom: 11px;
    font-family:
        "Segoe Script",
        "Bradley Hand",
        cursive;
    font-size: clamp(20px, 2vw, 27px);
    line-height: 1.4;
    color: #79aaff;
    transform: rotate(-1deg);
}

.rc-process-cta-underline {
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: #3b82f6;
    transform: rotate(-1deg);
}

@media (max-width: 960px) {
    .rc-process-cta {
        padding: 88px 0 86px;
    }
}

@media (max-width: 600px) {
    .rc-process-cta {
        padding: 76px 0 72px;
    }

    .rc-process-cta-inner {
        padding-inline: 4px;
    }

    .rc-process-cta-title {
        font-size: 37px;
        letter-spacing: -1.4px;
    }

    .rc-process-cta-copy {
        font-size: 16px;
        line-height: 1.7;
        margin: 18px auto 28px;
    }

    .rc-process-cta-btn {
        width: 100%;
        min-width: 0;
    }

    .rc-process-cta-note {
        margin-top: 32px;
        font-size: 19px;
    }
}

/* =========================================================
   RICHCODES — ABOUT HERO (scoped)
   ========================================================= */

.rc-about-hero {
    position: relative;
    overflow: hidden;

    padding:
        165px
        0
        105px;

    color: #fff;

    background:
        radial-gradient(
            circle at 76% 20%,
            rgba(59,130,246,.20),
            transparent 30%
        ),
        linear-gradient(
            118deg,
            #06101f 0%,
            #0a1830 50%,
            #12295a 100%
        );
}

.rc-about-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    pointer-events: none;
}

.rc-about-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0,1.5fr)
        minmax(310px,.8fr);

    gap: 85px;

    align-items: center;
}

.rc-about-hero-copy .eyebrow {
    margin-bottom: 18px;
}

.rc-about-hero-copy h1 {
    margin: 0;

    font-family: Montserrat, sans-serif;

    font-size: clamp(54px,5.2vw,78px);

    font-weight: 800;

    line-height: .98;

    letter-spacing: -3px;

    color: #fff;
}

.rc-about-hero-copy h1 span {
    display: block;

    margin-top: 8px;

    color: var(--blue);
}

.rc-about-hero-copy > p {
    max-width: 640px;

    margin:
        28px
        0
        0;

    color: #c7d3e2;

    font-size: 18px;

    line-height: 1.7;
}

.rc-about-hero-actions {
    display: flex;

    align-items: center;

    gap: 28px;

    margin-top: 34px;
}

.rc-about-hero-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #dce7f5;

    font-size: 14px;

    font-weight: 600;

    transition:
        color .2s ease,
        gap .2s ease;
}

.rc-about-hero-link:hover {
    color: #fff;

    gap: 13px;
}

.rc-about-hero-side {
    padding-left: 32px;

    border-left:
        1px solid rgba(59,130,246,.42);
}

.rc-about-hero-script {
    color: #69a3ff;

    font-family:
        "Segoe Script",
        "Bradley Hand",
        cursive;

    font-size: clamp(30px,2.8vw,42px);

    line-height: 1.1;

    transform: rotate(-3deg);
}

.rc-about-hero-underline {
    width: 82%;

    height: 4px;

    margin:
        17px
        0
        25px;

    border-radius: 999px;

    background: var(--blue);

    transform: rotate(-3deg);
}

.rc-about-hero-note {
    max-width: 285px;

    margin: 0;

    color: #9fb0c4;

    font-size: 14px;

    line-height: 1.7;

    letter-spacing: .4px;
}

.rc-about-hero-note strong {
    display: block;

    margin-bottom: 4px;

    color: #fff;

    font-family: Montserrat, sans-serif;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}

@media (max-width: 950px) {

    .rc-about-hero-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .rc-about-hero-side {
        max-width: 520px;
    }

}

@media (max-width: 600px) {

    .rc-about-hero {
        padding:
            125px
            0
            40px;
    }

    .rc-about-hero-grid {
        gap: 42px;
    }

    .rc-about-hero-copy h1 {
        font-size: 44px;

        letter-spacing: -2px;
    }

    .rc-about-hero-copy > p {
        margin-top: 22px;

        font-size: 16px;
    }

    .rc-about-hero-actions {
        display: grid;

        gap: 20px;

        margin-top: 28px;
    }

    .rc-about-hero-actions .btn {
        width: 100%;
    }

    .rc-about-hero-side {
        padding-left: 22px;
    }

    .rc-about-hero-script {
        font-size: 30px;
    }

}

/* =========================================================
   RICHCODES — ABOUT STORY (scoped)
   ========================================================= */

.rc-about-story {
    position: relative;
    overflow: hidden;

    background: #fff;
    color: var(--ink);

    padding: 110px 0 120px;
}

.rc-about-story-grid {
    display: grid;

    grid-template-columns: 42% 58%;
    grid-template-areas:
        "image heading"
        "image content";

    gap: 32px 72px;

    align-items: start;
}

.rc-about-story-heading {
    grid-area: heading;
    min-width: 0;
}

.rc-about-story-heading .eyebrow {
    margin-bottom: 14px;
}

.rc-about-story-heading h2 {
    margin: 0;

    font-family: Montserrat, sans-serif;

    font-size: clamp(34px, 3.6vw, 50px);

    font-weight: 800;

    line-height: 1.06;

    letter-spacing: -1.5px;

    color: var(--ink);
}

.rc-about-story-heading h2 span {
    color: var(--blue);
}

.rc-about-story-image {
    grid-area: image;
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: 22px;
}

.rc-about-story-num {
    position: absolute;
    top: -58px;
    left: -28px;
    z-index: 0;

    font-family: Montserrat, sans-serif;
    font-size: 150px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -5px;

    color: rgba(59,130,246,.07);

    pointer-events: none;
    user-select: none;
}

.rc-about-story-image img {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    aspect-ratio: 4 / 5;

    object-fit: cover;
    object-position: center 18%;

    border-radius: 22px;

    box-shadow:
        0 24px 70px rgba(15,23,42,.16);
}

.rc-about-story-image::after {
    content: "";

    position: absolute;

    inset: auto 0 0;

    height: 35%;

    background:
        linear-gradient(
            transparent,
            rgba(5,13,28,.84)
        );

    pointer-events: none;
}

.rc-about-story-photo-caption {
    position: absolute;

    left: 26px;
    right: 26px;
    bottom: 22px;

    z-index: 2;

    color: #fff;
}

.rc-about-story-content {
    grid-area: content;
    min-width: 0;
}

.rc-about-story-content p {
    margin: 0 0 18px;

    font-size: 16.5px;
    line-height: 1.75;

    color: #475569;

    max-width: 58ch;
}

.rc-about-story-divider {
    display: block;
    width: 44px;
    height: 3px;
    margin: 28px 0;
    border-radius: 999px;
    background: var(--blue);
}

.rc-about-story-statement {
    margin: 0 0 26px;

    font-family: Montserrat, sans-serif;

    font-size: 20px;
    font-weight: 700;

    line-height: 1.5;
    letter-spacing: -.3px;

    color: var(--ink);

    max-width: 32ch;
}

.rc-about-story-points {
    list-style: none;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    column-gap: 18px;

    width: 100%;

    margin: 0;
    padding: 22px 0 0;

    border-top: 1px solid #e3eaf3;
}

.rc-about-story-points li {
    min-width: 0;

    padding: 2px 0;
    margin: 0;

    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;

    color: #334155;
    white-space: nowrap;
}

.rc-about-story-points li + li {
    padding-left: 18px;
    border-left: 1px solid #e3eaf3;
}

@media (max-width: 960px) {
    .rc-about-story {
        padding: 88px 0 96px;
    }

    .rc-about-story-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "heading"
            "image"
            "content";
        gap: 36px;
    }

    .rc-about-story-image {
        max-width: 520px;
    }
}

@media (max-width: 600px) {
    .rc-about-story {
        padding: 72px 0 80px;
    }

    .rc-about-story-grid {
        gap: 30px;
    }

    .rc-about-story-heading h2 {
        font-size: 33px;
        letter-spacing: -1.1px;
    }

    .rc-about-story-num {
        display: none;
    }

    .rc-about-story-image {
        max-width: none;
        border-radius: 18px;
    }

    .rc-about-story-image img {
        border-radius: 18px;
    }

    .rc-about-story-photo-caption {
        left: 22px;
        right: 22px;
        bottom: 18px;
    }

    .rc-about-story-photo-caption .rich-signature {
        font-size: 38px;
    }

    .rc-about-story-content p {
        font-size: 16px;
    }

    .rc-about-story-statement {
        font-size: 18px;
    }

    .rc-about-story-points {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .rc-about-story-points li + li {
        padding-left: 0;
        border-left: 0;
    }

    .rc-about-story-points li {
        margin: 0;
        padding: 2px 0;
        font-size: 12px;
        letter-spacing: 1.8px;
        white-space: normal;
    }
}

/* =========================================================
   RICHCODES — FAQ HERO (scoped)
   ========================================================= */

.rc-faq-hero {
    position: relative;
    overflow: hidden;

    padding:
        165px
        0
        105px;

    color: #fff;

    background:
        radial-gradient(
            circle at 76% 20%,
            rgba(59,130,246,.20),
            transparent 30%
        ),
        linear-gradient(
            118deg,
            #06101f 0%,
            #0a1830 50%,
            #12295a 100%
        );
}

.rc-faq-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    pointer-events: none;
}

.rc-faq-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0,1.5fr)
        minmax(310px,.8fr);

    gap: 85px;

    align-items: center;
}

.rc-faq-hero-content .eyebrow {
    margin-bottom: 18px;
}

.rc-faq-hero-content h1 {
    margin: 0;

    font-family: Montserrat, sans-serif;

    font-size: clamp(52px,5.2vw,76px);

    font-weight: 800;

    line-height: .98;

    letter-spacing: -3px;

    color: #fff;
}

.rc-faq-hero-content h1 span {
    display: block;

    margin-top: 8px;

    color: var(--blue);
}

.rc-faq-hero-content > p {
    max-width: 600px;

    margin:
        28px
        0
        0;

    color: #c7d3e2;

    font-size: 18px;

    line-height: 1.7;
}

.rc-faq-hero-note {
    padding-left: 32px;

    border-left:
        1px solid rgba(59,130,246,.42);
}

.rc-faq-hero-script {
    color: #69a3ff;

    font-family:
        "Segoe Script",
        "Bradley Hand",
        cursive;

    font-size: clamp(30px,2.8vw,42px);

    line-height: 1.1;

    transform: rotate(-3deg);
}

.rc-faq-hero-underline {
    width: 82%;

    height: 4px;

    margin:
        17px
        0
        25px;

    border-radius: 999px;

    background: var(--blue);

    transform: rotate(-3deg);
}

.rc-faq-hero-note p {
    max-width: 285px;

    margin: 0;

    color: #9fb0c4;

    font-size: 14px;

    line-height: 1.7;

    letter-spacing: .4px;
}

.rc-faq-hero-note strong {
    display: block;

    margin-bottom: 4px;

    color: #fff;

    font-family: Montserrat, sans-serif;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}

/* =========================================================
   RICHCODES — FAQ QUESTIONS (scoped)
   ========================================================= */

.rc-faq-section {
    background: #fff;
    color: var(--ink);

    padding: 110px 0 120px;
}

.rc-faq-wrap {
    max-width: 1160px;
}

.rc-faq-intro {
    max-width: 720px;
    margin: 0 auto 72px;
    text-align: center;
}

.rc-faq-intro .eyebrow {
    margin-bottom: 16px;
}

.rc-faq-intro h2 {
    margin: 0;

    font-family: Montserrat, sans-serif;

    font-size: clamp(34px, 4vw, 52px);

    font-weight: 800;

    line-height: 1.06;

    letter-spacing: -1.6px;

    color: var(--ink);
}

.rc-faq-intro h2 span {
    color: var(--blue);
}

.rc-faq-intro p {
    max-width: 600px;
    margin: 20px auto 0;

    font-size: 17px;
    line-height: 1.7;

    color: var(--slate);
}

.rc-faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rc-faq-item {
    display: grid;

    grid-template-columns:
        minmax(0, 19%)
        minmax(0, 1fr);

    gap: 24px 64px;

    align-items: start;

    padding: 44px 0;

    border-top: 1px solid #e3eaf3;
}

.rc-faq-item:last-child {
    border-bottom: 1px solid #e3eaf3;
}

.rc-faq-num {
    justify-self: center;

    font-family: Montserrat, sans-serif;
    font-size: 88px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -4px;

    color: rgba(59,130,246,.09);

    user-select: none;
}

.rc-faq-content {
    min-width: 0;
    padding-top: 10px;
}

.rc-faq-question {
    margin: 0;

    font-family: Montserrat, sans-serif;

    font-size: 20px;
    font-weight: 800;

    line-height: 1.35;
    letter-spacing: .4px;

    text-transform: uppercase;

    color: var(--ink);
}

.rc-faq-accent {
    display: block;
    width: 40px;
    height: 3px;
    margin: 16px 0 18px;
    border-radius: 999px;
    background: var(--blue);
}

.rc-faq-answer {
    margin: 0;

    font-size: 16.5px;
    line-height: 1.75;

    color: #475569;

    max-width: 68ch;
}

/* =========================================================
   RICHCODES — FAQ CTA (scoped)
   ========================================================= */

.rc-faq-cta {
    position: relative;
    overflow: hidden;

    padding: 112px 0 110px;

    text-align: center;

    color: #fff;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(59,130,246,.22),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #0a1730 0%,
            #06101f 100%
        );
}

.rc-faq-cta::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.022) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    pointer-events: none;
}

.rc-faq-cta-inner {
    position: relative;
    z-index: 2;

    max-width: 900px;
    margin-inline: auto;
}

.rc-faq-cta-eyebrow {
    margin-bottom: 16px;
}

.rc-faq-cta-eyebrow::before {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 0 auto 20px;
    border-radius: 999px;
    background: var(--blue);
}

.rc-faq-cta-title {
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-size: clamp(38px, 4.6vw, 60px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px;
    color: #fff;
    text-wrap: balance;
}

.rc-faq-cta-title span {
    color: var(--blue);
}

.rc-faq-cta-copy {
    max-width: 600px;
    margin: 22px auto 34px;
    font-size: 17px;
    line-height: 1.7;
    color: #c9d5e5;
}

.rc-faq-cta-btn {
    min-width: 240px;
    text-decoration: none;
}

.rc-faq-cta-note {
    position: relative;
    width: max-content;
    max-width: 100%;
    margin: 38px auto 0;
    padding-bottom: 11px;
    font-family:
        "Segoe Script",
        "Bradley Hand",
        cursive;
    font-size: clamp(20px, 2vw, 27px);
    line-height: 1.4;
    color: #79aaff;
    transform: rotate(-1deg);
}

.rc-faq-cta-underline {
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: #3b82f6;
    transform: rotate(-1deg);
}

@media (max-width: 960px) {
    .rc-faq-hero-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .rc-faq-hero-note {
        max-width: 520px;
    }

    .rc-faq-section {
        padding: 88px 0 96px;
    }

    .rc-faq-intro {
        margin-bottom: 56px;
    }

    .rc-faq-cta {
        padding: 88px 0 86px;
    }
}

@media (max-width: 600px) {
    .rc-faq-hero {
        padding:
            125px
            0
            72px;
    }

    .rc-faq-hero-grid {
        gap: 42px;
    }

    .rc-faq-hero-content h1 {
        font-size: 44px;
        letter-spacing: -2px;
    }

    .rc-faq-hero-content > p {
        margin-top: 22px;
        font-size: 16px;
    }

    .rc-faq-hero-note {
        padding-left: 22px;
    }

    .rc-faq-hero-script {
        font-size: 30px;
    }

    .rc-faq-section {
        padding: 72px 0 80px;
    }

    .rc-faq-intro h2 {
        font-size: 32px;
        letter-spacing: -1.1px;
    }

    .rc-faq-intro p {
        font-size: 16px;
    }

    .rc-faq-item {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 36px 0;
    }

    .rc-faq-num {
        justify-self: start;
        font-size: 54px;
        letter-spacing: -2px;
    }

    .rc-faq-content {
        padding-top: 0;
    }

    .rc-faq-question {
        font-size: 18px;
    }

    .rc-faq-answer {
        font-size: 16px;
    }

    .rc-faq-cta {
        padding: 76px 0 72px;
    }

    .rc-faq-cta-inner {
        padding-inline: 4px;
    }

    .rc-faq-cta-title {
        font-size: 36px;
        letter-spacing: -1.3px;
    }

    .rc-faq-cta-copy {
        font-size: 16px;
        margin: 18px auto 28px;
    }

    .rc-faq-cta-btn {
        width: 100%;
        min-width: 0;
    }

    .rc-faq-cta-note {
        margin-top: 30px;
        font-size: 19px;
    }
}

/* =========================================================
   RICHCODES — CONTACT HERO (scoped)
   ========================================================= */

.rc-contact-hero {
    position: relative;
    overflow: hidden;

    padding:
        165px
        0
        105px;

    color: #fff;

    background:
        radial-gradient(
            circle at 76% 20%,
            rgba(59,130,246,.20),
            transparent 30%
        ),
        linear-gradient(
            118deg,
            #06101f 0%,
            #0a1830 50%,
            #12295a 100%
        );
}

.rc-contact-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    pointer-events: none;
}

.rc-contact-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0,1.5fr)
        minmax(310px,.8fr);

    gap: 85px;

    align-items: center;
}

.rc-contact-hero-content .eyebrow {
    margin-bottom: 18px;
}

.rc-contact-hero-content h1 {
    margin: 0;

    font-family: Montserrat, sans-serif;

    font-size: clamp(54px,5.2vw,78px);

    font-weight: 800;

    line-height: .98;

    letter-spacing: -3px;

    color: #fff;
}

.rc-contact-hero-content h1 span {
    display: block;

    margin-top: 8px;

    color: var(--blue);
}

.rc-contact-hero-content > p {
    max-width: 600px;

    margin:
        28px
        0
        0;

    color: #c7d3e2;

    font-size: 18px;

    line-height: 1.7;
}

.rc-contact-hero-note {
    padding-left: 32px;

    border-left:
        1px solid rgba(59,130,246,.42);
}

.rc-contact-hero-script {
    color: #69a3ff;

    font-family:
        "Segoe Script",
        "Bradley Hand",
        cursive;

    font-size: clamp(30px,2.8vw,42px);

    line-height: 1.1;

    transform: rotate(-3deg);
}

.rc-contact-hero-underline {
    width: 82%;

    height: 4px;

    margin:
        17px
        0
        25px;

    border-radius: 999px;

    background: var(--blue);

    transform: rotate(-3deg);
}

.rc-contact-hero-note p {
    max-width: 285px;

    margin: 0;

    color: #9fb0c4;

    font-size: 14px;

    line-height: 1.7;

    letter-spacing: .4px;
}

.rc-contact-hero-note strong {
    display: block;

    margin-bottom: 4px;

    color: #fff;

    font-family: Montserrat, sans-serif;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}

@media (max-width: 950px) {
    .rc-contact-hero-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .rc-contact-hero-note {
        max-width: 520px;
    }
}

@media (max-width: 600px) {
    .rc-contact-hero {
        padding:
            125px
            0
            72px;
    }

    .rc-contact-hero-grid {
        gap: 42px;
    }

    .rc-contact-hero-content h1 {
        font-size: 44px;
        letter-spacing: -2px;
    }

    .rc-contact-hero-content > p {
        margin-top: 22px;
        font-size: 16px;
    }

    .rc-contact-hero-note {
        padding-left: 22px;
    }

    .rc-contact-hero-script {
        font-size: 30px;
    }
}

/* =========================================================
   RICHCODES — CONTACT MAIN / FORM (scoped)
   ========================================================= */

.rc-contact-main {
    background: #fff;
    color: var(--ink);

    padding: 108px 0 120px;
}

.rc-contact-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(0, 1.08fr);

    gap: 40px 88px;

    align-items: start;
}

.rc-contact-intro {
    position: relative;
    min-width: 0;
}

.rc-contact-num {
    position: absolute;
    top: -64px;
    left: -24px;
    z-index: 0;

    font-family: Montserrat, sans-serif;
    font-size: 150px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -5px;

    color: rgba(59,130,246,.07);

    pointer-events: none;
    user-select: none;
}

.rc-contact-intro .eyebrow,
.rc-contact-heading,
.rc-contact-lead,
.rc-contact-divider,
.rc-contact-direct {
    position: relative;
    z-index: 1;
}

.rc-contact-intro .eyebrow {
    margin-bottom: 14px;
}

.rc-contact-heading {
    margin: 0;

    font-family: Montserrat, sans-serif;

    font-size: clamp(34px, 3.6vw, 50px);

    font-weight: 800;

    line-height: 1.06;

    letter-spacing: -1.5px;

    color: var(--ink);
}

.rc-contact-lead {
    margin: 20px 0 0;

    font-size: 16.5px;
    line-height: 1.75;

    color: #475569;

    max-width: 44ch;
}

.rc-contact-divider {
    display: block;
    width: 44px;
    height: 3px;
    margin: 30px 0;
    border-radius: 999px;
    background: var(--blue);
}

.rc-contact-direct-label {
    display: block;

    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;

    color: var(--slate);
}

.rc-contact-direct-email {
    display: inline-block;

    margin-top: 10px;

    font-family: Montserrat, sans-serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.3px;

    color: var(--blue-2);
}

.rc-contact-direct-email:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.rc-contact-direct p {
    margin: 12px 0 0;

    font-size: 15px;
    line-height: 1.7;

    color: var(--slate);

    max-width: 38ch;
}

.rc-contact-form-wrap {
    min-width: 0;
}

.rc-contact-form-wrap .eyebrow {
    margin-bottom: 12px;
}

.rc-contact-form-heading {
    margin: 0 0 30px;

    font-size: 16px;
    line-height: 1.7;

    color: var(--slate);

    max-width: 52ch;
}

.rc-contact-form {
    margin: 0;
}

.rc-contact-field {
    margin: 0 0 22px;
}

.rc-contact-field label {
    display: block;

    margin-bottom: 9px;

    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;

    color: var(--ink);
}

.rc-contact-field label span {
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: none;
    color: var(--slate);
}

.rc-contact-field input,
.rc-contact-field textarea {
    display: block;

    width: 100%;

    padding: 16px 18px;

    font: inherit;
    font-size: 16px;
    line-height: 1.5;

    color: var(--ink);

    background: #fbfdff;

    border: 1px solid #dbe3ee;
    border-radius: 11px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.rc-contact-field input {
    min-height: 58px;
}

.rc-contact-field textarea {
    min-height: 172px;
    resize: vertical;
}

.rc-contact-field input:focus,
.rc-contact-field textarea:focus {
    outline: none;

    background: #fff;

    border-color: var(--blue);

    box-shadow:
        0 0 0 4px rgba(59,130,246,.16);
}

.rc-contact-submit {
    margin-top: 6px;
    min-width: 220px;
}

.rc-contact-reassurance {
    margin: 18px 0 0;

    font-size: 14px;
    line-height: 1.6;

    color: var(--slate);
}

.rc-contact-error {
    margin: 14px 0 0;

    font-size: 14px;
    line-height: 1.6;

    color: #b42318;
}

@media (max-width: 960px) {
    .rc-contact-main {
        padding: 88px 0 96px;
    }

    .rc-contact-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .rc-contact-form-wrap {
        max-width: 640px;
    }
}

@media (max-width: 600px) {
    .rc-contact-main {
        padding: 72px 0 84px;
    }

    .rc-contact-grid {
        gap: 48px;
    }

    .rc-contact-num {
        font-size: 96px;
        top: -44px;
        left: -8px;
    }

    .rc-contact-heading {
        font-size: 33px;
        letter-spacing: -1.1px;
    }

    .rc-contact-lead {
        font-size: 16px;
    }

    .rc-contact-direct-email {
        font-size: 19px;
        overflow-wrap: anywhere;
    }

    .rc-contact-field input {
        min-height: 54px;
    }

    .rc-contact-field textarea {
        min-height: 180px;
    }

    .rc-contact-submit {
        width: 100%;
        min-width: 0;
    }
}