/* ---------- Page intro ---------- */
.intro{padding:64px 0 40px;text-align:center;}
.intro h1{
    margin:0 0 16px;
    font-family:var(--font-display);
    font-size:clamp(2.25rem,4.8vw,3.25rem);
    line-height:1.12;
    font-weight:600;
    letter-spacing:-.005em;
    color:var(--ink);
  }
.intro p{
    margin:0 auto;
    max-width:760px;
    font-size:1.0625rem;
  }
/* ---------- Service grid ---------- */
.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    padding:12px 0 72px;
  }
@media(max-width:900px){
.grid{grid-template-columns:repeat(2,1fr);gap:24px;}
}
@media(max-width:600px){
.grid{grid-template-columns:1fr;}
}
.card{
    display:flex;
    flex-direction:column;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease;
  }
.card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(0,0,0,.09);
  }
.card .thumb{
    aspect-ratio:1/1;
    overflow:hidden;
    background:var(--bg-alt);
  }
.card .thumb img{
    width:100%;height:100%;
    object-fit:cover;
    transition:transform .5s ease;
  }
/* Catering photo is a wide 2.49:1 banner. A dead-centre square crop pushes
     the branded 'Aluver & Co' sign to the edge, so bias the crop left. */
.card .thumb img.crop-left{object-position:32% center;}
.card:hover .thumb img{transform:scale(1.05);}
.card .content{
    padding:22px 22px 24px;
    display:flex;
    flex-direction:column;
    flex:1;
  }
.card h2{
    margin:0 0 8px;
    font-family:var(--font-display);
    font-size:1.3125rem;
    font-weight:600;
    line-height:1.28;
    color:var(--ink);
  }
.card p{
    margin:0 0 20px;
    font-size:.9375rem;
    flex:1;
  }
.btn{
    align-self:flex-start;
    display:inline-block;
    padding:11px 24px;
    border-radius:999px;
    background:var(--brand);
    color:#fff;
    font-family:var(--font-body);
    font-size:.875rem;
    font-weight:700;
    letter-spacing:.02em;
    text-decoration:none;
    transition:background .2s ease;
  }
.btn:hover,.btn:focus-visible{background:var(--brand-dark);}
a:focus-visible{outline:3px solid var(--brand);outline-offset:3px;}
/* ---------- Closing CTA ---------- */
.closing{
    background:var(--bg-alt);
    border-top:1px solid var(--line);
    text-align:center;
    padding:64px 0 68px;
  }
.closing h2{
    margin:0 0 12px;
    font-family:var(--font-display);
    font-size:clamp(1.625rem,3.2vw,2.125rem);
    font-weight:600;
    line-height:1.2;
    color:var(--ink);
  }
.closing p{margin:0 0 26px;}
.closing .btn{align-self:center;padding:14px 34px;font-size:.9375rem;}
@media(prefers-reduced-motion:reduce){
.card:hover{transform:none;}
.card:hover .thumb img{transform:none;}
}