/* Inter is self-hosted (no requests to Google) */
@font-face { font-family: Inter; src: url('../fonts/Inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url('../fonts/Inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url('../fonts/Inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
/* Text selection: black with white text */
::selection { background-color: #000; color: #fff; }
::-moz-selection { background-color: #000; color: #fff; }
/* PCM animations: hidden on desktop until GSAP runs; always visible on mobile and with reduced motion */
@media (min-width: 992px) {
  .page-wrapper { opacity: 0; }
  [words-slide-up], [words-slide-up-delay07], [lines-slide-up], [lines-slide-up-80], [fade-up], [fill-text],
  .hero-eyebrow, .hero-title, .heading-section, .expertise-label, .step-number,
  .about-quote, .text-large, .about-name, .step-text,
  .container > .text-caption, .section-head > .text-caption, .impl-content > .text-caption,
  .link-large, .about-photo, .expertise-icon, .badge, .service-card,
  .contact-stack > .text-caption, .footer-inner > .logo-link, .footer-columns > .text-caption { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .page-wrapper, [words-slide-up], [words-slide-up-delay07], [lines-slide-up], [lines-slide-up-80], [fade-up], [fill-text],
  .hero-eyebrow, .hero-title, .heading-section, .expertise-label, .step-number,
  .about-quote, .text-large, .about-name, .step-text,
  .container > .text-caption, .section-head > .text-caption, .impl-content > .text-caption,
  .link-large, .about-photo, .expertise-icon, .badge, .service-card,
  .contact-stack > .text-caption, .footer-inner > .logo-link, .footer-columns > .text-caption { opacity: 1 !important; }
}
/* Safety net: if scripts fail to load, show everything */
.anim-fallback .page-wrapper, .anim-fallback [words-slide-up], .anim-fallback [words-slide-up-delay07],
.anim-fallback [lines-slide-up], .anim-fallback [lines-slide-up-80], .anim-fallback [fade-up], .anim-fallback [fill-text],
.anim-fallback .hero-eyebrow, .anim-fallback .hero-title, .anim-fallback .heading-section, .anim-fallback .expertise-label,
.anim-fallback .step-number, .anim-fallback .about-quote, .anim-fallback .text-large, .anim-fallback .about-name,
.anim-fallback .step-text, .anim-fallback .text-caption, .anim-fallback .link-large, .anim-fallback .about-photo,
.anim-fallback .expertise-icon, .anim-fallback .badge, .anim-fallback .service-card, .anim-fallback .logo-link { opacity: 1 !important; }
/* Split lines: mask height set in px by JS (Safari fix) */
.split-line { display: block; will-change: transform; }
.split-line-mask { overflow: hidden; }
/* Word glue that survives SplitType (non-breaking spaces do not) */
.nowrap { white-space: nowrap; }
/* Last expertise item: room for "Supply Chain /" on one line */
@media (min-width: 768px) { .expertise-row:last-child .expertise-item { width: 32vw; } }
/* Fixed header: frosted layer appears on scroll, 90% white. The plate is 2.6x the header height:
   solid only over the top ~40% of the header, then a very long eased fade (about 2.2 header heights) into nothing */
.header::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: -160%; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 0.4s ease;
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 15%, rgba(0, 0, 0, 0.82) 25%, rgba(0, 0, 0, 0.62) 36%, rgba(0, 0, 0, 0.42) 48%, rgba(0, 0, 0, 0.26) 60%, rgba(0, 0, 0, 0.14) 72%, rgba(0, 0, 0, 0.06) 84%, rgba(0, 0, 0, 0.02) 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 15%, rgba(0, 0, 0, 0.82) 25%, rgba(0, 0, 0, 0.62) 36%, rgba(0, 0, 0, 0.42) 48%, rgba(0, 0, 0, 0.26) 60%, rgba(0, 0, 0, 0.14) 72%, rgba(0, 0, 0, 0.06) 84%, rgba(0, 0, 0, 0.02) 93%, transparent 100%);
}
.header.is-scrolled::before { opacity: 1; }
/* Header phone: no underline at rest, the line draws in on hover (reverse of the other links), same 1s outExpo */
.header a[href^="tel:"], .header a.phone-wa {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  padding-bottom: 0.08em;
  transition: background-size 1s cubic-bezier(0.19, 1, 0.22, 1);
}
@media (hover: hover) {
  .header a[href^="tel:"]:hover, .header a.phone-wa:hover { background-size: 100% 1px; }
}
/* Email links: clicking also copies the address; a note in the link's own font appears beside it and fades out */
a[href^="mailto:"] { position: relative; }
.copy-note {
  position: absolute; left: 100%; top: 0; margin-left: 0.6em; white-space: nowrap; pointer-events: none;
  font: inherit; letter-spacing: inherit; line-height: inherit; color: #767676;
  background: none; opacity: 0; transform: translateY(0.25em);
  transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1), transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.copy-note.is-on { opacity: 1; transform: translateY(0); }
@media (max-width: 767px) { .copy-note { left: 0; top: 100%; margin-left: 0; margin-top: 0.3em; } }
/* Values badge: slow marquee inside the pill, soft fade at the pill edges, default cursor */
.badge.is-marquee { overflow: hidden; cursor: default; }
.badge.is-marquee .marquee { overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); }
.badge.is-marquee .marquee-track { display: flex; width: max-content; white-space: nowrap; will-change: transform; }
.badge.is-marquee .marquee-track span { padding-right: 0.6em; }
/* Underline links: Axis hover, line retracts on hover and draws back on leave (1s, outExpo) */
a.link-large, a.text-link {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% max(1px, 0.07em);
  padding-bottom: 0.08em;
  transition: background-size 1s cubic-bezier(0.19, 1, 0.22, 1);
}
@media (hover: hover) {
  a.link-large:hover, a.text-link:hover { background-size: 0% max(1px, 0.07em); }
}
/* Services: solid white cards that light up one by one while scrolling */
.services-cards .service-card { background-color: #fff; transition: background-color 0.6s ease, border-color 0.6s ease; }
.services-cards .service-card.is-accent { background-color: #fff; border-color: #ADADAD; }
.services-cards .service-card.is-active { background-color: #EDF5FF; border-color: #C0D4EC; }
/* Services: cards can be dragged anywhere with the mouse and stay where dropped */
@media (hover: hover) and (pointer: fine) {
  .services-cards .service-card.is-draggable {
    position: relative; z-index: 1; cursor: grab; -webkit-user-select: none; user-select: none; touch-action: none;
    transition: background-color 0.6s ease, border-color 0.6s ease, scale 0.5s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .services-cards .service-card.is-dragging { cursor: grabbing; scale: 1.02; box-shadow: 0 0.7vw 1.8vw rgba(0, 0, 0, 0.07); }
}
/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Footer: email and Insights. Stacked on desktop, side by side on phones with Insights pinned right */
.footer-links { display: flex; flex-direction: column; align-items: flex-start; }
@media (max-width: 767px) {
  .footer-columns > .footer-links { align-self: stretch; flex-direction: row; justify-content: space-between; align-items: baseline; column-gap: 24px; }
  .footer-links .footer-blog { position: relative; }
  .footer-links .footer-blog::after { content: ""; position: absolute; inset: -14px -16px -14px -16px; }
}

/* Phones: the first screen carries Pete's photo, quote and both calls to action; the separate About block is hidden */
.hero-photo-m, .hero-quote-m, .hero-name-m, .hero-li-m { display: none; }
.hero-links { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 767px) {
  .hero-wrap { min-height: 0; }
  .hero { padding: 29vw 5.128vw 4.103vw; justify-content: flex-start; flex: none; }
  .hero-photo-m { display: block; width: 28.205vw; height: 28.205vw; margin: 0 auto 5.128vw; }
  .hero-eyebrow { margin-bottom: 2.564vw; }
  .hero-title { margin-bottom: 5.128vw; }
  .hero-quote-m { display: block; margin: 0 0 3.077vw; font-size: 4.872vw; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
  .hero-name-m { display: block; margin-bottom: 7.179vw; font-size: 14px; }
  .hero-links { row-gap: 4.103vw; }
  .hero-li-m { display: inline; }
  .about-section { display: none; }
}