/* Bausteine der Service-Seiten (iPhone mit Story-Ringen, Browser + Handy, Kampagnen-Film).
   Aus dem alten Stylesheet übernommen, unverändert. */

/* ============================================
   Services 01 — the phone: the six steps as
   story rings on an iPhone, the result as the
   profile grid underneath.
   ============================================ */

.feed {
  display: grid;
  gap: 40px;
  padding: 40px 24px;
}
@media (min-width: 900px) {
  .feed { grid-template-columns: 284px minmax(0, 1fr); gap: 80px; padding: 24px 40px 120px; align-items: start; }
}
@media (min-width: 1024px) {
  .feed { padding: 24px 100px 140px; }
}
.feed-phone { display: flex; justify-content: center; }
.feed-arrow { display: none; }

/* ---- iPhone ---- */
.iphone {
  position: relative;
  width: 284px;
  max-width: 100%;
  aspect-ratio: 71.6 / 147.6;
  padding: 4px;
  border-radius: 46px;
  background: linear-gradient(145deg, #5a5954 0%, #2b2a27 42%, #4c4b46 100%);
  box-shadow: 0 34px 60px rgba(23, 23, 20, 0.22), 0 6px 14px rgba(23, 23, 20, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.iphone-btn {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: #3b3a36;
}
.iphone-btn--action, .iphone-btn--up, .iphone-btn--down { left: -2px; }
.iphone-btn--action { top: 15%; height: 4%; }
.iphone-btn--up { top: 22%; height: 8%; }
.iphone-btn--down { top: 32%; height: 8%; }
.iphone-btn--power { right: -2px; top: 27%; height: 13%; }

.iphone-screen {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 6px solid #0a0a09;
  border-radius: 42px;
  background: #fff;
  overflow: hidden;
  color: var(--ink);
}
.iphone-island {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 82px;
  height: 24px;
  margin-left: -41px;
  border-radius: 14px;
  background: #0a0a09;
  z-index: 3;
}
.iphone-status {
  flex: none;
  height: 44px;
  padding: 13px 24px 0;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.iphone-status-icons { display: flex; align-items: center; gap: 5px; height: 14px; }
.iphone-status-icons svg { fill: currentColor; display: block; }
.iphone-home {
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 96px;
  height: 4px;
  margin-left: -48px;
  border-radius: 3px;
  background: var(--ink);
  z-index: 3;
}
.iphone-tabbar {
  flex: none;
  height: 52px;
  padding: 0 6px 12px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #ece9e3;
  background: #fff;
  position: relative;
  z-index: 2;
}
.iphone-tab-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--cream); border: 1.5px solid var(--ink); }

/* ---- Profile inside the phone ---- */
.ig-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 14px 8px;
  font-size: 13px;
}
.ig-prof { flex: none; display: flex; align-items: center; gap: 10px; padding: 2px 14px 10px; }
.ig-avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ink);
  display: grid;
  place-items: center;
}
.ig-avatar svg { width: 16px; height: 16px; fill: var(--cream); }
.ig-bio { display: flex; flex-direction: column; gap: 1px; font-size: 10px; color: var(--soft); }
.ig-bio b { font-size: 12px; color: var(--ink); }

.ig-stories { flex: none; display: flex; gap: 2px; padding: 4px 6px 10px; }
.ig-story {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  text-align: center;
  color: var(--soft);
  transition: color 0.2s var(--ease);
}
.ig-ring {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border-radius: 50%;
  border: 1.5px solid var(--ghost);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.ig-label { display: block; margin-top: 4px; font-size: 8px; letter-spacing: 0.01em; }
.ig-story:hover .ig-ring { border-color: var(--ink); }
.ig-story.is-active { color: var(--ink); }
.ig-story.is-active .ig-ring { border: 2.5px solid var(--ink); box-shadow: inset 0 0 0 3px #fff; transform: scale(1.1); }
.ig-story.is-active .ig-label { font-weight: 700; }
.ig-story:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }

.ig-tabs { flex: none; display: flex; border-top: 1px solid #ece9e3; }
.ig-tabs span { flex: 1; display: grid; place-items: center; height: 28px; color: #b3ada2; border-bottom: 1.5px solid transparent; }
.ig-tabs span.on { color: var(--ink); border-bottom-color: var(--ink); }
.ig-grid {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  align-content: start;
}
.ig-tile {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: flex-end;
  padding: 5px;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-size: cover;
  background-position: center;
}
.ig-tile--img {
  color: #fff;
}
.ig-tile--cream { background: #E9E9E9; color: var(--mid); }
.ig-tile--ghost { background: var(--ghost); color: var(--mid); }
.ig-tile--soft { background: var(--soft); color: #fff; }
.ig-tile--mid { background: var(--mid); color: var(--cream); }
.ig-tile--ink { background: var(--ink); color: var(--cream); }

/* ---- Right side: the active step ---- */
.feed-headline {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 36px;
}
.feed-panels { min-height: 168px; }
.feed-panel { animation: feedIn 0.4s var(--ease); }
.feed-panel[hidden] { display: none; }
@keyframes feedIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.feed-kicker { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); margin-bottom: 10px; }
.feed-title { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 12px; }
.feed-text { font-size: 16px; font-weight: 300; line-height: 1.65; color: var(--mid); max-width: 48ch; margin: 0; }
.feed-nav { display: flex; gap: 10px; margin: 24px 0 56px; }
.feed-nav button {
  border: 1px solid var(--ghost);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 0.2s var(--ease);
}
.feed-nav button:hover { border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .feed-panel { animation: none; }
  .ig-ring { transition: none; }
}

/* ============================================
   Services 02 — Gesamtauftritt: a desktop browser
   (16:10) and an iPhone (71.6 : 147.6) build up
   step by step. Classes .at-2 … .at-6 on the stage
   switch on everything up to that step.
   ============================================ */

.service-section--lead { padding-bottom: 0; }
.gs { padding: 40px 24px; }
@media (min-width: 860px) { .gs { padding: 96px 40px 60px; } }
@media (min-width: 1024px) { .gs { padding: 110px 100px 80px; } }
.gs .feed-headline { margin-bottom: 44px; }

.gs-stage { position: relative; max-width: 1000px; margin-bottom: 72px; }

/* ---- browser ---- */
.gs-browser {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--ghost);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 60px rgba(23, 23, 20, 0.12), 0 6px 14px rgba(23, 23, 20, 0.06);
}
.gs-bar { display: flex; align-items: center; gap: 0.9cqw; height: 5.4cqw; padding: 0 2.2cqw; background: #F3F1EC; border-bottom: 1px solid var(--ghost); }
.gs-bar i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--ghost); }
.gs-url { margin-left: 1.4cqw; width: 30cqw; background: #fff; border-radius: 0.8cqw; padding: 0.7cqw 1.6cqw; font-size: 1.35cqw; color: var(--soft); }
.gs-site { position: absolute; inset: 5.4cqw 0 0 0; }
.gs-live {
  font-style: normal;
  margin-left: 1cqw;
  font-size: 1.1cqw;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--cream);
  border-radius: 20px;
  padding: 0.55cqw 1.3cqw;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.gs-cms {
  margin-left: auto;
  font-size: 1.25cqw;
  font-weight: 700;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 20px;
  padding: 0.6cqw 1.4cqw;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gs-wire { position: absolute; inset: 0; padding: 3cqw; display: grid; gap: 1.6cqw; align-content: start; }
.gs-wire i { display: block; height: 1.6cqw; background: #E8E5DE; border-radius: 0.5cqw; }
.gs-wire i.s { width: 40%; }
.gs-wire i.big { height: 17cqw; border-radius: 1cqw; }
.gs-real { position: absolute; inset: 0; }
.gs-nav { display: flex; align-items: center; justify-content: space-between; padding: 1.8cqw 3cqw; font-size: 1.45cqw; }
.gs-nav b { font-size: 1.7cqw; letter-spacing: -0.02em; }
.gs-nav span { color: var(--soft); }
.gs-pill { font-style: normal; font-size: 1.25cqw; font-weight: 700; background: var(--ink); color: var(--cream); padding: 0.8cqw 1.6cqw; border-radius: 0.8cqw; }
.gs-pill--line { background: transparent; border: 1px solid #4a4943; display: inline-block; }
.gs-hero { display: grid; grid-template-columns: 1.05fr 1fr; margin: 0 3cqw; min-height: 24cqw; background: var(--ink); color: var(--cream); border-radius: 1.4cqw; overflow: hidden; }
.gs-hero-copy { padding: 3.4cqw 3.4cqw; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.1cqw; }
.gs-hero-copy h3 { font-size: 3.6cqw; line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; margin: 0; }
.gs-hero-copy p { font-size: 1.5cqw; color: #A8A296; margin: 0 0 0.6cqw; }
.gs-hero-img { position: relative; background: #3d3c38; }
.gs-hero-img img, .gs-card-img img, .gp-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s var(--ease); }
.gs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8cqw; padding: 2.2cqw 3cqw 0; opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.gs-card { font-size: 1.45cqw; }
.gs-card b { display: block; margin-top: 0.9cqw; font-size: 1.6cqw; letter-spacing: -0.01em; }
.gs-card span { color: var(--soft); font-size: 1.3cqw; }
.gs-card-img { position: relative; aspect-ratio: 16 / 7.4; background: #E8E5DE; border-radius: 1cqw; overflow: hidden; }

/* ---- phone, sized to the real iPhone ratio, scaled from its 284 px design width ---- */
.gs-phone { position: relative; width: 230px; margin: 28px auto 0; aspect-ratio: 71.6 / 147.6; --k: 0.81; }
.gs-phone .iphone { position: absolute; top: 0; left: 0; width: 284px; max-width: none; transform-origin: 0 0; transform: scale(var(--k)); }
@media (min-width: 760px) {
  .gs-browser { width: 84%; }
  .gs-phone { position: absolute; right: 0; bottom: -36px; width: 19%; margin: 0; --k: 0.67; }
}
.gs-live--phone { margin-left: auto; font-size: 8px; padding: 3px 7px; }
.gp-tile { position: relative; aspect-ratio: 1; display: block; background: #EEECE6; overflow: hidden; transition: background 0.5s var(--ease); }
.gs-chip {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 68px;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  background: var(--ink);
  color: var(--cream);
  border-radius: 20px;
  padding: 7px 12px;
  opacity: 0;
  transform: translateX(-50%) translateY(8px) scale(0.9);
  transition: opacity 0.4s var(--ease), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- what is switched on at which step ---- */
.gs-stage:not(.at-2) .gs-real { display: none; }
.gs-stage.at-2 .gs-wire { display: none; }
.gs-stage.at-3 .gs-cards { opacity: 1; transform: none; }
.gs-stage.at-3 .gs-cms { opacity: 1; transform: none; }
.gs-stage.at-3 .gs-hero-img { background: #5a564f; }
.gs-stage.at-4 .gs-hero-img img,
.gs-stage.at-4 .gs-card-img img,
.gs-stage.at-4 .gp-tile--img img { opacity: 1; }
.gs-stage.at-4 .gp-tile--cream { background: #E9E9E9; }
.gs-stage.at-4 .gp-tile--ghost { background: var(--ghost); }
.gs-stage.at-4 .gp-tile--soft { background: var(--soft); }
.gs-stage.at-4 .gp-tile--mid { background: var(--mid); }
.gs-stage.at-4 .gp-tile--ink { background: var(--ink); }
.gs-stage.at-5 .gs-live { opacity: 1; }
.gs-stage.at-6 .gs-chip { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* ---- steps ---- */
.gs-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-step {
  border: 1px solid var(--ghost);
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--soft);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.gs-step b { margin-right: 8px; font-weight: 700; }
.gs-step:hover { border-color: var(--ink); color: var(--ink); }
.gs-step.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.gs-step:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gs-panels { margin-top: 28px; min-height: 150px; }
.gs-nav-btns { margin: 8px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .gs-cards, .gs-cms, .gs-chip, .gs-live, .gp-tile, .gs-hero-img img, .gs-card-img img, .gp-tile img { transition: none; }
}

/* ============================================
   Services 03 — Campaigns & Production: first a
   plain explanation of what a campaign is (definition,
   campaign vs. ongoing content, the six building
   blocks), then an optional example that opens as a
   short story-style film.
   ============================================ */

.pr-occasions { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 28px; }
.pr-occasions li { font-size: 12px; font-weight: 600; border: 1px solid var(--ghost); border-radius: 20px; padding: 8px 14px; color: var(--mid); }

.cc { padding: 40px 24px; }
@media (min-width: 860px) { .cc { padding: 70px 40px 30px; } }
@media (min-width: 1024px) { .cc { padding: 90px 100px 40px; } }
.cc--prod { padding-top: 30px; padding-bottom: 30px; }
.cc-headline { max-width: 20ch; margin-bottom: 28px; }
.cc-lead { max-width: 60ch; font-size: 17px; font-weight: 300; line-height: 1.65; color: var(--mid); margin: 0; }
@media (min-width: 860px) { .cc-lead { font-size: 19px; } }

/* ---- example teaser ---- */
.cx-teaser { display: grid; gap: 28px; align-items: center; margin: 40px 24px; padding: 32px 24px; background: var(--ink); border-radius: 18px; color: var(--cream); }
@media (min-width: 860px) { .cx-teaser { grid-template-columns: 1fr auto; gap: 56px; margin: 70px 40px 30px; padding: 44px 48px; } }
@media (min-width: 1024px) { .cx-teaser { margin: 80px 100px 40px; max-width: 1100px; } }
.cx-teaser .section-label { color: #8d877c; }
.cx-teaser h2 { margin: 0 0 12px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; color: var(--cream); max-width: 20ch; }
.cx-teaser p { margin: 0 0 24px; font-size: 15px; font-weight: 300; color: #a8a296; max-width: 40ch; }
.cx-open { display: inline-flex; align-items: center; gap: 10px; background: var(--cream); color: var(--ink); border-radius: 10px; padding: 13px 20px; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; transition: background 0.2s var(--ease); }
.cx-open:hover { background: #fff; }
.cx-thumb { position: relative; width: 138px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #000; justify-self: start; padding: 0; }
@media (min-width: 860px) { .cx-thumb { width: 170px; } }
.cx-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: transform 0.6s var(--ease); }
.cx-thumb:hover img { transform: scale(1.05); }
.cx-thumb-play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); display: grid; place-items: center; padding-left: 3px; }

/* ---- the story-style viewer ---- */
.cx-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: rgba(11, 11, 10, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cx-modal[hidden] { display: none; }
.cx-close { position: absolute; top: 18px; right: 20px; z-index: 5; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; display: grid; place-items: center; transition: background 0.2s var(--ease); }
.cx-close:hover { background: rgba(255, 255, 255, 0.24); }
.cx-stage { position: relative; height: min(88svh, 800px); aspect-ratio: 9 / 16; max-width: 94vw; border-radius: 20px; overflow: hidden; background: #0b0b0a; color: var(--cream); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5); }
.cx-bars { position: absolute; left: 14px; right: 14px; top: 14px; z-index: 4; display: flex; gap: 5px; }
.cx-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.cx-bars i b { display: block; height: 100%; width: 0; background: #fff; }
.cx-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease); }
.cx-slide.is-on { opacity: 1; }
.cx-slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-slide--clip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 9, 0.45) 0%, rgba(10, 10, 9, 0) 22%, rgba(10, 10, 9, 0) 68%, rgba(10, 10, 9, 0.78) 100%); pointer-events: none; }
.cx-slide--card { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 12%; }
.cx-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #8d877c; }
.cx-slide--card h3 { margin: 0; font-size: clamp(30px, 6.2svh, 52px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; color: #fff; }
.cx-slide--card p { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.55; color: #c9c3b6; max-width: 26ch; }
.cx-slide--card b { font-size: 13px; letter-spacing: 0.14em; color: var(--cream); }
.cx-big { font-size: clamp(38px, 8.4svh, 68px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: #fff; white-space: nowrap; }
.cx-again { align-self: flex-start; margin-top: 12px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 10px; padding: 11px 16px; font-size: 13px; font-weight: 600; color: #fff; pointer-events: auto; transition: border-color 0.2s var(--ease); }
.cx-again:hover { border-color: #fff; }
.cx-slide--end.is-on { pointer-events: auto; }
.cx-cap { position: absolute; left: 20px; right: 20px; bottom: 26px; z-index: 3; font-size: 15px; font-weight: 600; line-height: 1.35; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); pointer-events: none; }
.cx-cap b { display: block; margin-bottom: 3px; font-size: 12px; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.78); }
.cx-nav { position: absolute; top: 46px; bottom: 0; z-index: 2; width: 34%; }
.cx-nav--prev { left: 0; }
.cx-nav--next { right: 0; width: 66%; }
.cx-nav:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.cx-slide--end ~ .cx-nav { }
@media (prefers-reduced-motion: reduce) { .cx-slide, .cx-thumb img { transition: none; } }

/* References with real photos instead of empty dark boxes */
.service-ref-card--photo {
  position: relative;
  overflow: hidden;
  height: 260px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  padding: 22px 24px;
  font-size: 18px;
}
.service-ref-card--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.service-ref-card--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 15, 13, 0) 40%, rgba(15, 15, 13, 0.72));
}
.service-ref-card--photo:hover img { transform: scale(1.04); }
.service-ref-card--photo span, .service-ref-card--photo small { position: relative; z-index: 1; }
.service-ref-card--photo small { font-size: 12px; font-weight: 400; letter-spacing: 0; color: #d9d2c4; }


/* ============================================
   Phones (Services 01 + 02): the interactive part
   (iPhone with story rings / browser + phone with step
   pills) and the text of the chosen step have to be on
   screen together, otherwise tapping does nothing you can see.
   ============================================ */

@media (max-width: 859px) {
  .feed-headline, .gs .feed-headline { margin-bottom: 28px; }

  /* 01: label + headline, then the phone at its real proportions (just smaller), the
     step text right underneath. Back/next sit as round arrows beside the phone, so
     phone + text fit in ~510 pt, also on a non-Max iPhone with Safari's bars. */
  .feed-side { display: contents; }
  .feed-side > .section-label { order: 1; margin-bottom: -20px; }
  .feed-side > .feed-headline { order: 2; margin-bottom: 0; }
  .feed-phone { order: 3; position: relative; height: 386px; align-items: flex-start; }
  .feed-phone .iphone { flex: none; transform: scale(0.66); transform-origin: top center; }
  .feed-phone .ig-ring { width: 40px; height: 40px; font-size: 13px; }
  .feed-phone .ig-story { padding: 6px 0; margin: -6px 0; }
  .feed-phone .ig-label { font-size: 8.5px; letter-spacing: 0; }
  .feed-arrow {
    position: absolute;
    top: 150px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ghost);
    border-radius: 50%;
    background: var(--bg);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    z-index: 2;
  }
  .feed-arrow--prev { left: 0; }
  .feed-arrow--next { right: 0; }
  .feed-side > .feed-panels { order: 4; min-height: 104px; margin-top: -4px; }
  .feed-side > .feed-nav { display: none; }
  .feed { gap: 20px; }

  /* 02: compact stage, the step text, back/next; no pills, the kicker shows the step */
  .gs-stage { margin-bottom: 40px; }
  .gs-steps { display: none; }
  .gs-panels .gs-panel .feed-kicker { display: block; margin-bottom: 6px; }
  .gs-panels { min-height: 130px; margin-top: 8px; }
  .gs-nav-btns { margin-top: 10px; }

  /* step text: kicker is redundant next to the rings / pills */
  .feed-panel .feed-kicker { display: none; }
  .feed-title { margin-bottom: 8px; }
  .feed-text { font-size: 15px; line-height: 1.55; }
  .feed-nav button { padding: 9px 14px; }

  /* one body size (17px) across the top of the service pages */
  .service-detail .page-header-sub, .service-block-text { font-size: 17px; line-height: 1.6; color: var(--mid); }

  /* nothing readable below 14px (mockup contents excluded) */
  .section-label, .eyebrow { font-size: 14px; letter-spacing: 0.16em; }
  .feed-nav button, .outro-link, .footer-logo, .nav-cta { font-size: 14px; }
  .service-ref-card small, .footer-copy, .footer-links a { font-size: 14px; }
}
@media (max-width: 759px) {
  /* Browser and phone overlap like on desktop, so the stage stays small enough
     to see it change while tapping through the steps below. */
  .gs-browser { width: 100%; }
  .gs-phone { position: absolute; right: 12px; bottom: -32px; width: 36%; margin: 0; }
}