:root{
      --brand:#0072C6;
      --ink:#0d1b2a;
      --muted:#5a6b85;
      --line:#e2e8f0;
      --surface:#f8fafc;
      --card:#ffffff;
      --radius:16px;
      --shadow:0 10px 30px rgba(0,0,0,.08);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    body{margin:0;background:var(--surface);color:var(--ink);}
    .container{max-width:1300px;margin:0 auto;padding:0 60px;}

    h1,h2,h3{margin-top:0;}
    p{line-height:1.65;color:var(--muted);}

    .breadcrumbs{padding:14px 0;font-size:.95rem;}
    .breadcrumbs a{color:var(--brand);text-decoration:none;}
    .breadcrumbs span{margin:0 8px;color:var(--muted);}

    .hero{
      background:linear-gradient(180deg,#eef5ff 0%,#ffffff 100%);
      padding:64px 0 56px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:48px;
      align-items:start;
    }
    .hero h1{font-size:2.4rem;margin-bottom:16px;}
    .hero .card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:28px;
      box-shadow:var(--shadow);
    }

    .card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:28px;
      box-shadow:var(--shadow);
    }

    .section{
      padding:80px 0;
      background:#fff;
    }
    .section.alt{
      background:var(--surface);
    }

    .grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
      gap:28px;
    }

    table{
      width:100%;
      border-collapse:collapse;
      margin-top:20px;
      font-size:.95rem;
      border-radius:12px;
      overflow:hidden;
    }
    th,td{
      border:1px solid var(--line);
      padding:14px;
      vertical-align:top;
    }
    th{
      background:#f7f9fc;
      font-weight:600;
    }

    .note{
      background:#f0f7ff;
      border-right:4px solid var(--brand);
      padding:20px;
      border-radius:12px;
      margin:24px 0;
      color:var(--muted);
    }

    .btn{
      display:inline-block;
      padding:14px 26px;
      border-radius:12px;
      font-weight:600;
      text-decoration:none;
      border:1px solid transparent;
      margin-top:16px;
    }
    .btn.primary{background:var(--brand);color:#fff;}
    .btn.secondary{border-color:var(--brand);color:var(--brand);background:#fff;}

    ul li::marker{
      content:"§ ";
      color:var(--brand);
      font-weight:600;
    }

    @media(max-width:980px){
      .hero-grid{grid-template-columns:1fr;}
      .container{padding:0 24px;}
      .section{padding:56px 0;}
      .hero{padding:44px 0 36px;}
      .card{padding:20px;}
      .btn{width:100%;text-align:center;padding:14px 18px;}
    }

    @media(max-width:720px){
      table{
        border:0;
        border-radius:0;
        margin-top:16px;
      }
      table tr:first-child{
        position:absolute;
        left:-9999px;
        top:-9999px;
      }
      table, tbody, tr, td{
        display:block;
        width:100%;
      }
      table tr{
        background:var(--card);
        border:1px solid var(--line);
        border-radius:14px;
        box-shadow:0 8px 20px rgba(0,0,0,.06);
        padding:6px 0;
        margin:14px 0;
      }
      table td{
        border:0;
        padding:12px 14px;
        display:flex;
        gap:12px;
        align-items:flex-start;
        word-break:break-word;
        color:var(--muted);
      }
      table td + td{
        border-top:1px solid var(--line);
      }
      table td::before{
        flex:0 0 46%;
        max-width:46%;
        font-weight:600;
        color:var(--ink);
        opacity:.9;
      }
      table td:nth-of-type(1)::before{ content:"Type of matter"; }
      table td:nth-of-type(2)::before{ content:"Indicative fee (excl. VAT)"; }
      table td:nth-of-type(3)::before{ content:"Notes"; }
    }