:root{






      --shadow:0 10px 28px rgba(0,0,0,.28);

      --r2:14px;
      --max:1120px;
      --gap:18px;

    }

    .afs-home{
      font-family:var(--font);
      color:var(--ink);
      background: radial-gradient(1200px 600px at 30% 0%, rgba(244,160,0,.10), transparent 55%),
                  linear-gradient(180deg, var(--bg), var(--bg2));
      padding: 18px 16px 22px; /* less bottom padding because footer is inside embed now */
    }
    .wrap{ max-width:var(--max); margin:0 auto; }
    a{ color:inherit; }

    /* HERO */
    .hero{
      border-radius: var(--r);
      overflow:hidden;
      box-shadow: var(--shadow);
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.03);
    }
    .hero-media{
      position:relative;
      background:#0f1f2c;
      height: clamp(220px, 30vw, 360px);
    }
    .hero-media img.banner{
      width:100%;
      height:100%;
      display:block;
      object-fit: cover;
      object-position: 50% 50%;
      background:#0f1f2c;
    }
    .hero-media img.logo{
      position:absolute;
      left:50%;
      top:50%;
      transform: translate(-50%, -50%);
      width: 220px;
      max-width: 52vw;
      height:auto;
      filter: drop-shadow(0 10px 26px rgba(0,0,0,.55));
      pointer-events:none;
    }

    .hero-body{
      padding: 18px 18px 20px;
      text-align:center;
    }
    .kicker{
      color:var(--accent);
      font-weight:900;
      letter-spacing:.4px;
      margin:0 0 6px;
      font-size: 14px;
      text-transform: uppercase;
    }
    .hero h1{
      margin:0 0 10px;
      font-size: clamp(24px, 3.8vw, 40px);
      line-height:1.1;
    }
    .sub{
      margin:0 auto 14px;
      color:var(--muted);
      font-size: clamp(14px, 2vw, 16.5px);
      line-height:1.5;
      max-width: 78ch;
    }
    .cta{
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:10px;
      margin-top: 10px;
    }

    .btn{
      display:inline-block;
      text-decoration:none;
      font-weight:900;
      border-radius: 999px;
      padding: 10px 16px;
      border:2px solid var(--accent);
      color: var(--accent);
      background: transparent;
      transition: transform .08s ease, background .15s ease, color .15s ease;
      font-size:14px;
      letter-spacing:.2px;
    }
    .btn:hover{ background: var(--accent); color:#1a2c3c; transform: translateY(-1px); }
    .btn.secondary{
      border-color: rgba(255,255,255,.22);
      color: var(--ink);
    }
    .btn.secondary:hover{ background: rgba(255,255,255,.10); color:var(--ink); border-color: rgba(255,255,255,.28); }

    /* SECTION */
    .section{ margin-top: 22px; }
    .section h2{
      margin: 0 0 12px;
      font-size: 22px;
      color: var(--accent);
      letter-spacing:.2px;
    }
    .lead{
      margin: -4px 0 14px;
      color: var(--muted);
      line-height:1.5;
      max-width: 95ch;
      font-size: 14.5px;
    }

    /* PRICING */
    .pricing-shell{
      border-radius: var(--r);
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.03);
      box-shadow: var(--shadow);
      padding: 18px 16px 16px;
    }
    .packages-intro{
      text-align:center;
      max-width: 90ch;
      margin: 2px auto 14px;
      color: var(--muted);
      line-height:1.5;
      font-size: 14.5px;
    }

    .tabs{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:center;
      margin: 6px 0 16px;
    }
    .tab{
      border:2px solid var(--stroke);
      background: rgba(255,255,255,.03);
      color: var(--ink);
      padding: 10px 14px;
      border-radius: 999px;
      font-weight: 900;
      cursor: pointer;
      user-select:none;
      font-size:14px;
    }
    .tab[aria-selected="true"]{
      background: var(--accent);
      border-color: var(--accent);
      color:#1a2c3c;
    }
    .afs-home.tabs-ready .panel{ display:none; }
.panel{ display:block; }
    .afs-home.tabs-ready .panel.active{ display:block; }

    .tier-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap);
    }
    .tier{
      border-radius: var(--r2);
      border:1px dashed var(--stroke);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      padding: 14px 14px 12px;
      min-height: 240px;
    }
    .tier.featured{
      border-style: solid;
      background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(255,255,255,.03));
    }
    .tier h3{
      margin: 4px 0 6px;
      text-align:center;
      color: var(--accent);
      font-size: 18px;
      font-weight: 900;
      text-transform:none;
    }
    .price{
      margin: 0 0 10px;
      text-align:center;
      font-weight: 900;
      opacity:.95;
    }
    .bullets{
      margin:0;
      padding:0;
      list-style:none;
      line-height:1.45;
      font-size: 13.8px;
    }
    .bullets li{ margin:0 0 9px; opacity:.95; }
    .bullets .muted{ color: var(--muted); }

    .pricing-cta{
      display:flex;
      justify-content:center;
      gap:10px;
      flex-wrap:wrap;
      margin-top: 14px;
    }

    .divider{
      height:1px;
      background: rgba(255,255,255,.12);
      margin: 16px 0 12px;
    }

    /* centred fine print block */
    .fineprint{
      display:block;
      margin: 0 auto;
      text-align:center;
      color: var(--muted);
      line-height:1.5;
      font-size: 13.5px;
      max-width: 95ch;
    }
    .fineprint strong{ color: var(--ink); }

    /* PROJECTS + SERVICES */
    .grid-3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap);
      align-items: stretch;
    }
    .grid-4{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--gap);
      align-items: stretch;
    }
    .card{
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border:1px solid var(--stroke);
      border-radius: var(--r2);
      overflow:hidden;
      box-shadow: 0 6px 18px rgba(0,0,0,.18);
      display:flex;
      flex-direction:column;
    }
    .thumb{
      width:100%;
      aspect-ratio: 16/9;
      background:#0f1f2c;
      display:block;
      overflow:hidden;
    }
    .thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
      display:block;
      transform: scale(1);
    }
    .thumb img.zoom{ transform: scale(1.15); }
    .card-body{
      padding: 14px 14px 14px;
      display:flex;
      flex-direction:column;
      gap:10px;
      flex:1;
    }
    .card-title{ margin:0; font-weight:900; font-size: 16px; }
    .card-text{ margin:0; color:var(--muted); line-height:1.5; font-size: 14px; }
    .card-actions{
      margin-top:auto;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }
    .link{
      font-weight:900;
      color: var(--accent);
      text-decoration: none;
    }
    .link:hover{ text-decoration: underline; }
    .cta-bar{
      margin-top: 14px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:center;
    }

    /* EMBEDDED FOOTER */
    .embed-footer{
      margin-top: 26px;
      border-radius: var(--r);
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.03);
      box-shadow: var(--shadow);
      padding: 18px 16px;
      text-align:center;
    }
    .embed-footer .footer-nav{
      display:flex;
      gap:14px;
      justify-content:center;
      flex-wrap:wrap;
      margin: 0 0 10px;
      font-weight:900;
    }
    .embed-footer .footer-nav a{
      color: var(--accent);
      text-decoration:none;
    }
    .embed-footer .footer-nav a:hover{ text-decoration:underline; }
    .embed-footer .footer-meta{
      color: var(--muted);
      font-size: 13.5px;
      line-height:1.5;
      margin: 0 auto;
      max-width: 95ch;
    }

    @media (max-width: 1100px){
      .grid-4{ grid-template-columns: repeat(2, 1fr); }
      .hero-media img.logo{ width: 180px; }
      .hero-media{ height: clamp(200px, 34vw, 300px); }
    }
    @media (max-width: 980px){
      .tier-grid{ grid-template-columns: 1fr; }
      .tier{ min-height: unset; }
      .grid-3{ grid-template-columns: 1fr; }
      .grid-4{ grid-template-columns: 1fr; }
      .hero-media img.logo{ width: 150px; }
      .hero-media{ height: clamp(180px, 44vw, 260px); }
    }
    .copyright-footer {
      margin-top: 18px;
      text-align: center;
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.3px;
    }