/*
 * mobile.css — loaded only when viewport <= 768px (see <link media="..."> on
 * each page). All mobile-specific rules live here. style.css is the desktop
 * stylesheet.
 *
 * Step 2 of MOBILE_REDESIGN_PLAN.md created this file by relocating every
 * `@media (max-width: 768px)` block from style.css into here, stripping the
 * wrapper. Narrower mobile breakpoints (e.g., `@media (max-width: 560px)`)
 * remain wrapped because they're a tighter constraint than the file-level
 * 768px load condition.
 */

body.nav-open {
  overflow: hidden;
}

.container {
  width: min(100% - 40px, 1200px);
}

.navbar {
  height: 72px;
}

.nav-container {
  position: relative;
  min-height: 72px;
}

.logo img {
  height: 34px;
}

.nav-toggle {
  display: inline-flex;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lines {
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lines::before {
  transform: translateY(6px) rotate(90deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lines::after {
  opacity: 0;
}

.nav-links {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  gap: 0;
  padding: 14px;
  border-radius: 18px;
  background: rgba(12, 18, 31, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

.nav-links.is-open {
  display: flex;
}

.nav-links a {
  margin-left: 0;
  padding: 12px 10px;
  border-radius: 12px;
  font-size: 15px;
}

.nav-links a:active,
.btn:active {
  transform: scale(0.98);
}

html {
  scroll-padding-top: 72px;
}

#hero,
#what-we-do,
#how-we-work,
#contact {
  scroll-margin-top: 0;
}

html,
body.home-page {
  height: auto;
}

body.home-page {
  height: auto;
  overflow: visible;
}

body.home-page section {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 48px 0;
  transform: none !important;
  visibility: visible !important;
  overflow: visible;
}

.hero {
  min-height: calc(100svh - 72px);
}

.hero {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(8, 12, 21, 0.18) 0%, rgba(8, 12, 21, 0.52) 34%, rgba(8, 12, 21, 0.84) 74%, rgba(8, 12, 21, 0.96) 100%),
    linear-gradient(90deg, rgba(11, 15, 26, 0.5) 0%, rgba(11, 15, 26, 0.2) 38%, rgba(11, 15, 26, 0.16) 100%),
    url("assets/images/hero-banner.png");
  background-position: 64% center;
}

.hero-content {
  min-height: calc(100svh - 72px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  padding-top: calc(72px + max(18px, env(safe-area-inset-top)));
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  text-align: left;
}

.hero-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 100%;
  width: 100%;
  min-height: 100%;
}

.hero-text h1 {
  max-width: 10ch;
  margin-bottom: 14px;
  font-size: clamp(1.9rem, 7.8vw, 2.3rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
  animation: mobileHeroFadeUp 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-line {
  white-space: normal;
}

.hero-emphasis {
  display: inline-block;
  animation: mobileHeroFadeUp 0.78s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Cursive italic accents in the hero get a touch more letter-spacing
   for elegance — only inside the hero h1 (problem-line italics unaffected). */
.hero-text h1 .hero-emphasis {
  letter-spacing: 0.012em;
}

.hero-text p,
.problem-line-tertiary,
.strip-expanded p,
.footer-column p,
.footer-column li,
.footer-column a {
  font-size: 15px;
  line-height: 1.6;
}

.hero-text > p {
  max-width: 36ch;
  margin-top: 28px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.72);
  animation: mobileHeroFadeUp 0.86s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.problem-line-primary {
  font-size: 1.75rem;
}

.problem-line-secondary {
  margin-top: 18px;
  font-size: 1.15rem;
  line-height: 1.55;
}

.problem-line-tertiary {
  margin-top: 28px;
}

.hero-buttons {
  margin-top: auto;
  width: 100%;
  padding-top: 24px;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  animation: mobileHeroFadeUp 0.98s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.btn {
  width: 100%;
  text-align: center;
  border-radius: 14px;
}

.hero-buttons .btn {
  min-height: 50px;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 600;
}

.hero-buttons .btn.primary {
  width: 88%;
  margin: 0 auto;
  min-height: 48px;
  padding: 12px 24px;
  background: linear-gradient(180deg, #d7b451 0%, #c9a646 100%);
  box-shadow: 0 10px 24px rgba(201, 166, 70, 0.16);
}

.hero-buttons .btn.secondary {
  width: 88%;
  margin: 0 auto;
  min-height: 44px;
  padding: 11px 20px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.92);
}

/* Subtle scroll-cue chevron above the hero CTAs — gentle pulse, no movement,
   so it hints at "more below" without feeling templated. */
.hero-buttons::before {
  content: "";
  display: block;
  margin: 0 auto 14px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid rgba(201, 166, 70, 0.55);
  border-bottom: 1.5px solid rgba(201, 166, 70, 0.55);
  transform: rotate(45deg);
  animation: heroScrollCuePulse 2.2s ease-in-out infinite;
}

@keyframes heroScrollCuePulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}

.what-we-do-layout {
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

.what-we-do h2,
.approach h2,
.work h2,
.who h2,
.final-question {
  font-size: clamp(1.85rem, 8vw, 2.25rem);
  line-height: 1.08;
  text-align: center;
}

.strip-container {
  position: relative;
  width: 100%;
  min-height: 0;
  height: clamp(420px, 72vw, 520px);
  margin: 0 auto;
  display: block;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}

.strip-container::before,
.strip-container::after {
  position: absolute;
  top: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 166, 70, 0.22);
  border-radius: 999px;
  background: rgba(11, 15, 26, 0.56);
  color: rgba(255, 255, 255, 0.52);
  font-size: 18px;
  line-height: 1;
  transform: translateY(-50%);
  z-index: 7;
  pointer-events: none;
  backdrop-filter: blur(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.strip-container::before {
  content: "‹";
  left: 2px;
}

.strip-container::after {
  content: "›";
  right: 2px;
}

.strip-container[data-has-previous="false"]::before {
  opacity: 0.18;
  transform: translateY(-50%) scale(0.9);
}

.strip-container[data-has-next="false"]::after {
  opacity: 0.18;
  transform: translateY(-50%) scale(0.9);
}

.strip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(78vw, 390px);
  aspect-ratio: 5 / 4;
  min-height: 0;
  transform: translate(-50%, -50%) translateX(120%);
  transition:
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease;
  will-change: transform, opacity;
  pointer-events: none;
  opacity: 0;
}

.strip-bg {
  opacity: 0.26;
}

.strip.active .strip-bg {
  transform: scale(1.06);
  opacity: 0.54;
}

.strip-content {
  left: 26px;
  right: 26px;
  bottom: 28px;
  width: auto;
  max-width: calc(100% - 52px);
}

.strip-tag {
  margin-bottom: 10px;
  font-size: 12px;
}

.strip-content h3 {
  font-size: clamp(1.55rem, 5vw, 1.95rem);
  line-height: 1.08;
  margin-bottom: 12px;
}

.strip-expanded {
  max-height: 0;
  opacity: 0;
  transform: translateY(12px);
}

.strip-expanded p {
  display: none;
}

.strip[data-mobile-state="active"] {
  transform: translate(-50%, -50%) translateX(0);
  opacity: 1;
  z-index: 5;
  pointer-events: auto;
  border-color: rgba(201, 166, 70, 0.76);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(201, 166, 70, 0.18);
}

.strip[data-mobile-state="active"] .strip-expanded {
  max-height: 80px;
  opacity: 1;
  transform: translateY(0);
}

.strip[data-mobile-state="active"] .strip-tag {
  color: var(--accent-light);
}

.strip[data-mobile-state="previous"] {
  transform: translate(-50%, -50%) translateX(-66%);
  opacity: 0.3;
  z-index: 4;
  pointer-events: auto;
}

.strip[data-mobile-state="next"] {
  transform: translate(-50%, -50%) translateX(66%);
  opacity: 0.3;
  z-index: 4;
  pointer-events: auto;
}

.strip[data-mobile-state="hidden"] {
  transform: translate(-50%, -50%) translateX(120%);
  opacity: 0;
  z-index: 1;
}

.strip[data-mobile-state="previous"] .strip-content,
.strip[data-mobile-state="next"] .strip-content,
.strip[data-mobile-state="previous"] .strip-expanded,
.strip[data-mobile-state="next"] .strip-expanded {
  opacity: 0;
}

.strip-expanded a {
  font-size: 13px;
}

.approach-container {
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

.film-strip {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 12px 0 44px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.film-track {
  display: flex;
  flex-direction: row;
  gap: 14px;
  height: auto;
  padding: 0 12vw;
  transform: translateX(0);
  will-change: transform;
}

.approach .step {
  flex: 0 0 76vw;
  min-width: 76vw;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.92), rgba(7, 11, 20, 0.98));
  opacity: 0.5;
  transform: scale(0.92);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.approach .step.is-active {
  opacity: 1;
  transform: scale(1.02);
  border-color: rgba(201, 166, 70, 0.7);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(201, 166, 70, 0.14);
}

.approach .step-number {
  margin-bottom: 10px;
  font-size: 12px;
}

.approach .step h3 {
  font-size: 22px;
  line-height: 1.12;
}

.approach .step-expanded {
  opacity: 1;
  transform: translateY(0);
  margin-top: 10px;
  max-width: none;
  font-size: 15px;
  line-height: 1.58;
}

.approach-progress {
  position: absolute;
  left: 50%;
  bottom: 0;
  min-width: 84px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(11, 15, 26, 0.72);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-align: center;
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.work-grid {
  flex-direction: column;
}

.work-layout {
  justify-content: flex-start;
  padding-top: 0;
  padding-bottom: 0;
}

.work-case-layout {
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

.work-side-visual {
  display: none;
}

.service-side-visual-mobile {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 8px 0 18px;
}

.case-study {
  max-width: none;
  gap: 18px;
}

.work .service-side-visual-image {
  width: min(88%, 280px);
  max-width: 280px;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  opacity: 0.5;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.case-title {
  font-size: clamp(1.85rem, 8vw, 2.25rem);
  line-height: 1.08;
  margin-bottom: 14px;
}

.case-label {
  font-size: 11px;
}

.case-copy {
  font-size: 15px;
  line-height: 1.5;
}

.who-layout {
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

.audience-grid {
  min-height: 0;
  height: auto;
  flex-direction: column;
  gap: 10px;
}

.audience-card,
.audience-card:hover,
.audience-card:focus-within {
  flex: none;
  min-height: 124px;
  transform: none;
}

.audience-card-bg {
  opacity: 0.3;
}

.audience-card:hover .audience-card-bg,
.audience-card:focus-within .audience-card-bg {
  transform: none;
  opacity: 0.38;
}

.audience-card-content {
  left: 16px;
  right: 16px;
  bottom: 16px;
}

.audience-card-tag {
  margin-bottom: 8px;
  font-size: 11px;
}

.audience-card-content h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

.audience-card-content p:last-child,
.who-closing {
  font-size: 15px;
  line-height: 1.58;
}

.who-closing {
  margin-top: 18px;
}

.final-layout {
  grid-template-rows: auto 1fr;
  gap: 12px;
  min-height: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
}

.final-section {
  overflow-y: visible;
  overscroll-behavior: auto;
}

.final-top {
  max-width: 100%;
  padding: 6px 0 0;
}

.final-philosophy {
  margin-bottom: 14px;
  font-size: 1rem;
  line-height: 1.42;
}

.final-question {
  margin-bottom: 18px;
  font-size: clamp(1.7rem, 7vw, 2.2rem);
  line-height: 1.02;
}

.final-footer {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  align-content: start;
  padding-top: 14px;
  padding-bottom: 0;
}

.footer-column h3,
.footer-column h4 {
  margin-bottom: 8px;
  font-size: 13px;
}

.footer-logo {
  height: 26px;
  margin-bottom: 8px;
}

.footer-column p,
.footer-column li,
.footer-column a {
  font-size: 12px;
  line-height: 1.5;
}

.footer-bottom {
  padding-top: 0;
}

.footer-bottom p {
  font-size: 10px;
  line-height: 1.45;
}
@media (max-width: 560px) {
  .final-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.strip-container {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  height: clamp(500px, calc(100svh - 260px), 620px);
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  touch-action: pan-y;
  user-select: none;
  gap: 0;
}

.strip {
  position: absolute;
  top: 50%;
  left: 50%;
  flex: none;
  width: min(62vw, 290px);
  min-width: 0;
  min-height: 0;
  aspect-ratio: 4 / 5;
  transform: translate(-50%, -50%) translateX(120%);
  touch-action: pan-y;
  z-index: 1;
}

.strip.active {
  flex: none;
  transform: translate(-50%, -50%) translateX(0);
}

.strip-bg,
.strip-overlay,
.strip-content,
.strip-tag,
.strip-content h3,
.strip-expanded {
  touch-action: pan-y;
}

.strip[data-mobile-state="active"] {
  transform: translate(-50%, -50%) translateX(0);
  z-index: 6;
}

.strip[data-mobile-state="previous"] {
  transform: translate(-50%, -50%) translateX(-64%) scale(0.91);
  opacity: 0.28;
  z-index: 2;
  pointer-events: auto;
}

.strip[data-mobile-state="next"] {
  transform: translate(-50%, -50%) translateX(64%) scale(0.91);
  opacity: 0.28;
  z-index: 2;
  pointer-events: auto;
}

.strip[data-mobile-state="hidden"] {
  transform: translate(-50%, -50%) translateX(120%);
  opacity: 0;
  z-index: 1;
}

.strip-progress {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: block;
  min-width: 84px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(11, 15, 26, 0.72);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-align: center;
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
  z-index: 8;
}
.what-we-do-layout {
  justify-content: center;
}

.who-layout {
  justify-content: center;
}

.audience-grid {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  height: clamp(500px, calc(100svh - 260px), 620px);
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  touch-action: pan-y;
  user-select: none;
  gap: 0;
}

.audience-card {
  position: absolute;
  top: 50%;
  left: 50%;
  flex: none;
  width: min(62vw, 290px);
  min-width: 0;
  min-height: 0;
  aspect-ratio: 4 / 5;
  transform: translate(-50%, -50%) translateX(120%);
  touch-action: pan-y;
  opacity: 0;
  z-index: 1;
}

.audience-card-bg,
.audience-card-overlay,
.audience-card-content,
.audience-card-tag,
.audience-card-content h3,
.audience-card-content p:last-child {
  touch-action: pan-y;
}

.audience-card.is-active {
  transform: translate(-50%, -50%) translateX(0);
  opacity: 1;
  z-index: 6;
  border-color: rgba(201, 166, 70, 0.76);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(201, 166, 70, 0.18);
}

.audience-card.is-active .audience-card-bg {
  transform: scale(1.06);
  opacity: 0.62;
}

.audience-card.is-active .audience-card-tag {
  color: var(--accent-light);
}

.audience-card[data-mobile-state="previous"] {
  transform: translate(-50%, -50%) translateX(-64%) scale(0.91);
  opacity: 0.28;
  z-index: 2;
  pointer-events: auto;
}

.audience-card[data-mobile-state="next"] {
  transform: translate(-50%, -50%) translateX(64%) scale(0.91);
  opacity: 0.28;
  z-index: 2;
  pointer-events: auto;
}

.audience-card[data-mobile-state="hidden"] {
  transform: translate(-50%, -50%) translateX(120%);
  opacity: 0;
  z-index: 1;
}

.audience-card[data-mobile-state="previous"] .audience-card-content,
.audience-card[data-mobile-state="next"] .audience-card-content {
  opacity: 0;
}

.audience-progress {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: block;
  min-width: 84px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(11, 15, 26, 0.72);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-align: center;
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
  z-index: 8;
}
.work-case-layout .work-side-visual {
  display: none;
}

.work-case-layout .service-side-visual-mobile {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 8px 0 18px;
}
/* Section break divider: gold gradient line at the top of each non-hero
   section across home, about, and the four service pages. Wider, taller,
   and more saturated than the v1 so the section transition reads instantly
   on mobile. Sits 6px below the section's top edge to give breathing room
   above (between the previous section and the divider). */
body.home-page section:not(.hero)::before,
body.about-page .about-screen:not(.about-opening)::before,
body.service-page .service-screen:not(.service-hero)::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 100px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 166, 70, 0.7),
    transparent
  );
  transform: translateX(-50%);
  pointer-events: none;
}

/* Entrance animation: each non-hero, non-problem section fades up its
   direct .container children when it scrolls into view. .problem keeps
   its own .problem-reveal-line system, so it's excluded here. */
body.home-page section:not(.hero):not(.problem) .container > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.home-page section:not(.hero):not(.problem).is-visible .container > * {
  opacity: 1;
  transform: translateY(0);
}

body.home-page section:not(.hero):not(.problem).is-visible
  .container
  > *:nth-child(1) {
  transition-delay: 80ms;
}
body.home-page section:not(.hero):not(.problem).is-visible
  .container
  > *:nth-child(2) {
  transition-delay: 200ms;
}
body.home-page section:not(.hero):not(.problem).is-visible
  .container
  > *:nth-child(3) {
  transition-delay: 320ms;
}
body.home-page section:not(.hero):not(.problem).is-visible
  .container
  > *:nth-child(n + 4) {
  transition-delay: 440ms;
}