/* ==========================================================================
   Summit Hospitality - service page layout
   --------------------------------------------------------------------------
   Loaded AFTER summit-site.css (the approved homepage stylesheet, verbatim).

   The service pages share the homepage's DESIGN LANGUAGE and reject its PAGE
   COMPOSITION. Every type size, colour, button, border weight and animation
   below is taken from the homepage's own scale:

     display serif headings        55px / 35px / 30px
     body copy                     17px / 23.8px
     lead copy                     20px / 28px
     small uppercase labels        17px, 3.4px tracking  (from .icon-label)
     buttons                       .btn-cta, .btn-cta-outline as-is
     palette                       --dark-teal --medium-teal --button-teal --light-bg

   What is deliberately DIFFERENT is the architecture. The homepage is a
   sequence of full-bleed centred bands. A service page is an asymmetric
   document: a content column with an aside rail, services stacked on
   hairlines rather than floated in a centred icon grid, and a two-column FAQ.
   Reading down one, you should never mistake it for the homepage, and you
   should never doubt it is the same website.
   ========================================================================== */

/* ==========================================================================
   1. SERVICE HERO  (approved - unchanged)
   ========================================================================== */
.hero-service .hero-content {
  align-items: flex-start;
  text-align: left;
  max-width: none;
  padding: 40px var(--shell-x);
}

.hero-service .hero-inner { max-width: 940px; }

.hero-service .hero-overlay {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(17, 56, 74, 0.80) 0%,
    rgba(17, 56, 74, 0.62) 46%,
    rgba(17, 56, 74, 0.24) 100%
  );
}

.hero-service .hero-visual-heading {
  font-size: 66px;
  line-height: 74px;
  letter-spacing: 2.4px;
  margin-bottom: 0;
}

.hero-service .hero-lead {
  font-size: 20px;
  line-height: 28px;
  color: var(--white);
  max-width: 620px;
  margin-top: 26px;
  -webkit-font-smoothing: antialiased;
}

.hero-service .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 38px;
}

/* The homepage sets `.hero .btn-call { margin-top: 30px }` for its single
   stacked hero button. In a button row that pushes one out of line. */
.hero-service .hero-actions .btn-cta {
  margin-top: 0;
  width: auto;
  padding: 0 32px;
}

.hero-service .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  -webkit-font-smoothing: antialiased;
}

.hero-service .breadcrumb li { display: flex; align-items: center; gap: 10px; }
.hero-service .breadcrumb a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.hero-service .breadcrumb a:hover { color: var(--white); }

.hero-service .breadcrumb li + li::before {
  content: '';
  width: 16px;
  height: 1px;
  background: rgba(255, 255, 255, 0.42);
}

.btn-cta.btn-outline-white {
  background-color: transparent;
  border: 1px solid var(--white);
}

.btn-cta.btn-outline-white:hover {
  background-color: var(--white);
  color: var(--dark-teal);
}

/* ==========================================================================
   2. BANDS
   Sections are separated by generous space and hairlines rather than by the
   homepage's alternating full-bleed colour blocks. Only two bands carry a
   background, so they land as punctuation instead of rhythm.
   ========================================================================== */
.svc-band { padding: 96px var(--shell-x); }

.svc-band--tint { background-color: var(--light-bg); }
.svc-band--deep { background-color: var(--dark-teal); }
.svc-band--flush { padding-top: 0; }

.svc-inner { max-width: 1180px; margin: 0 auto; }

/* Small uppercase label. Borrowed from the homepage's .icon-label treatment
   (17px body face, wide tracking) at a smaller size so it reads as a marker. */
.svc-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: var(--button-teal);
  margin-bottom: 20px;
  -webkit-font-smoothing: antialiased;
}

.svc-band--deep .svc-eyebrow { color: var(--light-bg); }

/* Section headings are set in capitals to match the homepage, which capitalises
   every section heading (COMPREHENSIVE HOUSEKEEPING EXPERTISE, BEYOND THE
   STANDARD, PROUD PARTNERS). Done with text-transform rather than typing the
   markup in caps, so the underlying text stays sentence case for screen readers
   and search engines while rendering identically. */
.svc-h2 {
  font-family: var(--font-heading);
  font-size: 55px;
  font-weight: 400;
  color: var(--medium-teal);
  line-height: 77px;   /* homepage .section-housekeeping h2 exactly */
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  margin-bottom: 30px;
}

.svc-band--tint .svc-h2 { color: var(--dark-teal); }
.svc-band--deep .svc-h2 { color: var(--white); }

/* The FAQ heading follows the homepage's own .faq-header h2 exactly: 32px,
   sentence case, medium teal. The homepage capitalises every section heading
   except this one, so the service pages do the same. */
.svc-h2--faq {
  font-size: 32px;
  line-height: 38.4px;
  text-transform: none;
}

.svc-body p {
  font-size: 17px;
  line-height: 23.8px;
  color: var(--dark-teal);
  -webkit-font-smoothing: antialiased;
  margin-bottom: 22px;
}

.svc-body p:last-child { margin-bottom: 0; }
.svc-band--deep .svc-body p { color: rgba(255, 255, 255, 0.9); }

.svc-lede {
  font-size: 20px;
  line-height: 28px;
  color: var(--dark-teal);
  -webkit-font-smoothing: antialiased;
  margin-bottom: 40px;
  max-width: 828px;
}

/* ==========================================================================
   3. INTRO + ASIDE CARD
   The asymmetric opening: copy on the left, a summary card on the right.
   This pairing is the service pages' signature and the homepage has no
   equivalent, which is exactly the point.
   ========================================================================== */
.svc-split {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 76px;
  align-items: start;
}

.svc-card {
  background: var(--light-bg);
  border-top: 4px solid var(--medium-teal);
  padding: 40px 38px 38px;
}

.svc-band--tint .svc-card { background: var(--white); }

.svc-card h3 {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 400;
  color: var(--dark-teal);
  line-height: 38px;
  text-transform: uppercase;
  margin-bottom: 22px;
  -webkit-font-smoothing: antialiased;
}

.svc-card ul { list-style: none; }

.svc-card li {
  position: relative;
  padding-left: 26px;
  font-size: 17px;
  line-height: 23.8px;
  color: var(--dark-teal);
  margin-bottom: 14px;
  -webkit-font-smoothing: antialiased;
}

.svc-card li:last-child { margin-bottom: 0; }

.svc-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 9px;
  background: var(--button-teal);
}

/* In-page CTAs use the homepage's BASE button box (240x60 / 24px) rather than
   its >=769px hero scale-up (300x75 / 30px). "REQUEST A QUOTE" measures 306px
   at 30px in this display serif, which overflows a 300px box and wraps to two
   lines; at 24px it is 245px and sits comfortably inside the narrowest card. */
.svc-card .btn-cta,
.svc-proof-cta .btn-cta {
  width: 100%;
  height: 60px;
  font-size: 24px;
}

.svc-card .btn-cta { margin-top: 30px; }

/* ==========================================================================
   4. SERVICE ROWS
   Services stack as full-width rows divided by hairlines: a fixed label
   column on the left, description on the right. The homepage presents
   services as a centred grid of icons, so this reads as a different page
   without introducing a single new colour or typeface.
   ========================================================================== */
.svc-rows { border-top: 1px solid rgba(24, 86, 104, 0.28); }

.svc-row {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 60px;
  padding: 44px 0;
  border-bottom: 1px solid rgba(24, 86, 104, 0.28);
  align-items: start;
}

.svc-row-label { display: flex; align-items: flex-start; gap: 22px; }

.svc-row-label img {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  margin-top: 2px;
}

.svc-row h3 {
  font-family: var(--font-heading);
  font-size: 35px;
  font-weight: 400;
  color: var(--dark-teal);
  line-height: 49px;   /* homepage .section-beyond h3 exactly */
  text-transform: uppercase;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.svc-row p {
  font-size: 17px;
  line-height: 23.8px;
  color: var(--dark-teal);
  -webkit-font-smoothing: antialiased;
  margin: 0 0 18px;
}

.svc-row p:last-child { margin-bottom: 0; }

.svc-row-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 20px;
}

.svc-row-tags li {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--medium-teal);
  border: 1px solid rgba(24, 86, 104, 0.32);
  padding: 8px 15px;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   5. INCLUDED BAND
   A wide multi-column list grouped by room or by service. Distinct from the
   homepage's white card floating over a photograph.
   ========================================================================== */
.svc-groups {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 46px 50px;
}

.svc-group h4 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: var(--medium-teal);
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--medium-teal);
  -webkit-font-smoothing: antialiased;
}

.svc-group ul { list-style: none; }

.svc-group li {
  font-size: 17px;
  line-height: 23.8px;
  color: var(--dark-teal);
  margin-bottom: 13px;
  -webkit-font-smoothing: antialiased;
}

.svc-group li:last-child { margin-bottom: 0; }

.svc-note {
  font-size: 17px;
  font-style: italic;
  color: var(--dark-teal);
  line-height: 23.8px;
  margin-top: 46px;
  padding-top: 30px;
  border-top: 1px solid rgba(24, 86, 104, 0.28);
  -webkit-font-smoothing: antialiased;
}

/* Icon variant, used where the site already has artwork for the services.
   Left-aligned at 62px against the homepage's 142px centred grid. */
.svc-iconlist {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 40px;
}

.svc-iconlist .item { display: flex; align-items: center; gap: 16px; }

.svc-iconlist img { width: 62px; height: 62px; flex-shrink: 0; }

.svc-iconlist .lbl {
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--dark-teal);
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   6. CREDENTIAL BAND
   The homepage devotes a full band to four large statistics. Here they run
   inline beside the copy and a call to action, at a fraction of the height.
   ========================================================================== */
.svc-proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 76px;
  align-items: center;
}

.svc-figs {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 34px 46px;
  justify-content: start;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid rgba(197, 213, 217, 0.3);
}

/* .stat-number / .stat-label from the homepage, recoloured for the dark band */
.svc-fig .n {
  display: block;
  font-family: var(--font-heading);
  font-size: 35px;
  line-height: 38.5px;
  letter-spacing: -1.05px;
  color: var(--light-bg);
  margin-bottom: 4px;
  -webkit-font-smoothing: antialiased;
}

.svc-fig .l {
  display: block;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 25px;
  color: rgba(255, 255, 255, 0.8);
  -webkit-font-smoothing: antialiased;
}

.svc-proof-cta {
  border-left: 1px solid rgba(197, 213, 217, 0.3);
  padding-left: 56px;
}

.svc-proof-cta p {
  font-size: 17px;
  line-height: 23.8px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 26px;
  -webkit-font-smoothing: antialiased;
}

.svc-proof-cta .phone {
  display: block;
  font-family: var(--font-heading);
  font-size: 38px;
  color: var(--light-bg);
  text-decoration: none;
  margin-bottom: 22px;
  -webkit-font-smoothing: antialiased;
}

.svc-proof-cta .phone:hover { color: var(--white); }

/* ==========================================================================
   7. FAQ, TWO COLUMN
   The accordion component is the homepage's, unchanged. Its container is not:
   the heading sits in a left rail beside the questions rather than above them.
   ========================================================================== */
.svc-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 76px;
  align-items: start;
}

.svc-faq-aside .svc-h2 { margin-bottom: 22px; }

.svc-faq-aside p {
  font-size: 17px;
  line-height: 23.8px;
  color: var(--dark-teal);
  margin-bottom: 26px;
  -webkit-font-smoothing: antialiased;
}

.svc-faq-aside .phone {
  display: block;
  font-family: var(--font-heading);
  font-size: 38px;
  color: var(--medium-teal);
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
}

/* Homepage .faq-item styling carries over unchanged (it is a global class, not
   scoped to .section-faq). Only a matching top rule is added so the list closes
   at the top of the right column. .faq-item's own border is --button-teal. */
.svc-faq-list { border-top: 1px solid var(--button-teal); }
.svc-faq-list .faq-item { max-width: none; }

/* ==========================================================================
   RESPONSIVE - follows the homepage's own breakpoints
   ========================================================================== */

@media (min-width: 769px) {
  .hero-service .hero-actions .btn-cta {
    min-width: 300px;
    white-space: nowrap;
  }
}

@media (max-width: 1200px) {
  .hero-service .hero-visual-heading { font-size: 56px; line-height: 64px; }
  .svc-split { gap: 54px; }
  .svc-groups { grid-template-columns: repeat(2, 1fr); }
  .svc-iconlist { grid-template-columns: repeat(2, 1fr); }
  .svc-faq-layout { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 54px; }
}

@media (max-width: 1024px) {
  .svc-band { padding: 72px var(--shell-x); }
  .svc-split { grid-template-columns: 1fr; gap: 44px; }
  .svc-card { max-width: 640px; }
  .svc-row { grid-template-columns: 1fr; gap: 22px; padding: 36px 0; }
  .svc-proof { grid-template-columns: 1fr; gap: 44px; }
  .svc-proof-cta { border-left: none; border-top: 1px solid rgba(197,213,217,.3); padding-left: 0; padding-top: 40px; }
  .svc-faq-layout { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 768px) {
  /* --- hero --- */
  .hero-service .hero-content {
    align-items: center;
    text-align: center;
    padding: 80px var(--sec-pad-x);
  }

  .hero-service .hero-visual-heading {
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    letter-spacing: 1.5px;
  }

  .hero-service .hero-lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    max-width: 100%;
    margin-top: 20px;
  }

  .hero-service .breadcrumb {
    justify-content: center;
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 20px;
  }

  .hero-service .hero-actions {
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
    width: 100%;
  }

  .hero-service .hero-actions .btn-cta {
    height: var(--btn-h);
    font-size: var(--fs-button);
    width: auto;
    flex: 1 1 auto;
    min-width: 140px;
    padding: 0 var(--btn-pad-x);
  }

  /* --- bands --- */
  .svc-band { padding: 52px var(--sec-pad-x); background-color: var(--white); }
  .svc-band--tint { background-color: var(--light-bg); }
  .svc-band--deep { background-color: var(--dark-teal); }
  .svc-band--flush { padding-top: 0; }

  .svc-h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); margin-bottom: 22px; }
  .svc-eyebrow { font-size: 12px; letter-spacing: 2.4px; margin-bottom: 16px; }
  .svc-lede { font-size: 17px; line-height: 25px; margin-bottom: 30px; }
  .svc-body p { font-size: 16px; line-height: 24px; }

  .svc-card { padding: 30px 24px 28px; max-width: none; }
  .svc-card h3 { font-size: 26px; line-height: 32px; margin-bottom: 18px; }
  .svc-card li { font-size: 16px; line-height: 23px; }
  .svc-card .btn-cta { height: var(--btn-h); font-size: var(--fs-button); }

  .svc-row { padding: 30px 0; gap: 16px; }
  .svc-row h3 { font-size: 26px; line-height: 32px; }
  .svc-row-label { gap: 16px; }
  .svc-row-label img { width: 48px; height: 48px; }
  .svc-row p { font-size: 16px; line-height: 24px; }
  .svc-row-tags { gap: 8px; margin-top: 16px; }
  .svc-row-tags li { font-size: 12px; letter-spacing: 1.2px; padding: 6px 11px; }

  .svc-groups { grid-template-columns: 1fr; gap: 30px; }
  .svc-group h4 { font-size: 12px; letter-spacing: 2.4px; margin-bottom: 16px; padding-bottom: 10px; }
  .svc-group li { font-size: 16px; line-height: 24px; margin-bottom: 10px; }
  .svc-note { font-size: 16px; margin-top: 32px; padding-top: 24px; }

  .svc-iconlist { grid-template-columns: 1fr; gap: 20px; }
  .svc-iconlist img { width: 48px; height: 48px; }
  .svc-iconlist .lbl { font-size: 13px; letter-spacing: 1.8px; }

  .svc-figs { grid-template-columns: repeat(2, 1fr); gap: 26px; justify-content: stretch; }
  .svc-fig .n { font-size: 30px; line-height: 34px; }
  .svc-fig .l { font-size: 17px; line-height: 22px; }
  .svc-proof-cta { padding-top: 32px; }
  .svc-proof-cta .phone { font-size: clamp(24px, 8vw, 34px); }
  .svc-proof-cta .btn-cta { height: var(--btn-h); font-size: var(--fs-button); width: 100%; }

  .svc-faq-aside .phone { font-size: clamp(24px, 8vw, 34px); }
}