/* ============================================================
   AUREAUX — Service (product) landing pages
   Shared layout for /consultancy/, /sourcing/, /logistics/.
   Loaded after tokens.css + site.css. Palette/type stay on-brand;
   each page differs by copy and photography, not new colours.
   ============================================================ */

/* ---- Hero CTA pair (gold anchor + ghost, glide to on-page sections) ---- */
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem; }

/* ---- Hero assurance markers (sit under the hero sub, on dark) ---- */
.serv-marks { display: flex; flex-wrap: wrap; gap: .7rem 1.7rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.serv-marks li { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-body);
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.serv-marks li::before { content: ""; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex: none; }

/* ---- Intro / overview (ivory) ---- */
.serv-intro { background: var(--ivory); color: var(--text-on-light); }
.serv-intro__grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.serv-intro__lead { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.55rem);
  line-height: 1.22; letter-spacing: -.01em; margin: 0; }
.serv-intro__lead em { font-style: italic; color: var(--sage); }
.serv-intro__body p { color: var(--text-on-light-muted); font-size: 1.03rem; margin: 0 0 1.3rem; }
.serv-intro__body p:last-child { margin-bottom: 0; }
.serv-intro__body strong { color: var(--text-on-light); font-weight: 500; }

/* ---- Capabilities (ivory-2) — a set, not a sequence: diamond markers, no numbers ---- */
.serv-cap { background: var(--ivory-2); color: var(--text-on-light); }
.cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.cap { background: var(--cream); border: 1px solid var(--hairline-light); border-radius: var(--radius-lg); padding: clamp(1.7rem, 3vw, 2.4rem);
  transition: transform .5s var(--ease-out-expo), box-shadow .5s var(--ease-out-expo); will-change: transform; }
.cap:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cap__mark { width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); }
.cap h3 { font-size: 1.35rem; margin: 1.1rem 0 .7rem; }
.cap p { color: var(--text-on-light-muted); font-size: .97rem; margin: 0; line-height: 1.65; }

/* ---- Editorial signature (dark, image + copy) ---- */
.serv-editorial { background: var(--green-base); color: var(--text-on-dark); overflow: hidden; }
.serv-editorial__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.serv-editorial--rev .serv-editorial__media { order: 2; }
.serv-editorial__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-lg); }
.serv-editorial__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out-expo); }
.serv-editorial:hover .serv-editorial__media img { transform: scale(1.04); }
.serv-editorial h2 { font-size: clamp(2rem, 3.8vw, 3rem); font-weight: 400; margin: .9rem 0 1.2rem; }
.serv-editorial h2 em { font-style: italic; color: var(--gold-light); }
.serv-editorial__text > p { color: var(--text-on-dark-muted); font-size: 1.06rem; line-height: 1.78; margin: 0; max-width: 48ch; }

/* ---- Process (light timeline; component styles live in site.css) ---- */
.serv-process { background: var(--cream); color: var(--text-on-light); }
.serv-process .sec-head h2 em { color: var(--gold); }
/* Sub-line tucks in under the heading (sec-head's 2rem flex gap is too airy) */
.serv-process .sec-head p { color: var(--text-on-light-muted); margin-top: -1.1rem; }

/* ---- Related services (ivory) — the homepage product cards, minus the
        service the page is about. Keep these rules in step with the card
        styles in index.html. ---- */
.related { background: var(--ivory); color: var(--text-on-light); }
/* This section alone breaks the content column: the card row spans the
   viewport with a 100px+ inset (heading stays visually centred). */
@media (min-width: 1025px) {
  .related .wrap { max-width: none; padding-inline: clamp(100px, 8vw, 160px); }
}
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 1.4vw, 1.4rem); margin-top: clamp(2.2rem, 4vw, 3rem); }
.svc {
  background: var(--cream); border: 1px solid var(--hairline-light); border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column; transition: transform .6s var(--ease-out-expo), box-shadow .6s var(--ease-out-expo); will-change: transform;
}
.svc:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.svc__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.svc__media img { width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out-expo), filter .8s var(--ease-soft); }
.svc:hover .svc__media img { transform: scale(1.06); filter: blur(7px) brightness(.82); }
.svc__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,36,23,0) 55%, rgba(1,13,4,0.42)); }
.svc__body { padding: 1.4rem 1.3rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.svc__body h3 { font-size: 1.32rem; margin-bottom: .65rem; }
.svc__body p { color: var(--text-on-light-muted); font-size: .88rem; margin: 0 0 1.2rem; }
.svc__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline-light); }
.svc__list li { padding: .55rem 0; font-size: .8rem; color: var(--text-on-light); border-bottom: 1px solid var(--hairline-light);
  display: flex; align-items: center; gap: .7rem; letter-spacing: .01em; }
.svc__list li::before { content: ""; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); flex: none; }
/* CTA sits over the image header, revealed on card hover/focus while the
   photo blurs beneath it; solid cream so it reads on any image. The whole
   card is the link — the CTA stays a decorative affordance. */
.svc__cta { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%) translateY(8px);
  opacity: 0; padding: .74rem 1.05rem; font-size: .6rem; letter-spacing: .14em; white-space: nowrap;
  transition: opacity .6s var(--ease-soft), transform .7s var(--ease-out-expo); }
/* Beat .btn-dark-ghost:hover (site.css) so the pill stays solid cream even
   with the cursor directly on it */
.svc .svc__cta, .svc .svc__cta:hover { background: var(--cream); border-color: transparent; color: var(--text-on-light); }
.svc:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.svc:hover .svc__cta, .svc:focus-visible .svc__cta { opacity: 1; transform: translate(-50%, -50%); }
.svc:hover .svc__cta .arr, .svc:focus-visible .svc__cta .arr { transform: translateX(5px); }
/* Touch devices have no hover: keep the CTA visible and the image sharp */
@media (hover: none) {
  .svc:hover .svc__media img { transform: none; filter: none; }
  .svc__cta { opacity: 1; transform: translate(-50%, -50%); background: rgba(251, 248, 241, .92); }
}
/* Travelling rim light on card CTAs — same treatment as the homepage grid */
.svc__cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--btn-angle),
    transparent 0deg 62deg, rgba(168,125,69,.14) 92deg,
    var(--gold) 116deg, var(--gold-light) 128deg, var(--gold) 140deg,
    rgba(168,125,69,.14) 164deg, transparent 196deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: btn-rim 16s linear infinite;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .serv-editorial__grid { grid-template-columns: 1fr; gap: 2rem; }
  .serv-editorial--rev .serv-editorial__media { order: 0; }
  .serv-editorial__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 860px) { .serv-intro__grid { grid-template-columns: 1fr; gap: 1.6rem; } }
@media (max-width: 620px) {
  .cap-grid { grid-template-columns: 1fr; }
}
/* Cards become the same swipeable rail the homepage uses on small screens */
@media (max-width: 1024px) {
  .svc-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: .9rem;
    margin-inline: calc(-1 * var(--pad-section-x));
    padding-inline: var(--pad-section-x);
    scroll-padding-inline: var(--pad-section-x);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .svc-grid::-webkit-scrollbar { display: none; }
  .svc { flex: 0 0 46%; scroll-snap-align: start; }
}
@media (max-width: 640px) { .svc { flex: 0 0 82%; } }

@media (prefers-reduced-motion: reduce) {
  .serv-editorial:hover .serv-editorial__media img { transform: none; }
  .svc__cta::before { animation: none; opacity: 0; }
}

/* ---- Founder editorial (Why Aureaux) — ivory canvas with a layered
        portrait + wax-seal inset that drift apart on scroll
        (site.js [data-drift]). Shared across all service pages. ---- */
.serv-editorial--founder { background: var(--ivory); color: var(--text-on-light); }
.serv-editorial--founder h2 em { color: var(--gold); }
.serv-editorial--founder .serv-editorial__text > p { color: var(--text-on-light-muted); }
.serv-editorial--founder .serv-editorial__text > p strong { color: var(--text-on-light); font-weight: 500; }
.serv-editorial--founder .serv-editorial__text > p + p { margin-top: 1.1rem; }
.serv-editorial--founder .serv-editorial__text .btn { margin-top: 2.2rem; }
.serv-editorial--founder .serv-editorial__media { position: relative; aspect-ratio: auto; overflow: visible; border-radius: 0; box-shadow: none; }
.serv-editorial--founder .serv-editorial__media figure { margin: 0; will-change: transform; }
.serv-editorial--founder .serv-editorial__media .a { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.serv-editorial--founder .serv-editorial__media .a img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
/* top 50% + margin -22% (half the seal's own 44% square) = vertically centred
   on the portrait; transform stays free for the scroll drift */
.serv-editorial--founder .serv-editorial__media .b { position: absolute; width: 44%; left: calc(-1 * var(--pad-section-x)); top: 50%; margin-top: -22%; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; border: 6px solid var(--ivory); box-shadow: var(--shadow-lg); }
.serv-editorial--founder .serv-editorial__media .b img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .serv-editorial--founder .serv-editorial__media { max-width: 480px; }
  .serv-editorial--founder .serv-editorial__media .b { left: 0; }
}

/* ---- Statement intro — brand-green centred stack under the gold crest
        (the Discovery Call intro, shared across service pages) ---- */
.serv-intro--statement { background: var(--green-base); color: var(--text-on-dark);
  /* absorb the enlarged crest (+clamp(28px,2.5vw,38px)) so section height is unchanged */
  padding-block: calc(var(--pad-section-y) - clamp(14px, 1.25vw, 19px)); }
.serv-intro--statement .serv-intro__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: clamp(1.8rem, 3vw, 2.6rem); }
.serv-intro--statement .serv-intro__crest { width: clamp(84px, 7.5vw, 114px); height: auto; margin-bottom: -0.4rem; }
.serv-intro--statement .serv-intro__lead { font-size: clamp(2.55rem, 4.5vw, 3.8rem); }
.serv-intro--statement .serv-intro__lead em { color: var(--gold-light); }
.serv-intro--statement .serv-intro__body { max-width: 47rem; }
.serv-intro--statement .serv-intro__body p { color: var(--text-on-dark); }
.serv-intro--statement .serv-intro__body strong { color: var(--text-on-dark); }