/* ==========================================================================
   M&M Insulation Ltd — services (homepage cards + services.html sections)
   Loaded in addition to style.css. Illustrations are generated by
   partials/tools/make-service-art.js (see docs/HANDOVER.md).
   ========================================================================== */

/* Illustration stroke language (same as the homepage roof drawing):
   white = structure, brass = the thing fitted/treated, dashed = removed. */
.art{display:block;width:100%;height:100%;}
.art .a{stroke:rgba(255,255,255,.8);stroke-width:1.6;}
.art .af{stroke:rgba(255,255,255,.3);stroke-width:1;}
.art .ab{stroke:var(--accent-on-dark);stroke-width:1.7;}
.art .abx{stroke:var(--accent-on-dark);stroke-width:1;opacity:.65;}
.art .abf{fill:rgba(233,194,124,.15);}
.art .ad{stroke:rgba(255,255,255,.88);stroke-width:1.6;stroke-dasharray:5 4;}
.art .adf{fill:rgba(255,255,255,.08);}
.art .abd{stroke-dasharray:4 3;fill:none;}
.art .aw{stroke:rgba(255,255,255,.5);stroke-width:1;}
.art .aholes{stroke:rgba(255,255,255,.65);stroke-width:1.2;fill:rgba(0,0,0,.3);}
.art .dot{stroke-dasharray:2 6;}
.art *{transition:stroke .3s ease;}

/* Service-area radius diagram (service-area.html) ----------------------------------------------- */
.area{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(2rem,5vw,5rem);align-items:center;}
.area h2{font-size:clamp(1.9rem,1.8vw + 1.3rem,3rem);line-height:1.06;}
.area .lede{max-width:34ch;}
.area__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem;}
.area--single{grid-template-columns:1fr;justify-items:center;text-align:center;}
.area--single .area__text{max-width:44rem;}
.area--single .lede{max-width:none;margin-inline:auto;}
.area--single .area__cta{justify-content:center;}
.area__map{margin:0;}
.area__art{background-color:var(--ink);border-radius:var(--radius-s);aspect-ratio:1/1;max-width:520px;margin-inline:auto;box-shadow:var(--shadow-md);}
.area-svg{display:block;width:100%;height:100%;}
.am-ring{stroke:rgba(255,255,255,.16);stroke-width:1;}
.am-cross{stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:2 6;}
.am-area{stroke:var(--accent-on-dark);stroke-width:2.2;fill:rgba(233,194,124,.1);}
.am-tick{stroke:rgba(255,255,255,.4);stroke-width:1;}
.am-radius{stroke:var(--accent-on-dark);stroke-width:1.8;}
.am-pin{fill:var(--accent);}
.am-pin-ring{fill:none;stroke:#fff;stroke-width:1.6;}
.am-label{font-family:'Public Sans',sans-serif;font-weight:700;letter-spacing:.14em;}
.am-label--miles{font-size:13px;fill:var(--accent-on-dark);}
.am-label--city{font-size:12px;fill:#fff;}
.area__map figcaption{max-width:520px;margin:.9rem auto 0;font-size:.84rem;color:var(--slate);}
@media (max-width:860px){.area{grid-template-columns:1fr;row-gap:2.2rem;}}

/* Cards ---------------------------------------------------------------------------------- */
.svc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem);}
.svc-card{
  position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--border);
  border-radius:var(--radius-s);overflow:hidden;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .3s;
}
.svc-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent);z-index:2;
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out);
}
.svc-card:hover,.svc-card:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-soft);}
.svc-card:hover::before,.svc-card:focus-visible::before{transform:scaleX(1);}
.svc-card:hover .art .a,.svc-card:focus-visible .art .a{stroke:#fff;}
.svc-card__art{display:block;background-color:var(--ink);aspect-ratio:8/5;overflow:hidden;}
.svc-card__body{display:flex;flex-direction:column;gap:.4rem;padding:1.25rem 1.4rem 1.45rem;flex:1;}
.svc-card__tag{font:700 .68rem/1 'Public Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep);}
.svc-card__name{font:700 clamp(1.2rem,.5vw + 1.1rem,1.42rem)/1.15 'Zilla Slab',Georgia,serif;color:var(--ink);}
.svc-card__desc{flex:1;font-size:.94rem;line-height:1.5;color:var(--ink-soft);}
.svc-card__more{display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;font-weight:700;font-size:.88rem;color:var(--accent-deep);}
.svc-card__more .svc-arrow{width:16px;height:16px;transition:transform var(--dur-med) var(--ease-out);}
.svc-card:hover .svc-arrow,.svc-card:focus-visible .svc-arrow{transform:translateX(5px);}
.svc-more{margin-top:2.2rem;text-align:center;}
@media (max-width:980px){.svc-cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px){.svc-cards{grid-template-columns:1fr;}}

/* Detail sections (services.html) -------------------------------------------------------------- */
.svc-detail{padding-block:clamp(3rem,6vw,5.25rem);scroll-margin-top:90px;}
.svc-detail--alt{background:var(--fog);}
.svc-detail__grid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  column-gap:clamp(2rem,5vw,5rem);align-items:center;
}
.svc-detail--alt .svc-detail__media{order:2;}
.svc-detail__art{background-color:var(--ink);border-radius:var(--radius-s);aspect-ratio:8/5;overflow:hidden;box-shadow:var(--shadow-md);}
.svc-detail h2{font-size:clamp(1.8rem,1.6vw + 1.2rem,2.6rem);line-height:1.08;max-width:20ch;}
.svc-detail .lede{max-width:46ch;margin-bottom:1.4rem;}
.svc-detail .ticks{margin-bottom:1.5rem;}
.svc-detail .ticks li{font-weight:500;}
.svc-detail__flag{margin:0 0 1.4rem;max-width:none;}
.svc-detail__cta{display:flex;flex-wrap:wrap;gap:.8rem;}
@media (max-width:860px){
  .svc-detail__grid{grid-template-columns:1fr;row-gap:1.8rem;}
  .svc-detail--alt .svc-detail__media{order:0;}
}

/* A real job photo under the illustration (services.json "photo") ------------------------------- */
.svc-photo{position:relative;margin:1rem 0 0;border-radius:var(--radius-s);overflow:hidden;box-shadow:var(--shadow-md);background:var(--ink);}
.svc-photo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 40%;}
.svc-photo figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem .95rem .65rem;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:linear-gradient(0deg,rgba(15,22,38,.85),transparent);
}

/* Service Area: the heading is now the page's h1 (the dark hero band was removed), so it is a little larger */
.area__text h1{font-size:clamp(2rem,2vw + 1.3rem,3rem);line-height:1.08;}