:root{
  /* === Palette: Navy + Fog + Ice Blue + Ink === */
  --navy:#0C1B33;
  --navy-deep:#071120;
  --ink:#111111;
  --fog:#E6E8EB;
  --fog-soft:#F3F4F6;
  --ice:#5DA0D5;
  --ice-hover:#75B4E4;

  /* Use ice as the main accent “blue” */
  --blue:#5DA0D5;
  --blue-hover:#75B4E4;
  --blue-dark:#0C1B33;

  --text:#E9EDF5;
  --bg:#071120;
  --grey-900:#0C1B33;
  --grey-850:#111827;
  --field-bg:#0E1726;
  --field-border:#252F3F;
  --muted:#A9B3C5;

  --font-body:'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading:'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-logo:'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Rhythm & Type */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-7:2rem; --space-8:3rem;
  --space-9:4rem; --space-10:5rem;

  --lh-tight:1.25; --lh-normal:1.6; --lh-relaxed:1.75;

  --radius-sm:8px; --radius-md:10px; --radius-lg:12px; --radius-xl:16px;

  --shadow-1:0 4px 14px rgba(0,0,0,.25);
  --shadow-2:0 8px 20px rgba(0,0,0,.30);

  /* Readable measures */
  --measure:72ch;
  --measure-narrow:62ch;
}

/* RESET & BASE */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  color:var(--text);
  font-family:var(--font-body);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;

  background:
    linear-gradient(
      rgba(7,17,32,0.10),
      rgba(7,17,32,0.10)
    ),
    url("./melbourne-skyline.webp")
      center / cover no-repeat fixed;

  font-size:16px;
}

img{display:block;max-width:100%;height:auto}
.container{width:min(1100px, 90%);margin-inline:auto}

/* Typography & global rhythm */
p{margin-block: var(--space-4); line-height: var(--lh-relaxed)}
h1,h2,h3,h4{
  line-height:var(--lh-tight);
  margin-block: var(--space-5) var(--space-3);
  font-family:var(--font-heading);
}
h1{font-size:clamp(2rem,4.6vw,3.2rem); font-weight:750; letter-spacing:-.015em}
h2{font-size:clamp(1.35rem,2.2vw,1.8rem); font-weight:650; letter-spacing:-.01em}
h3{font-size:clamp(1.1rem,1.6vw,1.35rem); font-weight:600; letter-spacing:-.005em}
ul,ol{padding-left:1.2rem; margin-block: var(--space-3)}

/* HEADER / NAV */
.nav{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(to right, rgba(7,17,32,0.98), rgba(12,27,51,0.98));
  border-bottom:1px solid var(--field-border);
  padding-block:12px;
  box-shadow:0 1px 0 rgba(255,255,255,0.04);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap}
.brand .logo{
  width: 32px;
  height: 32px;
  display: block;
  border-radius: 9px;
  padding: 4px;
  background: rgba(7,17,32,0.95);
  box-shadow: 0 0 0 1px rgba(93,160,213,0.35);
}

.brand span{
  color:var(--blue)!important;
  font-family:var(--font-logo);
  font-weight:700;
  letter-spacing:-0.03em;
  font-style: italic;
  font-size:1.38rem!important; line-height:1;
}

/* Menu links */
.menu{display:flex;align-items:center;gap:1.75rem;white-space:nowrap}
.menu a{font-weight:500;text-decoration:none;transition:color .2s ease,border-color .15s ease}
.menu a.navlink{
  color:#CFD3DA;
  border-bottom:2px solid transparent;
  padding-bottom:6px;
}
.menu a.navlink:hover,.menu a.navlink:focus{
  color:var(--blue);
  border-bottom-color:var(--blue);
}
.menu a.navlink[aria-current="page"]{
  color:var(--blue);
  border-bottom-color:var(--blue);
}

/* NAV CTA - Executive Minimal */
.menu .cta{
  background: transparent;
  color: var(--ice);
  border: 1.5px solid rgba(93,160,213,0.55);
  padding: .55rem .95rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  transition: 
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .08s ease,
    box-shadow .18s ease;
  box-shadow: none;
}

.menu .cta:hover{
  background: rgba(93,160,213,0.12);
  border-color: var(--ice);
  color: var(--ice-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.menu .cta:active{
  background: rgba(93,160,213,0.18);
  transform: none;
  box-shadow: none;
}

.menu .cta:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(93,160,213,0.35);
}

/* HERO (single consolidated definition) */
.hero{
  position: relative;
  padding-block: clamp(var(--space-8), 9vw, var(--space-10)) clamp(1rem, 3.5vw, 1.75rem);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-align:center;
  overflow:hidden; /* helps hero fades / images */
}
.badge{
  display:inline-block;
  background: rgba(93,160,213,0.20);
  color: var(--ice);
  border: 1.5px solid rgba(93,160,213,0.45);
  padding:.42rem .9rem;
  border-radius: 999px;
  font-size:.8rem;
  font-weight:650;
  letter-spacing:.12em;
  text-transform:uppercase;
  backdrop-filter: blur(4px);
}

.hero h1{margin-top:var(--space-3); color:#F9FAFB}
.hero p{color:var(--muted);max-width:620px;margin-inline:auto; margin-top:.8rem}

/* Optional hero variants */
.hero--solid{
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero--fade{position:relative;background:transparent!important}
.hero--fade::after{
  content:none;
}

/* SECTIONS / GRID */
.section{padding-block: clamp(2rem, 6vw, 4rem)}
.grid{display:grid;gap: clamp(1.25rem, 2.5vw, 2rem)}
.grid.one {grid-template-columns:1fr}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* CARDS */
.card{
  background: rgba(10,19,36,0.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border:1px solid rgba(230,232,235,0.09);
  border-radius:var(--radius-lg);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  box-shadow:var(--shadow-1);
  transition:transform .2s,box-shadow .2s, background .2s,border-color .2s;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-2);
  background: rgba(11,23,44,0.96);
  border-color:rgba(93,160,213,0.35);
}
.card h2,.card h3{color:var(--text)}
.card h2{color:#E6E8EB; margin-bottom:.35rem}
.kicker{color:#AEB4BF;font-size:.95rem;margin-bottom:.35rem}
.list{list-style:disc;margin-left:1.2rem;color:#D6D9DF}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Courier New',monospace;color:#C9CED6}

/* FORMS */
.form{display:grid;gap: var(--space-4)}
.input, input[type="text"], input[type="email"], textarea{
  width:100%;
  background-color: rgba(11,19,35,0.85);
  color:var(--text);
  border:1px solid rgba(230,232,235,0.14);
  border-radius:var(--radius-md);
  padding:.9rem 1rem;
  transition:border-color .2s,box-shadow .2s, background-color .2s;
  font:inherit;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.input::placeholder, input::placeholder, textarea::placeholder{color:rgba(154,162,175,0.9)}
.input:focus, input:focus, textarea:focus{
  background-color: rgba(11,19,35,0.95);
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(93,160,213,.35);
  outline:0
}
.btn, button{
  background:var(--blue); color:#06101F; border:0;
  border-radius:var(--radius-md);
  padding:.9rem 1.15rem; font-weight:650; cursor:pointer;
  transition:background .2s,transform .08s,box-shadow .2s;
  box-shadow:0 6px 16px rgba(5,12,25,.65);
}
.btn:hover, button:hover{
  background:var(--blue-hover);
  box-shadow:0 8px 20px rgba(4,10,22,.8);
  transform:translateY(-1px);
}
.btn:active, button:active{
  background:var(--blue);
  transform:none;
}

/* FOOTER */
.foot{
  background:radial-gradient(circle at top, rgba(12,27,51,0.95), rgba(7,17,32,0.98));
  border-top:1px solid var(--field-border);
  color:#9CA1AA;
  font-size:.95rem;
  padding-block: var(--space-7);
  text-align:center;
}
.foot .container{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
}
.foot a{
  color:var(--blue);
  text-decoration:none;
  font-weight:500;
}
.foot a:hover{
  color:var(--blue-hover);
  text-decoration:underline;
}
.foot p{margin:.3rem 0}
.foot .btn{
  padding:.55rem 1rem;font-size:.95rem;
  background:transparent;
  border:1px solid var(--field-border);
  color:var(--blue);
  font-weight:600;
  border-radius:var(--radius-md);
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .08s ease;
}
.foot .btn:hover{
  background:rgba(93,160,213,0.10);
  border-color:rgba(93,160,213,0.35);
  color:var(--blue-hover);
  transform:translateY(-1px);
}
@media (max-width:700px){.foot .container{gap:.5rem}}

/* ACCESSIBILITY */
:focus-visible{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px rgba(93,160,213,.45);
  border-radius:8px;
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Responsive Nav tweaks */
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.nav .brand{position:static!important;display:flex;align-items:center;gap:.5rem;min-width:0;white-space:nowrap}
.nav .menu{display:flex;align-items:center;gap:1rem;min-width:0}
@media (max-width:700px){.menu{gap:1rem}}
@media (max-width:640px){
  .nav .brand{flex:1 1 100%;margin-bottom:.5rem;order:1}
  .nav .menu{flex:1 1 100%;order:2;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .nav .menu a{flex:0 0 auto}
  .nav .menu .cta{margin-left:auto}
}

/* === ABOUT PAGE === */
.section.about{ font-size:1.05rem }
.section.about .container{ max-width:900px }

/* Floated image - keep as-is */
.section.about .about-photo{
  float:right;width:300px;margin:0 0 var(--space-6) var(--space-7);
  border-radius:1rem;object-fit:cover;
  box-shadow:0 8px 24px rgba(0,0,0,0.2);shape-outside:inset(0 round 1rem);
}
.section.about .container::after{content:"";display:block;clear:both}

/* Prose */
.section.about p{
  margin-block: var(--space-4);
  line-height: var(--lh-relaxed);
  max-width: var(--measure);
}

/* -------- BULLETS -------- */
.section.about ul.indented-list{
  list-style: disc outside;
  padding-left: 1.2rem;
  margin-top:.15rem;
  margin-bottom:.35rem;
  margin-left: 2.2rem;
  max-width: var(--measure);
}
.section.about ul.indented-list li{
  margin: .4rem 0;
  line-height: var(--lh-relaxed);
}
.section.about ul.indented-list ul{
  list-style: circle;
  margin-top:.3rem;
  margin-left: 1.8rem;
}
.section.about ul.indented-list.clear-right{ clear: right; }

/* Mobile: normal indentation so it doesn't look cramped */
@media (max-width:800px){
  .section{padding-block: var(--space-7)}
  .grid{gap: var(--space-5)}
  .section.about .about-photo{
    float:none;display:block;margin:0 auto var(--space-6) auto;width:80%;shape-outside:none;
  }
  h1{font-size:clamp(2rem,8vw,2.4rem)}
  .section.about ul.indented-list{ margin-left: 1.2rem; }
}

/* Headings: slightly more separation from following text */
h2 + p, h3 + p { margin-top: .15rem }

/* ===========================
   iOS/mobile background reliability
   =========================== */
@media (max-width: 900px){
  @supports (-webkit-touch-callout: none) {
    body{
      background-attachment: scroll, scroll !important;
      background-position: center top, center top;
      background-repeat: no-repeat, no-repeat;
      background-size: cover, cover;
      background-image:
        linear-gradient(rgba(7,17,32,0.95), rgba(7,17,32,0.93)),
        url("./melbourne-skyline2.webp");
    }
  }
}

/* Optional: background on its own layer for desktops that like 'fixed' */
.bg-layer{ background:none!important; position:relative; }
.bg-layer::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    linear-gradient(rgba(7,17,32,0.97), rgba(7,17,32,0.96)),
    url("./melbourne-skyline2.webp") center / cover no-repeat;
}
@media (max-width: 900px){
  @supports (-webkit-touch-callout: none) {
    .bg-layer::before{
      position:absolute;
      background:
        linear-gradient(rgba(7,17,32,0.95), rgba(7,17,32,0.93)),
        url("./melbourne-skyline2.webp") center top / cover no-repeat;
    }
  }
}

/* ===========================
   GLOBAL HERO ⇄ SECTION SPACING FIX
   =========================== */

.hero + .section{
  padding-top: clamp(0.75rem, 2.5vw, 1.5rem);
}
.section + .section{
  padding-top: clamp(1rem, 3vw, 2rem);
}
@media (max-width: 700px){
  .section{
    padding-block: clamp(1.5rem, 6vw, 3rem);
  }
  .hero{
    padding-bottom: clamp(0.75rem, 3vw, 1.25rem);
  }
  .hero + .section{
    padding-top: clamp(0.5rem, 2.5vw, 1rem);
  }
}
.section .container > *:first-child{
  margin-top: 0;
}

/* === FIX: Prevent CTA button cut-off on mobile nav === */
@media (max-width: 700px) {
  .nav {
    padding-block: 0.9rem 0.9rem;
  }
  .menu .cta {
    padding: 0.55rem 0.95rem;
    font-size: 0.95rem;
  }
  .nav-inner {
    align-items: center;
    min-height: 60px;
  }
}

/* === FIX: Button text size for forms (Send message) === */
.btn,
button[type="submit"] {
  font-size: 1rem;
  padding: 0.95rem 1.25rem;
  letter-spacing: 0.01em;
}
@media (max-width: 700px) {
  .btn,
  button[type="submit"] {
    font-size: 1.02rem;
    padding: 1rem 1.3rem;
  }
}

/* === Mobile nav: keep CTA fully visible === */
@media (max-width: 640px){
  .nav .menu{
    overflow: visible !important;
    flex-wrap: wrap;
    gap: .9rem;
    padding-right: calc(env(safe-area-inset-right) + 12px);
  }
  .nav .menu .cta{
    margin-left: auto;
    margin-right: 0;
    flex: 0 0 auto;
    font-size: 1rem;
    padding: .62rem 1rem;
    border-radius:12px;
  }
  .nav{
    padding-block:.85rem;
  }
  .nav-inner{
    min-height: 60px;
    align-items: center;
  }
}

/* === MOBILE NAV: keep CTA on same row, aligned right === */
@media (max-width: 640px){
  .nav-inner{
    display:flex;
    align-items:center;
    gap:.5rem;
    min-height:60px;
    padding-left:calc(env(safe-area-inset-left) + 10px);
    padding-right:calc(env(safe-area-inset-right) + 10px);
  }
  .nav .brand{
    flex:0 1 auto;
    min-width:0;
  }
  .nav .menu{
    flex:1 1 auto;
    display:flex;
    align-items:center;
    gap:.9rem;
    white-space:nowrap;
    overflow:visible !important;
    flex-wrap:nowrap;
    order:0;
  }
  .nav .menu a{
    flex:0 0 auto;
  }
  .nav .menu .cta{
    margin-left:auto;
    flex:0 0 auto;
    font-size:1rem;
    padding:.58rem 1rem;
    border-radius:12px;
  }
  .nav{
    padding-block:.85rem;
  }
}

/* Make entire service cards clickable links */
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.card-link .card {
  cursor: pointer;
}
.card-link:hover .card,
.card-link:focus-visible .card {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

/* === Match section buttons to the nav CTA (default) === */
.section .btn,
.section button,
.section a.btn {
  background: transparent;
  color: var(--ice);
  border: 1.5px solid rgba(93,160,213,0.55);
  padding: .65rem 1.05rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.97rem;
  letter-spacing: 0.015em;
  text-decoration: none;
  display: inline-block;
  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .08s ease;
}
.section .btn:hover,
.section button:hover,
.section a.btn:hover {
  background: rgba(93,160,213,0.12);
  border-color: var(--ice);
  color: var(--ice-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.section .btn:active,
.section button:active,
.section a.btn:active {
  background: rgba(93,160,213,0.18);
  transform: none;
  box-shadow: none;
}
.section .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(93,160,213,0.35);
}

/* =========================================================
   SERVICES PAGE — staged images
========================================================= */

.services-page .service-stage {
  position: relative;
  z-index: 1;
  min-height: 90vh;
  margin-block: 8rem;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease, transform .7s ease;
}
.services-page .service-stage.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* TEXT BLOCK */
.services-page .service-stage .card {
  position: relative;
  z-index: 10;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0;
  max-width: 620px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .6s ease .32s,
    transform .6s ease .32s;
}
.services-page .service-stage.is-active .card {
  opacity: 1;
  transform: translateY(0);
}
.services-page .service-stage .card h2,
.services-page .service-stage .card h3 {
  color: #F9FAFF;
  text-shadow: 0 0 18px rgba(0,0,0,0.9);
}
.services-page .service-stage .card p,
.services-page .service-stage .card li,
.services-page .service-stage .card .kicker {
  color: #E5EBF5;
  text-shadow: 0 0 14px rgba(0,0,0,0.85);
}

/* IMAGE */
.services-page .service-stage .service-img {
  position: absolute;
  top: 34%;
  transform: translateY(-50%);
  width: 86vw;
  max-width: 1200px;
  height: auto;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .7s ease;
  box-shadow:
    0 0 160px 95px rgba(7,17,32,1) inset,
    0 0 160px 95px rgba(7,17,32,1) inset;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 20%, black 80%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 20%, black 80%, transparent 100%);
  mask-composite: intersect;
}
.services-page .service-stage.is-active .service-img {
  opacity: 0.55;
}

/* PER-IMAGE SIDE BIAS */
.services-page .service-stage:nth-of-type(1) .service-img {
  right: -6vw !important;
  width: 76vw !important;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 24%, black 76%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 42%, black 92%, black 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 24%, black 76%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 42%, black 92%, black 100%);
}
.services-page .service-stage:nth-of-type(2) .service-img {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 24%, black 76%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 12%, black 50%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 24%, black 76%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 12%, black 50%, transparent 100%);
}
.services-page .service-stage:nth-of-type(3) .service-img {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 38%, black 84%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 38%, black 84%, transparent 100%);
}

/* LEFT / RIGHT POSITIONING */
.services-page .stage-right .service-img { right: -6vw !important; }
.services-page .stage-left  .service-img { left:  -14vw; }

.services-page .stage-right .card { margin-right: auto; }
.services-page .stage-left  .card { margin-left:  auto; }

/* LINKS */
.services-page a {
  text-decoration: none !important;
  color: inherit;
}
.services-page .learn-link {
  color: var(--blue);
  font-weight: 500;
}
.services-page .learn-link:hover {
  color: var(--blue-hover);
  text-decoration: underline;
}

/* MOBILE SERVICES */
@media (max-width: 820px) {
  .services-page .service-stage {
    min-height: auto;
    margin-block: 4rem;
  }
  .services-page .service-stage .service-img {
    position: relative;
    top: auto;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: 95%;
    max-width: 95%;
    margin-bottom: 1.8rem;
    box-shadow:
      0 0 130px 85px rgba(7,17,32,1) inset,
      0 0 130px 85px rgba(7,17,32,1) inset;
  }
  .services-page .service-stage:nth-of-type(1) .service-img {
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%),
      linear-gradient(to right, transparent 0%, black 50%, black 92%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%),
      linear-gradient(to right, transparent 0%, black 50%, black 92%, transparent 100%);
  }
  .services-page .service-stage:nth-of-type(2) .service-img {
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%),
      linear-gradient(to right, transparent 0%, black 10%, black 52%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%),
      linear-gradient(to right, transparent 0%, black 10%, black 52%, transparent 100%);
  }
  .services-page .service-stage:nth-of-type(3) .service-img {
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%),
      linear-gradient(to right, transparent 0%, black 40%, black 90%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%),
      linear-gradient(to right, transparent 0%, black 40%, black 90%, transparent 100%);
  }
  .services-page .stage-right .card,
  .services-page .stage-left .card {
    margin-left: 0;
    margin-right: 0;
  }
  .services-page .service-stage .card {
    transition:
      opacity .55s ease .28s,
      transform .55s ease .28s;
  }
}
/* Make ONLY the second services image more transparent */
.services-page .service-stage:nth-of-type(2).is-active .service-img {
  opacity: 0.45 !important;
}

/* =========================================================
   CLEAN MINIMAL SCROLL INDICATOR — fixed to viewport
========================================================= */

.scroll-arrow {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  opacity: 0.9;
  pointer-events: none;
  z-index: 999;
  animation: arrowPulse 2s ease-in-out infinite;
}
.scroll-arrow::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-right: 2px solid rgba(255,255,255,0.85);
  border-bottom: 2px solid rgba(255,255,255,0.85);
  transform: rotate(45deg);
  margin: auto;
}
@keyframes arrowPulse {
  0% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.4;
  }
  50% {
    transform: translateX(-50%) translateY(6px);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.4;
  }
}
.scroll-arrow.is-hidden {
  opacity: 0;
  transition: opacity .7s ease;
}

/* =========================================================
   HOMEPAGE HERO IMAGE — fade + backdrop
========================================================= */

.home-hero-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: auto;
  max-width: 1600px;
  pointer-events: none;
  z-index: -1;
  opacity: 0.30;
  object-fit: contain;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 35%, black 65%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 25%, black 75%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 35%, black 65%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 25%, black 75%, transparent 100%);
  mask-composite: intersect;
}

/* =========================================================
   ASSESS / EVOLVE bottom image section
========================================================= */

.assess-section {
  position: relative;
  overflow: hidden;            /* hide hard edges of the image */
}

/* dark overlay over the image for legible copy */
.assess-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 520px; /* matches image height */
  background: linear-gradient(
    to top,
    rgba(7,17,32,0.96) 0%,
    rgba(7,17,32,0.90) 28%,
    rgba(7,17,32,0.78) 55%,
    rgba(7,17,32,0.45) 78%,
    rgba(7,17,32,0.00) 100%
  );
  z-index: 0;           /* above image, below text */
  pointer-events: none;
}

/* keep all the copy above the image + overlay */
.assess-section .container {
  position: relative;
  z-index: 1;
}

/* backdrop image at the bottom */
.assess-backdrop {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 120%;
  max-width: none;
  height: 520px;
  object-fit: cover;
  opacity: 0.3;         /* softer so text pops */
  pointer-events: none;
  z-index: -1;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.35) 12%,
    rgba(0, 0, 0, 0.7) 26%,
    rgba(0, 0, 0, 1) 40%,
    rgba(0, 0, 0, 1) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.35) 12%,
    rgba(0, 0, 0, 0.7) 26%,
    rgba(0, 0, 0, 1) 40%,
    rgba(0, 0, 0, 1) 100%
  );
}

/* text & lists over the image */
.assess-section h2,
.assess-section h3,
.assess-section p,
.assess-section li {
  color: #F5F7FF;
  text-shadow: 0 0 14px rgba(0,0,0,0.95);
}

/* Icy blue, high-visibility CTA button just for this section */
.assess-section .btn {
  background: var(--ice);
  color: #04111F;
  border-color: rgba(93,160,213,0.95);
  box-shadow: 0 10px 26px rgba(0,0,0,0.65);
  padding: 0.95rem 1.4rem;
  font-weight: 650;
}
.assess-section .btn:hover {
  background: var(--ice-hover);
  border-color: var(--ice-hover);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.75);
}
.assess-section .btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,0.6);
}