/* ==========================================================================
   Commercial page. Reuses every token, font and component from site.css.
   Nothing here introduces a new colour, font or spacing scale.
   ========================================================================== */

/* ---------- Scope grid, the twelve services we hold ---------------------- */
.scope{background:var(--bone)}
.scope-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.scope-grid .it{background:var(--bone);padding:30px 28px 32px;
  transition:background-color .4s var(--ease)}
.scope-grid .it:hover{background:var(--paper)}
.scope-grid h3{font-size:1.16rem;line-height:1.25;margin-bottom:10px;color:var(--forest-700)}
.scope-grid p{font-size:.92rem;color:var(--muted);line-height:1.62}

/* ---------- Sites we hold ------------------------------------------------ */
.sites-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 30px}
.sites-grid .reg h3{font-size:1.02rem;letter-spacing:.02em;color:var(--forest-700);
  padding-bottom:12px;margin-bottom:14px;border-bottom:2px solid var(--forest-700)}
.sites-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.sites-grid li{font-size:.88rem;color:var(--muted);line-height:1.45}
.sites-grid ul.new li{color:var(--forest-500);font-size:.92rem}

@media (max-width:1080px){
  .scope-grid{grid-template-columns:repeat(2,1fr)}
  .sites-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .sites-grid{grid-template-columns:repeat(2,1fr);gap:30px 22px}
}
@media (max-width:560px){
  .scope-grid{grid-template-columns:1fr}
  .sites-grid{grid-template-columns:1fr;gap:26px}
}