
  :root {
    --red: #E53935;
    --red-lt: #FFEBEE;
    --red-dk: #B71C1C;
    --bg: #F8FAFC;
    --white: #FFFFFF;
    --subtle: #F1F5F9;
    --muted: #E2E8F0;
    --t900: #0F172A;
    --t700: #334155;
    --t500: #64748B;
    --t300: #CBD5E1;
    --border: #E2E8F0;
    --r-md: 0.75rem;
    --r-lg: 1.25rem;
    --r-xl: 2rem;
    --sh-sm: 0 1px 3px rgba(15, 23, 42, .06);
    --sh-md: 0 4px 16px rgba(15, 23, 42, .08);
    --sh-lg: 0 12px 40px rgba(15, 23, 42, .12);
    --display: 'Plus Jakarta Sans', sans-serif;
    --body: 'Inter', sans-serif;
    --nav-h: 70px;
    --success: #10B981;
    --success-lt: #ECFDF5;
    --blue: #2563EB;
    --blue-lt: #EFF6FF;
    --green: #16A34A;
    --green-lt: #F0FDF4;
    --amber: #D97706;
    --amber-lt: #FFFBEB;
    --purple: #7C3AED;
    --purple-lt: #F5F3FF;
    --teal: #0D9488;
    --teal-lt: #F0FDFA;
  }

  .city-page{
    font-family: var(--body);
    color: var(--t700);
    background: var(--white);
    overflow-x: hidden;
  }
  .city-page h1, .city-page h2, .city-page h3, .city-page h4{
    font-family: var(--display);
    font-weight: 700;
    color: var(--t900);
  }
  .city-page p{
    color: var(--t500);
    line-height: 1.75;
  }
  .city-page .city-page-section{
    padding: 5.5rem 0;
    position: relative;
  }
  .city-page .city-page-section--alt{
    background: var(--bg);
  }

  /* ===== Soft flag-wash parallax banner ===== */
  .city-page .city-page-parallax{
    position: relative;
    overflow: hidden;
    background: var(--white);
  }
  .city-page .city-page-parallax::before{
    content:"";
    position:absolute; inset:0;
    background-image: url('https://flagcdn.com/w1280/au.png');
    background-size: cover;
    background-position: left center;
    -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 52%);
    mask-image: linear-gradient(100deg, #000 0%, transparent 52%);
    opacity: .5;
    z-index:0;
  }
  @media (min-width: 992px){
    .city-page .city-page-parallax::before{ background-attachment: fixed; }
  }
  .city-page .city-page-parallax > .container{ position: relative; z-index: 1; }

  /* Badge row with flanking arrows */
  .city-page .city-page-badge-row{
    display:flex; align-items:center; justify-content:center; gap: .9rem;
    margin-bottom: 1.1rem;
  }
  .city-page .city-page-badge-arrow{ color: var(--t300); font-size: 1.1rem; }

  /* Small accent divider under lead text */
  .city-page .city-page-divider{
    width: 64px; height: 3px; border-radius: 999px;
    background: linear-gradient(90deg, var(--red), var(--red-dk));
    margin: 1rem auto 0;
  }

  /* Small flag chip for country identity */
  .city-page .city-page-flag-chip{
    width: 20px; height: 20px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(229,57,53,.3);
  }
  .city-page .city-page-section--dark{
    background: var(--t900);
  }

  /* Section header, always centered */
  .city-page .city-page-section-head{
    max-width: 760px;
    margin: 0 auto 3.25rem;
    text-align: center;
  }
  .city-page .city-page-section-title{
    font-size: clamp(1.6rem, 2.8vw, 2.15rem);
    font-weight: 800;
    margin-bottom: .75rem;
    position: relative;
  }
  .city-page .city-page-section-title .city-page-highlight{
    color: var(--red);
    position: relative;
  }
  .city-page .city-page-section-title .city-page-highlight::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-2px; height: 8px;
    background: rgba(229,57,53,.14);
    z-index:-1;
    border-radius: 2px;
  }
  .city-page .city-page-section-title + .city-page-divider{ margin-top: 1.25rem; }
  .city-page .city-page-section-head > p + .city-page-divider{ margin-top: .5rem; }

  /* Badge / eyebrow */
  .city-page .city-page-eyebrow{
    font-family: var(--display);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--red);
    background: var(--red-lt);
    border: 1px solid #FFCDD2;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    margin-bottom: 1.1rem;
  }
  .city-page .city-page-eyebrow--dark{
    background: rgba(229,57,53,.12);
    border-color: rgba(229,57,53,.35);
    color: #FF8A80;
  }

  /* Buttons */
  .city-page .city-page-btn{
    font-family: var(--display);
    font-weight: 700;
    font-size: .95rem;
    padding: .85rem 1.9rem;
    border-radius: var(--r-md);
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .city-page .city-page-btn--primary{
    background: var(--red);
    color: var(--white);
    box-shadow: var(--sh-md);
  }
  .city-page .city-page-btn--primary:hover{
    background: var(--red-dk);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(229,57,53,.32);
  }
  .city-page .city-page-btn--outline{
    background: var(--white);
    border-color: var(--border);
    color: var(--t900);
  }
  .city-page .city-page-btn--outline:hover{
    transform: translateY(-2px);
    box-shadow: var(--sh-md);
  }

  /* ===== Hero ===== */
  .city-page .city-page-hero{
    padding: 6rem 0 5rem;
    position: relative;
    background-image:
      linear-gradient(100deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.98) 30%, rgba(255,255,255,.55) 58%, rgba(255,255,255,0) 78%),
      url('https://picsum.photos/seed/webeasy-hero/1600/1000');
    background-size: cover;
    background-position: center;
  }
  .city-page .city-page-hero h1{
    font-size: clamp(2.2rem, 4.2vw, 3rem);
    font-weight: 800;
    line-height: 1.18;
  }
  .city-page .city-page-hero h1 .city-page-highlight{ color: var(--red); }
  .city-page .city-page-hero h2{
    color: var(--t700);
    font-size: 1.1rem;
    font-weight: 500;
    font-family: var(--body);
    margin: .9rem 0 1.1rem;
  }
  .city-page .city-page-hero p{ color: var(--t500); font-size: 1.02rem; max-width: 46ch; }
  .city-page .city-page-hero-actions{ display:flex; flex-wrap:wrap; gap: .9rem; margin-top: 2rem; }

  /* Hero enquiry form */
  .city-page .city-page-enquiry-wrap{
    position: relative;
    padding-top: 1.4rem;
  }
  .city-page .city-page-offer-badge{
    position: absolute;
    top: 0;
    right: 1.6rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: linear-gradient(135deg, #FFC107 0%, #FF8F00 100%);
    color: var(--t900);
    font-family: var(--display);
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: .55rem 1.1rem;
    box-shadow: 0 8px 20px rgba(255, 143, 0, .4);
    transform: rotate(2deg);
    clip-path: polygon(0% 0%, 100% 0%, 96% 50%, 100% 100%, 0% 100%, 4% 50%);
  }
  .city-page .city-page-offer-badge i{ font-size: .85rem; }
  .city-page .city-page-enquiry-card{
    background: var(--white);
    border: 2px solid var(--t900);
    border-radius: 0;
    box-shadow: 10px 10px 0 rgba(229,57,53,.18), var(--sh-lg);
    padding: 2.25rem 2rem 2rem;
    position: relative;
  }
  .city-page .city-page-enquiry-card::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0; height: 6px;
    background: repeating-linear-gradient(-45deg, var(--red) 0 10px, var(--t900) 10px 20px);
  }
  .city-page .city-page-enquiry-card-head{
    display:flex; align-items:flex-start; justify-content:space-between; gap: 1rem;
    margin-bottom: 1.5rem; padding-bottom: 1.25rem;
    border-bottom: 1px dashed var(--border);
  }
  .city-page .city-page-enquiry-card h3{
    font-size: 1.35rem; margin-bottom: .35rem;
  }
  .city-page .city-page-enquiry-card > .city-page-enquiry-card-head p{
    font-size: .9rem; margin-bottom: 0;
  }
  .city-page .city-page-enquiry-icon{
    flex: 0 0 auto;
    width: 50px; height: 50px;
    background: var(--t900);
    color: #FFC107;
    display:flex; align-items:center; justify-content:center;
    font-size: 1.35rem;
  }
  .city-page .city-page-form-group{
    display:flex; align-items:center; gap: .7rem;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 0;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    transition: border-color .15s ease, background .15s ease;
  }
  .city-page .city-page-form-group:focus-within{
    border-color: var(--red);
    background: var(--white);
  }
  .city-page .city-page-form-group--textarea{ align-items:flex-start; }
  .city-page .city-page-form-group i{
    font-size: 1.05rem; flex: 0 0 auto; width: 20px; text-align:center;
  }
  .city-page .city-page-form-group--textarea i{ margin-top: .2rem; }
  .city-page .city-page-form-group input,
  .city-page .city-page-form-group textarea{
    border:none; background:transparent; outline:none; width:100%;
    font-family: var(--body); font-size: .92rem; color: var(--t900);
  }
  .city-page .city-page-form-group textarea{ resize:none; }
  .city-page .city-page-form-group input::placeholder,
  .city-page .city-page-form-group textarea::placeholder{ color: var(--t500); }
  .city-page .city-page-enquiry-card .city-page-btn{
    border-radius: 0;
  }
  .city-page .city-page-enquiry-trust{
    display:flex; flex-wrap:wrap; gap: .6rem 1.1rem;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--border);
  }
  .city-page .city-page-enquiry-trust span{
    display:flex; align-items:center; gap: .4rem;
    font-size: .78rem; font-weight: 600; color: var(--t500);
  }
  .city-page .city-page-enquiry-trust i{ color: var(--success); }

  /* Browser-chrome mockup */
  .city-page .city-page-mockup{
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-lg);
  }
  .city-page .city-page-mockup-bar{
    display:flex; align-items:center; gap: .4rem;
    padding: .8rem 1rem; border-bottom: 1px solid var(--border); background: var(--subtle);
  }
  .city-page .city-page-mockup-dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--t300); }
  .city-page .city-page-mockup-url{
    flex: 1; height: 22px; margin-left: .6rem; background: var(--white);
    border: 1px solid var(--border); border-radius: 999px;
    display:flex; align-items:center; justify-content:center; color: var(--t500); font-size: .7rem;
  }
  .city-page .city-page-mockup img{ width:100%; display:block; }

  /* ===== White feature/trust cards (light section) ===== */
  .city-page .city-page-card{
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: 2rem 1.75rem;
    height: 100%;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .city-page .city-page-card:hover{
    transform: translateY(-6px);
    box-shadow: var(--sh-lg);
    border-color: #FFCDD2;
  }
  .city-page .city-page-card-icon{
    width: 54px; height: 54px; margin: 0 auto 1.25rem;
    border-radius: var(--r-md);
    background: var(--red-lt);
    color: var(--red);
    display:flex; align-items:center; justify-content:center;
    font-size: 1.4rem;
  }
  .city-page .city-page-card h4{ font-size: 1.05rem; margin-bottom: .6rem; }
  .city-page .city-page-card p{ font-size: .92rem; margin-bottom: 0; }

  /* ===== Process (route) ===== */
  .city-page .city-page-process{ position: relative; }
  .city-page .city-page-process-track{
    position:absolute; top: 27px; left: 0; right: 0; height: 2px;
    background-image: linear-gradient(to right, var(--border) 60%, transparent 0%);
    background-size: 14px 2px; background-repeat: repeat-x;
    display:none;
  }
  @media (min-width:992px){ .city-page .city-page-process-track{ display:block; } }
  .city-page .city-page-process-step{ position: relative; text-align:left; padding: 1.5rem 1.25rem; border-radius: var(--r-lg); transition: background .2s ease, box-shadow .2s ease; }
  .city-page .city-page-process-step:hover{ background: var(--white); box-shadow: var(--sh-md); }
  .city-page .city-page-process-number{
    width: 52px; height: 52px; border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--red) 0%, var(--red-dk) 100%);
    color: var(--white);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--display); font-weight:700; font-size: 1.1rem;
    margin-bottom: 1.1rem; position: relative; z-index: 1;
    box-shadow: var(--sh-md);
  }
  .city-page .city-page-process-step h4{ font-size: 1.03rem; margin-bottom: .5rem; }
  .city-page .city-page-process-step p{ font-size: .92rem; }

  /* ===== Cities grid ===== */
  .city-page .city-page-city-chip{
    display:flex; align-items:center; gap: .9rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: 1.1rem 1.2rem;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .city-page .city-page-city-chip:hover{
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
  }
  .city-page .city-page-city-chip .city-page-city-dot{
    width: 48px; height:48px; border-radius: 50%; flex: 0 0 auto;
    background: var(--red-lt); color: var(--red);
    display:flex; align-items:center; justify-content:center; font-size: 1.2rem;
    position: relative;
    z-index: 1;
  }
  .city-page .city-page-city-chip .city-page-city-dot::before{
    content:"";
    position:absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid currentColor;
    z-index: -1;
    animation: city-page-glow 2.8s ease-out infinite;
  }
  @keyframes city-page-glow{
    0%{ opacity: .55; transform: scale(.88); }
    75%, 100%{ opacity: 0; transform: scale(1.28); }
  }
  .city-page .row > div:nth-of-type(2) .city-page-city-dot::before{ animation-delay: .3s; }
  .city-page .row > div:nth-of-type(3) .city-page-city-dot::before{ animation-delay: .6s; }
  .city-page .row > div:nth-of-type(4) .city-page-city-dot::before{ animation-delay: .9s; }
  .city-page .row > div:nth-of-type(5) .city-page-city-dot::before{ animation-delay: 1.2s; }
  .city-page .row > div:nth-of-type(6) .city-page-city-dot::before{ animation-delay: 1.5s; }
  .city-page .row > div:nth-of-type(7) .city-page-city-dot::before{ animation-delay: 1.8s; }
  .city-page .row > div:nth-of-type(8) .city-page-city-dot::before{ animation-delay: 2.1s; }
  .city-page .row > div:nth-of-type(9) .city-page-city-dot::before{ animation-delay: 2.4s; }
  .city-page .row > div:nth-of-type(10) .city-page-city-dot::before{ animation-delay: 2.7s; }

  /* Multi-color icon cycle for city cards */
  .city-page .row > div:nth-of-type(6n+2) .city-page-city-dot{ background: var(--blue-lt); color: var(--blue); }
  .city-page .row > div:nth-of-type(6n+3) .city-page-city-dot{ background: var(--green-lt); color: var(--green); }
  .city-page .row > div:nth-of-type(6n+4) .city-page-city-dot{ background: var(--amber-lt); color: var(--amber); }
  .city-page .row > div:nth-of-type(6n+5) .city-page-city-dot{ background: var(--purple-lt); color: var(--purple); }
  .city-page .row > div:nth-of-type(6n) .city-page-city-dot{ background: var(--teal-lt); color: var(--teal); }
  .city-page .city-page-city-name{
    font-family: var(--display); font-weight:700; font-size: .98rem;
    color: var(--t900); display:flex; align-items:center; gap: .35rem;
  }
  .city-page .city-page-city-name i{ color: var(--red); font-size: .85rem; }
  .city-page .city-page-city-state{
    display:block; font-size: .78rem; color: var(--t500); margin-top: .15rem;
  }

  /* ===== Dark section checklist (Why Choose Us / Tasmania) ===== */
  .city-page .city-page-dark-list-item{
    display:flex; align-items:flex-start; gap: 1rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: padding-left .2s ease;
  }
  .city-page .city-page-dark-list-item:hover{ padding-left: .4rem; }
  .city-page .city-page-dark-list-item:last-child{ border-bottom: none; }
  .city-page .city-page-dark-check{
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    background: var(--success-lt);
    color: var(--success);
    display:flex; align-items:center; justify-content:center;
    font-size: .85rem;
    box-shadow: 0 0 0 4px rgba(16,185,129,.12);
  }
  .city-page .city-page-dark-list-item h4{ color: var(--white); font-size: 1.02rem; margin-bottom: .4rem; }
  .city-page .city-page-dark-list-item p{ color: var(--t300); font-size: .92rem; margin-bottom: 0; }

  /* ===== Features grid (light chips) ===== */
  .city-page .city-page-feature-card{
    display:flex; align-items:center; gap: .8rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    padding: .95rem 1.1rem;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .city-page .city-page-feature-card:hover{
    transform: translateY(-3px);
    box-shadow: var(--sh-md);
    border-color: #FFCDD2;
  }
  .city-page .city-page-feature-card i{
    width: 34px; height: 34px; border-radius: .6rem; flex: 0 0 auto;
    background: var(--red-lt); color: var(--red);
    display:flex; align-items:center; justify-content:center; font-size: .95rem;
  }
  .city-page .city-page-feature-card span{ font-size: .9rem; color: var(--t900); font-weight: 500; }
  .city-page .row > div:nth-of-type(6n+2) .city-page-feature-card i{ background: var(--blue-lt); color: var(--blue); }
  .city-page .row > div:nth-of-type(6n+3) .city-page-feature-card i{ background: var(--green-lt); color: var(--green); }
  .city-page .row > div:nth-of-type(6n+4) .city-page-feature-card i{ background: var(--amber-lt); color: var(--amber); }
  .city-page .row > div:nth-of-type(6n+5) .city-page-feature-card i{ background: var(--purple-lt); color: var(--purple); }
  .city-page .row > div:nth-of-type(6n) .city-page-feature-card i{ background: var(--teal-lt); color: var(--teal); }

  /* ===== Tech stack ===== */
  .city-page .city-page-tech-card{
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: 1.5rem 1.1rem;
    text-align:center;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .city-page .city-page-tech-card:hover{
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--sh-lg);
  }
  .city-page .city-page-tech-card i{
    font-size: 1.35rem; color: var(--red);
    width: 48px; height: 48px; border-radius: var(--r-md);
    background: var(--red-lt);
    display:flex; align-items:center; justify-content:center;
    margin: 0 auto .8rem;
  }
  .city-page .city-page-tech-card span{ font-family: var(--display); font-weight:600; font-size: .88rem; color: var(--t900); }
  .city-page .row > div:nth-of-type(6n+2) .city-page-tech-card i{ background: var(--blue-lt); color: var(--blue); }
  .city-page .row > div:nth-of-type(6n+3) .city-page-tech-card i{ background: var(--green-lt); color: var(--green); }
  .city-page .row > div:nth-of-type(6n+4) .city-page-tech-card i{ background: var(--amber-lt); color: var(--amber); }
  .city-page .row > div:nth-of-type(6n+5) .city-page-tech-card i{ background: var(--purple-lt); color: var(--purple); }
  .city-page .row > div:nth-of-type(6n) .city-page-tech-card i{ background: var(--teal-lt); color: var(--teal); }


  /* ===== Industries ===== */
  .city-page .city-page-industry-pill{
    display:inline-flex; align-items:center; gap: .5rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .6rem 1.15rem;
    font-size: .9rem; font-weight: 500; color: var(--t900);
    box-shadow: var(--sh-sm);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .city-page .city-page-industry-pill:hover{
    transform: translateY(-3px);
    box-shadow: var(--sh-md);
    background: var(--red-lt);
  }
  .city-page .city-page-industry-pill i{ color: var(--red); }
  .city-page .city-page-industry-pill:nth-of-type(6n+2) i{ color: var(--blue); }
  .city-page .city-page-industry-pill:nth-of-type(6n+3) i{ color: var(--green); }
  .city-page .city-page-industry-pill:nth-of-type(6n+4) i{ color: var(--amber); }
  .city-page .city-page-industry-pill:nth-of-type(6n+5) i{ color: var(--purple); }
  .city-page .city-page-industry-pill:nth-of-type(6n) i{ color: var(--teal); }

  /* ===== Testimonials ===== */
  .city-page .city-page-testimonial{
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    padding: 2.1rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .city-page .city-page-testimonial::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height: 4px;
    background: linear-gradient(90deg, var(--red), var(--purple));
  }
  .city-page .city-page-testimonial:hover{
    transform: translateY(-6px);
    box-shadow: var(--sh-lg);
  }
  .city-page .city-page-testimonial i.bi-quote{
    font-size: 1.3rem; color: var(--purple);
    display:flex; align-items:center; justify-content:center;
    width: 44px; height: 44px; border-radius: var(--r-md);
    background: var(--purple-lt);
    margin-bottom: 1.2rem;
  }
  .city-page .col-md-6:nth-of-type(2) i.bi-quote{ color: var(--blue); background: var(--blue-lt); }
  .city-page .city-page-testimonial p{ color: var(--t900); font-size: 1.02rem; font-style: italic; }
  .city-page .city-page-testimonial-author{ display:flex; align-items:center; gap: .7rem; margin-top: 1.4rem; }
  .city-page .city-page-testimonial-avatar{ width: 44px; height: 44px; border-radius: 50%; overflow:hidden; flex: 0 0 auto; }
  .city-page .city-page-testimonial-avatar img{ width:100%; height:100%; object-fit:cover; }
  .city-page .city-page-testimonial-author strong{ display:block; font-size: .92rem; color: var(--t900); }
  .city-page .city-page-testimonial-author small{ color: var(--t500); }

  /* ===== Guarantee ===== */
  .city-page .city-page-guarantee{
    background: var(--white);
    border-radius: var(--r-xl);
    padding: 3.2rem;
    border: 1px solid var(--border);
    box-shadow: var(--sh-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .city-page .city-page-guarantee::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 0% 0%, var(--green-lt) 0%, transparent 40%),
      radial-gradient(circle at 100% 100%, var(--red-lt) 0%, transparent 40%);
    z-index: 0;
  }
  .city-page .city-page-guarantee > *{ position: relative; z-index: 1; }
  .city-page .city-page-guarantee-icon{
    width: 64px; height: 64px; border-radius: var(--r-md);
    background: var(--green);
    color: var(--white);
    display:flex; align-items:center; justify-content:center;
    font-size: 1.7rem; margin: 0 auto 1.3rem;
    box-shadow: var(--sh-md);
  }
  .city-page .city-page-guarantee p{ max-width: 640px; margin-left:auto; margin-right:auto; }

  /* ===== Final CTA ===== */
  .city-page .city-page-cta{
    background: linear-gradient(135deg, var(--red) 0%, var(--red-dk) 100%);
    color: var(--white);
    border-radius: var(--r-xl);
    padding: 3.6rem;
    text-align:center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--sh-lg);
  }
  .city-page .city-page-cta::before{
    content:"";
    position:absolute; inset:0;
    background-image: radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    z-index: 0;
  }
  .city-page .city-page-cta > *{ position: relative; z-index: 1; }
  .city-page .city-page-cta h2{ color: var(--white); }
  .city-page .city-page-cta p{ color: rgba(255,255,255,.85); max-width: 620px; margin-left:auto; margin-right:auto; }
  .city-page .city-page-cta .city-page-btn--outline{
    background: var(--white); color: var(--red-dk); border-color: var(--white);
  }
  .city-page .city-page-cta .city-page-btn--outline:hover{
    background: var(--t900); color: var(--white);
  }

