/* Linstagrow — desktop (1440 design frame) */

/* Instagram Sans is used when installed locally (or when font files are added to assets/fonts).
   Figtree is the fallback; weight 560 approximates Instagram Sans Medium and resolves to the
   500 face when Instagram Sans is present. */
@font-face {
  font-family: "Instagram Sans";
  font-weight: 400;
  src: local("Instagram Sans"), local("Instagram Sans Regular"), local("InstagramSans-Regular");
}
@font-face {
  font-family: "Instagram Sans";
  font-weight: 500;
  src: local("Instagram Sans Medium"), local("InstagramSans-Medium");
}

:root {
  --display: "Instagram Sans", "Figtree", system-ui, sans-serif;
  --fw-display: 560;
  --text: "Inter", system-ui, sans-serif;
  --gutter: max(56px, calc((100% - 1328px) / 2));
  --dark: #151515;
  --section-y: 80px;      /* vertical padding of light sections (Figma: 100–120px) */
  --section-y-dark: 100px; /* pricing (Figma: 140px) */
  --hero-fs: 64px;        /* hero headline; the rotator scales with it */
  --hero-lh: 72px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--text);
  color: #000;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.fw-500 { font-weight: 500; }
.c-1f { color: #1f1f1f; }
.c-05 { color: #050505; }

/* ---------- Type ---------- */
.h-48, .h-40, .h-32, .h-24 {
  font-family: var(--display);
  font-weight: var(--fw-display);
  color: #000;
}
.h-48 { font-size: 48px; line-height: 56px; letter-spacing: -0.02em; }
.h-48.tight { letter-spacing: -0.06em; }
.h-40 { font-size: 40px; line-height: 46px; letter-spacing: -0.03em; }
.h-32 { font-size: 32px; line-height: 40px; letter-spacing: -0.01em; }
.h-24 { font-size: 24px; line-height: 32px; letter-spacing: -0.013em; }
.sub-20 { font-size: 20px; line-height: 28px; opacity: .72; }
.sub-18 { font-size: 18px; line-height: 28px; opacity: .72; }
.sub-16 { font-size: 16px; line-height: 24px; opacity: .72; }

/* ---------- Icons ---------- */
.i16, .i20, .i24 {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.i16 { width: 16px; height: 16px; }
.i20 { width: 20px; height: 20px; }
.i24 { width: 24px; height: 24px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px 0 20px;
  border-radius: 14px;
  font: 500 14px/20px var(--text);
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease;
}
.btn-dark { background: #191816; color: #fff; }
.btn-black { background: #000; color: #fff; }
.btn-dark:hover, .btn-black:hover { background: #2c2b29; }
.btn-outline { border: .8px solid rgba(17, 17, 17, .12); color: #111; }
.btn-outline .i16 { color: #141b34; }
.btn-outline:hover { border-color: rgba(17, 17, 17, .28); }
.btn-fixed { width: 169px; justify-content: center; }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 8px 15px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #f2f2f7;
  font: 500 14px/20px var(--text);
  color: #1f1f1f;
  white-space: nowrap;
}
.pill--ghost { background: none; box-shadow: inset 0 0 0 1px rgba(116, 116, 128, .08); color: #000; }
.pill--light { color: #fff; }

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

/* ---------- Header ---------- */
.site-header {
  height: 80px;
  padding: 20px var(--gutter) 16px;
}
.header-inner {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
}
.brand-logo {
  position: relative;
  flex: none;
  width: 217px;
  height: 36px;
}
.brand-logo img {
  position: absolute;
  left: -33.14px;
  top: -24px;
  width: 251px;
  height: 98px;
  pointer-events: none;
}
.main-nav { display: flex; gap: 5.6px; }
.main-nav a {
  padding: 10px 13.6px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 24px;
  color: #0b0b0b;
  transition: background-color .2s ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { background: rgba(0, 0, 0, .04); }
.header-cta { flex: none; width: 218px; display: flex; justify-content: flex-end; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The glow is a fixed 1440 wide and bleeds past a narrow viewport, which
     inflates the initial containing block on mobile (window.innerWidth jumps
     to the glow's width). Clip it sideways; it still spills downward. */
  overflow: clip visible;
}
.hero-glow {
  position: absolute;
  z-index: -1;
  top: 182.7px;
  left: 50%;
  width: max(1440px, 100%);
  height: 759.3px;
  transform: translateX(-50%);
  opacity: .54;
  pointer-events: none;
}
.hero-content {
  width: 592px;
  padding: 90px 0 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
}
.hero-top { display: flex; flex-direction: column; align-items: center; gap: 16px; }

.availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 13px 4px 4px;
  border: .6px solid #f2f2f7;
  border-radius: 12px;
  background: #fff;
  font: 500 14px/20px var(--text);
}
.availability-badge {
  padding: 4px 6px;
  border-radius: 8px;
  background: url(../assets/img/gradient-pill.webp) center / cover;
  color: #fff;
}
.availability-badge--book { padding: 4px 8px; }
.availability-text { color: #1a1a1a; opacity: .8; white-space: nowrap; }
.availability-text b { font-weight: 600; letter-spacing: -1px; margin-right: 3px; }

.hero-heading { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--display);
  font-weight: var(--fw-display);
  font-size: var(--hero-fs);
  line-height: var(--hero-lh);
  letter-spacing: -0.02em;
  color: #111;
  text-align: center;
  white-space: nowrap;
}
.hero-line-2 { display: flex; align-items: center; gap: 10px; height: var(--hero-lh); }
.text-gradient-img {
  line-height: 61px;
  letter-spacing: -2.8px;
  padding: 8px 4px;
  margin: -8px -4px;
  background: #fd22a0 url(../assets/img/gradient-text.webp) center / cover;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  width: 536px;
  font-size: 20px;
  line-height: 28px;
  opacity: .72;
  text-align: center;
}

/* CTA group (buttons + social proof) */
.cta-group {
  width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.btn-row { display: flex; gap: 13.6px; }
.social-proof { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 0; }
.stars { width: 79px; height: 16px; opacity: .8; }
.proof-divider { width: 1px; height: 16px; background: #111; opacity: .05; }
.proof-people { display: flex; align-items: center; gap: 8px; }
.avatar-stack { display: flex; --av: 48px; }
.avatar-stack img { width: var(--av); height: var(--av); border-radius: 50%; }
.avatar-stack img + img { margin-left: calc(var(--av) * -0.375); }
.proof-people p { width: 132px; font-size: 12px; line-height: 16px; color: #727272; }

/* ---------- Work strip ---------- */
/* Full-bleed strip that drifts left → right in a seamless loop (driven by main.js).
   Hovering does not stop it; a click pauses/plays, dragging moves it, "View project" opens the design. */
.work {
  position: relative;
  padding: 20px 0 40px;
  overflow-x: clip;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.work.is-dragging { cursor: grabbing; }
.work-track { display: flex; width: max-content; will-change: transform; }
.work-card {
  position: relative;
  flex: none;
  width: 329.96px;
  height: 412px;
  margin-right: 22px;
  border-radius: 5px;
  overflow: hidden;
  background: #f4f4f4;
  transition: transform .35s ease, box-shadow .35s ease;
}
.work-card img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
.work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 .713px rgba(54, 49, 61, .16);
  pointer-events: none;
}
.work-card:hover {
  transform: translateY(-6px);
  box-shadow:
    2px 7px 16px rgba(0, 0, 0, .06),
    6px 28px 29px rgba(0, 0, 0, .05),
    14px 64px 39px rgba(0, 0, 0, .03);
}
.work-open {
  position: absolute;
  z-index: 1;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px 0 14px;
  border-radius: 12px;
  background: #191816;
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
  cursor: pointer;
}
.work-card:hover .work-open, .work-open:focus-visible { opacity: 1; transform: none; }
.work-open:hover { background: #2c2b29; }
.work-open:focus-visible { outline: 2px solid #fd22a0; outline-offset: 3px; }
.work-hint {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .9);
  box-shadow: inset 0 0 0 .8px rgba(17, 17, 17, .08);
  font-size: 12px;
  line-height: 20px;
  color: #56565c;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.work:hover .work-hint, .work.is-paused .work-hint { opacity: 1; }
.work-hint-paused, .work.is-paused .work-hint-play { display: none; }
.work.is-paused .work-hint-paused { display: inline; }

/* ---------- Brands + testimonial ---------- */
.brands {
  padding: var(--section-y) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 96px;
}
.brands-top { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.brands-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  line-height: 30.8px;
  letter-spacing: -0.48px;
  color: #111;
}
.logo-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 20px;
}
.logo-cell {
  height: 146px;
  border-radius: 20px;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quote-block { width: 656px; max-width: 100%; display: flex; flex-direction: column; gap: 24px; }
.quote-text {
  font-family: var(--display);
  font-weight: var(--fw-display);
  font-size: 40px;
  line-height: 46px;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #f6a546 0%, #ef3875 22%, #d62a8a 59%, #8328c1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.q-mark { color: #8e8e93; }
.q-body { color: #111; }

.rule { position: relative; height: 0; }
.rule::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -.5px;
  height: 1px;
  background: #ededed;
}
.quote-author { height: 48px; display: flex; align-items: center; justify-content: space-between; }
.person { display: flex; align-items: center; gap: 12px; }
.person-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.person-photo--square { border-radius: 12px; }
.person-name { font-weight: 500; font-size: 16px; line-height: 24px; color: #000; }
.person-role { margin-top: 1px; font-size: 14px; line-height: 20px; color: #111; opacity: .6; }

/* ---------- Problem ---------- */
.problem {
  padding: var(--section-y) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.problem-cards { display: flex; gap: 32px; }
.problem-card {
  flex: 1 1 0;
  min-width: 0;
  height: 518px;
  border-radius: 54px;
  background: #fafafa;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.problem-card > img { width: 100%; height: 360px; object-fit: cover; }
.problem-card-text {
  padding: 24px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.problem-card-text h3 {
  width: 100%;
  font-family: var(--display);
  font-weight: var(--fw-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.01em;
  text-transform: capitalize;
  white-space: nowrap;
}
.problem-card-text p { font-size: 16px; line-height: 24px; opacity: .72; }
.problem-card-text p.narrow { max-width: 326px; }

/* Text whose highlighted words use the gradient image, mapped across the whole text box */
.text-gradient-img-parent {
  color: #000;
  background: url(../assets/img/gradient-text.webp) center / cover;
  -webkit-background-clip: text;
  background-clip: text;
}
.text-gradient-img-parent .g { color: transparent; }

/* ---------- Services ---------- */
.services {
  padding: var(--section-y) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.services .sub-20 { width: 536px; }
.service-cards { display: flex; align-items: center; justify-content: center; gap: 20px; }
.service-card {
  width: 572px;
  border: 1px solid #f2f2f7;
  border-radius: 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.service-card--filled { background: #f7f7f7; }
.service-card-top {
  padding: 32px 41px 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.service-card-top h3 { margin-bottom: 4px; }
.service-card-media { padding: 0 41px 32px 40px; }

/* ---------- Process ---------- */
.process {
  padding: var(--section-y) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.steps { width: 1200px; max-width: 100%; display: flex; flex-direction: column; gap: 32px; }
.step {
  height: 492px;
  padding: 56px 56px 56px 80px;
  border-radius: 40px;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
}
.step--3 { gap: 64px; }
.step-text {
  flex: 0 1 460px;
  min-width: 0;
  height: 380px;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.step-body { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.step-body h3 { margin-bottom: 8px; }
.step-art { flex: 0 1 548px; min-width: 0; width: 548px; height: auto; aspect-ratio: 548 / 380; }

.step-pill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 8px 15px;
  border-radius: 12px;
  font: 500 14px/20px var(--text);
  color: #fff;
  white-space: nowrap;
}
.step-pill::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  background: url(../assets/img/gradient-pill.webp) 0 0 / 100% 100% no-repeat;
  transform-origin: 0 0;
}
.step-pill--1 { width: 85px; background: rgba(60, 60, 67, .18); }
.step-pill--1::before {
  width: 85px;
  height: 36px;
  transform: matrix(-1.04179, 0.27915, -0.80683, -2.41536, 100.02531, 50.90603);
}
.step-pill--2 { width: 80px; justify-content: center; background: #000; }
.step-pill--2::before {
  width: 80px;
  height: 36px;
  transform: matrix(0.70711, -0.70711, 1.57135, 1.57135, -13.61357, 18.1107);
}
.step-pill--3 { width: 80px; justify-content: center; background: #000; }
.step-pill--3::before { inset: 0; background-size: cover; background-position: center; }

/* ---------- Results ---------- */
.results {
  padding: var(--section-y) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.results-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(120, 120, 128, .16);
  border-radius: 57px;
  overflow: hidden;
}
.result { background: #fafafa; display: flex; flex-direction: column; min-width: 0; }
.result:nth-child(1), .result:nth-child(2) { border-right: 1px solid rgba(120, 120, 128, .16); }
.result:nth-child(3) { border-top: 1px solid rgba(120, 120, 128, .16); }
.result:nth-child(4) { border-top: 1px solid rgba(120, 120, 128, .16); border-left: 1px solid rgba(120, 120, 128, .16); }
.result-top {
  height: 134px;
  padding: 40px 40px 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.stat-value {
  font-family: var(--display);
  font-weight: var(--fw-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.01em;
}
.stat-label { margin-top: 2px; font-size: 18px; line-height: 28px; opacity: .72; }
.stat--hidden { opacity: 0; }
.round-btn {
  width: 56px;
  height: 56px;
  border-radius: 37px;
  background: #fff;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease;
}
.round-btn:hover { transform: rotate(45deg); }
.result-quote {
  height: 220px;
  padding: 24px 40px;
  font-size: 20px;
  line-height: 28px;
  color: #000;
}
.result-quote { padding-right: max(40px, calc(100% - 571px)); }
.result-bottom {
  height: 112px;
  padding: 24px 40px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ---------- Pricing ---------- */
.pricing {
  padding: var(--section-y-dark) var(--gutter);
  background: var(--dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
}
.pricing-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.pricing-title { width: 816px; color: #fff; }
.pricing-sub { width: 736px; font-size: 18px; line-height: 28px; color: #8e8e93; }


.plans { display: flex; align-items: stretch; justify-content: center; gap: 24px; }
.plan {
  position: relative;
  flex: 0 1 400px;
  min-width: 0;
  padding: 40px;
  border-radius: 42px;
  background: rgba(60, 60, 67, .18);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* Popular plan: 5px outside gradient stroke (image fill, Figma crop 70% × 95% centred) */
.plan--popular::before {
  content: "";
  position: absolute;
  inset: -5px;
  padding: 5px;
  border-radius: 47px;
  background: url(../assets/img/gradient-pill.webp) center / cover no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.plan-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.plan-name {
  margin-bottom: 8px;
  font-family: var(--display);
  font-weight: var(--fw-display);
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.013em;
  color: #fff;
}
/* The word that separates the two packages carries the brand gradient. It sits
   on the word itself, not the whole name, so each one gets the full ramp
   rather than whatever slice of it happens to fall behind those letters. */
.plan-name .g {
  background: linear-gradient(90deg, #f6a546 0%, #ef3875 34%, #d62a8a 64%, #8328c1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.plan-desc { width: auto; font-size: 16px; line-height: 24px; color: #8e8e93; }
.price-row { height: 62px; display: flex; align-items: flex-end; gap: 4px; white-space: nowrap; }
.price {
  font-family: var(--display);
  font-weight: var(--fw-display);
  font-size: 48px;
  line-height: 62px;
  letter-spacing: -0.04em;
  color: #fff;
}
.per { padding-bottom: 9px; font: 400 18px/30.6px "Rethink Sans", var(--text); color: #aaa; }
.price-note { margin-top: 1px; font-size: 14px; line-height: 23.1px; letter-spacing: -0.08px; color: #8e8e93; }
.plan-rule { position: relative; width: auto; height: 0; }
.plan-rule::after {
  content: "";
  position: absolute;
  inset: -.5px 0 auto;
  height: 1px;
  background: rgba(60, 60, 67, .3);
}
/* What a package contains, under the price and the button. */
.plan-includes { display: flex; flex-direction: column; gap: 16px; }
.plan-includes-title {
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8e8e93;
}
.plan-features { width: auto; display: flex; flex-direction: column; gap: 14px; }
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
}
/* A solid dot in the brand gradient, centred on the first line of the item. */
.plan-features li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: 8.5px 4px 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #f6a546 0%, #ef3875 50%, #8328c1 100%);
}
.btn-plan {
  width: 100%;
  justify-content: center;
  border: .8px solid rgba(60, 60, 67, .3);
  color: #fff;
}
.btn-plan:hover { border-color: rgba(255, 255, 255, .3); }
.btn-plan--white { border: 0; background: #fff; color: #000; }
.btn-plan--white:hover { background: #ececec; }
/* Enough to clear the badge (it starts 267px in) without pushing the name onto
   a second line (its text is 241px), so both cards' prices stay on one line. */
.plan--popular .plan-name { padding-right: 72px; }
.popular-badge {
  position: absolute;
  right: 24px;
  top: 24px;
  padding: 4px 9px;
  border-radius: 11px;
  background: url(../assets/img/gradient-pill.webp) center / cover;
  font: 500 14px/20px var(--text);
  color: #fff;
}

/* ---------- FAQ ---------- */
.faq {
  padding: var(--section-y) var(--gutter);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.faq-side {
  width: 506px;
  height: 570px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.faq-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.faq-help { width: 362px; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.faq-help h3 { margin-bottom: 8px; color: #191715; }
.faq-list { width: 600px; flex: none; }
.faq-item { background: #fff; box-shadow: inset 0 -1px 0 #ededed; }
.faq-item--last { box-shadow: none; }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 32px;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: #000;
  text-align: left;
}
.faq-icon {
  flex: none;
  width: 24px;
  height: 24px;
  background: url(../assets/icons/icon-plus.svg) center / 24px 24px no-repeat;
}
.faq-item.is-open .faq-icon { background-image: url(../assets/icons/icon-minus.svg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 32px;
  transition: grid-template-rows .3s ease, padding .3s ease, margin .3s ease;
}
.faq-a > p {
  overflow: hidden;
  max-width: 498px;
  font: 400 16px/27.2px "Geist", var(--text);
  color: #373a46;
  opacity: .8;
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; margin-top: -16px; padding-bottom: 28px; }

/* ---------- CTA ---------- */
.cta { padding: var(--section-y) 141px; }
.cta-box {
  position: relative;
  max-width: 1158px;
  height: 490px;
  margin: 0 auto;
  border-radius: 60px;
  background: url(../assets/img/cta-bg.webp) center / 100% 100% no-repeat;
  overflow: hidden;
}
.cta-content {
  width: 592px;
  max-width: 100%;
  margin: 0 auto;
  padding: 90px 0 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.cta-top { width: 536px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cta-heading { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cta-title {
  width: 533px;
  color: #111;
  background: linear-gradient(180deg, #f6a546 0%, #ef3875 22%, #d62a8a 59%, #8328c1 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.cta-title .g { color: transparent; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  height: 745px;
  background: var(--dark);
  color: #fff;
  overflow: hidden;
}
.footer-main { position: relative; z-index: 1; padding: 96px var(--gutter) 0; }
.footer-top { display: flex; gap: 110px; }
.footer-brand { flex: 1 1 0; min-width: 0; }
.footer-logo { position: relative; display: block; width: 145.2px; height: 32px; }
.footer-logo img { position: absolute; left: -28px; top: -24px; width: 174px; height: 88px; pointer-events: none; }
.footer-brand p {
  width: 301px;
  margin-top: 22px;
  font-size: 14px;
  line-height: 23.1px;
  letter-spacing: -0.08px;
  color: #a79eb4;
}
.footer-col { flex: none; width: 200px; }
.footer-col:first-of-type { width: 184px; }
.footer-col-title { font-size: 14px; line-height: 20px; color: #aeaeb2; opacity: .7; }
.footer-col ul { margin-top: 24px; display: flex; flex-direction: column; gap: 13px; }
.footer-col ul.gap-12 { gap: 12px; }
.footer-col a { font-size: 16px; line-height: 24px; color: #fff; transition: opacity .2s ease; }
.footer-col a:hover { opacity: .7; }
.footer-bottom { max-width: 1320px; margin-top: 60px; }
.rule--footer::after { background: rgba(118, 118, 128, .024); }
.footer-bottom-row {
  height: 24px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-bottom-row > p { font-size: 16px; line-height: 24px; }
.socials { display: flex; align-items: center; gap: 20px; font-size: 14px; line-height: 20px; color: #aeaeb2; }
.social-icons { display: flex; gap: 20px; }
.social-icons a { transition: opacity .2s ease; }
.social-icons a:hover { opacity: .7; }
.footer-wordmark {
  position: absolute;
  left: max(0px, calc(50% - 720px));
  top: 332.42px;
  width: 1312px;
  height: 413px;
  pointer-events: none;
}

/* Real client logos, in their own colours. Seven of the eight source files are
   drawn for dark backgrounds (white artwork, or a mark on a black or cream
   box), so assets/img/logos/light/ holds versions remapped for a light cell:
   the achromatic ink flips and the box drops out, while every saturated pixel
   — the actual brand colour — is carried over untouched. See
   scripts/build-light-logos.mjs. */
.client-logo { width: auto; height: auto; max-width: 190px; max-height: 44px; }

/* Screen-reader-only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hero phrase rotator: the current phrase drops out downward and the next drops in from above.
   main.js cycles .is-active / .is-leaving and animates the rotator's width to the active phrase. */
.rotator {
  position: relative;
  display: inline-block;
  height: var(--hero-lh);
  margin: 0 -4px;
  overflow: hidden;
  vertical-align: top;
  transition: width .6s cubic-bezier(.65, 0, .35, 1);
}
.rotator-word.text-gradient-img {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0 4px;
  line-height: var(--hero-lh);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-80%);
  filter: blur(6px);
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .5s ease, filter .5s ease;
}
.rotator-word.is-active { opacity: 1; transform: none; filter: none; }
.rotator-word.is-leaving {
  opacity: 0;
  transform: translateY(80%);
  filter: blur(6px);
  transition: transform .6s cubic-bezier(.64, 0, .78, 0), opacity .45s ease, filter .45s ease;
}
.rotator-word.no-anim { transition: none; }
.rotator.has-cycled .rotator-word.is-active { transition-delay: .15s; }

/* "See her/his designs" link beside a testimonial author */
.see-work {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #111;
  opacity: .7;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.see-work:hover { opacity: 1; }

@keyframes work-marquee {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}
.work:focus-visible { outline: 2px solid #fd22a0; outline-offset: -4px; }

/* Services cards: a real static and a real animated design on the Figma gradient frames */
.service-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 489px;
  max-width: 100%;
  height: 399.34px;
  border-radius: 32px;
  overflow: hidden;
  background: #f4f4f5 center / cover no-repeat;
}
.service-frame--static { background-image: url(../assets/img/bg-static.webp); }
.service-frame--animated { background-image: url(../assets/img/bg-animated.webp); }
/* Two examples sit side by side in each frame; the gap is a percentage so the
   pair keeps its proportions as the frame scales down. */
.service-frame { gap: 3%; }
.service-example {
  height: 70%;
  width: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .12), 0 24px 48px rgba(17, 17, 17, .2);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.service-frame:hover .service-example { transform: translateY(-6px) scale(1.02); }
.service-frame:focus-visible { outline: 2px solid #fd22a0; outline-offset: 3px; }

/* ================================================================
   Responsive
   Everything above is the 1440 desktop frame. The rules below adapt
   it down through four steps:
     1180  — pull the gutters in, relax the fixed step/card sizes
     1023  — tablet: burger menu, side-by-side blocks stack
      760  — phone: one column and the phone type scale
      420  — small phone
   ================================================================ */

/* The menu wrapper is inert on wide screens: its children lay out as if
   it weren't there, so the desktop header is unchanged. */
.header-menu { display: contents; }

.nav-toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: .8px solid rgba(17, 17, 17, .12);
  border-radius: 14px;
  background: #fff;
  color: #111;
  transition: border-color .2s ease, background-color .2s ease;
}
.nav-toggle:hover { border-color: rgba(17, 17, 17, .28); }
.nav-toggle:focus-visible { outline: 2px solid #fd22a0; outline-offset: 2px; }
.nav-toggle-bars { position: relative; width: 18px; height: 1.6px; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s ease, background-color .2s ease;
}
.nav-toggle-bars::before, .nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* The strip's overlay affordances are hover-reveal. A touch device has no
   hover, so they would sit on permanently and cover the artwork — drop them
   there instead. Tapping to pause and swiping to move still work. */
@media (hover: none) {
  .work-open, .work-hint { display: none; }
}

/* ---------- 1300: let the card internals shrink with their cards ----------
   The service frame and every width inside a pricing plan are pinned to the
   1440 frame. Below roughly 1270 the cards start shrinking, so these have to
   shrink with them — otherwise the plan row's min-content alone is wider than
   the viewport and the service frame's fixed height distorts its artwork. */
@media (max-width: 1300px) {
  .services .sub-20 { width: auto; }
  .service-frame { width: 100%; height: auto; aspect-ratio: 489 / 399.34; }

  .pricing-title, .pricing-sub { width: auto; max-width: 100%; }
  .plans { width: 100%; align-items: stretch; }
  .plan { flex: 1 1 0; height: auto; min-height: 0; }
  .price-row { height: auto; flex-wrap: wrap; white-space: normal; }
}

/* ---------- 1180: gutters in, fixed heights released ---------- */
@media (max-width: 1180px) {
  :root { --gutter: 32px; --hero-fs: 56px; --hero-lh: 64px; }

  .header-inner { gap: 24px; }
  .cta { padding-left: var(--gutter); padding-right: var(--gutter); }

  .brands { gap: 64px; }

  .service-card-top, .service-card-media { padding-left: 32px; padding-right: 32px; }
  .service-cards { width: 100%; flex-direction: column; align-items: center; }
  .service-card { width: 100%; max-width: 572px; }

  .step { height: auto; padding: 48px; gap: 40px; }
  .step-text { flex: 1 1 340px; height: auto; }
  .step-art { flex: 1 1 420px; width: auto; }

  .plan { padding: 32px; }

  /* Two testimonials per row still, but the desktop row heights no longer fit
     the narrower column, so let the cards size to their content. */
  .results-grid { border-radius: 40px; }
  .result-top { height: auto; }
  .result-quote { height: auto; padding-right: 40px; }
  .result-bottom { height: auto; flex-wrap: wrap; gap: 12px 16px; }

  .faq-side { width: 420px; height: auto; gap: 48px; }
  .faq-list { width: auto; flex: 1 1 520px; }

  .footer-top { gap: 48px; }
  .footer-col--wide { width: 180px; }
}

/* ---------- 1023: tablet ---------- */
@media (max-width: 1023px) {
  :root { --section-y: 72px; --section-y-dark: 80px; --hero-fs: 46px; --hero-lh: 54px; }
  .hero-content { max-width: 592px; }

  /* Header: the nav and its CTA move into a drop-down panel. */
  .site-header { position: relative; z-index: 40; }
  .nav-toggle { display: inline-flex; }
  .header-inner { gap: 16px; }
  .header-menu {
    position: absolute;
    z-index: 5;
    left: var(--gutter);
    right: var(--gutter);
    top: calc(100% + 6px);
    display: block;
    padding: 10px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(17, 17, 17, .06), 0 18px 48px rgba(17, 17, 17, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .header-menu.is-open { opacity: 1; visibility: visible; transform: none; }
  .main-nav { flex-direction: column; gap: 2px; }
  .main-nav a { padding: 13px 14px; border-radius: 12px; font-size: 17px; }
  .header-cta { width: auto; margin-top: 10px; }
  .header-cta .btn {
    width: 100%;
    justify-content: center;
    border-color: transparent;
    background: #191816;
    color: #fff;
  }
  .header-cta .btn .i16 { color: currentColor; }
  .header-cta .btn:hover { background: #2c2b29; border-color: transparent; }

  /* Hero — the gradient word's desktop metrics are absolute (61px / -2.8px at
     a 64px headline), so switch them to the equivalent proportional values
     once the headline scales. */
  .hero-content { width: 100%; max-width: 592px; padding-left: var(--gutter); padding-right: var(--gutter); }
  .hero-sub { width: auto; }
  .text-gradient-img { line-height: .95em; letter-spacing: -0.044em; }

  /* Three problem cards need ~970px to stay in a row, so they stack here */
  .problem-cards { flex-direction: column; }
  .problem-card { flex: none; height: auto; border-radius: 40px; }
  .problem-card > img { height: auto; aspect-ratio: 421 / 360; }
  .problem-card-text h3 { white-space: normal; }

  /* One plan per row */
  .plans { flex-direction: column; align-items: center; }
  .plan { flex: none; width: 100%; max-width: 440px; }

  /* Process steps stack: copy first, then the artwork */
  .step { flex-direction: column; align-items: stretch; padding: 40px; gap: 32px; }
  .step-text, .step--3 .step-text { flex: none; padding-bottom: 0; }
  .step-art { flex: none; width: 100%; }

  .result-top, .result-quote, .result-bottom { padding-left: 28px; padding-right: 28px; }

  /* FAQ */
  .faq { flex-direction: column; gap: 40px; }
  .faq-side { width: auto; }
  .faq-help { width: auto; max-width: 480px; }
  .faq-list { width: auto; flex: none; }

  /* Footer */
  /* The wordmark is 1312 x 413, so it needs 31.5% of its width in height. */
  .site-footer { height: auto; padding-bottom: calc(32vw + 24px); }
  .footer-main { padding-top: 72px; }
  .footer-top { flex-wrap: wrap; gap: 40px 48px; }
  .footer-brand { flex: 1 1 100%; }
  .footer-brand p { width: auto; max-width: 420px; }
  .footer-col, .footer-col:first-of-type, .footer-col--wide { flex: 1 1 180px; width: auto; }
  .footer-wordmark {
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: auto;
  }
}

/* ---------- 760: phone ---------- */
@media (max-width: 760px) {
  :root {
    --gutter: 20px;
    --section-y: 56px;
    --section-y-dark: 64px;
    /* Sized so "We make Infographics" and "that <phrase>" each stay on one
       line at every phone width — the headline must not reflow as the
       gradient phrase rotates, nor when Figtree swaps in over the fallback,
       which sets about a quarter wider. 40px is the desktop-adjacent ceiling. */
    --hero-fs: clamp(20px, calc(9.13vw - 3.6px), 40px);
    --hero-lh: clamp(24px, calc(10.97vw - 4.4px), 48px);
  }

  /* Type scale */
  .h-48 { font-size: 32px; line-height: 40px; letter-spacing: -0.02em; }
  .h-40 { font-size: 28px; line-height: 36px; }
  .h-32 { font-size: 23px; line-height: 31px; }
  .h-24 { font-size: 20px; line-height: 28px; }
  .sub-20 { font-size: 17px; line-height: 26px; }
  .sub-18 { font-size: 16px; line-height: 25px; }
  .hero-sub { font-size: 17px; line-height: 26px; }
  /* Line breaks tuned for the desktop measure get in the way on a phone. */
  .hero-sub br, .section-head br, .pricing-head br { display: none; }

  .btn { height: 46px; }
  .btn-fixed { width: auto; }
  .availability { padding: 3px 10px 3px 3px; font-size: 12px; }
  .availability-badge { padding: 3px 7px; border-radius: 8px; }

  /* Header */
  .brand-logo { width: 160px; height: 27px; }
  .brand-logo img { left: -24.5px; top: -18px; width: 185px; height: 72px; }

  /* Hero */
  .hero-glow { top: 120px; height: 560px; opacity: .45; }
  .hero-content { padding-top: 40px; padding-bottom: 32px; gap: 28px; }
  .hero-title { white-space: normal; }
  .hero-line, .hero-line-2 { max-width: 100%; }
  .hero-line-2 { height: auto; min-height: var(--hero-lh); flex-wrap: wrap; justify-content: center; gap: 6px; }
  .cta-group { width: 100%; gap: 16px; }
  .btn-row { width: 100%; flex-direction: column; gap: 10px; }
  .btn-row .btn { width: 100%; justify-content: center; }
  /* Nine avatars need the whole line on a phone, so the caption drops below
     them, and the stack scales down rather than running off a narrow screen. */
  .social-proof { flex-direction: column; gap: 10px; }
  .proof-divider { display: none; }
  .proof-people { flex-direction: column; gap: 10px; }
  .avatar-stack { --av: clamp(34px, 12.6vw, 48px); }
  .proof-people p { width: auto; max-width: 260px; text-align: center; }

  /* Work strip */
  .work { padding: 8px 0 28px; }
  .work-card { width: 216px; height: 270px; margin-right: 14px; }
  .work-open { right: 8px; bottom: 8px; height: 32px; padding: 0 10px 0 12px; font-size: 12px; }

  /* Brands */
  .brands { gap: 48px; }
  .brands-top { gap: 28px; }
  .brands-title { font-size: 19px; line-height: 26px; text-align: center; }
  .logo-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .logo-cell { height: 96px; border-radius: 16px; }
  .client-logo { max-width: 120px; max-height: 32px; }

  .quote-block { gap: 20px; }
  .quote-text { font-size: 24px; line-height: 32px; letter-spacing: -0.02em; }
  .quote-author { height: auto; flex-wrap: wrap; gap: 12px 16px; }

  /* Problem */
  .problem { gap: 32px; }
  .problem-cards { gap: 20px; }
  .problem-card { border-radius: 28px; }
  .problem-card-text { padding: 20px 20px 32px; }
  .problem-card-text p.narrow { max-width: none; }

  /* Services */
  .services { gap: 40px; }
  .service-card { border-radius: 28px; }
  .service-card-top { padding: 24px 20px; gap: 24px; }
  .service-card-media { padding: 0 20px 24px; }
  .service-frame { border-radius: 20px; }

  /* Process */
  .process { gap: 32px; }
  .steps { gap: 20px; }
  .step { padding: 28px 20px; border-radius: 28px; gap: 24px; }
  .step-body { gap: 24px; }

  /* Results */
  .results { gap: 32px; }
  .results-grid { grid-template-columns: 1fr; border-radius: 28px; }
  .result, .result:nth-child(1), .result:nth-child(2), .result:nth-child(3), .result:nth-child(4) {
    border: 0;
    border-top: 1px solid rgba(120, 120, 128, .16);
  }
  .result:first-child { border-top: 0; }
  .result-top { height: auto; padding: 28px 24px 16px; gap: 16px; }
  .stat-value { font-size: 24px; line-height: 32px; }
  .stat-label { font-size: 16px; line-height: 24px; }
  .stat--hidden { display: none; }
  .round-btn { width: 44px; height: 44px; }
  .result-quote { height: auto; padding: 0 24px 20px; font-size: 17px; line-height: 26px; }
  .result-bottom { height: auto; padding: 0 24px 28px; flex-wrap: wrap; gap: 14px; }

  /* Pricing */
  .pricing { gap: 36px; }
  .pricing-head { gap: 12px; }
  .pricing-sub { font-size: 16px; line-height: 25px; }
  .plans { gap: 16px; }
  .plan { padding: 28px 24px; border-radius: 32px; gap: 24px; }
  .plan--popular::before { inset: -4px; padding: 4px; border-radius: 36px; background-size: cover; background-position: center; }
  .popular-badge { top: 20px; right: 20px; }
  .plan--popular .plan-name { padding-right: 80px; }
  .price-row { height: auto; flex-wrap: wrap; white-space: normal; }
  .price { font-size: 38px; line-height: 48px; }
  .per { padding-bottom: 6px; font-size: 16px; line-height: 24px; }

  /* FAQ */
  .faq { gap: 32px; }
  .faq-side { gap: 36px; }
  .faq-help { gap: 20px; }
  .faq-q { padding: 20px 4px; gap: 12px; font-size: 16px; line-height: 25px; }
  .faq-a { padding: 0 4px; }
  .faq-a > p { font-size: 15px; line-height: 25px; }
  .faq-item.is-open .faq-a { margin-top: -12px; padding-bottom: 20px; }

  /* Closing CTA */
  .cta-box { height: auto; border-radius: 28px; }
  .cta-content { width: 100%; padding: 44px 20px 40px; }
  .cta-top { width: auto; }
  .cta-title { width: auto; }

  /* Footer */
  .footer-main { padding-top: 56px; }
  .footer-top { gap: 32px; }
  .footer-col, .footer-col:first-of-type, .footer-col--wide { flex: 1 1 140px; }
  .footer-col ul { margin-top: 16px; }
  .footer-bottom { margin-top: 40px; }
  .footer-bottom-row { height: auto; flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-bottom-row > p { font-size: 14px; line-height: 22px; }
}

/* ---------- 480: the service designs stop fitting side by side ----------
   Two 4:5 designs in a row can never be wider than about half the frame, so
   below this they are only ~150px across — too small to read as an
   infographic. Stacked, each one takes most of the frame's width instead.
   The cap keeps the frame from growing taller than it needs to. */
@media (max-width: 480px) {
  .service-frame {
    height: auto;
    aspect-ratio: auto;
    flex-direction: column;
    gap: 16px;
    padding: 22px 0;
  }
  .service-example { width: min(78%, 250px); height: auto; }
}

/* ---------- 420: small phone ---------- */
@media (max-width: 420px) {
  .work-card { width: 190px; height: 238px; }
  .logo-cell { height: 84px; }
  .client-logo { max-width: 104px; max-height: 28px; }
  .quote-text { font-size: 22px; line-height: 30px; }
  .result-top, .result-quote, .result-bottom { padding-left: 20px; padding-right: 20px; }
  .plan { padding: 24px 20px; }
  .footer-top { gap: 28px 20px; }
}

/* ---------- Discovery-call popup ---------- */
/* <dialog> opened by main.js; hosts the Cal.com inline calendar. */
html.call-open { overflow: hidden; }
.call-modal {
  width: min(960px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 32px 32px 20px;
  border: 0;
  border-radius: 24px;
  background: #fff;
  color: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
  overscroll-behavior: contain;
}
.call-modal[open] { display: flex; flex-direction: column; animation: call-in .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes call-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.call-modal::backdrop { background: rgba(17, 17, 17, .45); }
.call-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f4f4f5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, background .2s ease;
}
.call-close:hover { transform: rotate(90deg); background: #e9e9eb; }
.call-close:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }
.call-head { flex: none; max-width: 46ch; margin: 0 auto 16px; padding: 0 40px; text-align: center; }
.call-eyebrow {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #56565c;
}
.call-head .sub-16 { margin-top: 8px; }
.call-cal { flex: 1 1 auto; min-height: 0; height: min(64vh, 600px); overflow: auto; }
.call-cal iframe { display: block; width: 100%; border: 0; }

@media (max-width: 760px) {
  .call-modal { width: calc(100% - 24px); max-height: calc(100dvh - 24px); padding: 24px 12px 12px; border-radius: 20px; }
  .call-close { top: 10px; right: 10px; width: 40px; height: 40px; }
  .call-head { padding: 0 36px; }
  .call-head .h-32 { font-size: 24px; line-height: 32px; }
  .call-cal { height: 66dvh; }
}