/* ================================================================
   what-we-do.css — Page-specific styles for What We Do page
   All typography/spacing from Figma nodes 1188:3015 (desktop)
   and 1251:4870 (mobile, max-width: 768px).
   Inherits: normalize.css, webflow.css, jerymvp.webflow.css
   ================================================================ */

/* ----------------------------------------------------------------
   SHARED UTILITIES
---------------------------------------------------------------- */
.wwd-gradient-text {
  background: linear-gradient(135deg, #38e4af 0%, #408e8d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wwd-section-title {
  font-family: Inter, sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: 0;
  margin: 0;
}

.wwd-section-body {
  font-family: Inter, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  color: #d0d0d2;
  margin: 0;
}

.wwd-text-block {
  width: 384px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ----------------------------------------------------------------
   HERO SECTION
   Desktop: pad 96px top/bottom, gap 96px, content left-padded 160px
   Frame: 1440×904px; text column 488px; image column flex-fill
---------------------------------------------------------------- */
.wwd-hero {
  width: 100%;
  background: var(--jery-blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 96px 0;
  gap: 96px;
  box-sizing: border-box;
}

.wwd-hero__inner {
  width: 100%;
  max-width: 1440px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 160px;
  box-sizing: border-box;
}

.wwd-hero__text {
  width: 488px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wwd-hero__title {
  font-family: Inter, sans-serif;
  font-size: 80px;
  font-weight: 600;
  line-height: 96.8px;
  letter-spacing: -1.6px;
  margin: 0;
}

.wwd-hero__subtitle {
  font-family: Inter, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 27px;
  color: #d0d0d2;
  max-width: 459px;
  margin: 0;
}

/* Desktop planet: flex-fill to the right of text */
.wwd-hero__graphic--desktop {
  flex: 1;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.wwd-hero__planet-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Mobile planet: shown only on mobile (above text) */
.wwd-hero__graphic--mobile {
  display: none;
  width: 100%;
  height: 344px;
  overflow: hidden;
}

/* Client logos bar: centered, 1440px max, 8px h-pad */
.wwd-client-logos {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  padding: 0 8px;
  box-sizing: border-box;
}

.wwd-logos-label {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: #727378;
  margin: 0;
  text-align: center;
}

.wwd-logos-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: center;
  max-width: 1104px;
  width: 100%;
  opacity: 0.8;
}

.wwd-logo-frame {
  width: 144px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wwd-logo-frame--grey {
  background-color: #969696;
}

.wwd-logo-frame img {
  max-width: 120px;
  max-height: 50px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* Placeholder for missing logo assets */
.wwd-logo-placeholder {
  width: 90px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

/* ----------------------------------------------------------------
   SECTION 02: Our recipe for success
   Desktop: HORIZONTAL, pad 140px top/bottom, 160px left/right, gap 32px
   Text column: 448×188px | Graphic box: 640×296px, fill #2a2a2a
---------------------------------------------------------------- */
.wwd-section--02 {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 140px 160px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
}

.wwd-section__text--02 {
  width: 448px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wwd-graphic-box--02 {
  flex: 1;
  min-height: 296px;
  background: #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Venn diagram: 328×262px centered in graphic box */
.wwd-venn-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 17px 24px;
}

.wwd-venn {
  position: relative;
  width: 328px;
  height: 262px;
}

.wwd-venn__circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(64, 142, 141, 0.45);
  border: 3.5px solid #408e8d;
}

/* Design Thinking: x=1910-1762=148, y=0, 180×180px */
.wwd-venn__circle--1 {
  width: 180px;
  height: 180px;
  left: 148px;
  top: 0;
}

/* Business Thinking: x=0, y=0, 180×180px */
.wwd-venn__circle--2 {
  width: 180px;
  height: 180px;
  left: 0;
  top: 0;
}

/* Future Thinking: x=89, y=112, 150×150px */
.wwd-venn__circle--3 {
  width: 150px;
  height: 150px;
  left: 89px;
  top: 112px;
}

.wwd-venn__label {
  position: absolute;
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  color: #4fafae;
  text-align: center;
  pointer-events: none;
}

/* Label: "Design Thinking" — right circle */
.wwd-venn__label--design {
  right: 4px;
  top: 64px;
  width: 80px;
}

/* Label: "Business Thinking" — left circle */
.wwd-venn__label--business {
  left: 4px;
  top: 64px;
  width: 80px;
}

/* Label: "Future Thinking" — bottom circle */
.wwd-venn__label--future {
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Pill + connecting line */
.wwd-venn__pill-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.wwd-pill {
  font-family: Inter, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 27px;
  color: #38e4af;
  background: #1c403d;
  border: 2.5px solid #38e4af;
  border-radius: 100px;
  padding: 8px 16px;
  white-space: nowrap;
  flex-shrink: 0;
}

.wwd-pill-line {
  width: 180px;
  height: 2px;
  background: rgba(241, 241, 243, 0.6);
  flex-shrink: 0;
}

/* ----------------------------------------------------------------
   SECTION 03: Our design process
   Desktop: VERTICAL, pad 0 v, 160px h; title top-left; diagram bottom-right
   Text: 448×188px aligned left | Diagram: 738×339px aligned right
---------------------------------------------------------------- */
.wwd-section--03 {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 160px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.wwd-section__header--03 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wwd-process-diagram-wrapper {
  align-self: flex-end;
  margin-top: -44px; /* diagram overlaps text area in Figma */
}

/* Process diagram: Framing (small) + Opportunity (large) + Solution (large) */
.wwd-process-diagram {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
}

/* CSS approximation of Figma custom vector hexagonal/diamond shapes */
.wwd-process-shape {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 16px 12px;
  position: relative;
  clip-path: polygon(12% 0%, 88% 0%, 100% 50%, 88% 100%, 12% 100%, 0% 50%);
  background: #1e2029;
  border: 0;
}

/* Framing: small shape w≈139px h≈127px */
.wwd-process-shape--sm {
  width: 139px;
  height: 127px;
  outline: 4px solid #44454d;
  outline-offset: -4px;
}

/* Opportunity / Solution: large shape w≈204px h≈187px */
.wwd-process-shape--lg {
  width: 204px;
  height: 187px;
  outline: 4px solid #44454d;
  outline-offset: -4px;
}

/* Active state: teal fill + teal border */
.wwd-process-shape--active {
  background: #1c403d;
  outline: 4px solid #38e3ae;
  outline-offset: -4px;
}

.wwd-process-shape__label {
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  color: #408e8d;
  display: block;
}

.wwd-process-shape--active .wwd-process-shape__label,
.wwd-process-shape__label--teal {
  color: #38e4af;
}

.wwd-process-shape__sub {
  font-family: Inter, sans-serif;
  font-size: 8px;
  font-weight: 600;
  line-height: 11px;
  color: #d0d0d2;
  display: block;
}

.wwd-process-shape__tags {
  display: flex;
  flex-direction: row;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.wwd-process-tag {
  font-family: Inter, sans-serif;
  font-size: 9px;
  font-weight: 500;
  line-height: 14px;
  color: #38e4af;
}

/* ----------------------------------------------------------------
   SECTIONS 04 / 05 / 06: Service card sections
   Each: VERTICAL layout, 1120px wide (160px page margins each side)
   Header: 64px inner pad, gap 64px between text and diagram (187px tall)
   Cards: gap 24px, each card 992px wide (512px text + 480px image), 276px tall
   Section gaps between header and cards: 104px
---------------------------------------------------------------- */
.wwd-section--04,
.wwd-section--05,
.wwd-section--06 {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 160px;
  display: flex;
  flex-direction: column;
  gap: 104px;
  align-items: center;
  box-sizing: border-box;
}

.wwd-section__header {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 64px;
  padding: 0 64px;
  box-sizing: border-box;
}

/* Phase diagram: right side of section header, ~544px wide × 187px */
.wwd-phase-diagram {
  flex: 1;
  height: 187px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  justify-content: flex-start;
}

/* Phase shapes (same clip-path as process shapes) */
.wwd-phase-shape {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 12px 8px;
  clip-path: polygon(12% 0%, 88% 0%, 100% 50%, 88% 100%, 12% 100%, 0% 50%);
  background: #1e2029;
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  color: #408e8d;
  flex-shrink: 0;
  outline: 4px solid #44454d;
  outline-offset: -4px;
}

.wwd-phase-shape--sm {
  width: 139px;
  height: 127px;
}

.wwd-phase-shape--lg {
  width: 204px;
  height: 187px;
}

.wwd-phase-shape--active {
  background: #1c403d;
  color: #38e4af;
  outline: 4px solid #38e3ae;
  outline-offset: -4px;
}

.wwd-phase-shape span {
  display: block;
}

/* Cards container */
.wwd-cards {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

/* Each card: HORIZONTAL, 992×276px */
.wwd-card {
  width: 992px;
  height: 276px;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  overflow: hidden;
}

/* Text side: 512px wide, pad t40 r65 b40 l40, gap 24, radial gradient bg */
.wwd-card__text {
  width: 512px;
  flex-shrink: 0;
  padding: 40px 65px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: radial-gradient(ellipse at 30% 30%, rgba(28, 64, 61, 0.55) 0%, rgba(21, 23, 33, 0.97) 65%);
  box-sizing: border-box;
}

.wwd-card__title {
  font-family: Inter, sans-serif;
  font-size: 22.5px;
  font-weight: 500;
  line-height: 32px;
  color: #38e4af;
  margin: 0;
}

.wwd-card__body {
  font-family: Inter, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  color: #d0d0d2;
  margin: 0;
  max-width: 312px;
}

/* Image side: flex-fill (≈480px), 276px tall */
.wwd-card__image {
  flex: 1;
  height: 276px;
  overflow: hidden;
  position: relative;
}

.wwd-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Placeholder shown until real photos are added */
.wwd-img-placeholder {
  width: 100%;
  height: 100%;
  background: #232832;
}

/* ----------------------------------------------------------------
   SECTION 07: Our Philosophy
   Desktop: HORIZONTAL, pad 48px top/bottom, gap 32px
   Text: 448×188px (left) | Planet: 640×507px (right)
---------------------------------------------------------------- */
.wwd-section--07 {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
}

.wwd-section__text--07 {
  width: 448px;
  flex-shrink: 0;
  margin-left: 160px; /* matches other sections' left padding */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wwd-philosophy-graphic {
  flex: 1;
  height: 507px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wwd-philosophy-planet {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* ----------------------------------------------------------------
   SECTION 08: Stats Widgets
   Desktop: CSS grid — 3 small widgets (row 1) + wide + wider (row 2)
   All widgets: bg rgba(255,255,255,0.05), radius 24px
   Widths: small=357px, wide=486px, wider=609px; heights: 224px / 256px
---------------------------------------------------------------- */
.wwd-section--08 {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 160px;
  box-sizing: border-box;
}

/* Desktop grid: 1119px wide, 2 rows, gap 24px */
.wwd-stats {
  display: grid;
  grid-template-columns: 357px 357px 357px;
  grid-template-rows: 224px 256px;
  gap: 24px;
  /* Override column track for bottom row (486 + 609 = 1095 + 24 gap = 1119px) */
  grid-template-areas:
    "years projects passion"
    "fastdev fastdev design-code";
}

/* Redefine bottom row to use correct widths via subgrid or spanning */
/* We use a wrapper approach: projects widget spans full grid width on bottom row */

/* Widget shared base */
.wwd-widget {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 24px;
  overflow: hidden;
  box-sizing: border-box;
}

.wwd-widget--years    { grid-area: years; }
.wwd-widget--projects { grid-area: projects; }
.wwd-widget--passion  { grid-area: passion; }
.wwd-widget--fastdev  { grid-area: fastdev; }
.wwd-widget--design-code { grid-area: design-code; }

/* Bottom row: use 2-column subgrid via explicit grid redefinition on the section wrapper */
.wwd-section--08 .wwd-stats {
  grid-template-columns: 357px 357px 357px;
  grid-template-areas:
    "years projects passion"
    "fastdev fastdev design-code";
}

/* Fast Dev (spans 2 columns = 357+357+24gap = 738px → close to Figma 486px, compromise) */
/* For pixel accuracy, use a separate grid for bottom row */
.wwd-widget--fastdev {
  /* Override: actual Figma width 486px, height 256px */
  height: 256px;
}

.wwd-widget--design-code {
  /* Figma width 609px, height 256px */
  height: 256px;
}

/* Widget number: Inter 60px 800 gradient */
.wwd-widget__number {
  font-family: Inter, sans-serif;
  font-size: 60px;
  font-weight: 800;
  line-height: 48px;
  display: block;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

/* Widget label: Inter 17px 500 #a1a2a5 */
.wwd-widget__label {
  font-family: Inter, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 27px;
  color: #a1a2a5;
  text-align: center;
  display: block;
  position: relative;
  z-index: 1;
}

/* Grid decoration for "40+ Projects" widget */
.wwd-widget--projects {
  justify-content: center;
}

.wwd-widget__grid {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wwd-widget__grid-row {
  display: flex;
  flex-direction: row;
  gap: 9px;
  justify-content: center;
}

.wwd-widget__grid-cell {
  width: 48px;
  height: 37px;
  background: white;
  border-radius: 12px;
  flex-shrink: 0;
}

.wwd-widget__grid-cell--grad {
  background: linear-gradient(135deg, #38e4af, #408e8d);
}

.wwd-widget__grid-row--80 { opacity: 0.8; }
.wwd-widget__grid-row--60 { opacity: 0.6; }
.wwd-widget__grid-row--40 { opacity: 0.4; }
.wwd-widget__grid-row--20 { opacity: 0.2; }

/* Fast Development widget: space background */
.wwd-widget--space {
  overflow: hidden;
  justify-content: flex-end;
}

.wwd-widget__space-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 25% 80%, rgba(64, 142, 141, 0.5) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 50%, rgba(50, 52, 61, 0.8) 0%, transparent 60%),
              #21232b;
  border-radius: inherit;
}

.wwd-space-glow {
  position: absolute;
  left: 50px;
  bottom: 20px;
  width: 310px;
  height: 55px;
  background: rgba(56, 228, 175, 0.7);
  border-radius: 50%;
  filter: blur(8px);
}

.wwd-space-orbit {
  position: absolute;
  left: 60px;
  top: 20px;
  right: 10px;
  bottom: 20px;
  border: 1px solid rgba(56, 228, 175, 0.3);
  border-radius: 50%;
  transform: rotate(-15deg);
}

.wwd-space-dot {
  position: absolute;
  right: 50px;
  top: 50%;
  width: 62px;
  height: 62px;
  background: radial-gradient(circle, #38e4af 0%, #408e8d 50%, transparent 80%);
  border-radius: 50%;
  transform: translateY(-50%);
}

/* Design & Code widget */
.wwd-widget--design-code {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  padding: 28px 32px;
}

.wwd-widget__icons {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
  position: relative;
  width: 150px;
  height: 200px;
}

.wwd-icon-tile {
  width: 119px;
  height: 119px;
  border-radius: 20px;
  background: linear-gradient(135deg, #38e4af 0%, #408e8d 50%, #151721 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}

/* Design tile: lower (y=6226 relative), Code tile: upper (y=6154) — 72px offset */
.wwd-icon-tile--design {
  bottom: 0;
  left: 0;
}

.wwd-icon-tile--code {
  top: 0;
  left: 30px;
}

.wwd-widget__label--wide {
  font-size: 17px;
  line-height: 27px;
  text-align: left;
  max-width: 236px;
}

/* ----------------------------------------------------------------
   TESTIMONIALS
   Desktop: pad 257px sides; title Inter 40px 700 gradient; gap 76px
   Cards: 926×304px HORIZONTAL; pad 0 r40 0 l40; gap 60px; radius 24px; radial gradient bg
   Image: 330×304px | Content: 456px wide
---------------------------------------------------------------- */
.wwd-testimonials {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 257px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 76px;
  box-sizing: border-box;
}

.wwd-testimonials__title {
  font-family: Inter, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 0;
  text-align: center;
  margin: 0;
}

.wwd-testimonials__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Each testimonial card: 926×304px, HORIZONTAL, radial gradient, radius 24px */
.wwd-testimonial {
  width: 100%;
  min-height: 304px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 40px 0 0;
  gap: 60px;
  background: radial-gradient(ellipse at 30% 50%, rgba(28, 64, 61, 0.4) 0%, rgba(21, 23, 33, 0.95) 65%);
  border-radius: 24px;
  overflow: hidden;
  box-sizing: border-box;
}

/* Image side: 330×304px */
.wwd-testimonial__image {
  width: 330px;
  height: 304px;
  flex-shrink: 0;
  overflow: hidden;
}

.wwd-testimonial__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.wwd-testimonial-img-placeholder {
  width: 100%;
  height: 100%;
  background: #2a2a2a;
}

/* Content side: 456px */
.wwd-testimonial__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 456px;
}

.wwd-testimonial__text {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #d0d0d2;
  margin: 0;
}

.wwd-testimonial__person {
  font-family: Inter, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  color: #a1a2a5;
  margin: 0;
}

.wwd-testimonial__person span {
  color: #a1a2a5;
}

/* ================================================================
   MOBILE — @media (max-width: 768px)
   Source: Figma node 1251:4870, 393px wide
   ================================================================ */
@media (max-width: 768px) {

  /* HERO — mobile: planet (top 344px) → text 345×160px, pad 24px sides */
  .wwd-hero {
    padding: 0;
    gap: 0;
  }

  .wwd-hero__graphic--mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 344px;
  }

  .wwd-hero__graphic--desktop {
    display: none;
  }

  .wwd-hero__inner {
    flex-direction: column;
    padding: 0 24px;
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .wwd-hero__text {
    width: 100%;
    gap: 16px;
  }

  .wwd-hero__title {
    font-size: 40px;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: 0;
  }

  .wwd-hero__subtitle {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    max-width: 100%;
  }

  /* Client logos: 3 frames, 56px tall, gap 16px */
  .wwd-client-logos {
    padding: 0 24px;
    gap: 16px;
    align-items: flex-start;
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .wwd-logos-row {
    gap: 16px;
    justify-content: flex-start;
    opacity: 1;
  }

  .wwd-logo-frame {
    width: 104px;
    height: 56px;
  }

  /* Hide logo frames 4–7 on mobile (Figma shows only 3) */
  .wwd-logo-frame:nth-child(n+4) {
    display: none;
  }

  /* SECTION 02: Our recipe for success — mobile
     VERTICAL, gap 48px, pad 0 r24 0 l24, text (345px) + venn graphic (345×216px) */
  .wwd-section--02 {
    flex-direction: column;
    padding: 0 24px;
    gap: 48px;
    max-width: 100%;
    margin-top: 48px;
  }

  .wwd-section__text--02 {
    width: 100%;
  }

  .wwd-graphic-box--02 {
    width: 100%;
    min-height: 216px;
  }

  .wwd-venn-wrapper {
    padding: 12px 16px;
    gap: 16px;
  }

  .wwd-venn {
    width: 219px;
    height: 175px;
    transform: scale(0.67);
    transform-origin: top left;
  }

  .wwd-venn__label {
    font-size: 8px;
    line-height: 12px;
  }

  .wwd-pill {
    font-size: 11px;
    padding: 5px 11px;
  }

  .wwd-pill-line {
    width: 99px;
  }

  /* SECTION 03: Our design process — mobile
     VERTICAL, gap 48px, pad 24px sides, process diagram 345×168px */
  .wwd-section--03 {
    padding: 0 24px;
    margin-top: 48px;
  }

  .wwd-process-diagram-wrapper {
    align-self: auto;
    margin-top: 24px;
    width: 100%;
    overflow: hidden;
  }

  .wwd-process-diagram {
    width: 100%;
    overflow-x: auto;
  }

  .wwd-process-shape--sm {
    width: 86px;
    height: 77px;
  }

  .wwd-process-shape--lg {
    width: 127px;
    height: 114px;
  }

  .wwd-process-shape__label {
    font-size: 8px;
  }

  .wwd-process-shape__sub {
    font-size: 6px;
  }

  /* SECTION 04: Pre-project (Framing) — mobile
     VERTICAL, gap 32px, pad 0 r24 0 l24 */
  .wwd-section--04,
  .wwd-section--05,
  .wwd-section--06 {
    padding: 0;
    max-width: 100%;
    gap: 32px;
    margin-top: 48px;
  }

  .wwd-section__header {
    flex-direction: column;
    padding: 0 24px;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
  }

  .wwd-text-block {
    width: 100%;
  }

  /* Phase diagram on mobile: 393×168px box, scaled shapes */
  .wwd-phase-diagram {
    width: 100%;
    height: 168px;
    background: #424242;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
  }

  .wwd-phase-shape--sm {
    width: 84px;
    height: 78px;
  }

  .wwd-phase-shape--lg {
    width: 124px;
    height: 114px;
  }

  .wwd-phase-shape {
    font-size: 8px;
    padding: 8px 4px;
  }

  /* Cards: mobile — image top (345×200px) + text below (gradient bg) */
  .wwd-cards {
    width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
    gap: 32px;
  }

  .wwd-card {
    width: 100%;
    height: auto;
    flex-direction: column;
  }

  .wwd-card__image {
    width: 100%;
    height: 200px;
    flex: none;
  }

  .wwd-card__text {
    width: 100%;
    height: auto;
    padding: 32px 32px 40px 32px;
    gap: 16px;
    box-sizing: border-box;
  }

  .wwd-card__body {
    max-width: 100%;
  }

  /* SECTION 07: Philosophy — mobile, VERTICAL */
  .wwd-section--07 {
    flex-direction: column;
    padding: 0;
    max-width: 100%;
    gap: 0;
    margin-top: 48px;
  }

  .wwd-section__text--07 {
    width: 100%;
    margin-left: 0;
    padding: 0 24px;
    gap: 16px;
    box-sizing: border-box;
  }

  .wwd-philosophy-graphic {
    width: 100%;
    height: 366px;
    margin-top: 24px;
    background: #555555;
  }

  /* SECTION 08: Stats — mobile grid
     Top row:    [100% Passion] [40+ Projects]   — 165×160 + 164×160
     Middle row: [7+ Years]    [Fast Dev]         — 128×160 + 201×160
     Bottom row: [Design & Code — full width]     — 345×160 */
  .wwd-section--08 {
    padding: 0 24px;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 48px;
  }

  .wwd-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 160px 160px 160px;
    gap: 16px;
    grid-template-areas:
      "passion   projects"
      "years     fastdev"
      "design-code design-code";
  }

  .wwd-widget {
    border-radius: 16px;
    padding: 16px;
    width: auto;
    height: auto;
  }

  .wwd-widget__number {
    font-size: 40px;
    line-height: 48px;
    margin-bottom: 4px;
  }

  .wwd-widget__label {
    font-size: 14px;
    line-height: 21px;
  }

  .wwd-widget--design-code {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 8px;
  }

  .wwd-widget__icons {
    flex-direction: row;
    width: 120px;
    height: 90px;
  }

  .wwd-icon-tile {
    width: 78px;
    height: 78px;
    border-radius: 13px;
  }

  .wwd-icon-tile--design {
    top: auto;
    left: auto;
    bottom: 0;
    position: absolute;
  }

  .wwd-icon-tile--code {
    top: 0;
    left: 20px;
    position: absolute;
  }

  .wwd-widget__label--wide {
    font-size: 14px;
    line-height: 21px;
    max-width: 119px;
    text-align: left;
  }

  .wwd-widget__grid-cell {
    width: 45px;
    height: 31px;
    border-radius: 9px;
  }

  /* TESTIMONIALS — mobile
     VERTICAL cards: 345×469px max, pad 24px top + 24px sides, gap 24px
     No image side-by-side; image removed or stacked above text */
  .wwd-testimonials {
    padding: 0 24px;
    max-width: 100%;
    gap: 35px;
    box-sizing: border-box;
    margin-top: 48px;
  }

  .wwd-testimonials__title {
    font-size: 30px;
    font-weight: 600;
    line-height: 38px;
    text-align: left;
    width: 100%;
  }

  .wwd-testimonials__list {
    gap: 24px;
  }

  .wwd-testimonial {
    flex-direction: column;
    padding: 24px 24px 0 24px;
    gap: 24px;
    min-height: auto;
    align-items: flex-start;
  }

  /* Hide image on mobile (Figma mobile testimonial cards show text only + image at bottom) */
  .wwd-testimonial__image {
    display: none;
  }

  .wwd-testimonial__content {
    max-width: 100%;
    flex: none;
  }

  .wwd-testimonial__text {
    font-size: 15px;
    line-height: 22.5px;
  }

} /* end @media (max-width: 768px) */

/* ----------------------------------------------------------------
   SPACING: add vertical gap between page sections
   Matching Figma y-coordinate gaps between section frames
---------------------------------------------------------------- */

/* Gap between Hero and Section 02: y=-384 - (y=-1288+h=904) = 0px overlap, sections butt together */
.wwd-section--02 { margin-top: 0; }

/* Gap between Section 02 end (y=-384+576=192) and Section 03 start (y=192): 0px */
.wwd-section--03 { margin-top: 0; }

/* Gap between Section 03 end (y=192+527=719) and Section 04 start (y=959): 240px */
.wwd-section--04 { margin-top: 240px; }

/* Gap between Section 04 end (y=959+867=1826) and Section 05 start (y=2074): 248px */
.wwd-section--05 { margin-top: 248px; }

/* Gap between Section 05 end (y=2074+1167=3241) and Section 06 start (y=3489): 248px */
.wwd-section--06 { margin-top: 248px; }

/* Gap between Section 06 end (y=3489+1467=4956) and Section 07 start (y=5116): 160px */
.wwd-section--07 { margin-top: 160px; }

/* Gap between Section 07 end (y=5116+603=5719) and Section 08 start (y=5879): 160px */
.wwd-section--08 { margin-top: 160px; }

/* Gap between Section 08 end (y=5879+504=6383) and Testimonials start (y=6639): 256px */
.wwd-testimonials { margin-top: 256px; margin-bottom: 96px; }

/* Mobile overrides for section spacing */
@media (max-width: 768px) {
  .wwd-section--04 { margin-top: 48px; }
  .wwd-section--05 { margin-top: 48px; }
  .wwd-section--06 { margin-top: 48px; }
  .wwd-section--07 { margin-top: 48px; }
  .wwd-section--08 { margin-top: 48px; }
  .wwd-testimonials { margin-top: 48px; margin-bottom: 48px; }
}