/* ==========================================================================
   Creatio Construction: Services page styles
   Loaded only by services.html, after style.css. Every class here starts
   with "sp-" (or sits under .page-services), so the homepage is not affected.
   Colors stay in the black and white brand, with warm stone neutrals and the
   existing brass accent for detail.

   CONTENTS
   01  Page tokens
   02  Hero (with slow scroll effect)
   03  Overview
   04  Service cards
   05  Why Creatio
   06  Service area
   07  Process
   08  Call to action
   09  FAQ
   10  Motion preferences
   11  Responsive
   ========================================================================== */


/* 01 PAGE TOKENS ============================================================ */
.page-services {
  --stone-50: #f6f3ee;
  --stone-100: #ece6dc;
  --stone-300: #cfc5b5;
  --stone-600: #6e655a;
  --card-ratio: 4 / 3;
}


/* 02 HERO ===================================================================
   The photo layer is taller than the hero so services.js can move it a little
   on scroll without showing an edge. Without JS it simply sits still. */
.sp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(660px, calc(100vh - 42px - var(--header-h)), 980px);
  min-height: clamp(660px, calc(100svh - 42px - var(--header-h)), 980px);
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--white); background: var(--black);
}
.sp-hero__media { position: absolute; left: 0; right: 0; top: -9%; height: 118%; z-index: -3; will-change: transform; }
.sp-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.sp-hero__shade {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(10, 10, 11, .72) 0%, rgba(10, 10, 11, .18) 30%, rgba(10, 10, 11, .4) 60%, rgba(10, 10, 11, .97) 100%),
    linear-gradient(90deg, rgba(10, 10, 11, .82) 0%, rgba(10, 10, 11, .45) 50%, rgba(10, 10, 11, .05) 85%);
}
.sp-hero__grid { z-index: -1; }
.sp-hero__inner { position: relative; padding-top: 30px; padding-bottom: 44px; }

.sp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: clamp(26px, 6vh, 72px); font: 500 .78rem var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.sp-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.sp-crumbs li + li::before { content: ""; width: 18px; height: 1px; background: var(--accent); }
.sp-crumbs a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.sp-crumbs a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.sp-crumbs [aria-current] { color: var(--white); }

.sp-hero__content { max-width: 860px; }
.sp-hero__motto { margin: 0 0 16px; font-family: var(--font-script); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.3; color: rgba(255, 255, 255, .92); }
.sp-hero__title { margin-bottom: 24px; color: var(--white); font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em; }
.sp-hero__title span { display: block; margin-top: .12em; font-size: .62em; line-height: 1.12; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, .9); }
.sp-hero__lead { max-width: 60ch; margin-bottom: 32px; font-size: var(--fs-lead); color: rgba(255, 255, 255, .86); }
.sp-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sp-hero__actions .btn { flex: 1 1 240px; }

/* Six quick links along the bottom of the hero (tablet and up) */
.sp-hero__rail-wrap { display: none; position: relative; padding-bottom: 28px; }
.sp-hero__rail {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-lg); overflow: hidden;
  background: rgba(14, 15, 17, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.sp-hero__rail li { border-right: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.sp-hero__rail a {
  display: flex; align-items: baseline; gap: 10px; height: 100%; padding: 16px 18px;
  color: rgba(255, 255, 255, .84); text-decoration: none; font: 500 .9rem/1.35 var(--font-head);
  transition: background-color .3s var(--ease), color .3s;
}
.sp-hero__rail span { color: var(--accent); font-size: .72rem; letter-spacing: .08em; }
.sp-hero__rail a:hover { background: rgba(255, 255, 255, .08); color: var(--white); }


/* 03 OVERVIEW ================================================================ */
.sp-intro { overflow: hidden; background: var(--white); }
.sp-intro__mark { top: 24px; }
.sp-intro__grid { position: relative; z-index: 1; display: grid; gap: 34px; }
.sp-intro__body p:last-child { margin-bottom: 0; }
.sp-ledger { display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--black); }
.sp-ledger li {
  display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; align-items: start;
  padding: 18px 4px; border-bottom: 1px solid var(--line-light);
}
.sp-ledger .icon { grid-row: span 2; width: 22px; height: 22px; margin-top: 4px; color: var(--accent); }
.sp-ledger strong { font: 600 1.15rem/1.3 var(--font-head); color: var(--black); letter-spacing: -.01em; }
.sp-ledger span { font-size: .95rem; line-height: 1.45; color: var(--gray-500); }


/* 04 SERVICE CARDS ===========================================================
   Every card image sits in the same fixed 4:3 frame and is cropped with
   object-fit: cover, so no photo can change the card height. */
.sp-services { background: var(--stone-50); }
.sp-services::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 340px; pointer-events: none;
  background: linear-gradient(180deg, var(--stone-100), rgba(236, 230, 220, 0));
}
.sp-services > .container { position: relative; }
.sp-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
.sp-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 1px 0 var(--line-light), 0 24px 50px -34px rgba(10, 10, 11, .45);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.sp-card:hover, .js .sp-card.reveal.is-visible:hover { transform: translateY(-6px); box-shadow: 0 1px 0 var(--line-light), 0 40px 70px -34px rgba(10, 10, 11, .55); }
.sp-card__media { position: relative; aspect-ratio: var(--card-ratio); overflow: hidden; background: var(--stone-100); }
.sp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.sp-card:hover .sp-card__media img { transform: scale(1.05); }
.sp-card__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 10, 11, .38) 0%, rgba(10, 10, 11, 0) 34%); }
.sp-card__tag {
  position: absolute; left: 16px; top: 16px; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px;
  font: 500 .74rem var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--white);
  background: rgba(10, 10, 11, .62); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sp-card__tag span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--black); font-size: .7rem; letter-spacing: 0; }
.sp-card__body { display: flex; flex-direction: column; flex: 1; padding: 28px 24px 26px; border-top: 3px solid var(--black); }
.sp-card__title { margin-bottom: 14px; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.2; letter-spacing: -.02em; }
.sp-card__body > p { margin-bottom: 20px; font-size: 1rem; }
.sp-card__list { display: grid; gap: 8px; margin-bottom: 26px; padding: 18px 0 0; border-top: 1px dashed var(--line-light); }
.sp-card__list li { position: relative; padding-left: 24px; font-size: .95rem; line-height: 1.45; color: var(--ink); }
.sp-card__list li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 9px; height: 9px; background: var(--accent); transform: rotate(45deg); }
.sp-card__links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: auto; }
.sp-card__cta {
  align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 12px 20px; border-radius: var(--radius);
  font: 500 .92rem/1.3 var(--font-head); color: var(--white); background: var(--black); text-decoration: none;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.sp-card__links .sp-card__cta { margin-top: 0; }
.sp-card__cta .icon { color: var(--accent); transition: transform .3s var(--ease); }
.sp-card__cta:hover { background: var(--steel); box-shadow: var(--shadow-sm); }
.sp-card__cta:hover .icon { transform: translateX(4px); }


/* 05 WHY CREATIO ============================================================= */
.sp-why { overflow: hidden; background: var(--ink); color: rgba(255, 255, 255, .74); }
.sp-why__grid { position: relative; z-index: 1; display: grid; gap: 56px; }
.sp-why__media { position: relative; padding: 0 0 70px; }
.sp-why__main { position: relative; }
.sp-why__main::before { content: ""; position: absolute; left: -12px; top: -12px; width: 46%; height: 60%; border-left: 1px solid var(--accent); border-top: 1px solid var(--accent); pointer-events: none; }
.sp-why__main img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.sp-why__inset { position: absolute; right: 0; bottom: 0; width: 42%; padding: 8px; background: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.sp-why__inset img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
.sp-why__badge {
  position: absolute; left: 14px; bottom: 90px; z-index: 2; margin: 0; max-width: 52%;
  display: flex; flex-direction: column; padding: 12px 16px;
  font-size: .85rem; line-height: 1.4; color: var(--white);
  background: rgba(10, 10, 11, .66); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sp-why__badge span { font: 500 .68rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.sp-why .section-title { margin-bottom: 22px; color: var(--white); }
.sp-why__intro { max-width: 52ch; margin-bottom: 34px; font-size: var(--fs-lead); }
.sp-reasons { display: grid; gap: 0; border-top: 1px solid var(--line-dark); }
.sp-reasons li { position: relative; padding: 24px 0 24px 64px; border-bottom: 1px solid var(--line-dark); }
.sp-reasons__num {
  position: absolute; left: 0; top: 18px;
  font: 600 2.1rem/1 var(--font-head); letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(196, 168, 116, .9);
}
.sp-reasons h3 { margin-bottom: 8px; color: var(--white); font-size: 1.15rem; }
.sp-reasons p { margin: 0; font-size: .97rem; }


/* 06 SERVICE AREA ============================================================ */
.sp-area { background: var(--stone-100); }
.sp-area__grid { display: grid; gap: 52px; align-items: center; }
.sp-area .section-title { margin-bottom: 24px; }
.sp-area .lead { color: var(--ink); }
.sp-tips { margin-top: 30px; padding: 24px; background: var(--stone-50); border-left: 3px solid var(--black); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.sp-tips__title { margin-bottom: 14px; font-size: 1.1rem; }
.sp-tips ul { display: grid; gap: 12px; }
.sp-tips li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: .97rem; line-height: 1.5; color: var(--gray-700); }
.sp-tips .icon { margin-top: 4px; color: var(--stone-600); }

.sp-area__visual { position: relative; }
.sp-area__photo img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); filter: saturate(.85); }
.sp-route {
  position: relative; z-index: 2; margin: -60px 14px 0; padding: 24px 24px 20px;
  color: rgba(255, 255, 255, .8); background: var(--black); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.sp-route__label { margin: 0 0 14px; font: 500 .7rem var(--font-head); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.sp-route__list { position: relative; display: grid; gap: 2px; margin-bottom: 16px; }
.sp-route__list::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 1px; background: linear-gradient(180deg, var(--accent), rgba(255, 255, 255, .2)); }
.sp-route__list li { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 5px 0 5px 26px; font: 500 .95rem/1.4 var(--font-head); color: rgba(255, 255, 255, .72); }
.sp-route__list li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--black); border: 1px solid rgba(255, 255, 255, .5); }
.sp-route__list li.is-main { color: var(--white); }
.sp-route__list li.is-main::before { border-color: var(--accent); }
.sp-route__list li.is-base { color: var(--white); font-size: 1.05rem; }
.sp-route__list li.is-base::before { left: 0; top: 10px; width: 13px; height: 13px; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.sp-route__list small { font: 500 .66rem var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.sp-route__map { display: inline-flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line-dark); width: 100%; color: var(--white); font: 500 .9rem var(--font-head); text-decoration: none; }
.sp-route__map .icon { color: var(--accent); }
.sp-route__map:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }


/* 07 PROCESS ================================================================= */
.sp-process { background: var(--white); }
.sp-steps { position: relative; display: grid; gap: 0; counter-reset: step; }
.sp-step { position: relative; padding: 0 0 34px 72px; }
.sp-step::before { content: ""; position: absolute; left: 25px; top: 54px; bottom: 6px; width: 1px; background: var(--line-light); }
.sp-step:last-child { padding-bottom: 0; }
.sp-step:last-child::before { display: none; }
.sp-step__num {
  position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 52px; height: 52px;
  font: 600 .95rem var(--font-head); color: var(--white); background: var(--black); border-radius: 50%;
  box-shadow: 0 0 0 6px var(--white), 0 0 0 7px var(--line-light);
}
.sp-step h3 { margin: 12px 0 8px; font-size: 1.15rem; }
.sp-step p { margin: 0; font-size: .97rem; }
.sp-step:hover .sp-step__num { background: var(--accent); color: var(--black); }
.sp-step__num { transition: background-color .3s var(--ease), color .3s; }


/* 08 CALL TO ACTION ========================================================== */
.sp-cta {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(100px, 13vw, 190px) 0; text-align: center;
  color: rgba(255, 255, 255, .82); background: var(--black);
}
.sp-cta__bg { position: absolute; left: 0; right: 0; top: -8%; height: 116%; z-index: -2; will-change: transform; }
.sp-cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: grayscale(.4) contrast(1.05); }
.sp-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(10, 10, 11, .7) 0%, rgba(10, 10, 11, .88) 65%, rgba(10, 10, 11, .94) 100%); }
.sp-cta__inner { display: flex; flex-direction: column; align-items: center; }
.sp-cta .eyebrow::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; }
.sp-cta__title { max-width: 18ch; margin-bottom: 22px; color: var(--white); font-size: clamp(2.3rem, 6vw, 4.8rem); line-height: 1.02; letter-spacing: -.04em; }
.sp-cta__text { max-width: 54ch; margin-bottom: 34px; font-size: var(--fs-lead); }
.sp-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }
.sp-cta__actions .btn { flex: 1 1 240px; max-width: 340px; }
.sp-cta__lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 30px; }
.sp-cta__lines a { display: inline-flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none; font: 500 .98rem var(--font-head); overflow-wrap: anywhere; }
.sp-cta__lines .icon { color: var(--accent); }
.sp-cta__lines a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }


/* 09 FAQ (accordion styles come from style.css, same as the homepage) ====== */
.sp-faq { background: var(--stone-50); }
.sp-faq .faq__contact { background: var(--white); }
.sp-faq .faq__item[open] { background: linear-gradient(90deg, var(--white), rgba(255, 255, 255, 0)); }
.sp-faq .faq__item summary:focus-visible { outline-offset: -2px; }


/* 10 MOTION PREFERENCES ====================================================== */
@media (prefers-reduced-motion: reduce) {
  .sp-hero__media, .sp-cta__bg { top: 0; height: 100%; transform: none !important; }
}


/* 11 RESPONSIVE ============================================================== */
@media (min-width: 560px) {
  .sp-hero__actions .btn { flex: 0 0 auto; }
  .sp-ledger { grid-template-columns: repeat(2, 1fr); column-gap: 28px; }
  .sp-card__body { padding: 32px 30px 30px; }
}

@media (min-width: 768px) {
  .sp-hero__rail-wrap { display: block; }
  .sp-hero__inner { padding-bottom: 36px; }
  .sp-route { width: 320px; margin: -70px 20px 0 auto; }
  .sp-steps { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
  .sp-step { padding-bottom: 40px; }
  .sp-step::before { display: none; }
}

@media (min-width: 900px) {
  .sp-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .sp-intro__grid { grid-template-columns: 1fr 1fr; column-gap: 72px; row-gap: 48px; }
  .sp-intro__head { grid-column: 1; }
  .sp-intro__head .section-title { max-width: 14ch; font-size: clamp(2.4rem, 4.4vw, 3.8rem); }
  .sp-intro__body { grid-column: 2; }
  .sp-ledger { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); column-gap: 0; }
  .sp-ledger li { padding: 22px 22px 20px; border-bottom: 0; border-right: 1px solid var(--line-light); }
  .sp-ledger li:last-child { border-right: 0; }
}

@media (min-width: 1024px) {
  .sp-hero__rail { grid-template-columns: repeat(6, 1fr); }
  .sp-hero__rail li { border-bottom: 0; }
  .sp-hero__rail li:last-child { border-right: 0; }
  .sp-hero__rail a { flex-direction: column; gap: 6px; padding: 18px 18px 20px; }
  .sp-why__grid { grid-template-columns: 1fr 1.05fr; gap: 88px; align-items: start; }
  .sp-why__media { position: sticky; top: calc(var(--header-h) + 40px); }
  .sp-reasons { grid-template-columns: 1fr 1fr; column-gap: 34px; }
  .sp-reasons li { padding-left: 0; padding-top: 70px; }
  .sp-reasons__num { top: 22px; }
  .sp-area__grid { grid-template-columns: 1fr 1.1fr; gap: 88px; }
  /* Process as a horizontal line of five steps */
  .sp-steps { grid-template-columns: repeat(5, 1fr); column-gap: 26px; }
  .sp-steps::before { content: ""; position: absolute; left: 26px; right: 26px; top: 26px; height: 1px; background: linear-gradient(90deg, var(--black), var(--accent) 50%, var(--line-light)); }
  .sp-step { padding: 76px 0 0; }
  .sp-step h3 { margin-top: 0; }
}

/* Route card floats over the photo corner only where the photo is wide enough */
@media (min-width: 1280px) {
  .sp-area__visual { padding-bottom: 60px; }
  .sp-route { position: absolute; right: -24px; bottom: -40px; margin: 0; width: 300px; }
}

@media (min-width: 1400px) {
  .sp-card__body { padding: 36px 38px 34px; }
}

@media print {
  .sp-hero__rail-wrap { display: none !important; }
  .sp-hero__media, .sp-cta__bg { transform: none !important; }
}