/* ==========================================================================
   Medkon: main stylesheet
   Palette: deep forest green + cream. Fluid type: 1rem = 16px at 1440 / 834 / 550 / 390 design widths.
   ========================================================================== */

@font-face { font-family: "Anton"; src: url("../font/Anton-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../font/BricolageGrotesque-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --forest: #0f3d2e;
  --forest-deep: #082a1f;
  --forest-mid: #1f6b4f;
  --forest-soft: #3f9470;
  --mint: #a8d5b5;
  --mint-soft: #cfe6d2;
  --sage: #dce8d8;
  --cream: #f5f0e6;
  --cream-2: #ebe5d6;
  --paper: #fbf8f1;
  --ink: #0b1410;

  --font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-body: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;

  /* fluid scale */
  --size-ideal: 1440;
  --size-min: 992px;
  --size-max: 1920px;
  --size-container: clamp(var(--size-min), 100vw, var(--size-max));
  --size-font: calc(var(--size-container) / (var(--size-ideal) / 16));

  /* big type (overridden per breakpoint) */
  --fs-hero: 9rem;
  --fs-page-title: 11rem;
  --fs-section: 8.6rem;
  --fs-about: 4.2rem;
  --fs-end: 5rem;
  --fs-service: 5.4rem;
  --fs-footer-logo: 26rem;
  --gutter: 1.4rem;
  --radius: 1.4rem;
}

@media (max-width: 991px) {
  :root {
    --size-ideal: 834; --size-min: 768px; --size-max: 991px;
    --fs-hero: 6.8rem; --fs-page-title: 9rem; --fs-section: 7rem; --fs-about: 3.6rem; --fs-end: 4.2rem; --fs-service: 4.6rem; --fs-footer-logo: 26rem;
  }
}
@media (max-width: 767px) {
  :root {
    --size-ideal: 550; --size-min: 480px; --size-max: 767px;
    --fs-hero: 6.6rem; --fs-page-title: 7.4rem; --fs-section: 5.6rem; --fs-about: 3rem; --fs-end: 3.4rem; --fs-service: 3.6rem; --fs-footer-logo: 20rem;
    --gutter: 1.1rem;
  }
}
@media (max-width: 479px) {
  :root {
    --size-ideal: 390; --size-min: 320px; --size-max: 479px;
    --fs-hero: 4.3rem; --fs-page-title: 5.6rem; --fs-section: 4.2rem; --fs-about: 2.4rem; --fs-end: 2.6rem; --fs-service: 2.8rem; --fs-footer-logo: 15.4rem;
    --gutter: 1rem;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--size-font); }
html, body { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; margin: 0; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }

/* scroll container (Lenis wrapper) */
.page { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: none; scrollbar-width: none; }
.page::-webkit-scrollbar { display: none; }
.page-content { position: relative; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

:focus-visible { outline: 2px solid var(--forest-mid); outline-offset: 3px; }

/* ---------- shared type ---------- */
.section-label { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.section-heading { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-section); line-height: 0.92; text-transform: uppercase; color: var(--ink); }
.section-heading-center { text-align: center; }
.sample-tag { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.5rem; border: 1px solid currentColor; border-radius: 99px; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; opacity: 0.7; }

/* ---------- buttons ---------- */
.cta-btn {
  position: relative; display: inline-flex; align-items: center; gap: 0.9rem;
  padding: 0.38rem 0.38rem 0.38rem 1.2rem; border-radius: 99px;
  background: var(--ink); color: var(--paper); border: 2px solid var(--ink);
  font-size: 0.86rem; font-weight: 500; overflow: hidden; isolation: isolate; will-change: transform;
}
.cta-text { position: relative; z-index: 2; transition: color 0.3s; }
.cta-btn-arrow { position: relative; z-index: 2; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--mint); color: var(--forest-deep); }
.cta-btn-arrow svg, .svg-arrow-cta { width: 0.7rem; height: 0.7rem; }
.cta-btn-fill-hover { position: absolute; z-index: 1; right: 0.38rem; top: 50%; width: 1.7rem; height: 1.7rem; margin-top: -0.85rem; border-radius: 50%; background: var(--mint); transform: scale(1); pointer-events: none; }
.cta-btn:hover .cta-text { color: var(--forest-deep); }
.project-btn { font-size: 1.1rem; padding: 0.5rem 0.5rem 0.5rem 1.7rem; gap: 1.3rem; }
.project-btn .cta-btn-arrow { width: 2.3rem; height: 2.3rem; }
.project-btn .cta-btn-fill-hover { width: 2.3rem; height: 2.3rem; right: 0.5rem; margin-top: -1.15rem; }

/* ---------- navbar ---------- */
.navbar-wrap {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              -webkit-backdrop-filter 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.3s;
}
.navbar-wrap.is-scrolled {
  background: rgba(251, 248, 241, 0.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(15, 61, 46, 0.08);
  box-shadow: 0 4px 24px -2px rgba(11, 20, 16, 0.05);
}
.navbar-wrap[data-theme="dark"].is-scrolled {
  background: rgba(11, 20, 16, 0.84);
  border-bottom: 1px solid rgba(251, 248, 241, 0.08);
  box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.35);
}
.navbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.2rem var(--gutter) 0;
  pointer-events: none;
  transition: padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.navbar-wrap.is-scrolled .navbar {
  padding: 0.8rem var(--gutter);
}
.navbar > * { pointer-events: auto; }
.nav-left { display: flex; gap: 0.5rem; }
.nav-pill { position: relative; overflow: hidden; display: inline-block; padding: 0.62rem 1.45rem; border-radius: 99px; background: rgba(251, 248, 241, 0.94); font-size: 0.94rem; font-weight: 500; color: var(--ink); isolation: isolate; border: 1px solid rgba(15, 61, 46, 0.06); }
.nav-pill-fill { position: absolute; inset: 0; z-index: -1; background: var(--forest); transform: scaleX(0); transform-origin: left center; transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1); }
.nav-pill-text { transition: color 0.3s; }
.nav-pill:hover .nav-pill-fill, .nav-pill[aria-current="page"] .nav-pill-fill { transform: scaleX(1); }
.nav-pill:hover .nav-pill-text, .nav-pill[aria-current="page"] .nav-pill-text { color: var(--cream); }
.nav-logo { font-family: var(--font-display); font-size: 2.25rem; letter-spacing: 0.05em; line-height: 1; color: var(--forest); transition: color 0.3s; }
.nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 1.8rem; }
.nav-hours { display: flex; flex-direction: column; font-size: 0.8rem; font-weight: 500; line-height: 1.25; color: var(--ink); transition: color 0.3s; }
.navbar-wrap[data-theme="dark"] .nav-logo, .navbar-wrap[data-theme="dark"] .nav-hours { color: var(--cream); }
.ham-toggle { display: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--paper); color: var(--forest); place-items: center; }
.ham-svg { width: 1.6rem; height: 1.6rem; overflow: visible; }
.ham-cross-path { opacity: 0; }
.ham-menu { position: fixed; inset: 0; z-index: -1; display: none; background: var(--forest); color: var(--cream); pointer-events: none; }
.ham-menu.is-open { display: block; pointer-events: auto; }
.hamburger-links { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: 0 var(--gutter); }
.hamburger-links a, .hamburger-links button { font-family: var(--font-display); font-size: 5rem; line-height: 1; text-transform: uppercase; text-align: left; }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 200; overflow: hidden; background: transparent; }
.loader-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader-bg path { stroke-width: 3000; }
.loader-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.loader-word { display: flex; font-family: var(--font-display); font-size: 14rem; line-height: 1; color: var(--forest); letter-spacing: 0.02em; }
.loader-letter { display: inline-block; transform: scale(0); }
.loader-underline { width: 34rem; max-width: 70vw; height: auto; overflow: visible; }

/* ---------- HERO ---------- */
.section-hero { position: relative; height: 88rem; background: var(--sage); overflow: hidden; }
.hero-text { position: absolute; z-index: 4; top: 5.6rem; left: 0; width: 100%; text-align: center; }
.hero-heading { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-hero); line-height: 0.93; text-transform: uppercase; color: var(--forest); }
.hero-line-mask { display: block; overflow: hidden; padding: 0.08em 0.2em 0.1em; margin: -0.08em -0.2em -0.1em; }
.hero-line { display: block; }
.hero-pill { position: absolute; z-index: 5; padding: 0.62rem 1.5rem; border-radius: 99px; background: var(--ink); color: var(--paper); font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 0.4rem 0 rgba(8, 42, 31, 0.18); }
.hero-pill-1 { left: 25.5%; top: 6.4rem; transform: rotate(-8deg); }
.hero-pill-2 { left: 44.5%; top: 1.7rem; transform: rotate(4deg); }
.hero-pill-3 { left: 63.5%; top: 13.4rem; transform: rotate(-5deg); }
.hero-scribble { position: absolute; z-index: 1; width: 46rem; overflow: visible; }
.hero-scribble-left { left: -4rem; top: 12rem; }
.hero-scribble-right { right: -5rem; top: 4rem; }
.hero-scene { position: absolute; z-index: 3; top: 19.5rem; left: 50%; width: 60rem; transform: translateX(-50%); }
.hero-scene-svg { width: 100%; height: auto; overflow: visible; }
.hero-marquee-wrap { position: absolute; z-index: 2; left: 0; right: 0; bottom: -2rem; height: 36rem; }
.hero-marquee { width: 100%; height: 100%; }
.hero-marquee-text { white-space: pre; }

/* ---------- ABOUT (pinned) ---------- */
.section-about { position: relative; height: 100vh; min-height: 50rem; display: grid; place-items: center; background: var(--cream); }
.about-inner { position: relative; width: min(74rem, 94%); text-align: center; }
.about-label { position: absolute; top: -3.4rem; left: 0; right: 0; font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; }
.about-para { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-about); line-height: 1.18; letter-spacing: -0.02em; color: var(--ink); }
.about-char { display: inline-block; }
.about-pill { position: absolute; z-index: 3; padding: 0.55rem 1.35rem; border-radius: 99px; background: var(--forest); color: var(--cream); font-size: 0.95rem; font-weight: 600; white-space: nowrap; }
.about-pill-1 { top: -2.4rem; right: 4%; transform: rotate(-6deg); }
.about-pill-2 { top: 20.5rem; left: -3%; transform: rotate(5deg); }
.about-pill-3 { bottom: -2.4rem; right: 18%; transform: rotate(-4deg); }

/* ---------- SHOWCASE SLIDER ---------- */
.section-slider-showcase { position: relative; padding: 4.4rem 0; background: var(--cream); }
.section-slider-wrapper { position: relative; overflow: hidden; width: 100%; }
.showcase-slider { display: flex; gap: 1rem; width: max-content; }
.showcase-slide { flex: 0 0 auto; width: 30.5rem; }
.showcase-art { aspect-ratio: 1 / 1; border-radius: 1rem; overflow: hidden; }
.showcase-art svg { width: 100%; height: 100%; }

/* ---------- PROJECTS ---------- */
.section-projects { position: relative; padding: 5rem 0.6rem 8rem; background: var(--cream); }
.projects-header { padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; margin-bottom: 3.4rem; }
.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 1.2rem; }
.project-card-link { display: block; }
.project-card-clip-mask { overflow: hidden; }
.project-card-img-wrapper { position: relative; overflow: hidden; aspect-ratio: 709 / 1012; border-radius: var(--radius); background: var(--sage); }
.project-img, .project-img svg { width: 100%; height: 100%; }
.project-img-svg, .project-card-mask-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.project-img-svg { z-index: 2; }
.project-card-mask-overlay { z-index: 3; }
.project-card-info { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 0.5rem 0; }
.project-logo { width: 2.4rem; height: 2.4rem; flex: none; }
.project-card-text { flex: 1; min-width: 0; }
.project-card-name { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1; text-transform: uppercase; }
.project-card-cat { margin-top: 0.15rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ca, var(--forest-mid)); }
.projects-arrow { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ca, var(--forest)); color: #fff; flex: none; }
.projects-arrow svg { width: 0.8rem; height: 0.8rem; }

.projects-end { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2.4rem; margin: 9rem auto 0; width: min(66rem, 92%); text-align: center; }
.projects-end-para { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-end); line-height: 1; text-transform: uppercase; color: var(--forest); }
.projects-pill { position: absolute; z-index: 2; padding: 0.5rem 1.2rem; border-radius: 99px; background: var(--ink); color: var(--paper); font-size: 0.92rem; font-weight: 600; white-space: nowrap; }
.projects-pill-1 { top: -2.6rem; left: -6%; transform: rotate(-7deg); }
.projects-pill-2 { top: 3.4rem; right: -9%; transform: rotate(5deg); }
.projects-pill-3 { top: 12.2rem; left: -10%; transform: rotate(-4deg); }
.projects-end-simple { margin-top: 7rem; }

/* ---------- SERVICES ---------- */
.section-services { position: relative; padding: 4rem 0 6rem; background: var(--cream); }
.services-body { position: relative; padding: 2rem var(--gutter) 6rem; }
.services-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.services-path path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.services-path-light { stroke: var(--mint); stroke-width: 34; }
.services-path-dark { stroke: var(--forest); stroke-width: 30; }
.services-layers { position: relative; z-index: 2; }
.service-layer { position: relative; min-height: 24rem; display: flex; align-items: flex-start; }
.service-block { position: relative; }
.service-title { display: flex; align-items: center; gap: 0.7rem; font-family: var(--font-display); font-size: var(--fs-service); line-height: 1; text-transform: uppercase; color: var(--forest); white-space: nowrap; }
.service-svg { display: inline-block; width: 1.05em; height: 1.05em; flex: none; will-change: transform; }
.service-svg svg { width: 100%; height: 100%; overflow: visible; }
.service-block-para-wrapper { position: absolute; left: 100%; top: 100%; margin: -1.3rem 0 0 -9rem; transform-origin: center; will-change: transform; }
.service-para { width: 21rem; padding: 1rem 1.5rem; border: 1px solid var(--forest); border-radius: 2.4rem; background: var(--paper); font-size: 0.9rem; font-weight: 500; line-height: 1.3; color: var(--forest); }
.service-layer-1 { padding-left: 28%; }
.service-layer-2 { padding-left: 46%; }
.service-layer-3 { padding-left: 14%; }
.service-layer-4 { padding-left: 52%; }
.service-layer-5 { padding-left: 24%; }
.service-layer-6 { padding-left: 50%; }
.service-layer-7 { padding-left: 20%; }

/* ---------- TESTIMONIALS ---------- */
.section-testimonials { position: relative; padding: 3rem var(--gutter) 4rem; background: var(--cream); }
.testimonials-header { position: relative; display: block; margin-bottom: 2.4rem; }
.testimonials-header .section-label { position: absolute; left: 0; top: 0; }
.testimonials-body-bg { position: relative; height: 38rem; overflow: hidden; border-radius: 1.6rem; background: var(--forest); cursor: none; }
.testimonials-stack { position: absolute; inset: 0; display: grid; place-items: center; }
.testimonial-card { position: absolute; width: min(52rem, 88%); padding: 2.4rem 2.6rem 2.6rem; border: 1px solid var(--forest-mid); border-radius: 1.6rem; background: var(--paper); box-shadow: 0 1rem 3rem rgba(8, 42, 31, 0.25); will-change: transform; }
.testimonial-title { font-weight: 800; font-size: 3rem; line-height: 1.02; letter-spacing: -0.02em; color: var(--forest); }
.testimonial-meta { display: flex; gap: 1.6rem; margin-top: 2.4rem; align-items: flex-start; }
.testimonial-avatar { width: 7.4rem; height: 7.4rem; flex: none; overflow: hidden; border-radius: 50%; }
.testimonial-avatar svg { width: 100%; height: 100%; }
.testimonial-text { font-size: 1.2rem; line-height: 1.3; color: var(--forest-mid); }
.testimonial-name { margin-top: 1rem; font-weight: 700; color: var(--forest); }
.testimonial-role { font-size: 0.9rem; color: var(--forest-mid); }
.side-bar { position: absolute; right: 1.6rem; bottom: 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-end; z-index: 4; }
.side-tick { display: block; width: 1.6rem; height: 2px; background: var(--cream); opacity: 0.35; }
.side-tick:first-child { width: 2.8rem; }
.nav-arrow { position: absolute; z-index: 6; left: 0; top: 0; width: 3.6rem; height: 3.6rem; margin: -1.8rem 0 0 -1.8rem; border-radius: 50%; background: var(--mint); color: var(--forest-deep); display: grid; place-items: center; pointer-events: none; opacity: 0; transform: scale(0); }
.nav-arrow svg { width: 1.2rem; height: 1.2rem; }

/* ---------- FAQ ---------- */
.section-faq { position: relative; display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 3rem; padding: 4rem var(--gutter) 9rem; background: var(--cream); }
.faq-left .section-heading { margin-top: 3rem; font-size: calc(var(--fs-section) * 0.95); }
.faq-mascot { margin-top: 5rem; width: 36rem; max-width: 100%; }
.faq-mascot-svg { width: 100%; height: auto; }
.faq-list { display: flex; flex-direction: column; gap: 0.9rem; padding-top: 3.6rem; }
.faq-item { display: flex; flex-direction: column; }
.question-block { align-self: flex-start; width: 100%; padding: 1.1rem 2rem; border: 0 solid var(--forest); border-radius: 2.2rem 2.2rem 2.2rem 0; background: var(--cream-2); font-size: 1.22rem; font-weight: 500; cursor: pointer; user-select: none; }
.faq-block-btm { display: none; align-items: flex-end; justify-content: flex-end; gap: 0.6rem; margin-top: 0.7rem; }
.faq-answer-block { width: 80%; padding: 1.5rem 1.9rem; border: 1px solid rgba(15, 61, 46, 0.35); border-radius: 1.6rem 1.6rem 0 1.6rem; background: var(--cream); }
.faq-answer { font-size: 1.15rem; line-height: 1.35; color: #25362d; }
.faq-logo { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; flex: none; border-radius: 50%; background: var(--forest); color: var(--cream); font-family: var(--font-display); font-size: 1.7rem; }

/* ---------- FOOTER ---------- */
.footer { position: relative; overflow: hidden; background: var(--forest); color: var(--cream); }
.footer-scribble { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.footer-top { position: relative; z-index: 2; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; padding: 2.6rem var(--gutter) 0; min-height: 26rem; }
.footer-heading { font-weight: 800; font-size: 3.5rem; line-height: 1; letter-spacing: -0.02em; margin-bottom: 1.2rem; }
.footer-heading-mask { display: block; overflow: hidden; padding-bottom: 0.1em; }
.footer-heading-line { display: block; }
.footer-email { margin-top: 2.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-link-header { font-weight: 700; font-size: 1.05rem; color: var(--mint); }
.footer-link { display: inline-block; font-weight: 700; font-size: 1.1rem; color: var(--cream); width: fit-content; }
.footer-link .svg-arrow-cta { display: inline-block; width: 0.7rem; height: 0.7rem; margin-left: 0.5rem; }
.footer-mid, .footer-right { display: flex; flex-direction: column; gap: 0.7rem; padding-top: 4.6rem; }
.footer-mid .footer-link-header { margin-bottom: 0.4rem; }
.footer-note { margin-top: 1.4rem; font-weight: 500; font-size: 1.05rem; line-height: 1.25; }
.footer-bottom { position: relative; z-index: 2; padding: 1.5rem var(--gutter) 3.5rem; }
.footer-copy { font-size: 0.78rem; font-weight: 600; margin-bottom: 1.5rem; opacity: 0.9; }
.footer-copy a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.footer-logo-wrap { overflow: visible; padding: 0.5rem 0 1.5rem; margin-top: 1rem; }
.footer-logo { color: var(--cream-2); display: block; width: 100%; }
.footer-wordmark { display: block; font-family: var(--font-display); font-weight: 400; font-size: min(var(--fs-footer-logo), calc((100vw - var(--gutter) * 2) / 3.45)); line-height: 0.9; letter-spacing: 0.005em; text-transform: uppercase; white-space: nowrap; }

/* ---------- CONTACT OVERLAY ---------- */
.contact-page { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; overflow: hidden auto; background: var(--forest-deep); color: var(--cream); visibility: hidden; pointer-events: none; clip-path: circle(0% at 92% 4%); }
.contact-page.is-open { pointer-events: auto; }
.contact-transition { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.contact-transition path { stroke-width: 150; stroke-opacity: 0.09; }
.contact-navbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 1.2rem var(--gutter) 0; }
.contact-navbar .nav-logo { color: var(--cream); }
.close-btn { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.6rem 0.55rem 1.3rem; border-radius: 99px; background: var(--paper); color: var(--ink); font-size: 0.9rem; font-weight: 600; }
.close-x { position: relative; display: block; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--forest); }
.close-x::before, .close-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.75rem; height: 2px; margin-left: -0.375rem; background: var(--cream); border-radius: 2px; transform: rotate(45deg); }
.close-x::after { transform: rotate(-45deg); }
.contact-content { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; padding: 2rem var(--gutter) 3rem; }
.contact-heading { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 400; font-size: 11rem; line-height: 0.88; text-transform: uppercase; color: var(--cream); }
.contact-heading span { display: block; overflow: hidden; }
.contact-heading-char { display: inline-block; }
.contact-para { margin-top: 1.4rem; font-weight: 700; font-size: 1.7rem; color: var(--mint); }
.contact-right { display: flex; flex-direction: column; gap: 2.4rem; }
.email-heading { font-size: 1.05rem; font-weight: 700; color: var(--mint); margin-bottom: 0.3rem; }
.email-link { display: inline-block; font-weight: 800; font-size: 2.2rem; letter-spacing: -0.02em; word-break: break-all; }
.contact-socials { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.contact-social { padding: 0.5rem 1.2rem; border: 1px solid var(--forest-soft); border-radius: 99px; font-weight: 600; font-size: 0.95rem; }
.contact-social:hover { background: var(--mint); color: var(--forest-deep); }

/* ---------- inner pages: hero ---------- */
.section-page-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 11rem var(--gutter) 7rem; background: var(--sage); text-align: center; }
.section-page-hero .hero-scribble { opacity: 0.9; }
.section-page-hero .hero-scribble-left { top: 14rem; left: -14rem; }
.section-page-hero .hero-scribble-right { top: 0; right: -16rem; }
.page-eyebrow { position: relative; z-index: 2; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.03em; }
.page-title { position: relative; z-index: 2; margin-top: 1.4rem; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-page-title); line-height: 0.88; text-transform: uppercase; color: var(--forest); }
.page-lead { position: relative; z-index: 2; margin-top: 2.6rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 40rem; }
.page-lead p { font-size: 1.25rem; line-height: 1.35; font-weight: 500; }
.lead-pill { padding: 0.45rem 1.2rem; border-radius: 99px; background: var(--ink); color: var(--paper); font-size: 0.9rem; font-weight: 600; transform: rotate(-3deg); }

/* ---------- ABOUT page ---------- */
.section-moodboard { padding: 5rem 0 2rem; background: var(--cream); overflow: hidden; }
.moodboard { display: flex; justify-content: center; align-items: center; gap: 1rem; padding: 0 var(--gutter); }
.mood-tile { flex: none; width: 21rem; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 1.2rem; }
.mood-tile svg { width: 100%; height: 100%; }
.mood-tile-1 { transform: rotate(-4deg) translateY(1rem); }
.mood-tile-2 { transform: rotate(3deg) translateY(-2rem); width: 25rem; }
.mood-tile-3 { transform: rotate(-2deg) translateY(2rem); }
.mood-tile-4 { transform: rotate(4deg) translateY(-1rem); width: 25rem; }
.mood-tile-5 { transform: rotate(-3deg) translateY(1.4rem); }
.section-story { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; padding: 7rem 3rem; background: var(--cream); }
.story-title { margin: 1.2rem 0 1.4rem; font-weight: 800; font-size: 3.4rem; line-height: 1.02; letter-spacing: -0.02em; color: var(--forest); }
.story-text { font-size: 1.3rem; line-height: 1.4; max-width: 36rem; }
.section-values, .section-what-we-do, .section-team { padding: 5rem var(--gutter) 3rem; background: var(--cream); }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.value-card { display: flex; flex-direction: column; gap: 1rem; padding: 2.2rem; min-height: 20rem; border-radius: var(--radius); background: var(--forest); color: var(--cream); }
.value-card:nth-child(2) { background: var(--mint-soft); color: var(--forest); }
.value-card:nth-child(3) { background: var(--cream-2); color: var(--forest); }
.value-num { font-family: var(--font-display); font-size: 3.6rem; line-height: 1; opacity: 0.55; }
.value-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 2.6rem; line-height: 1; text-transform: uppercase; }
.value-card p { margin-top: auto; font-size: 1.1rem; line-height: 1.35; }
.what-list { border-top: 1px solid rgba(15, 61, 46, 0.3); }
.what-item { display: grid; grid-template-columns: 4rem 1.1fr 1.6fr; gap: 1.5rem; align-items: baseline; padding: 1.5rem 0.4rem; border-bottom: 1px solid rgba(15, 61, 46, 0.3); transition: background 0.3s, padding 0.3s; }
.what-item:hover { background: var(--mint-soft); padding-left: 1.2rem; }
.what-num { font-weight: 700; color: var(--forest-mid); }
.what-title { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; text-transform: uppercase; color: var(--forest); }
.what-text { font-size: 1.1rem; line-height: 1.35; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.team-photo { aspect-ratio: 1 / 1.1; overflow: hidden; border-radius: var(--radius); }
.team-photo svg { width: 100%; height: 100%; }
.team-card h3 { margin-top: 0.9rem; font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; text-transform: uppercase; }
.team-card p { color: var(--forest-mid); font-weight: 600; text-transform: uppercase; font-size: 0.85rem; }
.section-team { padding-bottom: 8rem; }

/* ---------- WORK + CASE pages ---------- */
.section-projects-work { padding-top: 4rem; }
.section-project-hero { position: relative; display: flex; flex-direction: column; align-items: center; padding: 9rem var(--gutter) 3rem; background: var(--sage); text-align: center; }
.back-link { padding: 0.5rem 1.2rem; border-radius: 99px; background: var(--paper); font-size: 0.9rem; font-weight: 600; transition: background 0.3s, color 0.3s; }
.back-link:hover { background: var(--forest); color: var(--cream); }
.case-title { margin-top: 2.4rem; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-page-title); line-height: 0.9; text-transform: uppercase; color: var(--forest); }
.case-cat { margin-top: 1rem; font-weight: 700; text-transform: uppercase; color: var(--forest-mid); }
.case-hero-art { width: 100%; margin-top: 3rem; aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--radius); }
.case-hero-art svg { width: 100%; height: 100%; }
.section-project-content { padding: 6rem var(--gutter) 3rem; background: var(--cream); }
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; }
.case-block h2 { font-family: var(--font-display); font-weight: 400; font-size: 3.4rem; text-transform: uppercase; color: var(--forest); margin-bottom: 1.4rem; }
.case-block p { font-size: 1.3rem; line-height: 1.42; margin-bottom: 1.1rem; }
.case-block .case-meta { margin-top: 2rem; font-weight: 700; font-size: 1rem; color: var(--forest-mid); }
.case-stack { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; }
.case-stack li { padding: 0.4rem 1rem; border-radius: 99px; background: var(--forest); color: var(--cream); font-size: 0.9rem; font-weight: 600; }
.case-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 5rem; }
.case-panel { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); }
.case-panel svg { width: 100%; height: 100%; }
.case-panel-1 { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.section-projects-more { padding-top: 7rem; }

/* ---------- 404 ---------- */
.notfound { position: static; overflow: auto; min-height: 100vh; display: grid; place-items: center; background: var(--sage); text-align: center; }
.notfound h1 { font-family: var(--font-display); font-weight: 400; font-size: 14rem; color: var(--forest); line-height: 1; }
.back-home { display: inline-block; margin-top: 1rem; padding: 0.7rem 1.6rem; border-radius: 99px; background: var(--ink); color: var(--paper); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px) {
  .nav-left, .nav-hours { display: none; }
  .navbar { grid-template-columns: auto 1fr; }
  .nav-logo { justify-self: start; }
  .ham-toggle { display: grid; }
  .ham-menu.is-open { display: block; }
  .section-hero { height: 82rem; }
  .hero-scene { width: 52rem; top: 22rem; }
  .hero-marquee-wrap { bottom: -3rem; height: 30rem; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .section-faq, .section-story, .case-grid, .contact-content { grid-template-columns: 1fr; }
  .faq-mascot { display: none; }
  .values-grid, .team-grid { grid-template-columns: 1fr 1fr; }
  .what-item { grid-template-columns: 3rem 1fr; }
  .what-text { grid-column: 2; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-right { padding-top: 0; }
  .contact-heading { font-size: 8rem; }
  .service-layer-1, .service-layer-3, .service-layer-5, .service-layer-7 { padding-left: 6%; }
  .service-layer-2, .service-layer-4, .service-layer-6 { padding-left: 22%; }
}
@media (max-width: 767px) {
  .hero-pill { font-size: 0.8rem; padding: 0.5rem 1.1rem; }
  .hero-pill-1 { left: 6%; top: 5.4rem; }
  .hero-pill-2 { left: 40%; top: 0.8rem; }
  .hero-pill-3 { left: 48%; top: 9rem; }
  .section-hero { height: 72rem; }
  .hero-scene { width: 44rem; top: 18rem; }
  .hero-marquee-wrap { height: 22rem; bottom: -1rem; }
  .about-pill { font-size: 0.75rem; padding: 0.4rem 0.9rem; }
  .about-pill-1 { right: 2%; top: -3rem; }
  .about-pill-2 { left: 0; top: auto; bottom: -3rem; }
  .about-pill-3 { display: none; }
  .showcase-slide { width: 20rem; }
  .projects-grid { grid-template-columns: 1fr; }
  .testimonials-body-bg { height: 46rem; }
  .testimonial-title { font-size: 2.1rem; }
  .testimonial-meta { flex-direction: column; }
  .testimonial-text { font-size: 1.05rem; }
  .values-grid, .team-grid, .case-gallery { grid-template-columns: 1fr; }
  .case-panel-1, .case-panel { aspect-ratio: 4 / 3; }
  .case-hero-art { aspect-ratio: 4 / 3; }
  .mood-tile { width: 12rem; }
  .mood-tile-2, .mood-tile-4 { width: 14rem; }
  .moodboard .mood-tile-5, .moodboard .mood-tile-1 { display: none; }
  .loader-word { font-size: 9rem; }
  .footer-top { grid-template-columns: 1fr; padding-top: 2rem; }
  .footer-mid, .footer-right { padding-top: 0; }
  .footer-place { margin-top: 1rem; }
  .contact-heading { font-size: 6.4rem; }
  .email-link { font-size: 1.6rem; }
  .service-block-para-wrapper { position: static; margin: 0.8rem 0 0; }
  .service-para { width: 17rem; }
  .service-layer { min-height: 16rem; }
  .projects-pill { font-size: 0.75rem; }
  .projects-pill-1 { left: 0; }
  .projects-pill-2 { right: 0; top: 2.4rem; }
  .projects-pill-3 { display: none; }
  .hamburger-links a, .hamburger-links button { font-size: 4rem; }
}
@media (max-width: 479px) {
  .hero-scene { width: 36rem; top: 16rem; }
  .loader-word { font-size: 6.6rem; }
  .nav-logo { font-size: 1.9rem; }
  .cta-btn { font-size: 0.78rem; }
  .testimonial-card { padding: 1.5rem; }
  .faq-answer-block { width: 86%; }
  .question-block { font-size: 1.05rem; padding: 0.9rem 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* services: pills for layers that sit far right drop below their title instead of overflowing */
.service-layer-4 .service-block-para-wrapper,
.service-layer-6 .service-block-para-wrapper { left: 6%; top: 100%; margin: -0.6rem 0 0 0; }

/* mobile refinements */
@media (max-width: 767px) {
  .section-hero { height: 76rem; }
  .hero-scene { top: 25rem; }
  .service-layer-1, .service-layer-3, .service-layer-5, .service-layer-7 { padding-left: 3%; }
  .service-layer-2, .service-layer-4, .service-layer-6 { padding-left: 12%; }
  .service-layer-4 .service-block-para-wrapper, .service-layer-6 .service-block-para-wrapper { left: 0; }
}
@media (max-width: 479px) {
  :root { --fs-service: 2.35rem; }
  .section-hero { height: 72rem; }
  .hero-scene { top: 24rem; }
}

/* menu-open: logo must stay visible on the green menu; contact overlay never shows a scrollbar */
.navbar-wrap.menu-open .nav-logo { color: var(--cream); }
.contact-page { scrollbar-width: none; }
.contact-page::-webkit-scrollbar { display: none; }
.contact-heading { font-size: clamp(4.4rem, 15vh, 11rem); }
@media (max-width: 767px) { .contact-heading { font-size: clamp(3.6rem, 11vh, 6.4rem); } }



/* header mark: looped M + EDKON, drawn by JS */
.nav-logo { display: inline-flex; align-items: center; justify-content: center; }
.nav-mark { display: block; height: 2.2rem; width: auto; aspect-ratio: 776 / 154; overflow: visible; }
@media (max-width: 767px) { .nav-mark { height: 1.7rem; } }

/* ---------- services submenu in the header ---------- */
.nav-item { position: relative; }
.nav-menu { position: absolute; left: 0; top: 100%; z-index: 70; padding-top: 0.7rem; visibility: hidden; pointer-events: none; }
.nav-menu-card { width: 25rem; padding: 0.55rem; border: 1px solid var(--forest-mid); border-radius: 1.5rem; background: var(--paper); box-shadow: 0 1.2rem 3rem rgba(8, 42, 31, 0.28); transform-origin: 2rem 0; transform: translateY(-0.6rem) scale(0.94); opacity: 0; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease; }
.nav-has-menu:hover .nav-menu, .nav-has-menu:focus-within .nav-menu, .nav-has-menu.is-open .nav-menu { visibility: visible; pointer-events: auto; }
.nav-has-menu:hover .nav-menu-card, .nav-has-menu:focus-within .nav-menu-card, .nav-has-menu.is-open .nav-menu-card { transform: none; opacity: 1; }
.nav-menu-item, .nav-menu-all { position: relative; display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0.8rem 0.55rem 0.55rem; border-radius: 1rem; color: var(--ink); opacity: 0; transform: translateY(-0.4rem); transition: background-color 0.25s, color 0.25s, opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: 0s, 0s, calc(var(--i) * 0.035s + 0.05s), calc(var(--i) * 0.035s + 0.05s); }
.nav-has-menu:hover .nav-menu-item, .nav-has-menu:focus-within .nav-menu-item, .nav-has-menu.is-open .nav-menu-item,
.nav-has-menu:hover .nav-menu-all, .nav-has-menu:focus-within .nav-menu-all, .nav-has-menu.is-open .nav-menu-all { opacity: 1; transform: none; }
.nav-menu-item:hover, .nav-menu-item:focus-visible, .nav-menu-all:hover, .nav-menu-all:focus-visible { background: var(--forest); color: var(--cream); transition-delay: 0s; }
.nm-ico { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; }
.nm-ico svg { width: 100%; height: 100%; }
.nm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.nm-txt strong { font-size: 0.92rem; font-weight: 600; line-height: 1.15; }
.nm-txt em { font-style: normal; font-size: 0.74rem; font-weight: 500; opacity: 0.65; }
.nm-go { width: 1.5rem; height: 1.5rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--forest); opacity: 0; transform: translateX(-0.4rem) rotate(0deg); transition: opacity 0.25s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nm-go svg { width: 55%; height: 55%; }
.nav-menu-item:hover .nm-go, .nav-menu-item:focus-visible .nm-go { opacity: 1; transform: none; }
.nav-menu-all { justify-content: space-between; margin-top: 0.2rem; padding: 0.7rem 1rem; font-size: 0.86rem; font-weight: 700; border-top: 1px solid rgba(15, 61, 46, 0.14); border-radius: 0 0 1rem 1rem; }
.ham-sub { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: -0.2rem 0 0.4rem; }
.hamburger-links .ham-sub a { font-family: var(--font-body, inherit); font-size: 1rem; text-transform: none; line-height: 1; padding: 0.55rem 1rem; border: 1px solid rgba(245, 240, 230, 0.35); border-radius: 99px; }
@media (max-width: 991px) { .nav-menu { display: none; } }
@media (max-width: 767px) {
  .hamburger-links { justify-content: flex-start; padding-top: 6rem; gap: 0.5rem; overflow-y: auto; }
  .hamburger-links > a, .hamburger-links > button { font-size: 3rem; }
  .ham-sub { margin: 0 0 0.6rem; }
  .ham-sub a { font-size: 0.9rem !important; padding: 0.45rem 0.85rem !important; }
}

/* hero film: multiplied onto the hero colour so its backdrop melts away and only the drawing remains.
   The wrapper must not create a stacking context (no transform, no z-index), or the blend only sees the wrapper itself. */
.hero-scene.hero-video { left: 0; right: 0; margin: 0 auto; transform: none; z-index: auto; width: min(64rem, 94vw); aspect-ratio: 16 / 9; }
.hero-video-el { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; filter: brightness(1.12) contrast(1.06); }

/* header logo: the plain wordmark in the site's display font */
.nav-wordmark { font-family: var(--font-display); font-size: 2.25rem; letter-spacing: 0.05em; line-height: 1; text-transform: uppercase; display: inline-block; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nav-logo:hover .nav-wordmark { transform: scale(1.06); }
@media (max-width: 767px) { .nav-wordmark { font-size: 1.9rem; } }

/* mobile menu: backdrop-filter / transform on the navbar make it the containing block of the fixed menu (menu collapsed to the bar once the page was scrolled or the home intro had run) */
.navbar-wrap.menu-open { transform: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: transparent !important; box-shadow: none !important; border-bottom-color: transparent !important; transition: none; }

/* ---------- 404 ---------- */
.nf { min-height: 100vh; display: grid; place-items: center; padding: 9rem var(--gutter) 5rem; background: var(--sage); text-align: center; }
.nf-inner { width: min(60rem, 100%); display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.nf-title { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(9rem, 26vw, 19rem); line-height: 1; color: var(--forest); margin: 0; }
.nf-zero { height: 0.92em; width: auto; overflow: visible; }
.nf-boy { animation: nf-bob 3.2s ease-in-out infinite; transform-origin: 150px 300px; }
.nf-q { animation: nf-bob 2.4s ease-in-out infinite reverse; }
@keyframes nf-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.nf-lead { max-width: 34rem; font-size: 1.25rem; line-height: 1.45; color: var(--forest); }
.nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 0.6rem; }
.nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1rem; }
.nf-links-sm { margin-top: 0; }
.nf-chip { display: inline-block; padding: 0.55rem 1.1rem; border: 1.5px solid var(--forest); border-radius: 99px; font-weight: 700; font-size: 0.95rem; color: var(--forest); transition: background 0.2s, color 0.2s; }
.nf-links-sm .nf-chip { font-weight: 500; font-size: 0.85rem; border-color: rgba(15, 61, 46, 0.4); }
.nf-chip:hover { background: var(--forest); color: var(--cream); }
@media (prefers-reduced-motion: reduce) { .nf-boy, .nf-q { animation: none; } }

/* ==========================================================================
   Medkon: page-level components (appended to main.css at build time)
   ========================================================================== */

/* ---------- small shared bits ---------- */
.ghost-btn { display: inline-block; padding: 0.78rem 1.6rem; border: 2px solid var(--forest); border-radius: 99px; font-size: 0.98rem; font-weight: 600; color: var(--forest); transition: background 0.3s, color 0.3s; }
.ghost-btn:hover { background: var(--forest); color: var(--cream); }
.avail-dot { display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.45rem; border-radius: 50%; background: #3fcf7e; box-shadow: 0 0 0 0 rgba(63, 207, 126, 0.6); animation: avail 2s infinite; vertical-align: middle; }
@keyframes avail { 70% { box-shadow: 0 0 0 0.5rem rgba(63, 207, 126, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 207, 126, 0); } }
.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-list li { padding: 0.4rem 1rem; border-radius: 99px; background: var(--forest); color: var(--cream); font-size: 0.88rem; font-weight: 600; }
.check-list li { position: relative; margin: 0.55rem 0; padding-left: 1.7rem; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--forest-soft); }
.link-list li { margin: 0.5rem 0; }
.link-list a, .story-text a, .faq-answer a, .case-block-body a { text-decoration: underline; text-underline-offset: 0.2em; font-weight: 600; }
.section-more { display: flex; justify-content: center; margin-top: 3rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; align-items: center; }

/* ---------- navbar: availability instead of hours ---------- */
.nav-avail { display: flex; align-items: center; font-size: 0.82rem; font-weight: 600; color: var(--ink); transition: color 0.3s; }
.navbar-wrap[data-theme="dark"] .nav-avail { color: var(--cream); }
@media (max-width: 991px) { .nav-avail { display: none; } }

/* ---------- loader: ribbon-traced M + popping letters ---------- */
.loader-logo { width: clamp(200px, 24vw, 380px); height: auto; flex: none; max-width: none; overflow: visible; visibility: hidden; }
.ll-letter { transform-box: fill-box; }

/* ---------- HERO (flow layout so long copy never collides with the art) ---------- */
.section-hero { height: auto; padding: 5.6rem 0 0; display: flex; flex-direction: column; align-items: center; }
.hero-text { position: relative; top: auto; left: auto; width: 100%; padding: 0 var(--gutter); }
.hero-eyebrow { display: block; width: fit-content; margin: 0 auto 1.1rem; padding: 0.45rem 1.15rem; border: 1.5px solid var(--forest); border-radius: 99px; color: var(--forest); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.hero-title-wrap { position: relative; display: block; width: fit-content; margin: 0 auto; }
.hero-lead { max-width: 46rem; margin: 2rem auto 0; font-size: 1.2rem; line-height: 1.45; font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.9rem; margin-top: 1.8rem; position: relative; z-index: 6; }
.hero-note { margin-top: 1rem; font-size: 0.88rem; font-weight: 600; color: var(--forest-mid); }
.hero-scene { position: relative; top: auto; left: auto; transform: none; width: min(48rem, 92%); margin: 2.6rem auto 0; }
.hero-marquee-wrap { position: relative; bottom: auto; width: 100%; height: 34rem; margin-top: -5rem; }
.hero-scribble-left { top: 14rem; }
.hero-scribble-right { top: 6rem; }
.hero-title-wrap .hero-pill-1 { left: 3%; top: 8.6rem; }
.hero-title-wrap .hero-pill-2 { left: 40%; top: -1.2rem; }
.hero-title-wrap .hero-pill-3 { left: auto; right: 2%; top: 14.8rem; }

/* ---------- STATS ---------- */
.section-stats { padding: 5rem var(--gutter) 3rem; background: var(--cream); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.stats-grid-2 { grid-template-columns: repeat(2, 1fr); }
.about-page .stats-grid, .section-stats-one .stats-grid { grid-template-columns: 1fr; }
.stat { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.4rem; border-top: 3px solid var(--forest); }
.stat-num { font-family: var(--font-display); font-size: 7.4rem; line-height: 0.95; color: var(--forest); }
.stat-num-text { font-size: 4.4rem; }
.stat-label { font-size: 1.1rem; font-weight: 600; max-width: 18rem; }

/* ---------- BRAND STRIP ---------- */
.section-brands { padding: 1.4rem 0 3.4rem; background: var(--cream); overflow: hidden; }
.brands-label { margin-bottom: 1.4rem; text-align: center; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--forest-mid); }
.brands-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.brands-track { display: flex; width: max-content; }
.brand-item { display: flex; align-items: center; gap: 3rem; padding-right: 3rem; font-family: var(--font-display); font-size: 3.4rem; line-height: 1.1; text-transform: uppercase; color: var(--forest); white-space: nowrap; }
.brand-item::after { content: "✦"; font-family: var(--font-body); font-size: 1.4rem; color: var(--forest-soft); }

/* ---------- PROBLEMS ---------- */
.section-problems { padding: 6rem var(--gutter) 5rem; background: var(--cream); }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.problem-card { display: flex; flex-direction: column; gap: 1.2rem; min-height: 16rem; padding: 2rem; border-radius: var(--radius); background: var(--cream-2); }
.problem-card:nth-child(2) { background: var(--mint-soft); }
.problem-num { font-family: var(--font-display); font-size: 3.6rem; line-height: 1; color: var(--forest-soft); }
.problem-card p { font-size: 1.4rem; line-height: 1.25; font-weight: 600; color: var(--forest); }
.problems-after { max-width: 50rem; margin: 3.4rem auto 0; text-align: center; font-size: 1.5rem; font-weight: 700; line-height: 1.25; color: var(--forest); }

/* ---------- SERVICES (home path layout, now links) ---------- */
.service-title { text-decoration: none; transition: color 0.3s; }
a.service-title:hover { color: var(--forest-mid); }
.service-more { margin-left: 0.2rem; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }
.service-para { width: 23rem; }

/* ---------- WHY ---------- */
.section-why { padding: 6rem var(--gutter) 3rem; background: var(--cream); }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.why-grid-3 { grid-template-columns: repeat(3, 1fr); }
.why-card { display: flex; flex-direction: column; gap: 1rem; min-height: 17rem; padding: 2.2rem; border-radius: var(--radius); background: var(--forest); color: var(--cream); }
.why-card:nth-child(4n + 2) { background: var(--mint-soft); color: var(--forest); }
.why-card:nth-child(4n + 3) { background: var(--cream-2); color: var(--forest); }
.why-card:nth-child(4n + 4) { background: var(--forest-mid); color: var(--cream); }
.why-num { font-family: var(--font-display); font-size: 3.2rem; line-height: 1; opacity: 0.5; }
.why-card h3 { font-weight: 800; font-size: 1.9rem; line-height: 1.05; letter-spacing: -0.02em; }
.why-card p { margin-top: auto; font-size: 1.1rem; line-height: 1.35; }

/* ---------- PROCESS (short + service steps) ---------- */
.section-process-short { padding: 6rem var(--gutter); background: var(--cream); }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.process-step { padding: 1.6rem 0.4rem 0; border-top: 3px solid var(--forest); }
.step-num { display: block; font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--forest-soft); }
.process-step h3 { margin: 0.8rem 0 0.6rem; font-family: var(--font-display); font-weight: 400; font-size: 2.1rem; line-height: 1; text-transform: uppercase; color: var(--forest); }
.process-step p { font-size: 1.1rem; line-height: 1.35; }

/* ---------- TESTIMONIALS: initials avatar ---------- */
.testimonial-initials { display: grid; place-items: center; border-radius: 50%; background: var(--mint-soft); color: var(--forest); font-family: var(--font-display); font-size: 2.4rem; letter-spacing: 0.04em; }
.testimonial-initials[style*="--i:1"] { background: var(--mint); }
.testimonial-initials[style*="--i:2"] { background: var(--sage); }
.testimonial-title { font-size: 2.5rem; }

/* ---------- FAQ extras ---------- */
.section-faq-simple .faq-left .section-heading { margin-top: 2rem; }
.also-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 3rem; align-items: center; }
.also-links .section-label { width: 100%; }
.also-links .ghost-btn { padding: 0.5rem 1.1rem; font-size: 0.9rem; }

/* ---------- CTA band ---------- */
.section-cta { padding: 7rem var(--gutter); background: var(--mint-soft); color: var(--forest); text-align: center; }
.cta-inner { display: flex; flex-direction: column; align-items: center; gap: 1.3rem; max-width: 60rem; margin: 0 auto; }
.cta-title { font-family: var(--font-display); font-weight: 400; font-size: 6rem; line-height: 0.95; text-transform: uppercase; }
.cta-text-body { max-width: 44rem; font-size: 1.3rem; line-height: 1.4; }
.cta-note { font-size: 0.9rem; font-weight: 600; opacity: 0.8; }

/* ---------- FOOTER (real contact info) ---------- */
.footer-top { grid-template-columns: 1.3fr 1fr 1fr; min-height: 0; padding-bottom: 2.4rem; }
.footer-heading { font-size: 3.4rem; }
.footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.footer .ghost-btn { border-color: var(--cream); color: var(--cream); }
.footer .ghost-btn:hover { background: var(--cream); color: var(--forest); }
.footer-fine { margin-top: 1.1rem; font-size: 0.9rem; opacity: 0.85; }
.footer-mid, .footer-right { padding-top: 0.6rem; }
.footer-gap { margin-top: 1.4rem; }
.footer-right .footer-note { margin-top: 0.4rem; font-weight: 500; }
.footer-copy a { text-decoration: underline; text-underline-offset: 0.2em; }
.footer-copy { font-size: 0.74rem; }

/* ---------- inner page heroes ---------- */
.page-title-long { max-width: 80rem; font-size: 5.4rem; line-height: 1; }
.page-title-md { font-size: calc(var(--fs-page-title) * 0.64); line-height: 0.95; }
.page-eyebrow a { text-decoration: underline; text-underline-offset: 0.2em; }
.page-lead .cta-actions { margin-top: 0.4rem; }
.section-media { padding: 0 var(--gutter) 4rem; background: var(--cream); }
.section-page-hero + .section-media { padding-top: 3rem; }
.media-frame { margin: 0; overflow: hidden; border-radius: var(--radius); background: #050505; }
.media-frame img { width: 100%; height: auto; }

/* ---------- services hub ---------- */
.section-svc-list { padding: 3rem var(--gutter) 5rem; background: var(--cream); }
.svc-row { display: grid; grid-template-columns: 5rem 1.5fr 1fr; gap: 2rem; padding: 2.6rem 0; border-top: 1px solid rgba(15, 61, 46, 0.3); }
.svc-num { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--forest-soft); }
.svc-title { font-family: var(--font-display); font-weight: 400; font-size: 3.8rem; line-height: 1; text-transform: uppercase; color: var(--forest); }
.svc-title a:hover { color: var(--forest-mid); }
.svc-main p { margin-top: 0.9rem; max-width: 40rem; font-size: 1.2rem; line-height: 1.4; }
.svc-main .svc-ideal { font-weight: 700; color: var(--forest-mid); }
.svc-side { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }

/* ---------- service detail ---------- */
.section-overview { padding: 4rem var(--gutter) 5rem; background: var(--cream); }
.overview-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4rem; }
.overview-text .story-text { margin-bottom: 1.1rem; max-width: none; }
.overview-side h3 { margin: 2rem 0 0.8rem; font-family: var(--font-display); font-weight: 400; font-size: 1.8rem; text-transform: uppercase; color: var(--forest); }
.overview-side h3:first-child { margin-top: 0; }
.section-included { padding: 5rem var(--gutter) 2rem; background: var(--cream); }
.incl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.incl-card { display: flex; flex-direction: column; gap: 0.8rem; min-height: 15rem; padding: 2rem; border-radius: var(--radius); background: var(--cream-2); }
.incl-card:nth-child(3n + 2) { background: var(--mint-soft); }
.incl-card:nth-child(3n + 3) { background: var(--sage); }
.incl-num { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--forest-mid); }
.incl-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1.02; text-transform: uppercase; color: var(--forest); }
.incl-card p { font-size: 1.05rem; line-height: 1.4; }
.section-ideal { padding: 5rem var(--gutter); background: var(--forest); color: var(--cream); }
.ideal-inner { max-width: 62rem; margin: 0 auto; }
.ideal-inner .section-heading { margin-top: 1rem; color: var(--cream); }
.ideal-list { margin-top: 2rem; }
.ideal-list li { padding: 1.1rem 0; border-bottom: 1px solid rgba(245, 240, 230, 0.25); font-size: 1.6rem; font-weight: 700; }

/* ---------- case studies ---------- */
.filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; padding: 0 var(--gutter) 2.6rem; }
.filter-chip { padding: 0.6rem 1.3rem; border-radius: 99px; background: var(--cream-2); font-size: 0.95rem; font-weight: 600; transition: background 0.3s, color 0.3s; }
.filter-chip span { margin-left: 0.3rem; opacity: 0.6; }
.filter-chip:hover { background: var(--mint-soft); }
.filter-chip.is-active { background: var(--forest); color: var(--cream); }
.project-card.is-hidden, .project-card-clip-mask.is-hidden { display: none; }
.card-badge { position: absolute; z-index: 4; left: 0.9rem; top: 0.9rem; padding: 0.3rem 0.8rem; border-radius: 99px; background: rgba(251, 248, 241, 0.93); color: var(--forest); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.project-card-desc { display: -webkit-box; margin-top: 0.5rem; padding: 0 0.5rem; overflow: hidden; font-size: 0.95rem; line-height: 1.35; color: #33473d; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.section-project-hero { padding-bottom: 3.4rem; }
.case-tag { margin-top: 2.2rem; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--forest-mid); }
.case-title-long { max-width: 76rem; margin-top: 1rem; font-size: calc(var(--fs-page-title) * 0.46); line-height: 1; }
.case-lead { max-width: 48rem; margin: 1.4rem 0 1.8rem; font-size: 1.3rem; line-height: 1.4; font-weight: 500; }
.case-cover { aspect-ratio: 1200 / 630; background: #050505; }
.case-cover img { width: 100%; height: 100%; object-fit: cover; }
.section-case-metrics { padding: 3.4rem var(--gutter) 0; background: var(--cream); }
.section-project-content { padding: 3rem var(--gutter) 3rem; }
.case-block-row { display: grid; grid-template-columns: 22rem 1fr; gap: 3rem; padding: 3.2rem 0; border-top: 1px solid rgba(15, 61, 46, 0.3); }
.case-step { display: block; font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--forest-soft); }
.case-block-head h2 { margin-top: 0.4rem; font-family: var(--font-display); font-weight: 400; font-size: 3.4rem; line-height: 1; text-transform: uppercase; color: var(--forest); }
.case-block-body { max-width: 54rem; }
.case-block-body p { margin-bottom: 1.1rem; font-size: 1.25rem; line-height: 1.5; }
.case-block-body .check-list { margin: 0.4rem 0 1.4rem; font-size: 1.2rem; line-height: 1.4; }
.section-case-tools { padding: 1rem var(--gutter) 4rem; background: var(--cream); }
.section-case-tools .section-label { margin-bottom: 1rem; }

/* ---------- about ---------- */
.section-belief { padding: 4rem var(--gutter); background: var(--cream); text-align: center; }
.belief-text { max-width: 70rem; margin: 0 auto; font-size: 3.2rem; font-weight: 800; line-height: 1.14; letter-spacing: -0.02em; color: var(--forest); }
.section-story { padding: 5rem 3rem 4rem; }
.section-founder { padding: 3rem var(--gutter); background: var(--cream); }
.founder-card { display: grid; grid-template-columns: 17rem 1fr; gap: 3rem; margin-top: 1.4rem; padding: 2.4rem; border-radius: var(--radius); background: var(--cream-2); }
.founder-mark { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--forest); color: var(--cream); font-family: var(--font-display); font-size: 8.4rem; }
.founder-body h2 { font-family: var(--font-display); font-weight: 400; font-size: 3rem; line-height: 1; text-transform: uppercase; color: var(--forest); }
.founder-role { margin-top: 0.5rem; font-weight: 700; color: var(--forest-mid); }
.founder-place { margin-bottom: 1.2rem; font-size: 0.95rem; }
.founder-body > p { margin-bottom: 0.9rem; font-size: 1.15rem; line-height: 1.45; max-width: 52rem; }
.section-clients, .section-quotes { padding: 5rem var(--gutter) 2rem; background: var(--cream); }
.client-grid, .quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.client-card { padding: 1.8rem; border-radius: var(--radius); background: var(--cream-2); }
.client-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 2.1rem; line-height: 1; text-transform: uppercase; color: var(--forest); }
.client-kind { margin: 0.4rem 0 0.8rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--forest-mid); }
.quote-card { display: flex; flex-direction: column; gap: 1.4rem; padding: 2rem; border-radius: var(--radius); background: var(--forest); color: var(--cream); }
.quote-text { font-size: 1.2rem; line-height: 1.4; }
.quote-by { margin-top: auto; font-size: 0.95rem; color: var(--mint); }
.quote-by strong { color: var(--cream); }

/* ---------- process + tech ---------- */
.section-roadmap { padding: 3rem var(--gutter) 1rem; background: var(--cream); }
.roadmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.roadmap li { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.4rem 0.4rem 0; border-top: 3px solid var(--forest); }
.roadmap span { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--forest-soft); }
.roadmap strong { font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1.05; text-transform: uppercase; color: var(--forest); }
.roadmap em { font-style: normal; font-weight: 600; color: var(--forest-mid); }
.section-phase, .section-tech-cat { padding: 4rem var(--gutter) 2.4rem; background: var(--cream); }
.section-phase:nth-of-type(odd), .section-tech-cat:nth-of-type(even) { background: var(--cream); }
.phase-head, .tech-head { display: grid; grid-template-columns: 11rem 1fr; gap: 2rem; margin-bottom: 2rem; }
.phase-num { font-family: var(--font-display); font-size: 8rem; line-height: 0.9; color: var(--forest-soft); }
.section-phase .incl-grid { grid-template-columns: repeat(4, 1fr); }
.phase-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.tech-item { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.2rem 1.3rem; border-radius: 1rem; background: var(--cream-2); }
.tech-item strong { font-size: 1.15rem; color: var(--forest); }
.tech-item span { font-size: 0.92rem; line-height: 1.3; }

/* ---------- contact page ---------- */
.section-contact { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 4rem; padding: 4rem var(--gutter); background: var(--cream); }
.detail-list > div { padding: 1.1rem 0; border-bottom: 1px solid rgba(15, 61, 46, 0.25); }
.detail-list dt { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--forest-mid); }
.detail-list dd { margin: 0.3rem 0 0; font-size: 1.4rem; font-weight: 700; line-height: 1.3; }
.detail-list a { text-decoration: underline; text-underline-offset: 0.2em; }
.help-title { margin: 2.2rem 0 0.8rem; font-family: var(--font-display); font-weight: 400; font-size: 1.8rem; text-transform: uppercase; color: var(--forest); }
.contact-form { margin-top: 1.4rem; }
.contact-form fieldset { margin: 0 0 1.6rem; padding: 0; border: 0; }
.contact-form legend { margin-bottom: 0.6rem; padding: 0; font-weight: 700; }
.chip-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 0.55rem 1.1rem; border: 1.5px solid var(--forest); border-radius: 99px; font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: background 0.25s, color 0.25s; }
.chip:hover span { background: var(--mint-soft); }
.chip input:checked + span { background: var(--forest); color: var(--cream); }
.chip input:focus-visible + span { outline: 2px solid var(--forest-mid); outline-offset: 3px; }
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
.field > span { font-size: 0.9rem; font-weight: 700; }
.field input, .field textarea { width: 100%; padding: 0.9rem 1.1rem; border: 1.5px solid rgba(15, 61, 46, 0.45); border-radius: 1rem; background: var(--paper); font: inherit; color: var(--ink); resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(31, 107, 79, 0.2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin: 0 0 1rem; color: #9b2c2c; font-weight: 600; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.form-hint { font-size: 0.92rem; }
.form-hint a { text-decoration: underline; text-underline-offset: 0.2em; font-weight: 600; }
.form-thanks { margin-top: 1.4rem; padding: 2rem; border-radius: var(--radius); background: var(--mint-soft); }
.form-thanks h3 { font-family: var(--font-display); font-weight: 400; font-size: 2.2rem; text-transform: uppercase; color: var(--forest); }
.form-thanks a { text-decoration: underline; font-weight: 700; }
.section-call { padding: 5rem var(--gutter); background: var(--sage); text-align: center; }
.section-call .story-text { max-width: 40rem; margin: 1.2rem auto 1.8rem; }

/* ---------- contact overlay extras ---------- */
.email-link-sm { display: block; font-size: 1.7rem; word-break: normal; }
.contact-note { font-size: 0.95rem; font-weight: 600; color: var(--mint); }

/* ---------- legal ---------- */
.section-legal { max-width: 62rem; margin: 0 auto; padding: 9rem var(--gutter) 5rem; background: var(--cream); }
.legal-body { margin-top: 2rem; }
.legal-body h2, .legal-body h3, .legal-body h4 { margin: 2.2rem 0 0.8rem; font-family: var(--font-display); font-weight: 400; font-size: 2.2rem; line-height: 1.05; text-transform: uppercase; color: var(--forest); }
.legal-body h3, .legal-body h4 { font-size: 1.6rem; }
.legal-body p { margin-bottom: 1rem; font-size: 1.1rem; line-height: 1.55; }
.legal-body a { text-decoration: underline; font-weight: 600; }
body[data-page="pixelruler-privacy-policy"] .page, body[data-page="pixlens-privacy-policy"] .page, body[data-page="snapflow-privacy-policy"] .page { background: var(--cream); }

/* ==========================================================================
   Responsive for the components above
   ========================================================================== */
@media (max-width: 991px) {
  .stats-grid, .process-steps, .roadmap { grid-template-columns: repeat(2, 1fr); }
  .problem-grid, .why-grid-3, .client-grid, .quote-grid, .incl-grid, .section-phase .incl-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
  .overview-grid, .section-contact, .case-block-row { grid-template-columns: 1fr; gap: 2rem; }
  .svc-row { grid-template-columns: 4rem 1fr; }
  .svc-side { grid-column: 2; }
  .founder-card { grid-template-columns: 1fr; }
  .founder-mark { width: 12rem; font-size: 6rem; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-left { grid-column: 1 / -1; }
  .hero-title-wrap .hero-pill-1 { left: 0; }
  .hero-title-wrap .hero-pill-3 { right: 0; }
  .page-title-long { font-size: 4.4rem; }
  .belief-text { font-size: 2.6rem; }
  .cta-title { font-size: 4.6rem; }
}
@media (max-width: 767px) {
  .section-hero { padding-top: 5rem; }
  .hero-lead { font-size: 1.05rem; }
  .hero-scene { width: 94%; margin-top: 2rem; }
  .hero-marquee-wrap { height: 22rem; margin-top: -3rem; }
  .hero-title-wrap .hero-pill-1 { left: -2%; top: 5.4rem; }
  .hero-title-wrap .hero-pill-2 { left: 38%; top: -1.4rem; }
  .hero-title-wrap .hero-pill-3 { display: none; }
  .stats-grid, .process-steps, .roadmap, .problem-grid, .why-grid, .why-grid-3, .client-grid, .quote-grid, .incl-grid, .section-phase .incl-grid, .tech-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-num { font-size: 4.6rem; }
  .brand-item { font-size: 2.4rem; }
  .svc-title { font-size: 2.8rem; }
  .svc-row { grid-template-columns: 1fr; }
  .svc-side { grid-column: 1; }
  .page-title-long { font-size: 3.2rem; }
  .case-title-long { font-size: 3.2rem; }
  .phase-head, .tech-head { grid-template-columns: 1fr; gap: 0.6rem; }
  .phase-num { font-size: 5rem; }
  .belief-text { font-size: 2rem; }
  .cta-title { font-size: 3.4rem; }
  .ideal-list li { font-size: 1.25rem; }
  .testimonial-title { font-size: 1.9rem; }
  .footer-top { grid-template-columns: 1fr; }
  .section-story { padding: 4rem var(--gutter) 2rem; }
  .service-para { width: 17rem; }
  .loader-logo { width: 62vw; }
}
@media (max-width: 479px) {
  .hero-scene { width: 100%; }
  .stat-num { font-size: 3.8rem; }
  .page-title-long, .case-title-long { font-size: 2.7rem; }
}

/* about pills sit below the paragraph so they never cover the copy */
.about-pill-1 { top: -2.4rem; right: 4%; }
.about-pill-2 { top: auto; bottom: -3.6rem; left: 12%; }
.about-pill-3 { bottom: -3.6rem; right: 12%; }
.hero-eyebrow { margin-bottom: 2.2rem; }

@media (max-width: 767px) { .hero-marquee-wrap { height: 17rem; } }

/* ==========================================================================
   Story pages: inner heroes, pinned text, paths, About, case chapters
   (appended to main.css after pages.css at build time)
   ========================================================================== */

/* ---------- hero variants ---------- */
.hero-heading-md { font-size: 5.2rem; line-height: 0.98; max-width: 78rem; }
.hero-eyebrow a { text-decoration: underline; text-underline-offset: 0.2em; }
.section-hero-inner .hero-scene { width: min(42rem, 92%); }
.section-hero-inner .hero-title-wrap .hero-pill-1 { top: 6rem; }
.section-hero-inner .hero-title-wrap .hero-pill-3 { top: auto; bottom: -1.6rem; }
.section-hero-inner .hero-lead { max-width: 44rem; }

/* ---------- pinned text, compact variant ---------- */
.about-compact .about-inner { width: min(70rem, 92%); }
.about-compact .about-para { font-size: 2.6rem; line-height: 1.2; }
.about-compact .about-pill-2 { bottom: -4rem; }

/* ---------- cards / path variants ---------- */
.problem-grid-auto { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.section-services-md { --fs-service: 3.4rem; }
.section-services-md .service-layer { min-height: 19rem; }
.section-services-md .service-para { width: 27rem; }
.section-story-simple { padding: 5rem 3rem 3rem; }

/* ---------- ABOUT hero (staggered headline + two heads) ---------- */
.section-hero-about { height: auto; padding-top: 5.6rem; background: var(--sage); }
.hero-heading-about { font-size: 11rem; line-height: 0.88; }
.hero-heading-about .hero-line-mask:first-child { text-align: right; }
.hero-heading-about .hero-line-mask:last-child { text-align: left; }
.ah-title { display: block; width: 100%; max-width: 92rem; }
.ah-title .hero-pill-1 { left: 14%; top: auto; bottom: -1.2rem; }
.ah-title .hero-pill-2 { left: 60%; top: 6.4rem; }
.ah-body { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2rem; align-items: end; width: min(96rem, 100%); padding: 0 var(--gutter); margin-top: 1rem; }
.ah-art.hero-scene { width: 100%; margin: 0; }
.about-heads-svg { width: 100%; height: auto; overflow: visible; }
.ah-intro { margin: 0 0 6rem; max-width: 24rem; text-align: left; font-size: 1.3rem; }
.section-hero-about .hero-scribble-right { top: 20rem; }

/* ---------- ABOUT story (sweeping stroke + floating pills) ---------- */
.section-story-about { position: relative; padding: 8rem var(--gutter) 6rem; background: var(--cream); overflow: hidden; }
.sweep { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.16; pointer-events: none; z-index: 0; }
.sa-grid, .sa-now { position: relative; z-index: 2; }
.sa-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 4rem; align-items: center; }
.story-art-svg { width: 100%; height: auto; overflow: visible; }
.sa-text .story-title { margin-bottom: 1.6rem; }
.sa-text .story-text { margin-bottom: 1.1rem; max-width: 40rem; }
.sa-now { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; margin-top: 7rem; padding-top: 3rem; border-top: 1px solid rgba(15, 61, 46, 0.3); }
.sa-now .story-text { margin-bottom: 1.1rem; max-width: 40rem; }

/* ---------- ABOUT team ---------- */
.section-team-about { padding: 7rem var(--gutter); background: var(--forest); color: var(--cream); text-align: center; }
.section-team-about .section-label { margin-bottom: 1rem; }
.section-team-about .section-heading { color: var(--cream); }
.team-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3.4rem; text-align: left; }
.team-card { display: block; width: 100%; padding: 0.55rem 0.55rem 1.3rem; border-radius: var(--radius); background: var(--cream); color: var(--forest); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s; cursor: pointer; text-align: left; }
.team-card:hover { transform: translateY(-0.6rem) rotate(-1.2deg); box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.25); }
.team-card:nth-child(2):hover { transform: translateY(-0.6rem) rotate(1.2deg); }
.team-photo { aspect-ratio: 1 / 1.1; overflow: hidden; border-radius: 1rem; }
.team-photo svg { width: 100%; height: 100%; }
.team-card h3 { margin: 1rem 0.7rem 0.1rem; font-family: var(--font-display); font-weight: 400; font-size: 2.1rem; text-transform: uppercase; }
.team-card p { margin: 0 0.7rem; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; color: var(--forest-mid); }
.team-plus { display: inline-block; margin-left: 0.3rem; font-size: 1.1rem; transition: transform 0.4s; }
.team-card:hover .team-plus { transform: rotate(90deg); }
.team-photo-cta { display: grid; place-items: center; background: var(--mint); font-family: var(--font-display); font-size: 12rem; color: var(--forest); }
.team-popup { position: fixed; inset: 0; z-index: 140; display: none; place-items: center; padding: var(--gutter); background: rgba(8, 42, 31, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.team-popup.is-open { display: grid; }
.team-popup-card { position: relative; display: grid; grid-template-columns: 17rem 1fr; gap: 2rem; width: min(58rem, 100%); max-height: 92vh; overflow: auto; padding: 1.5rem; border-radius: 1.6rem; background: var(--cream); color: var(--ink); }
.team-popup-close { position: absolute; right: 1rem; top: 0.8rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--forest); color: var(--cream); font-size: 1.6rem; line-height: 1; }
.team-popup-img { aspect-ratio: 1 / 1.1; overflow: hidden; border-radius: 1rem; }
.team-popup-img svg { width: 100%; height: 100%; }
.team-popup-name { padding-right: 3rem; font-family: var(--font-display); font-weight: 400; font-size: 2.8rem; line-height: 1; text-transform: uppercase; color: var(--forest); }
.team-popup-role { margin: 0.4rem 0 1rem; font-weight: 700; text-transform: uppercase; color: var(--forest-mid); }
.team-popup-body { margin-bottom: 1.1rem; font-size: 1.1rem; line-height: 1.45; }
.team-popup-place { margin-top: 1rem; font-size: 0.9rem; font-weight: 600; }

/* ---------- ABOUT moodboard (two opposite marquee rows of real project covers) ---------- */
.section-mood { padding: 6rem 0 5rem; background: var(--cream); overflow: hidden; }
.mood-row { overflow: hidden; margin-top: 1rem; padding: 1rem 0; }
.mood-track { display: flex; gap: 1rem; width: max-content; will-change: transform; }
.mood-slide { flex: none; display: block; width: 29rem; aspect-ratio: 1200 / 630; overflow: hidden; border-radius: 1rem; background: #050505; transform: rotate(var(--r, 0deg)); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.mood-slide:hover { transform: rotate(0deg) scale(1.04); }
.mood-slide-1 { --r: -1.6deg; }
.mood-slide-2 { --r: 1.2deg; }
.mood-slide-3 { --r: -0.8deg; }
.mood-slide-4 { --r: 1.8deg; }
.mood-slide img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- ABOUT house rules (sticky stack) ---------- */
.section-rules { padding: 6rem var(--gutter) 12rem; background: var(--cream); }
.rules-stack { position: relative; margin-top: 2rem; }
.rule-card { position: sticky; top: calc(5.4rem + var(--i) * 4.2rem); z-index: calc(10 + var(--i)); min-height: 23rem; padding: 0 0 2.6rem; background: var(--cream); }
.rule-bar { position: relative; height: 2px; background: rgba(15, 61, 46, 0.28); margin-bottom: 1.2rem; }
.rule-progress { position: absolute; inset: 0; background: var(--forest); transform: scaleX(0); transform-origin: left; }
.rule-label { font-weight: 700; font-size: 1rem; }
.rule-main { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; margin-top: 1.6rem; align-items: start; }
.rule-title { font-family: var(--font-display); font-weight: 400; font-size: 4.8rem; line-height: 0.96; text-transform: uppercase; color: var(--forest); }
.rule-text { font-size: 1.35rem; line-height: 1.4; max-width: 31rem; }

/* ---------- ABOUT "what we do" pills (brush fill on hover) ---------- */
.section-do { padding: 5rem var(--gutter) 6rem; background: var(--sage); }
.do-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; max-width: 74rem; margin: 0 auto; }
.do-pill { position: relative; display: inline-block; overflow: hidden; padding: 0.9rem 2.2rem; border: 2px solid var(--forest); border-radius: 99px; font-family: var(--font-display); font-size: 2.1rem; line-height: 1.1; text-transform: uppercase; color: var(--forest); isolation: isolate; }
.do-pill-fill { position: absolute; inset: -60% -6%; z-index: -1; pointer-events: none; }
.do-pill-fill svg { width: 100%; height: 100%; }
.do-pill-text { position: relative; }

/* ---------- case study chapters ---------- */
.section-cover { padding-top: 1rem; }
.section-chapters { position: relative; padding: 4rem var(--gutter) 3rem 6.4rem; background: var(--cream); }
.chapters-line { position: absolute; left: 2.9rem; top: 6rem; bottom: 6rem; width: 3px; background: rgba(15, 61, 46, 0.18); }
.chapters-line span { display: block; width: 100%; height: 100%; background: var(--forest); transform: scaleY(0); transform-origin: top; }
.chapter { position: relative; display: grid; grid-template-columns: 22rem 1fr; gap: 3rem; padding: 3.2rem 0; }
.chapter + .chapter { border-top: 1px solid rgba(15, 61, 46, 0.25); }
.chapter-dot { position: absolute; left: -5.3rem; top: 3.4rem; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--forest); color: var(--cream); font-family: var(--font-display); font-size: 1.2rem; }
.chapter-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 3.4rem; line-height: 1; text-transform: uppercase; color: var(--forest); }
.chapter-body { max-width: 54rem; }
.chapter-body p { margin-bottom: 1.1rem; font-size: 1.25rem; line-height: 1.5; }
.chapter-body .check-list { margin: 0.4rem 0 1.4rem; font-size: 1.2rem; line-height: 1.4; }
.chapter-body a { text-decoration: underline; font-weight: 600; }

/* ---------- process steps: the top line draws in ---------- */
.process-step { position: relative; border-top: 0; }
.process-step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--forest); transform: scaleX(var(--p, 1)); transform-origin: left; }

/* ---------- tech page ---------- */
.section-tech-cat { display: grid; grid-template-columns: 25rem 1fr; gap: 3rem; padding: 4.5rem var(--gutter) 2.4rem; background: var(--cream); }
.tech-side { position: sticky; top: 6.4rem; align-self: start; }
.tech-side .phase-num { display: block; margin-bottom: 0.6rem; }
.tech-side .story-text { margin-top: 1rem; font-size: 1.1rem; }
.section-tech-cat .tech-grid { grid-template-columns: repeat(3, 1fr); align-content: start; }
.tech-item { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s; }
.tech-item:hover { transform: rotate(-2deg) translateY(-0.3rem); background: var(--mint-soft); }

.tilt { will-change: transform; }

/* ---------- responsive (story pages) ---------- */
@media (max-width: 991px) {
  .hero-heading-about { font-size: 8rem; }
  .ah-body { grid-template-columns: 1fr; }
  .ah-intro { margin: 0 0 3rem; max-width: 36rem; }
  .sa-grid, .sa-now, .rule-main, .section-tech-cat { grid-template-columns: 1fr; }
  .tech-side { position: static; }
  .team-cards { grid-template-columns: 1fr 1fr; }
  .section-tech-cat .tech-grid { grid-template-columns: repeat(2, 1fr); }
  .chapter { grid-template-columns: 1fr; gap: 1rem; }
  .rule-title { font-size: 3.6rem; }
}
@media (max-width: 767px) {
  .hero-heading-md { font-size: 3.1rem; }
  .hero-heading-about { font-size: 4.8rem; }
  .hero-heading-about .hero-line-mask { text-align: center !important; }
  .about-compact .about-para { font-size: 1.7rem; }
  .section-services-md { --fs-service: 2.2rem; }
  .section-services-md .service-para { width: 17rem; }
  .team-cards { grid-template-columns: 1fr; }
  .team-popup-card { grid-template-columns: 1fr; }
  .team-popup-img { max-width: 12rem; }
  .mood-slide { width: 20rem; }
  .rule-card { top: calc(4.6rem + var(--i) * 3.4rem); min-height: 19rem; }
  .rule-title { font-size: 2.6rem; }
  .rule-text { font-size: 1.1rem; }
  .do-pill { font-size: 1.4rem; padding: 0.6rem 1.3rem; }
  .section-chapters { padding-left: 3.6rem; padding-right: var(--gutter); }
  .chapters-line { left: 1.1rem; }
  .chapter-dot { left: -3.4rem; width: 2.8rem; height: 2.8rem; }
  .chapter-head h2 { font-size: 2.4rem; }
  .section-tech-cat .tech-grid { grid-template-columns: 1fr; }
}

/* three stats (About) and tidy sweep */
.stats-grid:has(.stat:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.sweep { opacity: 0.7; }

/* inner hero: third pill sits beside the headline, not over the lead */
.section-hero-inner .hero-title-wrap .hero-pill-3 { top: auto; bottom: 38%; right: -9%; left: auto; }
.section-hero-inner .hero-title-wrap .hero-pill-1 { left: -7%; top: 38%; }

@media (max-width: 479px) { .hero-heading-md { font-size: 2.5rem; } }

/* ---------- services: the pill sits under its title (right-aligned), never over the words or the line ---------- */
@media (min-width: 768px) {
  .service-block-para-wrapper,
  .service-layer-4 .service-block-para-wrapper,
  .service-layer-6 .service-block-para-wrapper { left: auto; right: 0; top: 100%; margin: 0.9rem 0 0 0; transform-origin: right top; }
  .service-layer { min-height: 22rem; }
  .section-services-md .service-layer { min-height: 21rem; }
}
.services-knob { pointer-events: none; }

/* ---------- testimonial card (photo + name on the left, long quote on the right) ---------- */
.testimonial-card { width: min(60rem, 90%); padding: 2.2rem 2.6rem 2.6rem; border-color: var(--forest-mid); }
.testimonial-title { font-size: 3.2rem; line-height: 1; }
.testimonial-meta { display: grid; grid-template-columns: 14rem 1fr; gap: 2rem; margin-top: 2.2rem; align-items: start; }
.testimonial-person { text-align: center; }
.testimonial-avatar { width: 8.4rem; height: 8.4rem; margin: 0 auto 0.8rem; }
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-person .testimonial-name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--forest); }
.testimonial-person .testimonial-role { margin-top: 0.2rem; font-weight: 700; font-size: 0.85rem; color: var(--forest-mid); }
.testimonial-text { margin: 0; font-size: 1.45rem; line-height: 1.26; color: var(--forest-mid); }
@media (max-width: 767px) {
  .testimonial-meta { grid-template-columns: 1fr; gap: 1rem; }
  .testimonial-title { font-size: 2rem; }
  .testimonial-text { font-size: 1.1rem; }
}

/* unified pill-button hover: circular fill follows the cursor, text swaps colour */
.has-fill { position: relative; overflow: hidden; isolation: isolate; }
.btn-fill { position: absolute; z-index: -1; border-radius: 50%; background: var(--forest); transform: scale(0); pointer-events: none; }
.has-fill:hover, .ghost-btn.has-fill:hover, .back-link.has-fill:hover { background-color: transparent; }
.filter-chip.has-fill:hover { background: var(--cream-2); }
.filter-chip.has-fill:hover, .ghost-btn.has-fill:hover, .back-link.has-fill:hover, .close-btn.has-fill:hover, .contact-social.has-fill:hover { color: var(--cream); }
.filter-chip.is-active .btn-fill { background: var(--forest-mid); }
.footer .ghost-btn .btn-fill { background: var(--cream); }
.footer .ghost-btn.has-fill:hover { color: var(--forest); }
.close-btn.has-fill:hover { background: var(--paper); }
.close-btn .btn-fill, .contact-social .btn-fill { background: var(--forest); }
.project-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot-img { display: block; width: 100%; height: auto; }

/* services path ends on the centred button */
.services-end { position: relative; z-index: 3; display: flex; justify-content: center; margin-top: 3rem; }
.services-end .cta-btn { position: relative; }
/* testimonials label centred above the heading */
.testimonials-header .section-label { position: static; text-align: center; margin-bottom: 1rem; }

/* hero scribbles: keep most of the stroke on screen so its draw-in is readable */
.section-page-hero .hero-scribble-left { left: -7rem; }
.section-page-hero .hero-scribble-right { right: -8rem; }
@media (max-width: 767px) {
  .hero-scribble, .section-page-hero .hero-scribble { width: 26rem; }
  .section-page-hero .hero-scribble-left, .hero-scribble-left { left: -9rem; }
  .section-page-hero .hero-scribble-right, .hero-scribble-right { right: -9rem; }
}

/* long service-page titles wrap on phones instead of running off-screen */
@media (max-width: 1100px) {
  .section-services-md .service-title { flex-wrap: wrap; white-space: normal; max-width: 100%; row-gap: 0.1em; }
  .section-services-md .service-block { max-width: 100%; }
}

/* keep hero pills and scribbles fully inside the screen on tablets and phones */
.section-page-hero, .section-hero-about, .section-hero-inner { overflow-x: clip; }
@media (max-width: 767px) {
  .hero-title-wrap .hero-pill-1, .section-hero-inner .hero-title-wrap .hero-pill-1 { left: 2%; }
  .hero-title-wrap .hero-pill-2 { left: auto; right: 2%; }
  .ah-title .hero-pill-1 { left: 2%; }
  .ah-title .hero-pill-2 { left: auto; right: 2%; }
}
section:has(.team-cards) { overflow-x: clip; }

/* the second pill sits clear of the eyebrow tag above it */
.hero-pill-2 { top: 3rem; }
.hero-title-wrap .hero-pill-2 { top: 0.4rem; }
@media (min-width: 768px) and (max-width: 991px) { .section-hero .hero-pill-3 { top: 9.6rem; left: 62%; right: auto; width: max-content; } }

/* hero side strokes, sized and placed like the reference: hugging each edge */
.hero-scribble, .section-page-hero .hero-scribble { height: auto; opacity: 1; }
.hero-scribble.hero-scribble-left, .section-page-hero .hero-scribble.hero-scribble-left, .section-hero-about .hero-scribble.hero-scribble-left { width: 14rem; left: 0; top: 14rem; }
.hero-scribble.hero-scribble-right, .section-page-hero .hero-scribble.hero-scribble-right, .section-hero-about .hero-scribble.hero-scribble-right { width: 18rem; right: 0; top: 7rem; }
@media (max-width: 991px) {
  .hero-scribble.hero-scribble-left, .section-page-hero .hero-scribble.hero-scribble-left, .section-hero-about .hero-scribble.hero-scribble-left { width: 6.5rem; top: 26rem; }
  .hero-scribble.hero-scribble-right, .section-page-hero .hero-scribble.hero-scribble-right, .section-hero-about .hero-scribble.hero-scribble-right { width: 9rem; top: 9rem; }
}
@media (max-width: 767px) {
  .hero-scribble.hero-scribble-left, .section-page-hero .hero-scribble.hero-scribble-left, .section-hero-about .hero-scribble.hero-scribble-left { width: 3.4rem; top: 18.5rem; }
  .hero-scribble.hero-scribble-right, .section-page-hero .hero-scribble.hero-scribble-right, .section-hero-about .hero-scribble.hero-scribble-right { width: 4.6rem; top: 12rem; }
}

/* hero side strokes, framed like the reference: big, mid-height, cropped by the screen edge */
.hero-scribble.hero-scribble-left, .section-page-hero .hero-scribble.hero-scribble-left, .section-hero-about .hero-scribble.hero-scribble-left { width: 12.5rem; left: -3.7rem; top: 13rem; z-index: 0; }
.hero-scribble.hero-scribble-right, .section-page-hero .hero-scribble.hero-scribble-right, .section-hero-about .hero-scribble.hero-scribble-right { width: 20.2rem; right: 0; top: 7rem; z-index: 0; }
@media (max-width: 991px) {
  .hero-scribble.hero-scribble-left, .section-page-hero .hero-scribble.hero-scribble-left, .section-hero-about .hero-scribble.hero-scribble-left { width: 10rem; left: -2.5rem; top: 40%; }
  .hero-scribble.hero-scribble-right, .section-page-hero .hero-scribble.hero-scribble-right, .section-hero-about .hero-scribble.hero-scribble-right { width: 14rem; right: -4rem; top: 16%; }
}
@media (max-width: 767px) {
  .hero-scribble.hero-scribble-left, .section-page-hero .hero-scribble.hero-scribble-left, .section-hero-about .hero-scribble.hero-scribble-left { width: 4.6rem; left: -1.4rem; top: 66%; }
  .hero-scribble.hero-scribble-right, .section-page-hero .hero-scribble.hero-scribble-right, .section-hero-about .hero-scribble.hero-scribble-right { width: 6.6rem; right: -2.2rem; top: 21%; }
}

/* the next block sits above the end of the services line, so the line appears to run into it */
.section-services:not(:has(.services-end)) + * { position: relative; z-index: 2; }
.services-path { overflow: visible; }
@media (max-width: 991px) {
  .hero-title-wrap .hero-pill-1 { left: 2%; }
  .hero-title-wrap .hero-pill-3 { left: auto; right: 2%; }
}
@media (max-width: 991px) {
  .section-hero-inner .hero-title-wrap .hero-pill-1 { left: 2%; }
  .section-hero-inner .hero-title-wrap .hero-pill-3 { left: auto; right: 2%; }
}

/* every hero: the right stroke runs off the screen edge the same way as on phones (a third of it is cropped) */
@media (min-width: 992px) {
  .section-hero .hero-scribble.hero-scribble-right, .section-hero-about .hero-scribble.hero-scribble-right, .section-page-hero .hero-scribble.hero-scribble-right { right: -6.7rem; }
}

/* ABOUT: long ribbon that runs down the story and floods the team section (like the studio's) */
.about-story-team { position: relative; overflow: visible; clip-path: inset(-120px 0 0 0); }
.about-story-team > section { position: relative; z-index: 3; background: transparent; overflow: visible; }
.about-story-scroll-path { position: absolute; top: 0; left: 0; width: 100%; z-index: 2; pointer-events: none; }
.about-story-scroll-path svg { display: block; width: 100%; height: auto; overflow: visible; }
.project-img video { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-photo .slot-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }