/* ============================================================
   AIRIS DESIGN STUDIO — SERVICES PAGE
   Loads AFTER style.css and only styles the .svc-* classes below, so it
   cannot change the homepage, Contact page or legal pages. Header and
   footer styling comes from style.css, unchanged. Colours are the site's
   existing palette variables only (--white, --pink, --indigo, --magenta,
   --black).
   ============================================================ */

/* If the window is taller than the page, any space below the footer is the
   same black as the footer instead of cream. */
html{ background: var(--black, #07020D); }

/* ---------- Introduction ---------- */
.svc-intro{
  background: var(--white, #FBF6EF);
  text-align: center;
  padding: clamp(56px, 7vw, 96px) var(--gutter, 24px) clamp(44px, 5vw, 72px);
  box-sizing: border-box;
}
.svc-intro h1{
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-weight: 500;
  font-size: clamp(42px, 5.2vw, 66px);
  line-height: 1.08;
  color: var(--black, #07020D);
  margin: 0 0 14px;
}
.svc-intro .svc-sub{
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.3;
  color: var(--indigo, #44375E);
  margin: 0;
}

/* ---------- Service sections ---------- */
.svc{
  display: block;
  box-sizing: border-box;
  background: var(--white, #FBF6EF);
}
.svc--pink{ background: var(--pink, #EFADF6); }
.svc--cream{ background: var(--white, #FBF6EF); }

/* Image area. To add your photo, replace the <div class="ph"> inside it with an <img>.
   The image is cropped to fill the area (never stretched). */
.svc-media{
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;            /* mobile / tablet: a sensible image height */
}
.svc-media > .ph,
.svc-media > img{
  width: 100%;
  height: 100%;
  border-radius: 0;
  aspect-ratio: auto;
}
.svc-media > img{ display: block; object-fit: cover; object-position: center; }

/* Text area */
.svc-text{
  box-sizing: border-box;
  padding: clamp(40px, 8vw, 64px) var(--gutter, 24px);
}
.svc-copy{ max-width: 720px; margin: 0 auto; }
.svc-copy h2{
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
  color: var(--black, #07020D);
  margin: 0 0 22px;
}
.svc-copy p{
  font-family: var(--sans, 'Montserrat', Arial, sans-serif);
  font-size: 16px;
  line-height: 1.75;
  color: var(--black, #07020D);
  margin: 0 0 16px;
}
.svc-copy p:last-child{ margin-bottom: 0; }

/* ---------- Desktop: 30% image / 70% text, alternating ---------- */
@media (min-width: 900px){
  .svc{
    display: grid;
    grid-template-columns: 3fr 7fr;           /* image left (30%) | text right (70%) */
    /* 680 screenshot px at 125% display scaling = 544 CSS px. A minimum only:
       sections with longer text grow instead of cramming or overflowing. */
    min-height: 544px;
  }
  .svc--right{ grid-template-columns: 7fr 3fr; } /* text left (70%) | image right (30%) */
  .svc--right .svc-media{ order: 2; }
  .svc--right .svc-text{ order: 1; }

  .svc-media{
    aspect-ratio: auto;                        /* the image area is as tall as its section */
    min-height: 100%;
  }
  .svc-media > .ph,
  .svc-media > img{
    position: absolute;
    inset: 0;
  }
  .svc-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(40px, 4vw, 56px) clamp(32px, 5vw, 80px);
  }
  .svc-copy{ width: 100%; }
}

/* ---------- Get a Quote ---------- */
.svc-cta{
  background: var(--indigo, #44375E);
  text-align: center;
  padding: clamp(44px, 6vw, 68px) var(--gutter, 24px);
  box-sizing: border-box;
}
.svc-cta h2{
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.2;
  color: var(--white, #FBF6EF);
  margin: 0 0 22px;
}
@media (min-width: 561px) and (max-width: 899px){
  .svc-cta .btn{ width: auto; min-width: 220px; }   /* don't stretch across a tablet */
}