:root{
  --red:#E21F25;
  --yellow:#FFED00;
  --blue:#00A0E3;
  --navy:#1C4276;

  --bg:#FFFFFF;
  --bg-soft:#F6F8FB;
  --ink:#0D1117;
  --muted:#566070;
  --border:rgba(15, 23, 42, .12);
  --shadow: 0 18px 40px rgba(15, 23, 42, .10);

  --radius: 18px;
  --container: 1040px;

  --hero: url("hero.jpg");
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--ink);
  background:
    radial-gradient(900px 500px at 12% 0%, rgba(0,160,227,.06), transparent 60%),
    radial-gradient(900px 500px at 88% 0%, rgba(226,31,37,.05), transparent 60%),
    var(--bg);
}

.container{
  width:min(var(--container), calc(100% - 32px));
  margin-inline:auto;
}

.skip{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left:12px; top:12px; width:auto; height:auto;
  padding:10px 12px; background:#fff; border:1px solid var(--border); border-radius: 12px; z-index:999;
}

.muted{ color: var(--muted); }
.micro{ font-size: 13px; margin: 10px 0 0; }

.top{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15, 23, 42, .08);
}
.top__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}
.brand__logo{ width: 56px; height:auto; }
.brand__name{
  font-weight: 950;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.brand__sub{
  color: var(--muted);
  font-weight: 750;
  font-size: 13px;
}
.actions{ display:flex; gap: 10px; }

.accent{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  height: 4px;
}
.accent__a{ background: var(--red); }
.accent__b{ background: var(--yellow); }
.accent__c{ background: var(--blue); }
.accent__d{ background: var(--navy); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  font-weight: 950;
  text-decoration:none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-color: rgba(15, 23, 42, .18);
}
.btn--primary{
  background: linear-gradient(135deg, var(--red), #C9151A);
  color: #fff;
  border-color: transparent;
}
.btn--secondary{
  border-color: rgba(0,160,227,.22);
}
.btn--xl{
  padding: 14px 18px;
  border-radius: 16px;
  font-size: 16px;
}

.hero{
  margin-top: 18px;
  min-height: 420px;
  border-radius: calc(var(--radius) + 10px);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(15, 23, 42, .10);
  background:
    linear-gradient(180deg, rgba(13,17,23,.42), rgba(13,17,23,.10)),
    var(--hero);
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .16);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 12% 20%, rgba(0,160,227,.25), transparent 60%),
    radial-gradient(900px 420px at 88% 20%, rgba(226,31,37,.20), transparent 60%),
    linear-gradient(135deg, rgba(255,237,0,.08), transparent 40%),
    linear-gradient(0deg, rgba(0,0,0,.25), rgba(0,0,0,.10));
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  left:-140px;
  top:-90px;
  width: 460px;
  height: 460px;
  background: linear-gradient(135deg, rgba(255,237,0,.65), rgba(0,160,227,.30));
  transform: rotate(18deg);
  border-radius: 72px;
  filter: blur(0px);
  opacity: .45;
  pointer-events:none;
}

.hero__content{
  position: relative;
  z-index: 1;
  padding: 26px;
  display:flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}

h1{
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(30px, 3.2vw, 46px);
  color: #fff;
  text-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.lead{
  margin: 0;
  color: rgba(255,255,255,.90);
  line-height: 1.55;
  font-size: 16px;
  max-width: 70ch;
}
.lead__places{
  display:block;
  margin-top: 6px;
  font-weight: 850;
  color: rgba(255,255,255,.92);
}

.hero__cta{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero__meta{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 13px;
}

.card{
  margin-top: 14px;
  padding: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .07);
}

.card__head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

h2{
  margin: 0;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -0.01em;
}

.card--services{
  padding: 18px;
  border-color: rgba(15, 23, 42, .10);
  background:
    linear-gradient(0deg, rgba(255,255,255,.92), rgba(255,255,255,.92)),
    radial-gradient(900px 300px at 0% 0%, rgba(255,237,0,.10), transparent 62%),
    radial-gradient(900px 300px at 100% 0%, rgba(0,160,227,.10), transparent 62%);
}

.card--services::before{
  content:"";
  display:block;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red), var(--yellow), var(--blue), var(--navy));
  margin-bottom: 14px;
}

.servicegrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.service{
  position: relative;
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(246,248,251,.85);
  overflow:hidden;
}

.service__badge{
  position:absolute;
  right:-14px;
  top:-14px;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  transform: rotate(10deg);
  opacity: .20;
}

.service__badge--red{ background: var(--red); }
.service__badge--yellow{ background: var(--yellow); opacity: .28; }
.service__badge--blue{ background: var(--blue); }
.service__badge--navy{ background: var(--navy); }

.service__title{
  font-weight: 950;
  letter-spacing: -0.01em;
  font-size: 15px;
  color: rgba(13,17,23,.92);
  margin-bottom: 6px;
}

.service__text{
  color: rgba(13,17,23,.68);
  font-weight: 750;
  font-size: 13px;
}

.ctaRow{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.card--locations{
  background: rgba(255,255,255,.88);
}

.locations{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.locpill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(246,248,251,.75);
  text-decoration:none;
  color: rgba(13,17,23,.88);
  font-weight: 950;
}

.locpill:hover{
  box-shadow: 0 12px 22px rgba(15, 23, 42, .08);
}

.dot{ width:10px; height:10px; border-radius: 999px; }
.dot--red{ background: var(--red); }
.dot--blue{ background: var(--blue); }
.dot--navy{ background: var(--navy); }

.card--legal{
  background: linear-gradient(180deg, rgba(246,248,251,.75), rgba(255,255,255,.92));
}

.legalgrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.legalitem{
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15, 23, 42, .10);
}

.legalitem__label{
  font-size: 12px;
  color: rgba(13,17,23,.60);
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.legalitem__value{
  font-weight: 850;
  color: rgba(13,17,23,.86);
}

.legalitem__value a{
  color: rgba(13,17,23,.86);
  text-decoration:none;
  font-weight: 950;
}

.legalitem__value a:hover{ text-decoration: underline; }

.foot{
  margin: 14px 0 84px;
  padding: 14px 4px 0;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
}

.foot__title{
  font-weight: 950;
  margin-bottom: 8px;
}

.foot__links{
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.foot a{
  color: rgba(13,17,23,.86);
  text-decoration:none;
  font-weight: 950;
}

.foot a:hover{ text-decoration: underline; }

.mobilebar{
  display:none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .18);
  overflow:hidden;
}

.mobilebar__btn{
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px 10px;
  text-decoration:none;
  color: rgba(13,17,23,.92);
  font-weight: 950;
  border-right: 1px solid rgba(15, 23, 42, .10);
}

.mobilebar__btn:last-child{ border-right:none; }

.mobilebar__btn--primary{
  background: linear-gradient(135deg, var(--red), #C9151A);
  color:#fff;
}

@media (max-width: 980px){
  .servicegrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px){
  .legalgrid{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
  .actions{ display:none; }
  .mobilebar{ display:flex; }
  .card__head{ flex-direction: column; align-items: flex-start; }
  .foot{ flex-direction: column; }
  .hero{ min-height: 520px; }
  .hero__content{ padding: 20px; }
  .servicegrid{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn{ transition:none; }
}