:root{
  --navy:#06162d;
  --navy2:#0a2342;
  --navy3:#0d2d55;
  --blue:#147efb;
  --blue2:#24a1ff;
  --sky:#55c7ff;
  --ink:#0b1b33;
  --muted:#65728a;
  --line:#dce5f2;
  --soft:#f4f8fd;
  --white:#fff;
  --green:#22a864;
  --red:#e85c62;
  --shadow:0 22px 60px rgba(10,35,66,.14);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff;line-height:1.55}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,calc(100% - 40px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(5,20,42,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{height:78px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;color:white;font-weight:800;font-size:25px;letter-spacing:-.8px;white-space:nowrap}
.brand img{width:43px;height:43px;object-fit:contain}
.brand>span>span{color:var(--blue2)}
.desktop-nav{margin-left:auto;display:flex;gap:26px;color:#cfdaea;font-size:14px;font-weight:600}
.desktop-nav a:hover{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,var(--blue),#268dfc);color:white;border:none;border-radius:12px;padding:15px 21px;font-weight:700;box-shadow:0 12px 30px rgba(20,126,251,.2);cursor:pointer;transition:.2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(20,126,251,.28)}
.btn-small{padding:11px 16px;font-size:14px}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.28);box-shadow:none}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.menu-btn,.mobile-menu{display:none}

.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#06152d 0%,#082349 58%,#0a315f 100%);color:white;padding:86px 0 92px}
.hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(72,154,255,.16) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to right,transparent 0,#000 60%,#000 100%);opacity:.65}
.hero-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35}
.hero-glow-one{width:400px;height:400px;background:#0f7cff;right:8%;top:-170px}
.hero-glow-two{width:300px;height:300px;background:#13d1ff;right:35%;bottom:-250px}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:800;color:#67b9ff;margin-bottom:16px}
.eyebrow.dark{color:#1679ef}
.hero h1,.section-heading h2,.affordable-section h2,.contact-copy h2{font-size:clamp(42px,5vw,67px);line-height:1.04;margin:0;letter-spacing:-2.5px}
.hero h1 span,.section-heading h2 span,.affordable-section h2 span,.contact-copy h2 span{color:var(--blue2)}
.hero-lead{font-size:19px;line-height:1.7;color:#cfdaeb;max-width:650px;margin:24px 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.trust-row{display:flex;gap:18px;flex-wrap:wrap;color:#b9c6d9;font-size:12px;margin-top:28px}
.dashboard-scene{position:relative;min-height:490px}
.dashboard-card{position:absolute;inset:15px 30px 0 0;background:#f8fbff;border-radius:25px;padding:24px;color:var(--ink);box-shadow:0 35px 80px rgba(0,0,0,.34);transform:perspective(1000px) rotateY(-4deg) rotateX(1deg)}
.dash-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.dash-top>div{display:flex;flex-direction:column}
.tiny{font-size:11px;color:#7c8ba3}
.dash-top strong{font-size:20px}
.status-dot{font-size:11px;color:#2cad6c}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stats>div{padding:15px;background:white;border:1px solid #e6edf6;border-radius:15px;display:flex;flex-direction:column}
.stats span{font-size:11px;color:#7a889e}.stats strong{font-size:23px}.stats small{font-size:9px;color:#2dad6c}
.chart-card{margin-top:12px;padding:14px;background:white;border:1px solid #e6edf6;border-radius:15px}
.chart-head{display:flex;justify-content:space-between;font-size:11px;color:#73829a}.chart-head b{color:#9ca8ba;font-weight:500}
.activity{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.activity>div{display:flex;align-items:center;gap:10px;background:white;padding:10px 12px;border:1px solid #e6edf6;border-radius:13px}
.activity-icon{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#eaf4ff;color:#147efb;font-weight:800}
.activity p{margin:0;display:flex;flex-direction:column;font-size:10px}.activity small{color:#8794a8}
.phone-card{position:absolute;width:145px;height:300px;right:-10px;bottom:0;background:#0d2342;border:6px solid #12243b;border-radius:31px;box-shadow:0 25px 50px rgba(0,0,0,.4);padding:28px 12px 14px;color:white}
.phone-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:48px;height:8px;border-radius:20px;background:#02080f}
.phone-card small{color:#89a0bb}.phone-card>strong{display:block;font-size:25px;margin:3px 0 22px}
.mini-line{height:58px;background:linear-gradient(135deg,transparent 30%,#1f86ff 31%,#1f86ff 35%,transparent 36%)}
.mini-box{background:#173253;padding:10px;border-radius:12px;margin-top:9px}.mini-box span{font-size:9px;color:#8ea5bf}.mini-box b{display:block;font-size:15px}

.spreadsheet-section{padding:90px 0;background:linear-gradient(#fff,#f7fbff)}
.section-heading{max-width:760px;margin-bottom:42px}
.section-heading.centered{text-align:center;margin-left:auto;margin-right:auto}
.section-heading h2,.affordable-section h2,.contact-copy h2{font-size:46px}
.section-heading p{font-size:17px;color:var(--muted);margin:15px 0 0}
.transform-grid{display:grid;grid-template-columns:1fr 70px 1fr;align-items:stretch}
.pain-panel,.benefit-panel{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:25px;box-shadow:var(--shadow)}
.panel-tag{font-weight:800;color:#b43a42;font-size:13px;margin-bottom:18px}.panel-tag.positive{color:#157a4a}
.fake-sheet{border:1px solid #dbe4ec;border-radius:15px;overflow:hidden;box-shadow:0 12px 30px rgba(12,36,64,.09);margin-bottom:20px}
.sheet-bar{display:flex;gap:6px;align-items:center;background:#eef3f8;padding:9px 12px;font-size:10px}.sheet-bar span{width:7px;height:7px;border-radius:50%;background:#c2ccd8}.sheet-bar b{margin-left:6px;color:#566379}
.sheet-grid{display:grid;grid-template-columns:1.2fr 1fr .8fr;font-size:10px}.sheet-grid>div{padding:9px;border-right:1px solid #edf1f5;border-top:1px solid #edf1f5}.sheet-head{background:#f7fafc;font-weight:700}
.problem-list,.benefit-list{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:13px}
.problem-list li,.benefit-list li{position:relative;padding-left:27px}.problem-list li:before,.benefit-list li:before{position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900}
.problem-list li:before{content:"×";background:#ffecef;color:var(--red)}.benefit-list li:before{content:"✓";background:#e6f7ee;color:var(--green)}
.transform-arrow{display:grid;place-items:center;color:white;font-size:28px;font-weight:800}.transform-arrow:before{content:"";position:absolute;width:48px;height:48px;border-radius:50%;background:var(--blue);z-index:-1}.transform-arrow{position:relative;z-index:1}
.mini-dashboard{height:210px;border-radius:16px;background:#eef5ff;border:1px solid #dce7f6;margin-bottom:20px;display:grid;grid-template-columns:55px 1fr;overflow:hidden}
.mini-nav{background:#092446}.mini-content{padding:17px}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mini-stats span{height:48px;border-radius:10px;background:white}.mini-chart{height:68px;border-radius:10px;background:linear-gradient(135deg,#fff 0,#fff 48%,#e6f1ff 49%,#fff 50%);margin-top:10px}.mini-table{height:28px;border-radius:9px;background:white;margin-top:8px}
.statement-card{margin:30px auto 0;background:var(--navy);color:white;border-radius:20px;padding:25px 28px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow)}
.statement-card p{margin:0;color:#c9d5e6}.statement-card strong{font-size:19px}.statement-card .btn{margin-left:auto;white-space:nowrap}

.routes-section{padding:20px 0 80px;background:#f7fbff}
.routes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.route-card{background:white;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 12px 32px rgba(15,48,82,.06)}
.route-card.featured{border-color:#9cc7ff;background:linear-gradient(180deg,#fff,#f2f8ff)}
.route-icon{width:44px;height:44px;border-radius:13px;background:#eaf4ff;color:#1679ef;display:grid;place-items:center;font-size:21px}.route-card h3{margin:16px 0 8px}.route-card p{color:var(--muted);font-size:14px}.route-card a{color:#147efb;font-weight:800;font-size:13px}

.build-section{padding:85px 0}
.build-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.build-grid article{padding:26px;border:1px solid var(--line);border-radius:20px;background:#fff;transition:.2s}.build-grid article:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.build-grid article>span{width:42px;height:42px;border-radius:12px;background:#eaf4ff;color:#147efb;display:grid;place-items:center;font-size:21px;font-weight:800}.build-grid h3{margin:14px 0 7px}.build-grid p{margin:0;color:var(--muted);font-size:14px}

.process-section{padding:88px 0;background:linear-gradient(135deg,#06162e,#0b315f);color:white}
.section-heading.light p{color:#cbd6e6}
.process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.process-grid article{position:relative;padding:22px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);border-radius:18px}
.process-grid b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#167ffb;box-shadow:0 0 0 6px rgba(22,127,251,.12)}.process-grid h3{margin:17px 0 7px}.process-grid p{margin:0;color:#c7d3e4;font-size:13px}

.work-section{padding:90px 0;background:#f7fbff}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.work-card{background:white;border-radius:22px;border:1px solid var(--line);overflow:hidden;box-shadow:0 12px 30px rgba(16,47,83,.07)}
.project-art{height:180px;display:grid;place-items:center;position:relative;overflow:hidden}.project-art:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;border:1px solid rgba(255,255,255,.2)}
.project-art span{font-size:44px;font-weight:800;color:white;z-index:2}
.manifestation .project-art{background:linear-gradient(135deg,#302352,#7750a5)}.bus .project-art{background:linear-gradient(135deg,#062c57,#e67e22)}.school .project-art{background:linear-gradient(135deg,#166bb2,#29a6d9)}
.project-copy{padding:23px}.project-copy small{color:#147efb;font-weight:800;font-size:10px;letter-spacing:.1em}.project-copy h3{margin:8px 0}.project-copy p{color:var(--muted);font-size:13px}.project-copy a{color:#147efb;font-size:13px;font-weight:800}

.affordable-section{padding:86px 0}
.affordable-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.affordable-section h2{margin:0}.affordable-section p{color:var(--muted);font-size:16px}.affordable-section .soft{font-weight:700;color:#41516a}
.reassurance-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.reassurance-grid div{border:1px solid var(--line);border-radius:17px;padding:20px;display:flex;gap:13px;align-items:center}.reassurance-grid b{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#eaf4ff;color:#147efb}.reassurance-grid span{font-size:13px;font-weight:700}

.launch-section{padding:88px 0;background:linear-gradient(135deg,#071a35,#0c315d);color:white}
.launch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.launch-grid article{padding:28px;border-radius:20px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12)}.launch-grid article>span{font-size:28px;color:#57bdff}.launch-grid h3{margin:13px 0 7px}.launch-grid p{margin:0;color:#c8d4e4;font-size:14px}

.contact-section{padding:95px 0;background:#f7fbff}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.contact-copy{position:sticky;top:120px}.contact-copy h2{margin:0}.contact-copy p{color:var(--muted);font-size:16px}.contact-points{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.contact-points span{font-size:12px;font-weight:700;padding:9px 12px;border-radius:999px;background:#eaf4ff;color:#116bc8}
.enquiry-form{background:white;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:24px;padding:28px;display:grid;gap:17px}
.form-top{display:flex;flex-direction:column;border-bottom:1px solid #ebf0f5;padding-bottom:17px}.form-top strong{font-size:20px}.form-top small{color:var(--muted)}
label{display:grid;gap:7px;font-size:12px;font-weight:800;color:#2b3b53}
input,textarea,select{width:100%;font:inherit;border:1px solid #cfd9e7;border-radius:11px;padding:13px 14px;background:#fbfdff;color:#14253e;outline:none}input:focus,textarea:focus,select:focus{border-color:#2f8cff;box-shadow:0 0 0 3px rgba(47,140,255,.1)}
textarea{min-height:105px;resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.submit-btn{width:100%}.form-note{text-align:center;color:var(--muted);font-size:11px;margin:0}.success{display:none;padding:14px;background:#e8f8ef;color:#177344;border-radius:11px;font-size:12px;font-weight:700}.enquiry-form.submitted .success{display:block}

footer{background:#041229;color:#aebbd0;padding:26px 0}.footer-row{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px}.footer-brand{font-size:18px}.footer-brand img{width:31px;height:31px}

@media(max-width:900px){
  .desktop-nav,.desktop-cta{display:none}.menu-btn{margin-left:auto;display:flex;flex-direction:column;gap:5px;background:none;border:0;padding:10px}.menu-btn span{width:25px;height:2px;background:white;border-radius:5px}.mobile-menu{display:none;background:#071a35;border-top:1px solid rgba(255,255,255,.08);padding:16px 20px 22px}.mobile-menu.open{display:grid;gap:8px}.mobile-menu a:not(.btn){color:#d4deeb;padding:10px 4px}
  .hero{padding:55px 0 70px}.hero-grid{grid-template-columns:1fr;gap:45px}.hero h1{font-size:48px}.dashboard-scene{min-height:420px}.dashboard-card{inset:0 20px 0 0}.phone-card{right:0}
  .transform-grid{grid-template-columns:1fr;gap:16px}.transform-arrow{height:56px;transform:rotate(90deg)}
  .routes-grid,.build-grid,.work-grid,.launch-grid{grid-template-columns:1fr 1fr}.process-grid{grid-template-columns:1fr 1fr}.process-grid article:last-child{grid-column:1/-1}
  .statement-card{flex-direction:column;align-items:flex-start}.statement-card .btn{margin-left:0}
  .affordable-grid,.contact-grid{grid-template-columns:1fr}.contact-copy{position:static}.reassurance-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .wrap{width:min(100% - 28px,1180px)}.nav{height:67px}.brand{font-size:21px}.brand img{width:36px;height:36px}
  .hero{padding:42px 0 55px}.hero h1{font-size:40px;letter-spacing:-1.7px}.hero-lead{font-size:16px;margin:18px 0 24px}.hero-actions{display:grid}.btn{width:100%}.trust-row{display:grid;gap:8px;margin-top:22px}
  .dashboard-scene{min-height:370px}.dashboard-card{inset:0 10px 0 0;padding:16px;border-radius:19px}.dash-top strong{font-size:15px}.stats{gap:6px}.stats>div{padding:9px}.stats strong{font-size:16px}.chart-card{padding:9px}.activity{display:none}.phone-card{width:100px;height:220px;border-radius:24px;padding:23px 8px 10px}.phone-card>strong{font-size:18px;margin-bottom:12px}.mini-line{height:38px}.mini-box{padding:7px}
  .spreadsheet-section,.build-section,.work-section,.affordable-section,.launch-section,.contact-section,.process-section{padding:62px 0}
  .section-heading h2,.affordable-section h2,.contact-copy h2{font-size:34px;letter-spacing:-1.4px}.section-heading p{font-size:15px}
  .pain-panel,.benefit-panel{padding:19px}.fake-sheet{margin-bottom:17px}.problem-list,.benefit-list{font-size:12px}.mini-dashboard{height:170px}
  .statement-card{padding:20px}.statement-card strong{font-size:17px}
  .routes-section{padding:12px 0 58px}.routes-grid,.build-grid,.work-grid,.launch-grid,.process-grid{grid-template-columns:1fr}.process-grid article:last-child{grid-column:auto}
  .route-card,.build-grid article{padding:21px}
  .work-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.work-card{min-width:84%;scroll-snap-align:start}
  .project-art{height:150px}
  .reassurance-grid{grid-template-columns:1fr}.contact-grid{gap:38px}.contact-points{display:grid}.form-row{grid-template-columns:1fr}.enquiry-form{padding:20px}
  .footer-row{flex-direction:column;align-items:flex-start}
}

/* v2 multi-page structure */
.inner-page{min-height:70vh}.inner-hero{background:linear-gradient(135deg,#06152d 0%,#082349 70%,#0a315f 100%);color:white;padding:72px 0 58px;border-bottom:1px solid rgba(255,255,255,.08)}.inner-hero h1{font-size:clamp(42px,5vw,64px);line-height:1.04;letter-spacing:-2.2px;margin:0;max-width:850px}.inner-hero h1 span{color:var(--blue2)}.inner-hero p{color:#cfdaeb;max-width:720px;font-size:17px;margin:18px 0 0}.inner-page>.build-section,.inner-page>.work-section,.inner-page>.process-section,.inner-page>.launch-section,.inner-page>.contact-section{padding-top:70px}.inner-page>.build-section .section-heading,.inner-page>.work-section .section-heading,.inner-page>.process-section .section-heading{display:none}.home-final-cta{background:linear-gradient(135deg,#06162e,#0b315f);color:white;padding:70px 0}.home-final-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}.home-final-cta .contact-copy{position:static;max-width:760px}.home-final-cta .contact-copy p{color:#c7d3e4}.home-final-button{min-width:260px}@media(max-width:900px){.home-final-grid{grid-template-columns:1fr}.home-final-button{width:100%}}@media(max-width:620px){.inner-hero{padding:48px 0 38px}.inner-hero h1{font-size:38px;letter-spacing:-1.5px}.inner-hero p{font-size:15px}.home-final-cta{padding:54px 0}.routes-section{padding-bottom:48px}.work-section{padding:58px 0}.affordable-section{padding:58px 0}}


/* =========================================================
   V3 POLISH PASS
   No redesign: alignment, rhythm, logo rendering and mobile
   ========================================================= */

.brand img,
.footer-brand img{
  image-rendering:auto;
  object-fit:contain;
  flex:0 0 auto;
}

/* Keep primary grids visually aligned */
.routes-grid,
.work-grid,
.build-grid,
.launch-grid,
.process-grid{
  align-items:stretch;
}
.route-card,
.work-card,
.build-grid article,
.launch-grid article,
.process-grid article{
  height:100%;
}
.route-card{
  display:flex;
  flex-direction:column;
}
.route-card p{
  flex:1;
}
.route-card a{
  margin-top:auto;
  padding-top:8px;
}

.work-card{
  display:flex;
  flex-direction:column;
}
.project-copy{
  display:flex;
  flex-direction:column;
  flex:1;
}
.project-copy p{
  flex:1;
}
.project-copy a{
  margin-top:auto;
}

/* More consistent section rhythm */
.section-heading{
  margin-bottom:38px;
}
.routes-section{
  border-top:1px solid rgba(13,45,85,.04);
}
.affordable-grid > div:first-child{
  max-width:570px;
}
.reassurance-grid div{
  min-height:82px;
}

/* Keep the spreadsheet comparison feeling deliberate */
.pain-panel,
.benefit-panel{
  display:flex;
  flex-direction:column;
}
.problem-list,
.benefit-list{
  margin-top:auto;
}
.transform-arrow{
  align-self:center;
}

/* Header refinement */
.site-header .nav{
  width:min(1220px,calc(100% - 40px));
}
.desktop-nav{
  align-items:center;
}
.brand{
  line-height:1;
}
.brand img{
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.18));
}

/* Form alignment and less "corporate" density */
.enquiry-form label{
  align-content:start;
}
.enquiry-form input,
.enquiry-form textarea,
.enquiry-form select{
  min-height:48px;
}
.enquiry-form textarea{
  min-height:112px;
}

/* Inner pages: avoid double-spacing after the hero */
.inner-page > .build-section,
.inner-page > .work-section,
.inner-page > .process-section,
.inner-page > .launch-section,
.inner-page > .contact-section{
  padding-top:64px;
}

/* Mobile-specific refinement */
@media(max-width:900px){
  .site-header .nav{
    width:min(100% - 30px,1220px);
  }
  .hero-grid{
    gap:38px;
  }
  .routes-grid{
    gap:14px;
  }
}

@media(max-width:620px){
  body{
    overflow-x:hidden;
  }

  .site-header .nav{
    width:calc(100% - 24px);
  }
  .nav{
    height:64px;
  }
  .brand{
    font-size:20px;
    gap:8px;
  }
  .brand img{
    width:38px;
    height:38px;
  }

  .hero{
    padding:38px 0 50px;
  }
  .hero h1{
    font-size:38px;
    line-height:1.06;
  }
  .hero-lead{
    max-width:34rem;
  }
  .hero-actions{
    gap:10px;
  }

  /* Dashboard remains a visual payoff, but doesn't dominate the first screen */
  .dashboard-scene{
    min-height:330px;
  }
  .dashboard-card{
    inset:0 8px 0 0;
  }
  .phone-card{
    right:-2px;
    bottom:-4px;
  }

  .spreadsheet-section{
    padding-top:56px;
  }
  .section-heading{
    margin-bottom:28px;
  }
  .section-heading.centered{
    text-align:left;
  }
  .transform-grid{
    gap:12px;
  }
  .transform-arrow{
    height:44px;
  }
  .pain-panel,
  .benefit-panel{
    border-radius:19px;
  }

  .statement-card{
    margin-top:20px;
    gap:8px;
  }
  .statement-card p{
    font-size:13px;
  }
  .statement-card strong{
    line-height:1.35;
  }

  /* One card per row feels intentional on a real phone */
  .routes-grid{
    gap:12px;
  }
  .route-card{
    border-radius:18px;
  }

  /* Portfolio becomes a proper horizontal mobile carousel */
  .work-grid{
    gap:12px;
    margin-right:-14px;
    padding-right:14px;
    scrollbar-width:none;
  }
  .work-grid::-webkit-scrollbar{display:none}
  .work-card{
    min-width:88%;
  }

  .affordable-grid{
    gap:30px;
  }
  .reassurance-grid{
    gap:10px;
  }
  .reassurance-grid div{
    min-height:auto;
  }

  .home-final-grid{
    gap:24px;
  }
  .home-final-cta .contact-copy h2{
    font-size:32px;
  }
  .home-final-button{
    min-width:0;
  }

  .inner-hero{
    padding:44px 0 36px;
  }

  .footer-row{
    gap:10px;
  }
}

/* Very narrow phones */
@media(max-width:380px){
  .wrap{
    width:calc(100% - 22px);
  }
  .hero h1{
    font-size:35px;
  }
  .brand{
    font-size:19px;
  }
  .brand img{
    width:35px;
    height:35px;
  }
}


/* =========================================================
   V4 — Spreadsheet to App page + circular logo correction
   ========================================================= */

.spreadsheet-more-link{
  display:inline-flex;
  align-items:center;
  font-size:13px;
  font-weight:800;
  color:#66baff;
  margin-left:4px;
}
.statement-card .spreadsheet-more-link{
  color:#8dccff;
  white-space:nowrap;
}

.spreadsheet-hero .hero-actions{
  margin-top:28px;
}
.sheet-process{
  padding:88px 0;
  background:#fff;
}
.sheet-process-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}
.sheet-process-grid article{
  border:1px solid var(--line);
  border-radius:20px;
  padding:24px 20px;
  background:#fff;
  box-shadow:0 10px 28px rgba(15,48,82,.05);
}
.sheet-process-grid b{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:white;
  background:var(--blue);
  margin-bottom:16px;
}
.sheet-process-grid h3{
  margin:0 0 8px;
  font-size:16px;
}
.sheet-process-grid p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.sheet-example{
  padding:84px 0;
  background:#f7fbff;
}
.sheet-example-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:60px;
  align-items:center;
}
.sheet-example h2{
  font-size:42px;
  line-height:1.08;
  letter-spacing:-1.8px;
  margin:0;
}
.sheet-example h2 span{
  color:var(--blue);
}
.sheet-example p{
  color:var(--muted);
  font-size:16px;
}
.example-journey{
  display:grid;
  grid-template-columns:1fr 52px 1fr;
  align-items:center;
}
.example-before,
.example-after{
  border-radius:20px;
  padding:24px;
  min-height:180px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.example-before{
  background:white;
  border:1px solid #e0e6ee;
  box-shadow:var(--shadow);
}
.example-after{
  background:linear-gradient(135deg,#082349,#0c315f);
  color:white;
  box-shadow:var(--shadow);
}
.example-before small,
.example-after small{
  font-weight:800;
  letter-spacing:.13em;
  font-size:10px;
  margin-bottom:10px;
  color:#1679ef;
}
.example-after small{
  color:#6fc2ff;
}
.example-before strong,
.example-after strong{
  font-size:18px;
  margin-bottom:7px;
}
.example-before span{
  color:var(--muted);
  font-size:12px;
}
.example-after span{
  color:#c8d4e4;
  font-size:12px;
}
.example-arrow{
  display:grid;
  place-items:center;
  font-size:26px;
  font-weight:800;
  color:#147efb;
}

@media(max-width:900px){
  .sheet-process-grid{
    grid-template-columns:1fr 1fr;
  }
  .sheet-process-grid article:last-child{
    grid-column:1/-1;
  }
  .sheet-example-grid{
    grid-template-columns:1fr;
    gap:34px;
  }
}

@media(max-width:620px){
  .statement-card .spreadsheet-more-link{
    margin-left:0;
    margin-top:5px;
    white-space:normal;
  }
  .sheet-process{
    padding:58px 0;
  }
  .sheet-process-grid{
    grid-template-columns:1fr;
    gap:11px;
  }
  .sheet-process-grid article:last-child{
    grid-column:auto;
  }
  .sheet-example{
    padding:58px 0;
  }
  .sheet-example h2{
    font-size:33px;
    letter-spacing:-1.3px;
  }
  .example-journey{
    grid-template-columns:1fr;
    gap:10px;
  }
  .example-arrow{
    height:35px;
    transform:rotate(90deg);
  }
}


/* =========================================================
   V9 — CookyWeb animated mobile navigation
   ========================================================= */

@media(max-width:900px){
  .menu-btn{
    position:relative;
    width:46px;
    height:46px;
    margin-left:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:0;
    border-radius:13px;
    padding:0;
    gap:0;
    transition:
      background .25s ease,
      transform .38s cubic-bezier(.22,.8,.22,1);
  }

  .menu-btn span{
    position:absolute;
    left:10px;
    width:26px;
    height:2.5px;
    background:#fff;
    border-radius:999px;
    transform-origin:center;
    transition:
      top .32s cubic-bezier(.22,.8,.22,1),
      transform .42s cubic-bezier(.2,.95,.2,1),
      opacity .18s ease,
      width .28s ease;
  }

  .menu-btn span:nth-child(1){ top:14px; }
  .menu-btn span:nth-child(2){ top:22px; }
  .menu-btn span:nth-child(3){ top:30px; }

  .menu-btn.open{
    transform:rotate(8deg);
    background:rgba(255,255,255,.055);
  }

  .menu-btn.open span:nth-child(1){
    top:22px;
    transform:rotate(45deg);
  }

  .menu-btn.open span:nth-child(2){
    opacity:0;
    width:7px;
    transform:scaleX(.1);
  }

  .menu-btn.open span:nth-child(3){
    top:22px;
    transform:rotate(-45deg);
  }

  /* Override the old instant display:none/display:grid behaviour */
  .mobile-menu{
    display:block !important;
    overflow:hidden;
    max-height:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-12px);
    padding:0 20px;
    background:linear-gradient(180deg,#071a35 0%,#082541 100%);
    border-top:1px solid rgba(255,255,255,.07);
    box-shadow:0 22px 36px rgba(0,0,0,.18);
    transition:
      max-height .48s cubic-bezier(.22,.78,.24,1),
      opacity .28s ease,
      transform .42s cubic-bezier(.22,.78,.24,1),
      padding .42s cubic-bezier(.22,.78,.24,1),
      visibility 0s linear .48s;
  }

  .mobile-menu.open{
    max-height:460px;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    padding:13px 20px 22px;
    transition:
      max-height .50s cubic-bezier(.22,.78,.24,1),
      opacity .32s ease,
      transform .44s cubic-bezier(.22,.78,.24,1),
      padding .44s cubic-bezier(.22,.78,.24,1),
      visibility 0s;
  }

  .mobile-menu a{
    display:block;
    opacity:0;
    transform:translateY(-9px);
    transition:
      opacity .27s ease,
      transform .34s cubic-bezier(.22,.78,.24,1),
      background .18s ease;
  }

  .mobile-menu.open a{
    opacity:1;
    transform:translateY(0);
  }

  .mobile-menu.open a:nth-child(1){transition-delay:.04s}
  .mobile-menu.open a:nth-child(2){transition-delay:.08s}
  .mobile-menu.open a:nth-child(3){transition-delay:.12s}
  .mobile-menu.open a:nth-child(4){transition-delay:.16s}
  .mobile-menu.open a:nth-child(5){transition-delay:.20s}

  .mobile-menu a:not(.btn){
    color:#d7e2ef;
    padding:12px 4px;
    border-bottom:1px solid rgba(255,255,255,.055);
    font-weight:600;
  }

  .mobile-menu .btn{
    margin-top:14px;
  }
}

@media(prefers-reduced-motion:reduce){
  .menu-btn,
  .menu-btn span,
  .mobile-menu,
  .mobile-menu a{
    transition:none !important;
  }
}


/* V10 — force clearly visible mobile-menu motion */
@media(max-width:900px){
  .mobile-menu{
    transform-origin:top;
    transform:translateY(-18px) scaleY(.92);
  }
  .mobile-menu.open{
    transform:translateY(0) scaleY(1);
  }

  .menu-btn.open{
    animation:cookyBurgerWiggle .42s cubic-bezier(.22,.8,.22,1);
  }

  @keyframes cookyBurgerWiggle{
    0%{transform:rotate(0deg) scale(1)}
    38%{transform:rotate(12deg) scale(1.06)}
    72%{transform:rotate(5deg) scale(.98)}
    100%{transform:rotate(8deg) scale(1)}
  }
}


/* =========================================================
   V11 — calmer, smoother mobile navigation
   ========================================================= */

@media(max-width:900px){
  .menu-btn{
    width:44px;
    height:44px;
    border-radius:12px;
    transform:none !important;
    animation:none !important;
    background:transparent;
    transition:background .22s ease;
  }

  .menu-btn.open{
    transform:none !important;
    animation:none !important;
    background:rgba(255,255,255,.05);
  }

  .menu-btn span{
    left:10px;
    width:24px;
    height:2px;
    transition:
      top .30s cubic-bezier(.4,0,.2,1),
      transform .30s cubic-bezier(.4,0,.2,1),
      opacity .18s ease;
  }

  .menu-btn span:nth-child(1){ top:14px; }
  .menu-btn span:nth-child(2){ top:21px; }
  .menu-btn span:nth-child(3){ top:28px; }

  .menu-btn.open span:nth-child(1){
    top:21px;
    transform:rotate(45deg);
  }

  .menu-btn.open span:nth-child(2){
    opacity:0;
    transform:scaleX(.25);
  }

  .menu-btn.open span:nth-child(3){
    top:21px;
    transform:rotate(-45deg);
  }

  .mobile-menu{
    display:block !important;
    overflow:hidden;
    max-height:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-6px) !important;
    padding:0 20px;
    transition:
      max-height .42s cubic-bezier(.4,0,.2,1),
      opacity .24s ease,
      transform .34s cubic-bezier(.4,0,.2,1),
      padding .34s cubic-bezier(.4,0,.2,1),
      visibility 0s linear .42s;
  }

  .mobile-menu.open{
    max-height:460px;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) !important;
    padding:14px 20px 22px;
    transition:
      max-height .46s cubic-bezier(.4,0,.2,1),
      opacity .26s ease,
      transform .34s cubic-bezier(.4,0,.2,1),
      padding .34s cubic-bezier(.4,0,.2,1),
      visibility 0s;
  }

  .mobile-menu a{
    opacity:0;
    transform:translateY(-4px);
    transition:
      opacity .22s ease,
      transform .28s cubic-bezier(.4,0,.2,1),
      background .18s ease;
  }

  .mobile-menu.open a{
    opacity:1;
    transform:translateY(0);
  }

  /* very subtle stagger only */
  .mobile-menu.open a:nth-child(1){transition-delay:.03s}
  .mobile-menu.open a:nth-child(2){transition-delay:.05s}
  .mobile-menu.open a:nth-child(3){transition-delay:.07s}
  .mobile-menu.open a:nth-child(4){transition-delay:.09s}
  .mobile-menu.open a:nth-child(5){transition-delay:.11s}
}


/* V12 — Homepage hero refinement */
.hero .eyebrow{letter-spacing:.13em;}
.hero-lead{line-height:1.58;max-width:680px;}
@media(max-width:620px){
  .hero{padding-top:38px;padding-bottom:46px;}
  .hero .eyebrow{letter-spacing:.11em;margin-bottom:14px;}
  .hero h1{font-size:38px;line-height:1.05;letter-spacing:-1.65px;}
  .hero-lead{font-size:16px;line-height:1.52;margin:17px 0 22px;}
  .hero-actions{gap:9px;}
  .trust-row{gap:6px;margin-top:18px;font-size:11.5px;line-height:1.35;}
  .dashboard-scene{margin-top:-4px;min-height:318px;}
}


/* =========================================================
   V13 — polished hero software showcase
   ========================================================= */

.dashboard-showcase{
  position:relative;
  min-height:470px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.dashboard-image-frame{
  position:relative;
  width:112%;
  margin-left:-4%;
  border-radius:25px;
  overflow:hidden;
  background:#fff;
  box-shadow:
    0 35px 80px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.09);
  transform:perspective(1200px) rotateY(-4deg) rotateX(1deg);
}

.dashboard-image-frame img{
  display:block;
  width:100%;
  height:auto;
}

@media(max-width:900px){
  .dashboard-showcase{
    min-height:0;
    margin-top:0;
  }

  .dashboard-image-frame{
    width:100%;
    margin-left:0;
    transform:none;
    border-radius:22px;
  }
}

@media(max-width:620px){
  .dashboard-showcase{
    min-height:0;
    margin-top:-2px;
  }

  .dashboard-image-frame{
    width:100%;
    height:305px;
    border-radius:20px;
    overflow:hidden;
    box-shadow:
      0 22px 44px rgba(0,0,0,.25),
      0 0 0 1px rgba(255,255,255,.07);
  }

  .dashboard-image-frame img{
    width:150%;
    max-width:none;
    height:auto;
    transform:translate(-16%, -2%);
  }
}

@media(max-width:390px){
  .dashboard-image-frame{
    height:280px;
  }

  .dashboard-image-frame img{
    width:156%;
    transform:translate(-18%, -1%);
  }
}


/* =========================================================
   V14 — flatter, cleaner hero dashboard presentation
   ========================================================= */

/* Desktop: remove the angle and let the dashboard sit naturally */
.dashboard-showcase{
  min-height: 500px;
  align-items: center;
}

.dashboard-image-frame{
  width: 100%;
  margin-left: 0;
  transform: none !important;
  border-radius: 24px;
  background: rgba(255,255,255,.03);
  box-shadow:
    0 26px 60px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.08);
}

.dashboard-image-frame img{
  width: 100%;
  max-width: 100%;
  height: auto;
  transform: none !important;
  display: block;
}

/* Large desktop: let it breathe a bit more */
@media(min-width:1200px){
  .dashboard-showcase{
    min-height: 520px;
  }

  .dashboard-image-frame{
    width: 104%;
  }
}

/* Tablet */
@media(max-width:900px){
  .dashboard-showcase{
    min-height: 0;
  }

  .dashboard-image-frame{
    width: 100%;
    border-radius: 22px;
  }
}

/* Real mobile: no awkward crop, show the whole dashboard cleanly */
@media(max-width:620px){
  .dashboard-showcase{
    min-height: 0;
    margin-top: 0;
  }

  .dashboard-image-frame{
    width: 100%;
    height: auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
      0 18px 36px rgba(0,0,0,.20),
      0 0 0 1px rgba(255,255,255,.06);
  }

  .dashboard-image-frame img{
    width: 100%;
    max-width: 100%;
    height: auto;
    transform: none !important;
  }
}

@media(max-width:390px){
  .dashboard-image-frame{
    border-radius: 18px;
  }
}


/* =========================================================
   V15 — desktop section spacing tweak
   ========================================================= */

@media(min-width:901px){
  .spreadsheet-section{
    padding-top:64px;
  }
}


/* =========================================================
   V16 — mobile spreadsheet comparison flow
   ========================================================= */

.mobile-better-way{display:none}

@media(max-width:620px){
  .spreadsheet-section .section-heading{
    margin-bottom:22px;
  }

  .transform-grid{
    gap:10px;
  }

  .mobile-extra-pain{
    display:none;
  }

  .mobile-better-way{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    color:#147efb;
    font-size:13px;
    font-weight:800;
    padding:2px 0 4px;
  }

  .mobile-better-way span{
    width:27px;
    height:27px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#eaf4ff;
    color:#147efb;
    font-size:14px;
  }

  .transform-arrow{
    display:none;
  }
}


/* =========================================================
   V17 — clearer spreadsheet vs web-app visuals
   ========================================================= */

/* Tiny approved hero tweak: desktop dashboard just slightly larger */
@media(min-width:901px){
  .dashboard-image-frame{
    width:104.5%;
    margin-left:-2.25%;
  }
}

/* Spreadsheet card — make it unmistakably spreadsheet-like */
.spreadsheet-real{
  border:1px solid #d9e1ea;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 30px rgba(12,36,64,.07);
  margin-bottom:20px;
}

.sheet-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  background:#f1f4f8;
  border-bottom:1px solid #e2e8ef;
  font-size:10px;
  color:#5a667c;
}

.sheet-dots{
  display:flex;
  gap:5px;
}

.sheet-dots span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#c1ccd7;
}

.sheet-filename{
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
}

.sheet-status-chip{
  font-size:9px;
  font-weight:700;
  color:#4b6a53;
  background:#e6f4e9;
  border:1px solid #d3e8d8;
  padding:3px 7px;
  border-radius:999px;
}

.formula-row{
  display:grid;
  grid-template-columns:42px 28px 1fr;
  border-bottom:1px solid #e7edf3;
  background:#fafcfe;
}

.name-box,
.fx-box,
.formula-box{
  padding:7px 8px;
  font-size:9px;
  color:#5e6a7f;
  border-right:1px solid #e7edf3;
}

.name-box{
  text-align:center;
  font-weight:700;
  background:#f5f8fb;
}

.fx-box{
  text-align:center;
  font-weight:700;
  color:#72829a;
}

.formula-box{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border-right:0;
}

.sheet-cols{
  display:grid;
  grid-template-columns:30px repeat(4,1fr);
  background:#f4f7fa;
  border-bottom:1px solid #e7edf3;
}

.sheet-cols span{
  padding:7px 0;
  text-align:center;
  font-size:9px;
  font-weight:700;
  color:#71819a;
  border-right:1px solid #e7edf3;
}

.sheet-cols span:last-child{
  border-right:0;
}

.sheet-cols .corner{
  background:#edf2f7;
}

.sheet-rows{
  display:grid;
  grid-template-columns:30px 1.2fr 1fr .9fr 1fr;
}

.row-num{
  background:#f7f9fb;
  color:#7a879c;
  font-size:9px;
  font-weight:700;
  text-align:center;
  padding:9px 5px;
  border-right:1px solid #e7edf3;
  border-bottom:1px solid #e7edf3;
}

.cell{
  padding:8px 9px;
  font-size:9px;
  color:#31405a;
  border-right:1px solid #e7edf3;
  border-bottom:1px solid #e7edf3;
  background:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.cell.head{
  background:#f6f9fc;
  color:#24324a;
  font-weight:700;
}

.cell.selected{
  position:relative;
  box-shadow: inset 0 0 0 2px #2f89ff;
  background:#f6fbff;
}

.cell.formula-cell{
  color:#637590;
  font-size:8px;
}

.sheet-tabs{
  display:flex;
  gap:6px;
  align-items:flex-end;
  padding:8px 10px 9px;
  background:#f7f9fb;
}

.sheet-tabs span{
  font-size:9px;
  font-weight:700;
  color:#71819a;
  border:1px solid #e0e7ef;
  background:#fff;
  border-radius:8px 8px 0 0;
  padding:5px 9px 4px;
}

.sheet-tabs span.active{
  color:#2c6844;
  background:#eef8f1;
  border-color:#d3ead9;
}

/* Benefit card visual — more clearly a clean modern app */
.app-preview{
  height:210px;
  border-radius:16px;
  background:#eef5ff;
  border:1px solid #dce7f6;
  margin-bottom:20px;
  display:grid;
  grid-template-columns:57px 1fr;
  overflow:hidden;
}

.app-preview .mini-nav{
  background:#092446;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:12px 8px 10px;
}

.mini-nav-brand{
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  display:grid;
  place-items:center;
  font-size:10px;
  font-weight:800;
  margin-bottom:14px;
}

.mini-nav-links{
  display:flex;
  flex-direction:column;
  gap:7px;
  width:100%;
  align-items:center;
  margin-bottom:auto;
}

.mini-nav-links span{
  width:26px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
}

.mini-nav-links span.active{
  background:#2f89ff;
}

.mini-nav-footer{
  width:28px;
  height:18px;
  border-radius:8px;
  background:rgba(255,255,255,.18);
}

.app-preview .mini-content{
  padding:12px;
  background:linear-gradient(180deg,#f7fbff 0%,#edf5ff 100%);
}

.mini-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.mini-page-title small{
  display:block;
  color:#6f7f96;
  font-size:8px;
  font-weight:700;
  margin-bottom:2px;
  letter-spacing:.02em;
}

.mini-page-title strong{
  display:block;
  color:#183251;
  font-size:11px;
  line-height:1.15;
}

.mini-pill{
  font-size:8px;
  font-weight:800;
  color:#2d8d59;
  background:#e7f7eb;
  border:1px solid #d4eddc;
  border-radius:999px;
  padding:4px 7px;
  white-space:nowrap;
}

.app-preview .mini-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
}

.stat-card{
  background:#fff;
  border:1px solid #e1eaf5;
  border-radius:10px;
  padding:8px 7px;
}

.stat-card label{
  display:block;
  color:#7b8aa0;
  font-size:8px;
  margin-bottom:3px;
}

.stat-card strong{
  display:block;
  color:#173351;
  font-size:10px;
}

.mini-lower{
  display:grid;
  grid-template-columns:1.2fr .9fr;
  gap:8px;
  margin-top:9px;
}

.mini-chart-card{
  position:relative;
  background:#fff;
  border:1px solid #e1eaf5;
  border-radius:10px;
  min-height:92px;
  overflow:hidden;
}

.chart-head{
  height:14px;
  background:linear-gradient(90deg,#f7fbff 0,#eef5ff 100%);
  border-bottom:1px solid #edf3fa;
}

.chart-line{
  position:absolute;
  left:10px;
  right:10px;
  border-bottom:3px solid transparent;
  border-radius:999px;
}

.chart-line.line-one{
  bottom:18px;
  height:36px;
  border-image:linear-gradient(90deg,#5da8ff,#2f89ff) 1;
  clip-path:polygon(0% 70%,20% 58%,40% 62%,60% 35%,80% 40%,100% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(47,137,255,.10),rgba(47,137,255,0));
}

.chart-line.line-two{
  bottom:12px;
  height:22px;
  opacity:.45;
  border-image:linear-gradient(90deg,#9bc9ff,#6eb2ff) 1;
  clip-path:polygon(0% 82%,22% 72%,44% 64%,66% 56%,88% 32%,100% 18%,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(109,178,255,.08),rgba(109,178,255,0));
}

.mini-activity{
  background:#fff;
  border:1px solid #e1eaf5;
  border-radius:10px;
  padding:10px 9px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.mini-activity span{
  display:block;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg,#edf4fd 0,#e3eefb 100%);
}

.mini-activity span:nth-child(1){width:100%}
.mini-activity span:nth-child(2){width:78%}
.mini-activity span:nth-child(3){width:88%}
.mini-activity span:nth-child(4){width:64%}

@media(max-width:620px){
  .sheet-toolbar{
    padding:8px 9px;
  }

  .sheet-filename{
    max-width:130px;
  }

  .sheet-status-chip{
    display:none;
  }

  .formula-row{
    grid-template-columns:36px 25px 1fr;
  }

  .name-box,.fx-box,.formula-box,
  .sheet-cols span,
  .row-num,
  .cell,
  .sheet-tabs span{
    font-size:8px;
  }

  .cell{
    padding:8px 7px;
  }

  .app-preview{
    height:188px;
    grid-template-columns:49px 1fr;
  }

  .mini-nav-brand{
    width:24px;
    height:24px;
    font-size:9px;
  }

  .app-preview .mini-content{
    padding:10px;
  }

  .mini-page-title strong{
    font-size:10px;
  }

  .stat-card strong{
    font-size:9px;
  }

  .mini-lower{
    grid-template-columns:1.15fr .85fr;
    gap:7px;
  }

  .mini-chart-card{
    min-height:78px;
  }
}


/* =========================================================
   V18 — compact spreadsheet + balanced mobile pain points
   ========================================================= */

/* Compact the spreadsheet visual slightly */
.sheet-cols span{
  padding:5px 0;
}

.row-num{
  padding:7px 5px;
}

.cell{
  padding:6px 8px;
}

.sheet-tabs{
  padding:6px 9px 7px;
}

.sheet-tabs span{
  padding:4px 8px 3px;
}

/* All six pain points now show on mobile; keep the list compact */
@media(max-width:620px){
  .mobile-extra-pain{
    display:list-item !important;
  }

  .problem-list{
    gap:8px;
  }

  .problem-list li{
    line-height:1.35;
  }

  .sheet-cols span{
    padding:4px 0;
  }

  .row-num{
    padding:6px 4px;
  }

  .cell{
    padding:6px 6px;
  }

  .sheet-tabs{
    padding:5px 8px 6px;
  }

  .sheet-tabs span{
    padding:3px 7px 2px;
  }
}


/* =========================================================
   V19 — final spreadsheet comparison spacing polish
   ========================================================= */

/* Desktop: reduce the dead space beneath the app preview */
@media(min-width:621px){
  .benefit-panel .app-preview{
    margin-bottom:12px;
  }

  .benefit-panel .benefit-list{
    margin-top:0;
  }
}

/* Mobile: bring the benefit list a little closer to the preview */
@media(max-width:620px){
  .benefit-panel .app-preview{
    margin-bottom:12px;
  }

  .benefit-panel .benefit-list{
    margin-top:0;
  }
}


/* =========================================================
   V20 — desktop comparison bottom-line alignment fix
   ========================================================= */

/* Desktop: restore true bottom alignment for both lists */
@media(min-width:621px){
  .pain-panel,
  .benefit-panel{
    display:flex;
    flex-direction:column;
  }

  .pain-panel .problem-list,
  .benefit-panel .benefit-list{
    margin-top:auto;
  }

  /* Keep the web-app preview close, but let the list anchor from the bottom */
  .benefit-panel .app-preview{
    margin-bottom:10px;
  }
}

/* Mobile stays intentionally tighter and more immediate */
@media(max-width:620px){
  .benefit-panel .benefit-list{
    margin-top:0;
  }
}


/* =========================================================
   V21 — clearer help routes + tighter section transition
   ========================================================= */

.routes-section{
  padding:54px 0 76px;
  border-top:1px solid rgba(13,45,85,.04);
}

.routes-heading{
  max-width:700px;
  margin-bottom:30px;
}

.routes-heading h2{
  margin-top:7px;
}

.routes-heading p{
  max-width:620px;
  margin-left:auto;
  margin-right:auto;
}

.routes-grid{
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.route-card{
  display:flex;
  flex-direction:column;
  min-height:240px;
  padding:24px;
}

.route-card h3{
  margin:14px 0 8px;
}

.route-card p{
  margin:0 0 18px;
  line-height:1.55;
}

.route-card a{
  margin-top:auto;
}

.route-icon{
  position:relative;
  width:42px;
  height:42px;
  border-radius:12px;
  background:#eaf4ff;
  color:#147efb;
  display:grid;
  place-items:center;
  overflow:hidden;
}

/* Website icon */
.route-icon-site{
  display:block;
  padding:9px 8px 8px;
}

.site-icon-bar{
  display:block;
  height:5px;
  border:2px solid currentColor;
  border-bottom:0;
  border-radius:3px 3px 0 0;
}

.site-icon-body{
  display:block;
  height:18px;
  border:2px solid currentColor;
  border-radius:0 0 3px 3px;
  position:relative;
}

.site-icon-body:before,
.site-icon-body:after{
  content:"";
  position:absolute;
  left:4px;
  height:2px;
  border-radius:3px;
  background:currentColor;
}

.site-icon-body:before{
  width:14px;
  top:5px;
}

.site-icon-body:after{
  width:9px;
  top:10px;
}

/* Spreadsheet icon */
.route-icon-sheet{
  grid-template-columns:repeat(3,5px);
  grid-template-rows:repeat(3,5px);
  gap:2px;
}

.route-icon-sheet span{
  width:5px;
  height:5px;
  border:1.5px solid currentColor;
  border-radius:1px;
}

/* Problem / idea icon */
.route-icon-problem{
  display:block;
}

.problem-dot{
  position:absolute;
  width:8px;
  height:8px;
  border:2px solid currentColor;
  border-radius:50%;
}

.problem-dot.one{
  left:9px;
  top:10px;
}

.problem-dot.two{
  right:8px;
  top:9px;
}

.problem-dot.three{
  left:16px;
  bottom:8px;
}

.route-icon-problem:before,
.route-icon-problem:after{
  content:"";
  position:absolute;
  height:2px;
  background:currentColor;
  transform-origin:left center;
}

.route-icon-problem:before{
  width:14px;
  left:15px;
  top:17px;
  transform:rotate(-8deg);
}

.route-icon-problem:after{
  width:13px;
  left:14px;
  top:21px;
  transform:rotate(55deg);
}

/* Reduce the old oversized gap after the statement card */
.spreadsheet-section{
  padding-bottom:48px;
}

@media(max-width:620px){
  .spreadsheet-section{
    padding-bottom:34px;
  }

  .routes-section{
    padding:34px 0 58px;
  }

  .routes-heading{
    margin-bottom:20px;
  }

  .routes-heading h2{
    font-size:31px;
    line-height:1.08;
    margin-bottom:0;
  }

  .routes-heading p{
    font-size:14px;
    line-height:1.5;
    margin-top:10px;
  }

  .routes-grid{
    gap:12px;
  }

  .route-card{
    min-height:0;
    padding:19px 20px;
    border-radius:18px;
  }

  .route-icon{
    width:38px;
    height:38px;
    border-radius:11px;
  }

  .route-card h3{
    margin:12px 0 7px;
    font-size:19px;
  }

  .route-card p{
    font-size:13px;
    line-height:1.48;
    margin-bottom:13px;
  }

  .route-card a{
    font-size:13px;
  }
}


/* =========================================================
   V22 — mobile help-card layout fix
   ========================================================= */

@media(max-width:620px){
  .routes-grid{
    display:grid;
    grid-template-columns:1fr !important;
    gap:12px;
  }

  .route-card{
    width:100%;
    min-height:0;
    padding:18px 19px;
  }

  .route-card h3{
    font-size:19px;
    line-height:1.2;
    margin:11px 0 7px;
  }

  .route-card p{
    font-size:13px;
    line-height:1.45;
    margin:0 0 12px;
  }

  .route-card a{
    margin-top:0;
  }

  .route-icon{
    width:38px;
    height:38px;
  }
}


/* =========================================================
   V23 — homepage work-section tidy
   ========================================================= */

.work-section{
  padding:58px 0 72px;
}

.work-section .section-heading{
  margin-bottom:30px;
}

.work-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.work-card{
  overflow:hidden;
  border-radius:20px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 12px 32px rgba(15,48,82,.06);
}

.work-card .project-art{
  min-height:178px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
}

.work-card .project-art:before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.23);
}

.work-card .project-art span{
  position:relative;
  z-index:1;
  color:#fff;
  font-size:44px;
  font-weight:800;
  letter-spacing:-.04em;
}

.work-card.manifestation .project-art{
  background:linear-gradient(135deg,#3b245f,#7750a8);
}

.work-card.school .project-art{
  background:linear-gradient(135deg,#1674b9,#2da4d2);
}

.work-card.rental .project-art{
  background:linear-gradient(135deg,#183b55,#2f7f6d);
}

.project-copy{
  padding:23px 23px 22px;
}

.project-copy small{
  display:block;
  color:#147efb;
  font-weight:800;
  font-size:10px;
  letter-spacing:.04em;
  margin-bottom:9px;
}

.project-copy h3{
  margin:0 0 11px;
  font-size:19px;
}

.project-copy p{
  margin:0 0 16px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

.project-copy a{
  color:#147efb;
  font-size:13px;
  font-weight:800;
}

@media(max-width:620px){
  .work-section{
    padding:42px 0 58px;
  }

  .work-section .section-heading{
    margin-bottom:22px;
  }

  .work-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .work-card{
    border-radius:19px;
  }

  .work-card .project-art{
    min-height:130px;
  }

  .work-card .project-art:before{
    width:135px;
    height:135px;
  }

  .work-card .project-art span{
    font-size:36px;
  }

  .project-copy{
    padding:18px 19px 18px;
  }

  .project-copy small{
    margin-bottom:7px;
  }

  .project-copy h3{
    font-size:19px;
    margin-bottom:8px;
  }

  .project-copy p{
    font-size:13px;
    line-height:1.48;
    margin-bottom:12px;
  }
}


/* =========================================================
   V24 — work-section heading consistency + spacing
   ========================================================= */

/* Pull the portfolio section up so it follows naturally from the help cards */
.work-section{
  padding-top:34px;
}

/* Desktop: match the centred major-section heading pattern */
@media(min-width:621px){
  .work-section .section-heading{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    max-width:760px;
    margin-bottom:30px;
  }
}

/* Mobile: retain the stronger left-aligned heading style and reduce the gap */
@media(max-width:620px){
  .work-section{
    padding-top:26px;
  }

  .work-section .section-heading{
    text-align:left;
    margin-left:0;
    margin-right:0;
    margin-bottom:20px;
  }
}


/* =========================================================
   V25 — tighter transition into portfolio section
   ========================================================= */

/* Desktop: trim a little more air above Things I've built */
@media(min-width:621px){
  .work-section{
    padding-top:16px;
  }
}

/* Mobile: pull the portfolio section up more decisively */
@media(max-width:620px){
  .work-section{
    padding-top:10px;
  }
}


/* =========================================================
   V26 — tighten portfolio → affordability transition
   ========================================================= */

@media(min-width:621px){
  .work-section{
    padding-bottom:42px;
  }

  .affordable-section{
    padding-top:48px;
  }
}

@media(max-width:620px){
  .work-section{
    padding-bottom:30px;
  }

  .affordable-section{
    padding-top:34px;
  }
}


/* =========================================================
   V27 — compact final homepage sections
   ========================================================= */

.affordable-section{
  padding:54px 0 48px;
}

.affordable-compact{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:24px;
}

.affordable-copy{
  max-width:760px;
}

.affordable-copy h2{
  margin:8px 0 14px;
}

.affordable-copy p{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
}

.affordable-reassurance{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 14px;
}

.affordable-reassurance span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:8px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:#173351;
  font-size:13px;
  font-weight:700;
  box-shadow:0 7px 18px rgba(15,48,82,.04);
}

.home-final-cta{
  padding-top:58px;
  padding-bottom:58px;
}

@media(max-width:620px){
  .affordable-section{
    padding:38px 0 34px;
  }

  .affordable-compact{
    align-items:flex-start;
    text-align:left;
    gap:18px;
  }

  .affordable-copy h2{
    font-size:31px;
    line-height:1.08;
    margin:7px 0 12px;
  }

  .affordable-copy p{
    font-size:14px;
    line-height:1.55;
  }

  .affordable-reassurance{
    justify-content:flex-start;
    gap:8px;
  }

  .affordable-reassurance span{
    min-height:34px;
    padding:7px 11px;
    font-size:12px;
  }

  .home-final-cta{
    padding-top:44px;
    padding-bottom:48px;
  }
}


/* =========================================================
   V28 — final mobile spacing polish
   ========================================================= */

@media(max-width:620px){
  /* Give the blue punchline its own breathing room */
  .home-final-cta .contact-copy h2 span{
    display:inline-block;
    margin-top:7px;
  }

  /* Tighten the hand-off from help routes into portfolio */
  .routes-section{
    padding-bottom:28px;
  }

  .work-section{
    padding-top:0;
  }
}


/* =========================================================
   V29 — cleaner homepage ending
   ========================================================= */

.mobile-pill-text{
  display:none;
}

/* With the repeated reassurance pills removed, the final CTA can breathe */
.home-final-cta .contact-copy{
  max-width:700px;
}

@media(max-width:620px){
  .affordable-reassurance{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }

  .affordable-reassurance > span{
    min-width:0;
    min-height:34px;
    padding:7px 4px;
    justify-content:center;
    text-align:center;
    white-space:nowrap;
    font-size:10.5px;
    line-height:1;
  }

  .desktop-pill-text{
    display:none;
  }

  .mobile-pill-text{
    display:inline;
  }

  .home-final-cta .contact-copy{
    max-width:none;
  }
}


/* =========================================================
   V30 — exactly three reassurance pills
   ========================================================= */

.affordable-reassurance{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  gap:12px;
  width:100%;
}

.affordable-reassurance span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 14px;
  white-space:nowrap;
  font-size:13px;
}

@media(max-width:620px){
  .affordable-reassurance{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
    width:100%;
  }

  .affordable-reassurance span{
    min-width:0;
    min-height:32px;
    padding:6px 3px;
    font-size:9.5px;
    line-height:1.05;
    white-space:nowrap;
    text-align:center;
  }
}


/* =========================================================
   V31 — mobile reassurance text row
   ========================================================= */

@media(max-width:620px){
  .affordable-reassurance{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:7px 14px;
    width:100%;
  }

  .affordable-reassurance span{
    min-height:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    font-size:11px;
    line-height:1.25;
    white-space:normal;
    color:#173351;
  }
}


/* =========================================================
   V32 — full site journey, Websites/Pricing, enquiry upload UI
   ========================================================= */

/* Slightly tighter desktop nav now there are five links */
.desktop-nav{
  gap:20px;
}
.desktop-nav a{
  font-size:12px;
}

/* Websites */
.website-intro{
  padding:72px 0;
  background:#fff;
}
.website-intro-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:70px;
  align-items:center;
}
.website-intro h2{
  font-size:44px;
  line-height:1.08;
  letter-spacing:-1.8px;
  margin:8px 0 16px;
}
.website-intro h2 span{
  color:var(--blue);
}
.website-intro p{
  color:var(--muted);
  font-size:16px;
  line-height:1.65;
  margin:0 0 24px;
}
.website-checklist{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.website-checklist div{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:15px;
  padding:15px;
  background:#f9fcff;
  font-size:13px;
  font-weight:700;
}
.website-checklist b{
  color:#147efb;
}
.website-options{
  padding:72px 0 82px;
  background:#f7fbff;
}
.option-grid,
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.option-grid article,
.pricing-grid article{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:26px;
  box-shadow:0 12px 32px rgba(15,48,82,.06);
}
.option-grid article.featured,
.pricing-grid article.featured{
  border-color:#9cc7ff;
  background:linear-gradient(180deg,#fff,#f2f8ff);
}
.option-grid small,
.pricing-grid small{
  color:#147efb;
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
}
.option-grid h3,
.pricing-grid h3{
  font-size:20px;
  margin:10px 0 10px;
}
.option-grid p,
.pricing-grid p{
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.option-grid article > span{
  display:block;
  margin-top:15px;
  padding-top:15px;
  border-top:1px solid #edf1f5;
  color:#53647a;
  font-size:12px;
  line-height:1.5;
}

/* Pricing */
.pricing-section{
  padding:72px 0 82px;
  background:#f7fbff;
}
.pricing-grid article{
  display:flex;
  flex-direction:column;
}
.pricing-grid strong{
  display:block;
  color:#173351;
  font-size:16px;
  margin:5px 0 3px;
}
.pricing-grid a{
  margin-top:auto;
  padding-top:14px;
  color:#147efb;
  font-size:13px;
  font-weight:800;
}
.pricing-note{
  margin:24px auto 0;
  max-width:880px;
  background:var(--navy);
  color:#fff;
  border-radius:18px;
  padding:20px 24px;
  display:flex;
  gap:12px;
  align-items:center;
}
.pricing-note span{
  color:#c9d5e6;
  font-size:13px;
}

/* Contact upload/security UI */
.contact-security-note{
  margin-top:22px;
  padding:17px 18px;
  border:1px solid #d8e7f7;
  border-radius:16px;
  background:#eef7ff;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.contact-security-note b{
  color:#173351;
  font-size:13px;
}
.contact-security-note span{
  color:#5e7087;
  font-size:12px;
  line-height:1.5;
}
.file-upload-label > span{
  color:#8996a8;
  font-size:10px;
  font-weight:600;
  margin-left:4px;
}
.file-upload-box{
  margin-top:7px;
  border:1.5px dashed #b9cce0;
  border-radius:15px;
  background:#f8fbff;
  padding:18px;
  position:relative;
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.file-upload-box input[type="file"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}
.file-upload-copy{
  pointer-events:none;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.file-upload-copy b{
  color:#173351;
  font-size:13px;
}
.file-upload-copy small{
  color:#75859a;
  line-height:1.45;
  max-width:520px;
}
.short-textarea{
  min-height:75px !important;
}

@media(max-width:900px){
  .desktop-nav{
    display:none;
  }
}

@media(max-width:620px){
  .website-intro,
  .website-options,
  .pricing-section{
    padding:48px 0;
  }

  .website-intro-grid{
    grid-template-columns:1fr;
    gap:28px;
  }

  .website-intro h2{
    font-size:32px;
    letter-spacing:-1.2px;
  }

  .website-checklist{
    grid-template-columns:1fr;
    gap:8px;
  }

  .website-checklist div{
    padding:12px 13px;
  }

  .option-grid,
  .pricing-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .option-grid article,
  .pricing-grid article{
    padding:20px;
  }

  .pricing-note{
    align-items:flex-start;
    flex-direction:column;
    padding:18px;
  }

  .contact-security-note{
    padding:15px;
  }

  .file-upload-box{
    min-height:100px;
    padding:16px 12px;
  }
}


/* =========================================================
   V33 — hero CTA cleanup
   ========================================================= */

.hero-actions{
  display:flex;
  flex-wrap:wrap;
}

.hero-actions .btn{
  margin:0;
}

@media(max-width:620px){
  .hero-actions{
    display:block;
  }
}


/* =========================================================
   V34 — single Spreadsheet-to-App CTA
   ========================================================= */

.statement-card .btn{
  margin-left:auto;
}

.statement-card .spreadsheet-more-link{
  display:none;
}

@media(max-width:620px){
  .statement-card .btn{
    width:100%;
    margin-left:0;
  }
}


/* =========================================================
   V35 — mobile rhythm + compact help cards
   ========================================================= */

/* Standardise major homepage eyebrow → heading spacing */
.spreadsheet-section .section-heading .eyebrow + h2,
.routes-section .section-heading .eyebrow + h2,
.work-section .section-heading .eyebrow + h2,
.affordable-section .eyebrow + h2,
.home-final-cta .eyebrow + h2{
  margin-top:8px;
}

@media(max-width:620px){
  /* Pull the next section content upward without changing the previous section ending */
  .spreadsheet-section{
    padding-top:42px;
  }

  .affordable-section{
    padding-top:28px;
  }

  /* Consistent eyebrow → heading gap on mobile */
  .spreadsheet-section .section-heading .eyebrow + h2,
  .routes-section .section-heading .eyebrow + h2,
  .work-section .section-heading .eyebrow + h2,
  .affordable-section .eyebrow + h2,
  .home-final-cta .eyebrow + h2{
    margin-top:7px;
  }

  /* Compact the three help-route cards */
  .routes-grid{
    gap:10px;
  }

  .route-card{
    min-height:0;
    padding:16px 17px;
    display:grid;
    grid-template-columns:36px minmax(0,1fr);
    column-gap:11px;
    row-gap:9px;
    align-items:center;
  }

  .route-card .route-icon{
    grid-column:1;
    grid-row:1;
    width:36px;
    height:36px;
    margin:0;
  }

  .route-card h3{
    grid-column:2;
    grid-row:1;
    margin:0;
    font-size:18px;
    line-height:1.2;
  }

  .route-card p{
    grid-column:1 / -1;
    grid-row:2;
    margin:0;
    font-size:13px;
    line-height:1.45;
  }

  .route-card a{
    grid-column:1 / -1;
    grid-row:3;
    margin:1px 0 0;
    font-size:13px;
  }
}


/* =========================================================
   V36 — footer + legal pages
   ========================================================= */
.site-footer{background:#04162d;color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.footer-main{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-top:28px;padding-bottom:24px}
.footer-identity{display:flex;align-items:center;gap:22px}
.footer-identity p{margin:0;color:#bfcde0;font-size:12px}
.footer-links{display:flex;align-items:center;gap:20px}
.footer-links a{color:#d7e3f2;font-size:12px;font-weight:700}
.footer-links a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:15px;padding-bottom:18px;color:#8fa3bd;font-size:11px}
.footer-brand{flex:0 0 auto}

.legal-hero{padding-bottom:58px}
.legal-section{padding:68px 0 82px;background:#f7fbff}
.legal-wrap{max-width:860px}
.legal-updated{color:#7b899d;font-size:12px;margin:0 0 30px}
.legal-wrap h2{font-size:22px;margin:32px 0 10px;color:#071a35}
.legal-wrap p{color:#596a81;font-size:14px;line-height:1.75}
.legal-wrap a{color:#147efb;font-weight:700}
.legal-note{margin-top:38px;padding:20px 22px;border-radius:18px;background:#eef6ff;border:1px solid #d7e7f7;display:flex;flex-direction:column;gap:5px}
.legal-note strong{color:#173351;font-size:13px}
.legal-note span{color:#60738b;font-size:12px;line-height:1.55}

@media(max-width:620px){
  .footer-main{align-items:center;flex-direction:column;gap:18px;padding-top:26px;padding-bottom:22px;text-align:center}
  .footer-identity{align-items:center;flex-direction:column;gap:10px;width:100%;text-align:center}
  .footer-identity p{max-width:290px;margin-left:auto;margin-right:auto;line-height:1.55}
  .footer-brand{justify-content:center}
  .footer-links{gap:22px;width:100%;justify-content:center}
  .footer-bottom{padding-top:14px;padding-bottom:18px;text-align:center}
  .legal-hero{padding-bottom:42px}
  .legal-section{padding:46px 0 58px}
  .legal-wrap h2{font-size:20px;margin-top:27px}
  .legal-wrap p{font-size:13px;line-height:1.7}
}


/* =========================================================
   V38 — Manifestation Lab portfolio mockup test
   ========================================================= */

.work-card .project-art.project-art-image{
  padding:0;
  background:#3b245f;
  overflow:hidden;
}

.work-card .project-art.project-art-image:before{
  display:none;
}

.work-card .project-art.project-art-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

@media(min-width:621px){
  .work-card .project-art.project-art-image{
    min-height:178px;
  }
}

@media(max-width:620px){
  .work-card .project-art.project-art-image{
    min-height:130px;
  }
}


/* =========================================================
   V39 — ML portfolio image crop + mobile positioning
   ========================================================= */

.work-card.manifestation .project-art.project-art-image::before,
.work-card.manifestation .project-art.project-art-image::after{
  content:none !important;
  display:none !important;
}

.work-card.manifestation .project-art.project-art-image{
  background:#2f1853;
}

.work-card.manifestation .project-art.project-art-image img{
  object-fit:cover;
  object-position:center center;
}

@media(max-width:620px){
  .work-card.manifestation .project-art.project-art-image{
    min-height:142px;
  }

  .work-card.manifestation .project-art.project-art-image img{
    object-position:center 38%;
  }
}


/* =========================================================
   V40 — ML second mockup test
   ========================================================= */

.work-card.manifestation .project-art.project-art-image{
  background:#2f1853;
}

.work-card.manifestation .project-art.project-art-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
}

@media(min-width:621px){
  .work-card.manifestation .project-art.project-art-image{
    min-height:178px;
  }
}

@media(max-width:620px){
  .work-card.manifestation .project-art.project-art-image{
    min-height:145px;
  }

  .work-card.manifestation .project-art.project-art-image img{
    object-position:center 39%;
  }
}


/* =========================================================
   V41 — ML mobile crop raised
   ========================================================= */

@media(max-width:620px){
  .work-card.manifestation .project-art.project-art-image img{
    object-position:center 18%;
  }
}


/* =========================================================
   V42 — dedicated mobile ML crop
   ========================================================= */

.work-card.manifestation .project-art.project-art-image picture{
  display:block;
  width:100%;
  height:100%;
}

.work-card.manifestation .project-art.project-art-image picture img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

@media(max-width:620px){
  .work-card.manifestation .project-art.project-art-image{
    min-height:145px;
  }

  .work-card.manifestation .project-art.project-art-image picture img{
    object-position:center;
  }
}


/* =========================================================
   V43 — cleaner Manifestation Lab mockup test
   ========================================================= */

.work-card.manifestation .project-art.project-art-image{
  background:#281342;
}

.work-card.manifestation .project-art.project-art-image picture{
  display:block;
  width:100%;
  height:100%;
}

.work-card.manifestation .project-art.project-art-image picture img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

@media(min-width:621px){
  .work-card.manifestation .project-art.project-art-image{
    min-height:178px;
  }

  .work-card.manifestation .project-art.project-art-image picture img{
    object-position:center 37%;
  }
}

@media(max-width:620px){
  .work-card.manifestation .project-art.project-art-image{
    min-height:150px;
  }

  .work-card.manifestation .project-art.project-art-image picture img{
    object-position:center;
  }
}


/* =========================================================
   V44 — ML mobile top-frame fix
   ========================================================= */

@media(max-width:620px){
  .work-card.manifestation .project-art.project-art-image{
    min-height:150px;
  }

  .work-card.manifestation .project-art.project-art-image picture img{
    object-fit:cover;
    object-position:center top;
  }
}

/* =========================================================
   V45 — ML card image corner radius polish
   ========================================================= */

.work-card.manifestation .project-art.project-art-image,
.work-card.manifestation .project-art.project-art-image picture,
.work-card.manifestation .project-art.project-art-image picture img{
  border-top-left-radius:20px;
  border-top-right-radius:20px;
}

/* =========================================================
   V47 — subtle mobile frame around ML artwork
   ========================================================= */
@media (max-width: 620px) {
  .work-card.manifestation .project-art.project-art-image {
    padding: 6px 6px 0;
    box-sizing: border-box;
    background: #281342;
  }

  .work-card.manifestation .project-art.project-art-image picture {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
  }

  .work-card.manifestation .project-art.project-art-image picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 16px 16px 0 0;
  }
}


/* =========================================================
   V48 — mobile uses the same framed artwork treatment as desktop
   ========================================================= */
@media (max-width: 620px) {
  .work-card.manifestation .project-art.project-art-image {
    padding: 0;
    min-height: 0;
    height: auto;
    aspect-ratio: 2.5 / 1;
    background: #281342;
    overflow: hidden;
  }

  .work-card.manifestation .project-art.project-art-image picture,
  .work-card.manifestation .project-art.project-art-image picture img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border-radius: 0;
  }

  .work-card.manifestation .project-art.project-art-image picture img {
    object-fit: cover;
    object-position: center top;
  }
}


/* =========================================================
   V50 — homepage copy review + balanced desktop statement
   ========================================================= */
@media (min-width:1100px){
  .statement-card .statement-line{
    display:block;
    white-space:nowrap;
  }
}

/* =========================================================
   V51 — header polish + payment reassurance
   ========================================================= */
@media (min-width: 901px){
  .desktop-nav a{
    font-size:15px;
  }

  .hero-actions .btn{
    padding-left:34px;
    padding-right:34px;
  }

  .affordable-reassurance{
    gap:10px;
  }

  .affordable-reassurance span{
    padding-left:13px;
    padding-right:13px;
    font-size:12.5px;
  }
}

@media (max-width: 620px){
  .affordable-reassurance{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:8px 16px;
  }

  .affordable-reassurance span{
    min-height:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    font-size:11px;
    line-height:1.3;
    white-space:normal;
    color:#173351;
  }
}