/* ═══════════════════════════════════════════════
   FLINT HOUSE — Main Stylesheet (rebuilt)
   Font : Switzer (Fontshare) + IBM Plex Serif (Google)
═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

/* ── Tokens ───────────────────────────────────── */
:root {
  /* Brand */
  --dark    : #14151a;
  --light   : #FBF8EF;
  --orange  : #FF7E46;
  --white   : #FFFFFF;
  --gray    : #D9D9D9;

  --dark80  : rgba(20,21,26,0.80);
  --dark60  : rgba(20,21,26,0.62);
  --dark45  : rgba(20,21,26,0.45);
  --dark30  : rgba(20,21,26,0.30);
  --dark12  : rgba(20,21,26,0.12);

  --white85 : rgba(255,255,255,0.85);
  --white60 : rgba(255,255,255,0.60);
  --white40 : rgba(255,255,255,0.40);
  --white20 : rgba(255,255,255,0.20);
  --white10 : rgba(255,255,255,0.10);
  --white06 : rgba(255,255,255,0.06);

  /* ONE layout system — nav, sections and topbars all share these */
  --maxw    : 1400px;
  --gutter  : clamp(18px, 4vw, 48px);
  --nav-h   : 64px;

  /* Vertical rhythm — every section uses this, so nothing double-pads */
  --sec-y   : clamp(56px, 8vw, 100px);
  --sec-y-sm: clamp(40px, 6vw, 72px);

  /* Grid gaps */
  --gap     : clamp(16px, 2.2vw, 28px);
  --gap-lg  : clamp(28px, 4.5vw, 64px);

  --radius  : 16px;
  --radius-lg: 22px;

  /* Testimonial carousel: how many cards are visible */
  --tv      : 3;
  --t-gap   : 20px;
}

/* ── Reset & base ─────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  background: var(--light);
  color: var(--dark);
  line-height: 1.6;
  overflow-x: hidden;
  padding-top: var(--nav-h); /* fixed navbar no longer overlaps page content */
}
body.nav-open { overflow: hidden; }

a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
h1, h2, h3, h4 { text-wrap: balance; }
p  { text-wrap: pretty; }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 1000;
  background: var(--orange);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  font-size: 13px;
  font-weight: 600;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ── Layout primitives ────────────────────────── */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.accent-orange { color: var(--orange); font-style: italic; }

/* Framed images fill their box without exposing the placeholder */
.portfolio-img-box,
.fi-box,
.svc-card-img,
.ct-form-img { position: relative; overflow: hidden; }

.portfolio-img-box > img,
.fi-box > img,
.svc-card-img > img,
.ct-form-img > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
}


/* ══════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════ */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 999;
  height: var(--nav-h);
  background: var(--dark);
  box-shadow: 0 2px 28px rgba(0,0,0,0.30);
}

.nav-inner {
  width: 100%;
  max-width: var(--maxw);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
}

.nav-logo { flex-shrink: 0; display: flex; align-items: center; }
.nav-logo img { height: 32px; width: auto; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.9vw, 28px);
  flex: 1;
  justify-content: center;
  min-width: 0;
}

.nav-link {
  display: inline-block;
  color: var(--white60);
  font-size: clamp(10.5px, 0.9vw, 11.5px);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-block: 4px;
  border-bottom: 1.5px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav-link:hover { color: var(--white); }
.nav-link.active { color: var(--white); border-bottom-color: var(--white); }

.nav-menu-cta { display: none; }

/* GET STARTED — whole pill is one link, so the circle is clickable too */
.btn-started-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 50px;
  padding: 3px 3px 3px 18px;
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1), border-color 0.25s;
}
.btn-started-wrap:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.8); }

.btn-started {
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: 12px;
}

.btn-started-circle {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--orange);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
}
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.28s, opacity 0.2s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ══════════════════════════════════════════════
   HERO
══════════════════════════════════════════════ */
.hero {
  position: relative;
  background: var(--dark);
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  place-items: center;
  overflow: hidden;
  padding-block: clamp(64px, 10vw, 110px);
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: clamp(44px, 7vw, 80px) clamp(44px, 7vw, 80px);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--gutter); /* text no longer touches the screen edge */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-eyebrow {
  color: rgba(255,255,255,0.72);
  font-size: clamp(10px, 1.1vw, 11.5px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: clamp(18px, 3vw, 28px);
}

.hero-heading {
  font-size: clamp(34px, 6.4vw, 76px);
  font-weight: 400;
  color: var(--white);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: clamp(16px, 2.4vw, 24px);
}

.hero-sub {
  color: rgba(255,255,255,0.82);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.7;
  max-width: 46ch;
  margin-bottom: clamp(28px, 4vw, 40px);
}

.btn-explore {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid rgba(255,255,255,0.3);
  color: var(--white);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 34px;
  border-radius: 50px;
  min-height: 44px;
  transition: background 0.25s, border-color 0.25s;
}
.btn-explore:hover { background: var(--white10); border-color: rgba(255,255,255,0.55); }

.hero-scroll-indicator {
  margin-top: clamp(20px, 3vw, 28px);
  animation: scrollBounce 1.8s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}


/* ══════════════════════════════════════════════
   DESIGN / SERVICES TABS SECTION
══════════════════════════════════════════════ */
.design-section {
  background: var(--light);
  padding-block: clamp(28px, 4vw, 40px) var(--sec-y);
}

.ds-topbar {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 12px;
}

.ds-circle-text {
  flex-shrink: 0;
  width: clamp(76px, 11vw, 120px);
  height: clamp(76px, 11vw, 120px);
  color: var(--orange);
  animation: spinRing 28s linear infinite;
  transform-origin: center;
}
@keyframes spinRing { to { transform: rotate(360deg); } }

.ds-line-group { flex: 1; display: flex; align-items: center; min-width: 0; }
.ds-line { flex: 1; height: 1px; background: var(--dark12); }
.ds-plus-icon {
  font-size: 18px; font-weight: 300;
  color: var(--dark30);
  padding-inline: 12px;
  line-height: 1;
}
.ds-services-label {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--dark30);
  white-space: nowrap;
}

.ds-body { text-align: center; padding-top: clamp(16px, 3vw, 28px); }

.ds-title {
  font-size: clamp(30px, 7vw, 88px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-bottom: clamp(20px, 3vw, 30px);
}

/* Step tabs */
.ds-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 380px;
  margin: 0 auto clamp(24px, 4vw, 40px);
}
.ds-step-line { flex: 1; height: 1px; background: rgba(20,21,26,0.18); }
.ds-tab {
  width: 44px; height: 44px;   /* 44px = minimum comfortable tap target */
  flex-shrink: 0;
  border-radius: 8px;
  border: 1.5px solid rgba(20,21,26,0.25);
  color: var(--dark60);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.22s, border-color 0.22s, color 0.22s;
}
.ds-tab.active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
  font-weight: 600;
}
.ds-tab:not(.active):hover { border-color: var(--dark); color: var(--dark); }

.ds-panel { display: none; }
.ds-panel.active { display: block; }
.ds-panel[hidden] { display: none; }

/* 4-step process — real grid, so columns stay equal and wrap predictably */
.ds-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 34px);
  max-width: 1000px;
  margin: clamp(28px, 4vw, 44px) auto clamp(32px, 5vw, 52px);
  text-align: left;
}
.ds-proc-col {
  min-width: 0;
  cursor: default;
  border-radius: 12px;
  padding: 4px;
  margin: -4px;
  transition: background 0.25s;
}
.ds-proc-col:hover { background: rgba(255,126,70,0.07); }
.ds-proc-col:hover .ds-proc-num {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.ds-proc-col:hover .ds-proc-title { color: var(--orange); }
.ds-proc-col:hover .ds-proc-desc  { color: var(--dark80); }
.ds-proc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.ds-proc-num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(20,21,26,0.28);
  font-size: 11px;
  font-weight: 600;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.ds-proc-num--active { background: var(--orange); border-color: var(--orange); color: #fff; }
.ds-proc-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.25s;
}
.ds-proc-desc {
  font-size: 13px;      /* was 11px — unreadable on mobile */
  line-height: 1.6;
  color: var(--dark60);
  transition: color 0.25s;
}

/* Belt-and-braces: no stylesheet can put markers back on these */
.ds-process, .ds-process > *, .about-needs, .nav-menu, .footer-nav {
  list-style: none !important;
}

/* Graphics row */
.ds-graphics-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  max-width: 1000px;
  margin: 0 auto clamp(28px, 4vw, 44px);
}
.ds-graphic-item {
  border-radius: 14px;
  border: 1px solid rgba(20,21,26,0.10);
  background: rgba(20,21,26,0.04);
  overflow: hidden;
  aspect-ratio: 4 / 5;   /* uniform tiles regardless of source image size */
}
.ds-graphic-item img { width: 100%; height: 100%; object-fit: cover; }

.ds-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--dark60);
}
.ds-note-dot { color: var(--orange); }


/* ══════════════════════════════════════════════
   ABOUT
══════════════════════════════════════════════ */
.about-section {
  background: var(--dark);
  padding-block: var(--sec-y);
}

.about-card {
  max-width: 1100px;
  margin-inline: auto;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 4.5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 340px);
  gap: var(--gap-lg);
  align-items: center;
}

.about-copy { min-width: 0; }

.about-body {
  color: #FFFFFF;                 /* was 82% grey — hard to read on the dark card */
  font-size: clamp(14.5px, 1.6vw, 16px);
  line-height: 1.8;
  margin-bottom: 20px;
  text-align: left;               /* justify created rivers on narrow columns */
  overflow-wrap: break-word;
}
.about-tagline {
  color: var(--white);
  font-size: clamp(15px, 1.6vw, 16.5px);
  font-weight: 600;
  margin-bottom: 14px;
}
.about-needs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px clamp(16px, 2.4vw, 28px);
  margin-bottom: clamp(22px, 3vw, 30px);
}
.about-needs span {
  color: rgba(255,255,255,0.92);
  font-size: clamp(13.5px, 1.4vw, 14.5px);
}

/* signature is an <img>, so size it — it was styled as text before */
.about-signature {
  width: clamp(130px, 16vw, 180px);
  height: auto;
  opacity: 0.85;
  margin-bottom: clamp(20px, 3vw, 32px);
}

/* Stats block: was cramped against the labels and floating too far from the copy */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3.4vw, 44px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.stat { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.stat-num {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-num sup,
.stat-num small {
  font-size: 0.62em;
  font-weight: 700;
  color: var(--orange);
  vertical-align: baseline;
}
.stat-label {
  font-size: clamp(8.5px, 1vw, 9.5px);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  line-height: 1.55;
}

.about-globe { display: grid; place-items: center; }
.about-globe svg { width: 100%; max-width: 340px; height: auto; }


/* ══════════════════════════════════════════════
   PORTFOLIO PREVIEW
══════════════════════════════════════════════ */
.portfolio-section {
  background: var(--light);
  padding-block: var(--sec-y);
}
.section-eyebrow {
  display: block;
  font-size: 13px;
  font-style: italic;
  color: var(--dark60);
  margin-bottom: 12px;
}
.portfolio-heading {
  font-size: clamp(28px, 4.4vw, 52px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin-bottom: clamp(30px, 5vw, 52px);
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-bottom: clamp(28px, 4vw, 44px);
}
.portfolio-item { min-width: 0; }
.portfolio-img-link { display: block; margin-bottom: 16px; }
.portfolio-img-box {
  width: 100%;
  aspect-ratio: 4 / 5;    /* was a hard 420px — broke at every other width */
  background: var(--gray);
  border-radius: 12px;
  transition: transform 0.3s;
}
.portfolio-img-link:hover .portfolio-img-box { transform: translateY(-5px); }
.portfolio-meta h3 {
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: 600;
  margin-bottom: 10px;
}
.portfolio-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-outline {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid rgba(20,21,26,0.28);
  border-radius: 50px;
}
.portfolio-cta { text-align: center; }
.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1.5px solid rgba(20,21,26,0.3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 13px 32px;
  border-radius: 50px;
  transition: background 0.25s, color 0.25s;
}
.btn-outline-dark:hover { background: var(--dark); color: var(--white); }


/* ══════════════════════════════════════════════
   MARQUEE  (needs TWO .marquee-inner in the HTML)
══════════════════════════════════════════════ */
.marquee-strip {
  background: var(--dark);
  padding-block: 20px;
  overflow: hidden;
  border-block: 1px solid var(--white06);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 28s linear infinite;
}
.marquee-inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  padding-right: clamp(20px, 3vw, 36px);
  white-space: nowrap;
}
.marquee-inner span {
  font-size: clamp(11px, 1.3vw, 12.5px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}
.marquee-inner .msep { color: var(--orange); letter-spacing: 0; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-strip:hover .marquee-track { animation-play-state: paused; }


/* ══════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════ */
.testimonials-section {
  background: var(--light);
  padding-block: var(--sec-y) var(--sec-y-sm);
}
.testimonials-heading {
  font-size: clamp(24px, 3.8vw, 46px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
  margin-bottom: clamp(28px, 4.5vw, 48px);
}
.testimonials-wrapper {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 16px);
}
.testimonials-viewport { flex: 1; overflow: hidden; min-width: 0; }
.testimonials-track {
  display: flex;
  gap: var(--t-gap);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Card width derives from --tv, so the JS and CSS can never disagree */
.t-card {
  flex: 0 0 calc((100% - (var(--tv) - 1) * var(--t-gap)) / var(--tv));
  min-width: 0;
}

.t-arrow {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(20,21,26,0.28);
  font-size: 17px;
  display: grid;
  place-items: center;
  transition: background 0.22s, color 0.22s, border-color 0.22s, opacity 0.22s;
}
.t-arrow:hover:not(:disabled) { background: var(--dark); color: var(--white); border-color: var(--dark); }
.t-arrow:disabled { opacity: 0.3; cursor: default; }


/* ══════════════════════════════════════════════
   SERVICES GRID
══════════════════════════════════════════════ */
.services-section {
  background: var(--light);
  padding-block: 0 var(--sec-y);   /* flows straight out of testimonials */
}
.services-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark30);
  margin-bottom: 10px;
}
.services-heading {
  font-size: clamp(28px, 5vw, 60px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin-bottom: clamp(28px, 4.5vw, 48px);
}
.services-heading em {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  color: var(--orange);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.service-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--light);
  border: 1.5px solid rgba(20,21,26,0.35);   /* 3px read as heavy at card size */
  border-radius: 14px;
  padding: clamp(22px, 3vw, 32px) clamp(20px, 2.6vw, 28px);
  transition: background 0.22s, border-color 0.22s, transform 0.22s;
}
.service-card:hover {
  background: #EFEBDD;
  border-color: rgba(20,21,26,0.2);
  transform: translateY(-3px);
}
.svc-icon {
  width: 36px; height: 36px;
  color: var(--dark);
  opacity: 0.6;
  margin-bottom: 16px;
}
.svc-icon svg { width: 100%; height: 100%; }
.svc-title {
  font-size: clamp(15.5px, 1.8vw, 17px);
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 9px;
}
.svc-desc {
  font-size: clamp(12.5px, 1.4vw, 13.5px);
  line-height: 1.7;
  color: var(--dark60);   /* was an invalid `(0,0,0,1)` value */
}


/* ══════════════════════════════════════════════
   CTA
══════════════════════════════════════════════ */
.cta-section {
  background: var(--light);
  padding-block: 0 var(--sec-y);
}
.cta-box {
  position: relative;
  overflow: hidden;        /* keeps the asterisk from causing sideways scroll */
  border-radius: var(--radius-lg);
  background: var(--gray);
  padding: clamp(32px, 5vw, 66px) clamp(24px, 5vw, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
}
.cta-asterisk {
  position: absolute;
  bottom: -18px;
  left: -18px;
  width: clamp(56px, 8vw, 88px);
  height: clamp(56px, 8vw, 88px);
  opacity: 0.5;
  pointer-events: none;
  animation: rotateAsterisk 14s linear infinite;
}
.cta-asterisk img { width: 100%; height: 100%; object-fit: contain; }
@keyframes rotateAsterisk { to { transform: rotate(360deg); } }

.cta-content { flex: 1; min-width: 0; }
.cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  flex-shrink: 0;
}
.cta-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--dark);
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: clamp(14px, 2vw, 20px);
}
.cta-heading {
  font-size: clamp(24px, 3.8vw, 50px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.cta-heading em { font-family: 'IBM Plex Serif', serif; font-style: italic; }
.cta-sub {
  font-size: clamp(13px, 1.5vw, 14px);
  line-height: 1.65;
  max-width: 44ch;
}
.btn-audit,
.btn-work-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1.5px solid rgba(20,21,26,0.4);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 50px;
  white-space: nowrap;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn-audit:hover,
.btn-work-link:hover { background: var(--dark); color: var(--white); border-color: var(--dark); }


/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
.footer {
  position: relative;
  background: var(--dark);
  padding-block: clamp(56px, 9vw, 120px) clamp(32px, 4vw, 60px);
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: clamp(44px, 7vw, 80px) clamp(44px, 7vw, 80px);
  pointer-events: none;
}
.footer .container { position: relative; z-index: 1; }

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
  margin-bottom: clamp(40px, 6vw, 80px);
}
.footer-headline {
  font-size: clamp(36px, 7vw, 80px);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.025em;
  line-height: 0.96;
  margin-bottom: clamp(18px, 2.5vw, 26px);
}
.footer-contacts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.footer-contacts a {
  color: var(--white85);
  font-size: clamp(14px, 1.6vw, 16px);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s;
}
.footer-contacts a:hover { color: var(--white); }
.fc-sep { color: var(--white20); }

.footer-right { min-width: 0; }
.fnl-label {
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.fnl-sub { color: rgba(255,255,255,0.7); font-size: 14.5px; margin-bottom: 20px; }
.newsletter-form {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.22);
  padding-bottom: 10px;
}
.nl-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--white);
  font-size: 16px;   /* 16px stops iOS zooming in on focus */
  padding-block: 6px;
}
.nl-input::placeholder { color: var(--white40); }
.nl-btn {
  color: var(--orange);
  font-size: 26px;
  line-height: 1;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.nl-btn:hover { transform: translateX(4px); }
.nl-msg {
  font-size: 12.5px;
  color: var(--orange);
  margin-top: 10px;
  min-height: 1em;
}

.footer-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin-bottom: clamp(22px, 3vw, 36px);
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 24px);
}
.footer-logo img { height: 34px; width: auto; }
.footer-copy { font-size: 13px; color: rgba(255,255,255,0.62); }
.footer-nav { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.5vw, 28px); }
.footer-nav a {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white85);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s;
}
.footer-nav a:hover { color: var(--white); }


/* ══════════════════════════════════════════════
   VIDEO PLAYER
══════════════════════════════════════════════ */
.vid-player {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.vid-player video { width: 100%; height: 100%; object-fit: cover; }
.vid-big-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.28);
  cursor: pointer;
  transition: opacity 0.2s;
}
.vid-big-play.hidden { opacity: 0; pointer-events: none; }
.vid-big-play-btn {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: #1a1a1a;
  font-size: 20px;
  display: grid;
  place-items: center;
  transition: transform 0.18s;
}
.vid-big-play-btn:hover { transform: scale(1.1); }

.vid-controls {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  padding: 24px 10px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.22s;
}
.vid-player:hover .vid-controls,
.vid-player.playing .vid-controls,
.vid-player:focus-within .vid-controls { opacity: 1; }

/* was a fixed 28px box that clipped its own label */
.vid-ctrl {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(255,255,255,0.9);
  font-size: 15px;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}
.vid-ctrl:hover { background: rgba(255,255,255,0.16); color: #fff; }
.vid-progress {
  flex: 1;
  min-width: 0;
  height: 4px;
  background: rgba(255,255,255,0.28);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
.vid-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--orange);
  border-radius: 2px;
  pointer-events: none;
}
.vid-time {
  flex-shrink: 0;
  color: rgba(255,255,255,0.8);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* ══════════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible { opacity: 1; transform: none; }


/* ══════════════════════════════════════════════
   HOMEPAGE RESPONSIVE
   Breakpoints: 1080 / 900 / 720 / 560 / 400
══════════════════════════════════════════════ */

/* ── ≤1080px : nav collapses (6 links + CTA stop fitting here) ── */
@media (max-width: 1080px) {
  .hamburger { display: flex; }
  .btn-started-wrap { display: none; }

  .nav-menu {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    max-height: calc(100svh - var(--nav-h));
    overflow-y: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    background: var(--dark);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 8px var(--gutter) 28px;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
  }
  .nav-menu.open { opacity: 1; visibility: visible; transform: none; }

  .nav-menu li { border-bottom: 1px solid rgba(255,255,255,0.07); }
  .nav-link {
    display: block;
    width: 100%;
    padding: 16px 0;         /* full-width tap targets */
    font-size: 13px;
    border-bottom: none;
    color: rgba(255,255,255,0.75);
  }
  .nav-link.active { color: var(--orange); }

  /* CTA moves into the drawer instead of vanishing on mobile */
  .nav-menu-cta { display: block; border-bottom: none; margin-top: 20px; }
  .btn-started-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    background: var(--orange);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    border-radius: 50px;
  }

  .about-card { grid-template-columns: minmax(0, 1fr) clamp(200px, 30vw, 280px); }
}

/* ── ≤900px ── */
@media (max-width: 900px) {
  :root { --tv: 2; }

  .about-card { grid-template-columns: 1fr; }
  .about-globe { justify-self: start; }
  .about-globe svg { max-width: 240px; }

  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ds-process       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-graphics-row  { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer-top { grid-template-columns: 1fr; }
}

/* ── ≤720px ── */
@media (max-width: 720px) {
  .cta-box {
    flex-direction: column;
    align-items: flex-start;
  }
  .cta-actions {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .btn-audit, .btn-work-link { flex: 1 1 auto; }

  .ds-services-label { display: none; }
  .ds-circle-text { width: 76px; height: 76px; }

  /* touch devices can't hover, so controls stay up */
  .vid-controls { opacity: 1; }
}

/* ── ≤560px ── */
@media (max-width: 560px) {
  :root { --tv: 1; --t-gap: 14px; }

  .portfolio-grid { grid-template-columns: 1fr; }
  .services-grid  { grid-template-columns: 1fr; }
  .ds-graphics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .about-card  { padding: 24px 20px; }

  /* one card fills the viewport, so cap the video height on tall phones */
  .vid-player { aspect-ratio: 9 / 14; max-height: 72svh; margin-inline: auto; max-width: 340px; }

  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-contacts { flex-direction: column; align-items: flex-start; gap: 4px; }
  .fc-sep { display: none; }

  .cta-actions { flex-direction: column; }
  .btn-audit, .btn-work-link { width: 100%; }
}

/* ── ≤400px ── */
@media (max-width: 400px) {
  .ds-process      { grid-template-columns: 1fr; }
  .ds-graphics-row { grid-template-columns: 1fr; }
  .about-stats     { grid-template-columns: 1fr; }
  .testimonials-wrapper { gap: 6px; }
  .t-arrow { width: 38px; height: 38px; font-size: 15px; }
}

/* ── Landscape phones: hero shouldn't demand a full tall screen ── */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: 72px; }
  .hero-scroll-indicator { display: none; }
  .nav-menu { max-height: calc(100svh - var(--nav-h)); }
}

/* ── Respect reduced-motion preferences ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track,
  .ds-circle-text,
  .cta-asterisk,
  .hero-scroll-indicator { animation: none !important; }
  .globe-meridians { display: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ── Print ── */
@media print {
  .navbar, .marquee-strip, .hero-scroll-indicator, .t-arrow, .vid-controls { display: none !important; }
  body { padding-top: 0; background: #fff; color: #000; }
}


/* ══════════════════════════════════════════════
   SUB-PAGE STYLES
   Unchanged in behaviour — only the overflow /
   double-padding / tap-target defects are fixed.
   NOTE: hero blocks no longer add their own 64px
   top padding; <body> now reserves the navbar.
══════════════════════════════════════════════ */

/* ── WORK / SERVICES PAGE ── */
@keyframes servicesRise {
  from { transform: translateY(60%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.svc-hero { position: relative; z-index: 0; background: var(--dark); overflow-x: clip; }
.svc-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: clamp(44px, 7vw, 80px) clamp(44px, 7vw, 80px);
  pointer-events: none;
}
.svc-hero-title {
  position: relative; z-index: 1;
  font-size: clamp(56px, 17vw, 210px);
  font-weight: 500; color: var(--orange);
  letter-spacing: -0.02em; line-height: 0.9;
  text-align: center; padding-top: 24px;
  user-select: none;
  overflow-wrap: anywhere;   /* nowrap used to overflow the viewport on phones */
  animation: servicesRise 1.1s cubic-bezier(0.22,1,0.36,1) both;
}
.svc-cards-wrap {
  position: relative; z-index: 2;
  background: var(--dark);
  padding: 0 var(--gutter) var(--sec-y-sm);
  margin-top: calc(-0.18 * clamp(56px, 17vw, 210px));
}
.svc-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 28px);
  align-items: start;
  max-width: 960px;
  margin: 0 auto 12px;
  background: var(--light);
  border-radius: 18px;
  padding: clamp(22px, 3vw, 32px);
}
.svc-card:last-child { margin-bottom: 0; }
.svc-card-title {
  font-size: clamp(22px, 4vw, 56px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.05;
  margin-bottom: 18px;
}
.svc-card-divider { height: 1px; background: var(--dark); }
.svc-sub-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-block: 12px;
  border-bottom: 1px solid var(--dark);
}
.svc-sub-name {
  font-size: clamp(14px, 1.8vw, 18px); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s;
}
.svc-sub-arrow { flex-shrink: 0; font-size: 15px; transition: transform 0.22s, color 0.2s; }
.svc-sub-row:hover .svc-sub-name  { color: var(--orange); }
.svc-sub-row:hover .svc-sub-arrow { transform: translateX(5px); color: var(--orange); }
.svc-card-img { width: 100%; aspect-ratio: 4 / 3; background: var(--gray); border-radius: 12px; }

@media (max-width: 720px) {
  .svc-card { grid-template-columns: 1fr; }
  .svc-card-img { aspect-ratio: 16 / 9; }
}

/* ── CONTACT PAGE ── */
.ct-hero { position: relative; background: var(--dark); padding-bottom: var(--sec-y-sm); }
.ct-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: clamp(44px, 7vw, 80px) clamp(44px, 7vw, 80px);
  pointer-events: none;
}
.ct-hero-content { position: relative; z-index: 1; text-align: center; padding-top: clamp(40px, 7vw, 64px); }
.ct-hero-tag { color: rgba(255,255,255,0.55); font-size: 13px; letter-spacing: 0.05em; margin-bottom: 18px; }
.ct-hero-heading {
  font-size: clamp(32px, 6vw, 76px);
  font-weight: 600; color: var(--white);
  line-height: 1.16; letter-spacing: -0.025em; margin-bottom: 22px;
}
.ct-hero-heading em { display: block; font-family: 'IBM Plex Serif', serif; font-style: italic; }
.ct-hero-sub {
  color: rgba(255,255,255,0.65);
  font-size: clamp(14px, 1.6vw, 15px);
  max-width: 46ch; margin: 0 auto clamp(28px, 5vw, 48px); line-height: 1.65;
}
.ct-contact-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: clamp(14px, 3vw, 24px);
  max-width: 740px; margin-inline: auto;
}
.ct-contact-info { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.ct-info-item { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.82); font-size: 14px; }
.ct-info-sep { color: rgba(255,255,255,0.22); font-size: 18px; }
.ct-social-icons { display: flex; align-items: center; gap: 14px; }
.ct-social-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;   /* was a bare icon — too small to tap */
  opacity: 0.65; transition: opacity 0.2s;
}
.ct-social-icon:hover { opacity: 1; }

.ct-form-section { background: var(--dark); padding-bottom: var(--sec-y); }
.ct-form-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
  background: var(--light);
  border-radius: 28px;
  padding: clamp(24px, 4vw, 48px);
}
.ct-form-img { background: var(--gray); border-radius: 18px; aspect-ratio: 3 / 4; }
.ct-form-asterisk {
  width: clamp(52px, 7vw, 72px); aspect-ratio: 1;
  margin-bottom: 12px;
  animation: spinRing 8s linear infinite;
}
.ct-form-asterisk img { width: 100%; height: 100%; object-fit: contain; }
.ct-form-title {
  font-size: clamp(28px, 4.4vw, 70px);
  font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 6px;
}
.ct-form-sub { font-size: 14px; color: var(--dark80); margin-bottom: 20px; }
.ct-form-divider { height: 1px; background: var(--dark80); margin-bottom: 28px; }
.ct-field { margin-bottom: 20px; }
.ct-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.ct-input {
  width: 100%;
  border: 1.5px solid rgba(20,21,26,0.15);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;   /* 16px prevents the iOS auto-zoom on focus */
  background: var(--white);
  outline: none;
  transition: border-color 0.2s;
}
.ct-input:focus { border-color: var(--orange); }
.ct-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ct-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2314151a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 36px;
}
.ct-btn-submit {
  display: block; width: 100%; min-height: 48px;
  background: var(--orange); color: var(--white);
  border-radius: 8px; padding: 14px 24px;
  font-size: 15px; margin: 8px 0 14px;
  transition: opacity 0.2s;
}
.ct-btn-submit:hover { opacity: 0.88; }
.ct-form-success { margin-top: 14px; font-size: 13px; font-weight: 600; color: #2a7a2a; text-align: center; }

@media (max-width: 860px) { .ct-form-card { grid-template-columns: 1fr; } .ct-form-img { aspect-ratio: 16 / 10; } }
@media (max-width: 560px) {
  .ct-field-row { grid-template-columns: 1fr; }
  .ct-contact-row, .ct-contact-info { flex-direction: column; align-items: center; text-align: center; }
  .ct-info-sep { display: none; }
}

/* ── PORTFOLIO / WORK GRID PAGE ── */
.wk-hero { position: relative; background: var(--dark); }
.wk-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: clamp(44px, 7vw, 80px) clamp(44px, 7vw, 80px);
  pointer-events: none;
}
.wk-hero-content { position: relative; z-index: 1; text-align: center; padding-top: clamp(44px, 7vw, 72px); }
.wk-hero-heading {
  font-size: clamp(32px, 6vw, 76px);
  font-weight: 400; color: var(--white);
  line-height: 1.14; letter-spacing: -0.025em;
  margin-bottom: clamp(28px, 5vw, 48px);
}
.wk-filter-bar {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px;
  margin-bottom: clamp(24px, 4vw, 40px);
}
.wk-pill {
  min-height: 40px;
  border: 1.5px solid rgba(255,255,255,0.28);
  border-radius: 50px;
  padding: 8px 22px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.09em;
  color: var(--white); background: transparent;
  transition: border-color 0.2s, background 0.2s;
}
.wk-pill:hover, .wk-pill.active { border-color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.07); }
.wk-divider { display: flex; align-items: center; }
.wk-divider-line { flex: 1; height: 2px; background: rgba(255,255,255,0.12); }
.wk-divider-plus { width: 44px; text-align: center; color: rgba(255,255,255,0.4); font-size: 20px; line-height: 3; }

.wk-portfolio { background: var(--light); border-radius: 40px 40px 0 0; padding-block: var(--sec-y-sm) var(--sec-y); }
.wk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 36px) var(--gap); }
.wk-item { display: flex; flex-direction: column; gap: 14px; min-width: 0; transition: opacity 0.25s; }
.wk-img { width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; }
.wk-img img { width: 100%; height: 100%; object-fit: cover; }
.wk-label { font-size: clamp(16px, 2vw, 20px); font-weight: 500; line-height: 1.45; }

@media (max-width: 900px) { .wk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wk-grid { grid-template-columns: 1fr; } .wk-pill { padding: 8px 16px; font-size: 10.5px; } }


/* ══════════════════════════════════════════════
   CASE STUDIES (shared shell)
   Same class names as before; the fixed-width and
   100vw rules that caused sideways scroll are gone.
══════════════════════════════════════════════ */
.case-page { background: var(--dark); }
.case-hero {
  position: relative;
  display: grid; place-items: center;
  min-height: clamp(300px, 45vw, 520px);
  background: var(--dark);
  overflow: hidden;
}
.case-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: clamp(40px, 6vw, 72px) clamp(40px, 6vw, 72px);
}
.case-hero h1 {
  position: relative;
  color: var(--light);
  font-size: clamp(38px, 7.5vw, 96px);
  font-weight: 400; line-height: 0.95;
  letter-spacing: -0.045em; text-align: center;
  padding-inline: var(--gutter);
}
.case-study {
  position: relative; z-index: 2;
  background: var(--light);
  border-radius: clamp(18px, 3vw, 42px);
  padding-block: clamp(48px, 8vw, 110px) clamp(44px, 7vw, 88px);
}
.case-container { width: min(1120px, 100% - 2 * var(--gutter)); margin-inline: auto; }

.case-intro { text-align: center; }
.case-intro h2 {
  font-size: clamp(26px, 4.2vw, 56px);
  font-weight: 650; line-height: 1.13; letter-spacing: -0.035em;
  margin-bottom: 16px;
}
.case-intro > p { font-size: clamp(14px, 1.8vw, 18px); color: var(--dark60); }
.case-problems {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap); margin: 28px 0 30px;
  text-align: left; font-size: clamp(13px, 1.6vw, 16px);
}
.case-media { background: transparent; border: none; overflow: hidden; }
.case-media img { width: 100%; height: auto; }
.case-media--overview { aspect-ratio: 2.75 / 1; }
.case-summary { margin: 38px auto 55px; line-height: 1.35; }

.case-about-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-lg); align-items: start; margin-bottom: 40px;
}
.case-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; margin-bottom: 14px;
}
.case-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--dark); }
.case-about-copy h2 {
  font-size: clamp(30px, 4.6vw, 66px);
  font-weight: 400; line-height: 0.95; letter-spacing: -0.04em; margin-bottom: 28px;
}
.case-about-copy h2 em { font-family: 'IBM Plex Serif', serif; font-style: italic; font-weight: 600; }
.case-about-copy p, .case-challenge-copy p, .case-challenge-copy li,
.case-strategy p, .case-strategy li, .case-result li { font-size: clamp(14px, 1.6vw, 16px); line-height: 1.5; }
.case-about-copy p + p { margin-top: 28px; }
.case-challenge-copy h3, .case-strategy h3, .case-result h3 { font-size: 16px; font-weight: 700; margin-bottom: 7px; }
.case-challenge-copy h3:not(:first-child) { margin-top: 28px; }
.case-challenge-copy ul, .case-phases ul, .case-result ul { padding-left: 22px; list-style: disc; }
.case-challenge-copy li + li { margin-top: 4px; }
.case-media--website { aspect-ratio: 1.88 / 1; margin-bottom: 52px; }
.case-strategy-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-lg); margin-bottom: 34px; }
.case-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-lg); margin-bottom: 44px; }
.case-results-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 50px; }
.case-result ul { margin-bottom: 18px; }
.case-result-btn {
  display: inline-flex; align-items: center; gap: 16px;
  min-height: 44px;
  border: 1px solid var(--dark); border-radius: 50px;
  padding: 9px 18px; font-size: 11px; font-weight: 500;
}
.case-result-btn span {
  width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 50%; background: var(--dark); color: var(--white);
}
.case-result small { display: block; font-size: 10px; margin-top: 8px; }

/* Generic image frames inside case studies */
[class$="-img"], [class$="-image"] { overflow: hidden; }
[class$="-img"] > img, [class$="-image"] > img { width: 100%; height: auto; }

/* Uniform thumbnail grids */
.sewa-posts-grid, .akua-posts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.akua-product-pair, .hospitality-identity-photos, .sterling-campaign-pair,
.tea-before-after, .akua-content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.karuna-ugc-grid, .education-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sewa-posts-grid .case-media, .akua-posts-grid .case-media,
.karuna-ugc-grid .case-media, .education-gallery .case-media {
  aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden;
}
.karuna-ugc-grid .case-media, .education-gallery .case-media { aspect-ratio: 3 / 4; }
.sewa-posts-grid .case-media img, .akua-posts-grid .case-media img,
.karuna-ugc-grid .case-media img, .education-gallery .case-media img {
  width: 100%; height: 100%; object-fit: cover;
}

/* Label / value detail blocks */
.sewa-brief, .akua-brief, .education-brief, .hospitality-details,
.sterling-obj-brief, .tea-obj-challenge, .sharda-obj-challenge, .karuna-brief-grid {
  display: grid;
  grid-template-columns: minmax(90px, 140px) minmax(0, 1fr);
  gap: 22px clamp(20px, 3vw, 48px);
  margin-block: clamp(28px, 4vw, 48px);
}
.sewa-label, .akua-label, .hospitality-label, .education-brief > strong {
  font-size: 13px; font-weight: 700; line-height: 1.4;
}
.sewa-brief p, .akua-brief p, .education-brief p, .education-brief li,
.hospitality-details p, .sterling-obj-brief li, .tea-obj-challenge li { font-size: clamp(14px, 1.6vw, 16px); line-height: 1.55; }
.sewa-brief ul, .akua-brief ul, .education-brief ul,
.sterling-obj-brief ul, .tea-obj-challenge ul, .sharda-obj-challenge ul,
.education-about ul, .education-execution ul, .corporate-focus-grid ul,
.corporate-outcome-grid ul, .karuna-result ul, .akua-result ul,
.tea-col ul, .tea-result-copy ul, .sterling-focus ul, .sewa-exec-copy ul { list-style: disc; padding-left: 20px; }

/* Two-column brand blocks */
.sewa-about-grid, .akua-about-grid, .education-about-grid,
.sterling-about-grid, .tea-about-grid, .sharda-about-grid,
.karuna-about-grid, .corporate-outcome-grid, .sewa-execution,
.tea-result, .hospitality-brand-block, .hospitality-image-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-lg);
  align-items: start;
}
.corporate-focus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-lg); margin-bottom: 52px; }
.corporate-focus-grid h3, .corporate-outcome-grid h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.corporate-focus-grid li, .corporate-outcome-grid li { font-size: clamp(14px, 1.6vw, 16px); line-height: 1.4; }

/* Stat strips */
.sterling-stats, .sterling-video-stats, .sterling-results-grid {
  display: grid; gap: 8px; text-align: center;
  border-block: 1px solid var(--dark12);
  padding-block: 22px; margin-bottom: clamp(28px, 4vw, 52px);
}
.sterling-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sterling-video-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sterling-results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); border: none; }
.sterling-stat-num { font-size: clamp(22px, 3.2vw, 42px); font-weight: 700; color: var(--orange); line-height: 1; letter-spacing: -0.02em; }
.sterling-stat-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark45); margin-top: 6px; }
.sterling-video-stat-num { font-size: clamp(18px, 2.4vw, 30px); font-weight: 700; line-height: 1; }
.sterling-video-stat-label { font-size: 11px; color: var(--dark45); margin-top: 5px; }
.sterling-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.sterling-chip { background: var(--orange); color: var(--white); font-size: 13px; font-weight: 700; padding: 7px 16px; border-radius: 6px; }

/* Case-study responsive */
@media (max-width: 900px) {
  .case-phases, .corporate-focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sterling-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sterling-video-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .case-about-grid, .case-strategy-head, .case-results-media,
  .sewa-about-grid, .akua-about-grid, .education-about-grid,
  .sterling-about-grid, .tea-about-grid, .sharda-about-grid,
  .karuna-about-grid, .corporate-outcome-grid, .sewa-execution,
  .tea-result, .hospitality-brand-block, .hospitality-image-pair,
  .akua-content-grid, .tea-before-after { grid-template-columns: 1fr; }
  .case-problems { grid-template-columns: 1fr; }
  .karuna-ugc-grid, .education-gallery,
  .sewa-posts-grid, .akua-posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-media--overview { aspect-ratio: 1.65 / 1; }
  .case-media--website { aspect-ratio: 1.4 / 1; }
}
@media (max-width: 560px) {
  .case-phases, .corporate-focus-grid { grid-template-columns: 1fr; }
  .sterling-stats, .sterling-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karuna-ugc-grid { grid-template-columns: 1fr; }
  .sewa-brief, .akua-brief, .education-brief, .hospitality-details,
  .sterling-obj-brief, .tea-obj-challenge, .sharda-obj-challenge,
  .karuna-brief-grid { grid-template-columns: 82px minmax(0, 1fr); gap: 18px 16px; }
  .case-intro h2 br, .case-summary br { display: none; }
}


/* ══════════════════════════════════════════════
   MOBILE HARDENING
   Loaded last so it wins. Fixes the classes of
   problem that show up only on real devices:
   sideways scroll, cramped text, tiny targets.
══════════════════════════════════════════════ */

/* Nothing may push the page wider than the screen */
html, body { max-width: 100%; overflow-x: clip; }

/* Long words / URLs can't force a horizontal scrollbar */
h1, h2, h3, h4, p, li, a, span, .ds-title, .hero-heading,
.footer-headline, .case-hero h1, .svc-hero-title {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;          /* headings never hyphenate; body copy opts in below */
}

/* Any grid child is allowed to shrink below its content width */
.container > *, .case-container > * { min-width: 0; }

@media (max-width: 900px) {
  /* Tighter vertical rhythm — desktop spacing feels cavernous on a phone */
  :root { --sec-y: clamp(48px, 9vw, 72px); --sec-y-sm: clamp(36px, 7vw, 56px); }

  .about-card { gap: clamp(28px, 5vw, 40px); }
  .about-globe { justify-self: center; }
  .about-globe svg { max-width: 220px; opacity: 0.85; }
}

@media (max-width: 720px) {
  /* Topbar: circle + rule only, label already hidden */
  .ds-topbar { gap: 8px; }
  .ds-plus-icon { padding-inline: 8px; }

  /* Headings scale down harder than clamp alone manages */
  .ds-title       { font-size: clamp(26px, 8.5vw, 40px); line-height: 1.08; }
  .hero-heading   { font-size: clamp(30px, 9vw, 46px); }
  .portfolio-heading,
  .services-heading,
  .testimonials-heading { font-size: clamp(24px, 7.5vw, 36px); }
  .cta-heading    { font-size: clamp(22px, 7vw, 32px); }
  .footer-headline{ font-size: clamp(34px, 11vw, 54px); }

  /* Process steps read as a stacked list, not a squeezed grid */
  .ds-process { gap: 22px; }
  .ds-proc-col { padding: 0; margin: 0; }
  .ds-proc-col:hover { background: none; }
  .ds-proc-header { gap: 10px; margin-bottom: 8px; }
  .ds-proc-num { width: 34px; height: 34px; }
  .ds-proc-desc { font-size: 13.5px; }

  /* Cards get breathing room back */
  .service-card { padding: 22px 20px; }
  .svc-title { font-size: 16px; }
  .svc-desc  { font-size: 13.5px; }

  .cta-box { padding: 28px 22px; }
  .cta-sub { margin-bottom: 4px; }

  .about-card { padding: 24px 20px; }
  .about-body { font-size: 15px; line-height: 1.75; }
  .about-signature { width: 130px; }

  /* Full-width tap targets for the main actions */
  .btn-explore, .btn-outline-dark { width: 100%; justify-content: center; }
  .portfolio-cta { display: flex; }
}

@media (max-width: 560px) {
  /* Stats: two columns reads better than three cramped ones */
  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:last-child { grid-column: 1 / -1; }
  .stat-num { font-size: clamp(28px, 9vw, 36px); }
  .stat-label { font-size: 9px; letter-spacing: 0.1em; }

  /* Portfolio thumbnails shorter so the page doesn't feel endless */
  .portfolio-img-box { aspect-ratio: 4 / 3; }
  .portfolio-img-link { margin-bottom: 12px; }

  /* Tags wrap instead of squeezing */
  .tag-outline { font-size: 10.5px; padding: 5px 12px; }

  /* Carousel arrows sit under the video rather than stealing width */
  .testimonials-wrapper { flex-wrap: wrap; justify-content: center; }
  .testimonials-viewport { flex: 1 0 100%; order: 1; }
  .t-arrow { order: 2; margin-top: 18px; }

  .footer-nav { gap: 14px 20px; }
  .footer-copy { font-size: 12px; }
}

@media (max-width: 400px) {
  :root { --gutter: 16px; }
  .about-stats { grid-template-columns: 1fr; }
  .stat:last-child { grid-column: auto; }
  .ds-graphics-row { grid-template-columns: 1fr; }
  .ds-graphic-item { aspect-ratio: 16 / 10; }
  .nav-logo img { height: 28px; }
}

/* Touch devices: hover styling must not stick after a tap */
@media (hover: none) {
  .ds-proc-col:hover { background: none; }
  .ds-proc-col:hover .ds-proc-num { background: transparent; border-color: rgba(20,21,26,0.28); color: var(--dark); }
  .ds-proc-col:hover .ds-proc-num--active { background: var(--orange); border-color: var(--orange); color: #fff; }
  .ds-proc-col:hover .ds-proc-title { color: var(--dark); }
  .ds-proc-col:hover .ds-proc-desc  { color: var(--dark60); }
  .service-card:hover { transform: none; background: var(--light); }
  .portfolio-img-link:hover .portfolio-img-box { transform: none; }
  .btn-started-wrap:hover { transform: none; }
}


/* ══════════════════════════════════════════════
   TYPE & SPACING RESCALE  —  final pass
   The Figma frame is authored at 1440px, so using
   its raw values as clamp maximums rendered far too
   large on real viewports. This block resets the
   whole site to a normal web scale. Layout,
   structure and colour stay as designed.
   Loaded last, so it wins.
══════════════════════════════════════════════ */

:root {
  --maxw    : 1320px;
  --sec-y   : clamp(48px, 6.5vw, 88px);
  --sec-y-sm: clamp(36px, 5vw, 64px);
}

/* ── Global body copy ─────────────────────────── */
body { font-size: 16px; line-height: 1.6; }

/* ── Navigation ───────────────────────────────── */
.nav-link          { font-size: 12px; }
.btn-started       { font-size: 11px; }
.btn-started-circle{ width: 32px; height: 32px; }
.nav-logo img      { height: 30px; }

/* ── Headings: one consistent scale across pages ─ */
.hero-heading        { font-size: clamp(30px, 4.6vw, 60px); line-height: 1.08; }
.ds-title            { font-size: clamp(26px, 4.2vw, 54px); line-height: 1.05; }
.portfolio-heading,
.services-heading,
.testimonials-heading{ font-size: clamp(24px, 3vw, 40px); line-height: 1.16; }
.cta-heading,
.cta-heading { font-size: clamp(22px, 2.9vw, 40px); line-height: 1.14; }
.footer-headline     { font-size: clamp(30px, 4.4vw, 58px); line-height: 1.02; }

/* ── Body text ────────────────────────────────── */
.hero-sub       { font-size: clamp(14px, 1.05vw, 16px); }
.btn-explore { font-size: 11px; padding: 13px 28px; }
.about-body     { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.72; }
.about-needs span { font-size: 14px; }
.ds-proc-desc   { font-size: 13px; }
.ds-proc-title  { font-size: 11px; }
.svc-title      { font-size: 16px; }
.svc-desc       { font-size: 13.5px; }
.cta-sub { font-size: 14px; }
.cta-tag        { font-size: 10px; }
.btn-audit, .btn-work-link, .btn-explore-work,
.btn-outline-dark { font-size: 11px; padding: 12px 24px; }
.stat-num       { font-size: clamp(26px, 3vw, 40px); }
.stat-label     { font-size: 9.5px; }
.portfolio-meta h3 { font-size: 17px; }
.section-eyebrow   { font-size: 13px; }

/* ── Founder block ────────────────────────────── */

/* ── Service list ─────────────────────────────── */

/* ── Marquee ──────────────────────────────────── */
.marquee-strip                    { padding-block: clamp(13px, 1.5vw, 18px); }
.marquee-inner span               { font-size: clamp(11px, 1.05vw, 13px); }
.marquee-strip--orange            { padding-block: clamp(14px, 1.6vw, 22px); }
.marquee-strip--orange .marquee-inner span { font-size: clamp(11px, 1.1vw, 14px); }
.marquee-strip--orange .msep      { height: clamp(18px, 1.9vw, 26px); }

/* ── Footer ───────────────────────────────────── */
.fnl-label        { font-size: clamp(12.5px, 1.05vw, 14px); letter-spacing: 0.08em; }
.fnl-sub          { font-size: 14px; }
.nl-input         { font-size: 16px; }   /* stays 16px so iOS doesn't zoom */
.nl-btn           { font-size: 22px; width: 36px; height: 36px; }
.footer-contacts a{ font-size: clamp(13px, 1.05vw, 15px); font-weight: 500; }
.footer-copy      { font-size: 12.5px; }
.footer-social svg{ width: 18px; height: 18px; }
.footer-logo img  { height: 30px; }

/* ── Mobile ───────────────────────────────────── */
@media (max-width: 720px) {
  .hero-heading { font-size: clamp(27px, 7.4vw, 38px); }
  .ds-title       { font-size: clamp(24px, 7vw, 34px); }
  .portfolio-heading, .services-heading,
  .testimonials-heading { font-size: clamp(22px, 6.2vw, 30px); }
  .cta-heading { font-size: clamp(21px, 6vw, 28px); }
  .footer-headline{ font-size: clamp(28px, 8.5vw, 42px); }
  .about-body { font-size: 15px; line-height: 1.68; }
}

@media (max-width: 400px) {
  .hero-heading { font-size: 26px; }
  .footer-headline { font-size: 28px; }
  .about-body { font-size: 14.5px; }
}




/* ══════════════════════════════════════════════
   ABOUT PAGE  —  single source of truth
   Every .au-hero / .founders / .fi- / .svc-list /
   orange-CTA rule lives here and nowhere else.
   Base rules first, then breakpoints, so a later
   base rule can never beat an earlier media query.
══════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────── */
.au-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(76svh, 600px);
  background: var(--dark);
  overflow: hidden;
}
.au-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(44px, 7vw, 84px) var(--gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.au-hero-heading {
  font-size: clamp(27px, 4.2vw, 54px);
  font-weight: 400;
  color: var(--white);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-bottom: clamp(22px, 3.5vw, 34px);
}
.hero-chevrons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(20px, 3vw, 34px);
  color: rgba(255,255,255,0.5);
}
.hero-chevrons svg { width: 24px; height: 24px; }
.hero-chevrons svg + svg { margin-top: -13px; }
.hero-chevrons svg:nth-child(2) { opacity: 0.6; }
.hero-chevrons svg:nth-child(3) { opacity: 0.35; }

/* ── Founder's note ───────────────────────────── */
.founders-section {
  position: relative;
  z-index: 1;
  margin-top: -36px;
  background: var(--light);
  border-radius: 36px 36px 0 0;
  padding-block: clamp(40px, 6.5vw, 92px) clamp(28px, 4vw, 56px);
}
.founders-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
  gap: clamp(26px, 5vw, 68px);
  align-items: center;
  padding: 0;
}
.founders-copy { min-width: 0; }
.founders-title {
  font-size: clamp(24px, 3.2vw, 42px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #22232D;
  margin-bottom: clamp(14px, 2vw, 24px);
}
.founders-body {
  font-size: clamp(14.5px, 1.1vw, 17px);
  font-weight: 400;
  line-height: 1.7;
  color: #21222B;
}
.founders-body + .founders-body { margin-top: 16px; }

/* Photo cluster — offsets are % of the Figma bounding box (535 × 655) */
.founders-images {
  position: relative;
  width: 100%;
  max-width: 440px;
  justify-self: end;
  aspect-ratio: 535 / 655;
}
.fi-box {
  position: absolute;
  overflow: hidden;
  background: var(--gray);
  border-radius: 20px;
}
.fi-box-1 { left: 10.1%; top: 0;     width: 89.9%; height: 84.6%; }
.fi-box-2 { left: 0;     top: 61.2%; width: 49.9%; height: 38.8%; border: 3px solid var(--light); }
@keyframes spinAsterisk {
  from { transform: rotate(-79.88deg); }
  to   { transform: rotate(280.12deg); }
}
.fi-asterisk {
  position: absolute;
  left: 80.7%; top: 69.9%;
  width: 34%;
  aspect-ratio: 1;
  transform: rotate(-79.88deg);   /* Figma resting angle */
  animation: spinAsterisk 14s linear infinite;
  z-index: 3;
  pointer-events: none;
}
.fi-asterisk img { width: 100%; height: 100%; object-fit: contain; }

/* ── Service list ─────────────────────────────── */
.svc-list-section { background: var(--light); padding-block: clamp(36px, 6vw, 84px); }
.svc-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: clamp(14px, 1.6vw, 22px);
  border-bottom: 1px solid rgba(35,36,45,0.5);
}
.svc-list-row:first-child { border-top: none; }
.svc-list-name {
  font-size: clamp(17px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #23242D;
  transition: color 0.22s;
}
.svc-list-arrow {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: clamp(20px, 1.7vw, 24px);
  height: clamp(20px, 1.7vw, 24px);
  transition: transform 0.24s, color 0.22s;
}
.svc-list-arrow svg { width: 100%; height: 100%; }
.svc-list-row:hover .svc-list-name  { color: var(--orange); }
.svc-list-row:hover .svc-list-arrow { color: var(--orange); transform: translate(4px, -4px); }

/* ── Orange CTA + phone ───────────────────────── */
.cta-box--orange { background: #FF7E46; border-radius: clamp(18px, 2.6vw, 40px); }
.cta-box--orange .cta-tag,
.cta-box--orange .cta-heading,
.cta-box--orange .cta-heading em,
.cta-box--orange .cta-sub,
.cta-box--orange .btn-audit,
.cta-box--orange .btn-explore-work { color: #000; }
.cta-box--orange .cta-tag,
.cta-box--orange .btn-audit,
.cta-box--orange .btn-explore-work { border-color: #000; }
.cta-box--orange .btn-audit:hover,
.cta-box--orange .btn-explore-work:hover { background: #000; color: #FF7E46; border-color: #000; }
.cta-box--orange .cta-heading { font-size: clamp(22px, 2.9vw, 40px); line-height: 1.16; font-weight: 500; }
.cta-box--orange .cta-heading em { font-family: 'Switzer', sans-serif; font-style: italic; font-weight: 500; }
.cta-box--orange .cta-sub { font-size: 14px; }
.about-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 3vw, 28px); }

.cta-box--with-phone {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: clamp(24px, 20vw, 280px);
  overflow: visible;
}
.about-cta-phone {
  position: absolute;
  right: clamp(16px, 4vw, 56px);
  bottom: 0;
  height: 118%;
  width: auto;
  max-width: 38%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.about-cta-phone img { height: 100%; width: auto; object-fit: contain; border-radius: 0; box-shadow: none; }
.cta-box--with-phone .cta-asterisk { display: none; }

/* ══ Breakpoints ══════════════════════════════ */

@media (max-width: 1000px) {
  .cta-box--with-phone { display: block; padding-right: clamp(22px, 5vw, 44px); overflow: clip; }
  .about-cta-phone { display: none; }
  .cta-box--with-phone .cta-asterisk { display: block; }
}

@media (max-width: 900px) {
  .au-hero { min-height: min(66svh, 480px); }
  .founders-card { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 36px); }
  .founders-images { justify-self: start; max-width: 420px; }
}

@media (max-width: 600px) {
  /* Hero sizes to its content instead of demanding most of the screen */
  .au-hero { min-height: auto; }
  .au-hero-content { padding: 52px var(--gutter) 44px; }
  .au-hero-heading { font-size: clamp(25px, 7.2vw, 32px); margin-bottom: 20px; }
  .hero-chevrons svg { width: 20px; height: 20px; }

  .founders-section { border-radius: 24px 24px 0 0; padding-block: 36px 28px; }
  .founders-title { font-size: clamp(22px, 6.4vw, 28px); }
  .founders-body  { font-size: 15px; line-height: 1.68; }

  /* One photo, landscape crop — the portrait ratio was eating a whole screen */
  .founders-images {
    position: relative;
    aspect-ratio: auto;
    max-width: none;
    display: block;
  }
  /* MUST stay positioned — .fi-box > img is absolute and would otherwise
     escape to .founders-section and cover the whole section */
  .fi-box { position: relative; width: auto; height: auto; border-radius: 14px; }
  .fi-box-2, .fi-asterisk { display: none; }

  .svc-list-section { padding-block: 32px; }
  .svc-list-row  { padding-block: 13px; gap: 12px; }
  .svc-list-name { font-size: clamp(16px, 4.8vw, 21px); }

  .cta-box--with-phone { padding: 24px 20px; }
  .cta-box--orange .cta-heading { font-size: clamp(20px, 5.8vw, 26px); }
  .about-cta-btns { flex-direction: column; align-items: stretch; width: 100%; }
  .about-cta-btns a { width: 100%; justify-content: center; }
}


/* ══════════════════════════════════════════════
   RESTORED RULES
   These were removed with the legacy About block
   and not re-added. Keeping them here so there is
   still one definition of each.
══════════════════════════════════════════════ */

/* Orange marquee variant — had lost its background entirely */
.marquee-strip--orange { background: #FE773F; border-color: rgba(255,255,255,0.18); }
.marquee-strip--orange .marquee-inner span { color: var(--white); }
.marquee-strip--orange .msep {
  width: 1px;
  background: rgba(255,255,255,0.5);
  flex-shrink: 0;
  align-self: center;
}

/* Secondary CTA button — was rendering as bare text */
.btn-explore-work {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 24px;
  border: 1.5px solid rgba(20,21,26,0.4);
  border-radius: 50px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn-explore-work:hover { background: var(--dark); color: var(--white); border-color: var(--dark); }

/* Used by work.html / other pages */
.cta-box--about,
.cta-box--svc { display: flex; align-items: flex-end; gap: clamp(24px, 4vw, 48px); }
.cta-box--about .cta-content,
.cta-box--svc .cta-content { flex: 1; min-width: 0; }
.about-cta-actions,
.svc-cta-actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }

@media (max-width: 900px) {
  .cta-box--about, .cta-box--svc { flex-direction: column; align-items: flex-start; }
  .about-cta-actions, .svc-cta-actions { flex-direction: row; flex-wrap: wrap; width: 100%; }
}
@media (max-width: 600px) {
  .about-cta-actions, .svc-cta-actions { flex-direction: column; }
  /* The decorative asterisk clipped badly against the rounded corner */
  .cta-box--with-phone .cta-asterisk,
  .cta-box--orange .cta-asterisk { display: none; }
}


/* ══════════════════════════════════════════════
   TEXT & PHOTO — final corrections
══════════════════════════════════════════════ */

/* Body copy stays ragged-right everywhere */
/* Justified body copy, with hyphenation so the word spacing stays even */
.founders-body,
.about-body {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: wrap;
}
.hero-sub, .svc-desc, .ds-proc-desc, .cta-sub { text-align: left; }

/* On phones the photo shows at its own aspect ratio instead of being
   cropped to a fixed box — nothing gets cut off the sides. */
@media (max-width: 600px) {
  .founders-images .fi-box {
    aspect-ratio: auto;
    height: auto;
    background: transparent;
  }
  .founders-images .fi-box > img {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: inherit;
  }
}


/* ══════════════════════════════════════════════
   MOBILE PHOTO BLOCK — offset fix
   .fi-box-1 keeps `left:10.1%; top:0` from the
   desktop cluster. Switching it to position:relative
   made those offsets SHIFT the element instead of
   place it, pushing the photo right and off-centre.
   Reset the insets and it sits square in the column.
══════════════════════════════════════════════ */
@media (max-width: 600px) {
  .founders-images {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    justify-self: center;
    aspect-ratio: auto;
  }

  .founders-images .fi-box {
    position: relative;
    inset: auto;                /* clears left:10.1% / top:0 */
    left: auto; top: auto; right: auto; bottom: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;
    border: none;
    border-radius: 14px;
    overflow: hidden;
    background: transparent;
  }

  /* Both photos visible on mobile, each at its own aspect ratio */
  .founders-images .fi-box-2 { display: block; width: 78%; }

  .founders-images .fi-box > img {
    position: static;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: inherit;
  }

  /* Keep the spinning asterisk, just out of the way */
  .founders-images .fi-asterisk {
    display: block;
    position: relative;
    left: auto; top: auto;
    align-self: flex-end;
    width: 54px;
    margin-top: 2px;
  }
}