/* ===========================================================================
 * Hauptstadt-Entsorger — front page components
 *
 * Requires ui.css (tokens + primitives), declared as a dependency in
 * functions.php. Enqueued on the front page only, so nothing here can affect
 * another template.
 *
 * Contents
 *   1.  Stats / counters
 *   2.  Service cards
 *   3.  Video feature
 *   4.  About (video stage + mission/vision)
 *   5.  Process steps
 *   6.  Split rows
 *   7.  Gallery
 *   8.  Testimonials
 *   9.  Quote form
 *   10. CTA band
 *   11. FAQ
 *   12. Responsive
 * ========================================================================= */

/* ---------------------------------------------------- 1. Stats / counters */
.hp-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hp-gap);
}

/* Light cards: the hero above this band is dark, and stacking a second dark
   block straight under it made the top of the page feel heavy. */
.hp-stat {
  position: relative;
  padding: 34px 24px 30px;
  border-radius: var(--hp-radius);
  background-color: var(--hp-surface);
  border: 1px solid var(--hp-line);
  box-shadow: var(--hp-shadow);
  text-align: center;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Thin accent that fills across on hover */
.hp-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background-color: var(--hp-orange);
  transition: width 0.35s ease;
}

.hp-stat:hover {
  border-color: rgba(255, 165, 0, 0.55);
  transform: translateY(-5px);
  box-shadow: var(--hp-shadow-lg);
}

.hp-stat:hover::before { width: 100%; }

.hp-stat__num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(34px, 3.8vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--hp-green);
  /* Equal-width digits so the row cannot reflow while the counter animates. */
  font-variant-numeric: tabular-nums;
}

.hp-stat__suffix { color: var(--hp-orange); }

.hp-stat__label {
  display: block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--hp-body);
}

/* ------------------------------------------------------ 2. Service cards */
.hp-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hp-gap);
}

.hp-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 32px 28px 30px;
  border-radius: var(--hp-radius);
  background-color: var(--hp-surface);
  border: 1px solid var(--hp-line);
  box-shadow: var(--hp-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.hp-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hp-shadow-lg);
  border-color: rgba(39, 108, 3, 0.28);
}

.hp-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background-color: var(--hp-green-tint);
  color: var(--hp-green);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.hp-card:hover .hp-card__icon {
  background-color: var(--hp-green);
  color: #fff;
  transform: rotate(-4deg);
}

/* Icons here are inline SVG using stroke="currentColor", so the hover state
   above recolours them for free. A bitmap icon cannot inherit a colour, so if
   one is ever used it is forced to the same two states by filter instead:
   solid dark at rest, solid white on the green hover background. Without this
   a PNG icon just disappears into the dark box on hover. */
.hp-card__icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(28%) sepia(38%) saturate(1795%) hue-rotate(70deg) brightness(95%) contrast(101%);
  transition: filter 0.3s ease;
}

.hp-card:hover .hp-card__icon img { filter: brightness(0) invert(1); }

.hp-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  color: var(--hp-ink);
}

.hp-card__text {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--hp-body);
}

.hp-card .hp-link { margin-top: 4px; }

/* ------------------------------------------------------ 3. Video feature */
.hp-video__frame {
  position: relative;
  border-radius: clamp(14px, 1.8vw, 24px);
  overflow: hidden;
  background-color: #0d1608;
  box-shadow: var(--hp-shadow-lg);
  aspect-ratio: 16 / 9;
}

.hp-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Portrait clips used inside split rows.
   Capped rather than filling the column: at full column width a 9:16 clip ran
   ~800px tall next to ~400px of copy, which is what made those rows look
   lopsided. The cap keeps the ratio exact (the video is never squashed) and
   simply makes the player smaller. */
/* width: 100% is load-bearing. The frame now sits inside a flex container, and
   its only child is an empty placeholder until the video is injected — with
   `width: auto` a flex item sizes to its content, so the frame collapsed to
   zero and the video appeared to be missing entirely. */
.hp-video__frame--portrait {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}

/* -- The company film: its own dark band, video at full container width. -- */
.hp-video--feature {
  position: relative;
  overflow: hidden;
  background-color: var(--hp-green-dark);
}

/* Soft warm glow behind the player */
.hp-video--feature::before {
  content: "";
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 80%);
  aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse at center, rgba(255, 165, 0, 0.18), transparent 70%);
  pointer-events: none;
}

.hp-video__head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: end;
  margin-bottom: clamp(28px, 3.4vw, 46px);
}

.hp-video__head .hp-head { max-width: none; }

.hp-video__lede {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
}

.hp-video__frame--wide {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------- 4. About */
.hp-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: stretch;
}

.hp-about__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hp-about__body .hp-head { margin-bottom: 0; }

/* A photo that fills the column, with a stat card overlapping its lower-left
   corner. The portrait clip that used to float on a tinted panel here now
   lives in the reel section, where 9:16 footage actually belongs. */
.hp-about__media { position: relative; }

.hp-about__photo {
  width: 100%;
  height: 100%;
  min-height: clamp(320px, 32vw, 440px);
  object-fit: cover;
  object-position: center;
  border-radius: clamp(14px, 1.8vw, 24px);
  display: block;
}

.hp-about__badge {
  position: absolute;
  left: clamp(-8px, -0.8vw, 0px);
  bottom: clamp(-14px, -1.4vw, -8px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 24px;
  border-radius: var(--hp-radius-sm);
  background-color: #fff;
  box-shadow: var(--hp-shadow-lg);
  border: 1px solid var(--hp-line);
  max-width: 74%;
}

.hp-about__badge-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1;
  color: var(--hp-green);
}

.hp-about__badge-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  color: var(--hp-body);
}

/* ------------------------------------------------------------- 4b. Reel ---
 * Three portrait clips side by side. Each keeps its exact 9:16 ratio, so the
 * footage is never cropped or letterboxed. */
.hp-reel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 30px);
  max-width: 1020px;
  margin: 0 auto;
}

.hp-reel__item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hp-reel__item .hp-video__frame--portrait {
  max-width: none;
  border: 6px solid #fff;
  box-shadow: 0 20px 44px rgba(22, 48, 10, 0.18);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.hp-reel__item:hover .hp-video__frame--portrait {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px rgba(22, 48, 10, 0.26);
}

.hp-reel__caption {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--hp-ink);
}

.hp-pillars {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 28px;
}

.hp-pillar {
  display: flex;
  gap: 16px;
  padding: 22px;
  border-radius: var(--hp-radius-sm);
  background-color: var(--hp-tint);
  border: 1px solid var(--hp-line);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.hp-pillar:hover {
  border-color: rgba(255, 165, 0, 0.55);
  transform: translateX(4px);
}

.hp-pillar__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--hp-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hp-pillar__title {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  color: var(--hp-ink);
}

.hp-pillar__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--hp-body);
}

/* ------------------------------------------------------ 5. Process steps */
.hp-steps { position: relative; overflow: hidden; }

.hp-steps__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  z-index: 1;
}

/* Dashed rule connecting the three step medallions */
.hp-steps__list::before {
  content: "";
  position: absolute;
  top: 92px;
  left: 16%;
  right: 16%;
  border-top: 2px dashed rgba(255, 255, 255, 0.22);
  z-index: -1;
}

.hp-step { text-align: center; }

.hp-step__media {
  position: relative;
  width: 184px;
  height: 184px;
  margin: 0 auto 24px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.35s ease, transform 0.35s ease;
}

.hp-step:hover .hp-step__media {
  border-color: var(--hp-orange);
  transform: translateY(-6px);
}

.hp-step__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.hp-step:hover .hp-step__media img { transform: scale(1.06); }

.hp-step__num {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  padding: 5px 18px;
  border-radius: 20px 20px 0 0;
  background-color: var(--hp-orange);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #fff;
}

.hp-step__title {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  color: #fff;
}

.hp-step__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

.hp-steps__watermark {
  position: absolute;
  left: 50%;
  bottom: -2%;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(56px, 11vw, 168px);
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.035);
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------- 6. Split rows */
.hp-splits {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 96px);
}

/* `stretch`, not `center`: the media column now grows to whatever height the
   copy beside it needs, which is what stops a short image sitting next to a
   long block of text. */
.hp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.2vw, 68px);
  align-items: stretch;
}

.hp-split--reverse .hp-split__media { order: 2; }

/* Narrow, fixed media column for portrait video clips */
.hp-split--portrait { grid-template-columns: 340px minmax(0, 1fr); }
.hp-split--portrait.hp-split--reverse { grid-template-columns: minmax(0, 1fr) 340px; }

/* Column layout so the main axis is vertical: the picture keeps its own height
   instead of being stretched by the grid, which is what lets it stick. */
.hp-split__media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* Portrait clips are the exception: they keep their own ratio and sit centred
   in the column rather than filling it. */
.hp-split--portrait .hp-split__media {
  justify-content: center;
}

.hp-split__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  /* Long rows read better with a slightly tighter measure than the full
     half-column width. */
  max-width: 640px;
}

/* Capped height + sticky.
   Stretching the picture to the full row height meant that next to a long
   bulleted list it reached ~900px, cropping a landscape photo down to a narrow
   vertical slice and making the whole row feel oversized. A fixed, moderate
   height keeps every row visually consistent, and `sticky` means the picture
   travels with the reader down long copy instead of scrolling away.
   object-fit: cover crops rather than distorting, so it is never stretched. */
.hp-split__img {
  position: sticky;
  top: 104px; /* clears the 80px sticky header */
  width: 100%;
  height: clamp(280px, 28vw, 420px);
  object-fit: cover;
  object-position: center;
  border-radius: clamp(14px, 1.8vw, 24px);
  display: block;
  box-shadow: var(--hp-shadow);
}

/* -------------------------------------------------- Inline CTA (band) ----
 * A compact conversion strip dropped between sections. Same shape as the one
 * on the service pages, but on a light tinted card rather than white so it
 * separates from the rows above and below it. */
.hp-inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: clamp(40px, 4.6vw, 68px);
  padding: clamp(22px, 2.6vw, 30px) clamp(22px, 3vw, 36px);
  border-radius: var(--hp-radius);
  background: linear-gradient(120deg, var(--hp-green-tint) 0%, #FDF3E4 100%);
  border: 1px solid rgba(39, 108, 3, 0.16);
}

.hp-inline-cta--plain {
  background: var(--hp-surface);
  border-color: var(--hp-line);
  box-shadow: var(--hp-shadow);
}

.hp-inline-cta__main {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.hp-inline-cta__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--hp-orange), #E07A00);
  color: #fff;
  box-shadow: 0 8px 18px rgba(255, 165, 0, 0.3);
}

.hp-inline-cta__title {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.3;
  color: var(--hp-ink);
}

.hp-inline-cta__sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--hp-body);
}

.hp-inline-cta__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Deep-green primary so it reads differently from the orange buttons used in
   the surrounding sections. */
.hp-inline-cta .hp-btn--deep {
  background-color: var(--hp-green-deep);
  border-color: var(--hp-green-deep);
  color: #fff;
}

.hp-inline-cta .hp-btn--deep:hover {
  background-color: var(--hp-green-dark);
  border-color: var(--hp-green-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(31, 86, 2, 0.28);
}

.hp-inline-cta .hp-btn--outline {
  background-color: transparent;
  border-color: var(--hp-orange);
  color: var(--hp-orange-dark);
}

.hp-inline-cta .hp-btn--outline:hover {
  background-color: var(--hp-orange);
  color: #fff;
  transform: translateY(-2px);
}

.hp-split__body > .hp-title { margin-bottom: 18px; }

.hp-split__text {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--hp-body);
}

.hp-split__text:last-of-type { margin-bottom: 0; }

/* Check list */
.hp-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hp-list li {
  position: relative;
  padding-left: 34px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--hp-body);
}

.hp-list li strong { color: var(--hp-ink); font-weight: 600; }

.hp-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--hp-green-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23276C03' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Feature pair used under the "Experten" row */
.hp-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.hp-feature {
  padding: 24px;
  border-radius: var(--hp-radius-sm);
  background-color: var(--hp-surface);
  border: 1px solid var(--hp-line);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.hp-feature:hover {
  border-color: rgba(255, 165, 0, 0.55);
  box-shadow: var(--hp-shadow);
  transform: translateY(-4px);
}

.hp-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  background-color: rgba(255, 165, 0, 0.14);
  color: var(--hp-orange);
}

.hp-feature__title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  color: var(--hp-ink);
}

.hp-feature__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--hp-body);
}

/* ------------------------------------------------------------ 7. Gallery */
.hp-gallery__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: clamp(28px, 3.4vw, 48px);
}

.hp-gallery__head .hp-head { margin-bottom: 0; }

.hp-gallery__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.hp-gallery__item {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--hp-radius-sm);
  background-color: var(--hp-green-tint);
}

.hp-gallery__item:nth-child(-n+3) { grid-column: span 2; aspect-ratio: 4 / 3; }
.hp-gallery__item:nth-child(n+4) { grid-column: span 3; aspect-ratio: 16 / 9; }

.hp-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hp-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22, 48, 10, 0.45), transparent 55%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hp-gallery__item:hover img { transform: scale(1.06); }
.hp-gallery__item:hover::after { opacity: 1; }

/* -------------------------------------------------- 7b. Online-Anfrage ---
 * Three columns with the phone frame in the middle. The device is built in
 * CSS rather than shipped as a mockup PNG: the owner uploads a plain portrait
 * screenshot in Appearance -> Theme-Bilder and the frame is drawn around it,
 * so re-shooting the screenshot never means re-doing the mockup, and the
 * bezel stays crisp on a retina screen at any size. */
/* --hp-green-dark on its own read as near-black rather than as the brand
   green. The gradient keeps the top of the band on the deep brand green and
   only settles into the dark at the foot, so the section is recognisably green
   while the closing bar still has something darker to sit against. */
.hp-app {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--hp-green-deep);
  background-image: linear-gradient(168deg, #2A7404 0%, var(--hp-green-deep) 46%, #17400A 100%);
  padding-bottom: 0;
}

/* The diagonal lift behind the left column — stops the dark band reading as a
   flat rectangle without costing an image request.
 *
 * Layered by DOM order, not by a negative z-index: the glow is the section's
 * first child and the content below it is positioned, so the content wins. A
 * z-index:-1 glow would sit behind the section's own background the moment
 * anything up the tree created a stacking context, which is how the banner
 * overlay went missing three times earlier in this build. */
.hp-app__glow {
  position: absolute;
  top: -20%;
  left: -12%;
  width: 62%;
  height: 140%;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.02) 46%, transparent 70%);
  transform: skewX(-11deg);
  pointer-events: none;
}

/* Two tracks, not three.
   The old layout put a text column on each side of the phone. That gave the
   section two headings of equal weight and no single statement of what it is
   for, and because the phone is much taller than either column it left a band
   of empty green under both of them. Copy now runs in one column with a proper
   heading, and the device sits beside it as the illustration. */
/* The device track is a FIXED width, not `auto`.
   The phone is sized by height below so it finishes level with the copy beside
   it. That only resolves if the track width is already known — with an `auto`
   track the phone's width would depend on the row height, which depends on the
   copy column's width, which depends on the track width. */
.hp-app__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: stretch;
  gap: clamp(32px, 4.4vw, 72px);
  padding-bottom: clamp(48px, 5.4vw, 82px);
}
div.wpforms-container-full select{
height:auto!important;
}
/* min-width:0 is load-bearing: grid items default to min-content width, and a
   compound like "WhatsApp-Kontakt" would otherwise widen the column past its
   track and push the device off the grid. */
.hp-app__main { min-width: 0; }

.hp-app__main .hp-head { max-width: 640px; }

/* ---- the two proposition cards ---- */
.hp-app__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: clamp(26px, 3vw, 38px);
}

/* Glass panels rather than plain text on the band: they give the two lists a
   boundary, so the eye reads "two things" instead of one long column of
   ticks. */
.hp-app__card {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.2vw, 26px);
  border-radius: var(--hp-radius);
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.hp-app__card:hover {
  background-color: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 165, 0, 0.45);
  transform: translateY(-4px);
}

.hp-app__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 12px;
  background-color: rgba(255, 165, 0, 0.16);
  border: 1px solid rgba(255, 165, 0, 0.34);
  color: var(--hp-orange);
}

.hp-app__card-title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.3;
  color: #fff;
}

.hp-app__card-text {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.74);
}

/* Pushed to the bottom so the two cards' lists stay aligned even though only
   one of them carries a closing line. */
.hp-app__card-note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

.hp-app__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hp-app__list li {
  position: relative;
  padding-left: 30px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.6;
  color: #fff;
}

.hp-app__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23FFA500' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ---- the device ----
 * position: relative because the QR card is pinned to the phone's lower-left
 * corner; the left padding is the room that overhang needs so it is not
 * clipped by the grid track. */
/* Phone pushed to the right of its track; the QR badge overhangs into the
   space left over on the left. */
.hp-app__device {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

/* Sized by HEIGHT, not width: `height: 100%` against a stretched grid item
   makes the phone finish exactly level with the bottom of the copy column, so
   the two sides of the section end together instead of the device stopping
   ~140px short. The width follows from the aspect ratio.
   During intrinsic sizing `height: 100%` resolves to auto, so the phone
   contributes nothing to the row height — the copy column alone decides it,
   which is what keeps this from being circular. max-height is the backstop for
   an unusually long copy column. */
/* 9/20 is a real modern handset ratio and is within a few percent of the
   419x967 screenshot that ships as the default, so almost none of it is
   cropped. object-fit below still covers whatever else gets uploaded. */
.hp-app__phone {
  position: relative;
  height: 100%;
  width: auto;
  max-height: 640px;
  aspect-ratio: 9 / 20;
  padding: 10px;
  border-radius: 38px;
  background: linear-gradient(160deg, #f4f5f2 0%, #d8dcd3 48%, #eef0ea 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.16),
    0 30px 60px rgba(0, 0, 0, 0.45);
}

/* Speaker slot. Drawn on the bezel, above the screen. */
.hp-app__notch {
  position: absolute;
  top: 17px;
  left: 50%;
  z-index: 2;
  width: 52px;
  height: 5px;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.22);
  transform: translateX(-50%);
}

.hp-app__screen {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 29px;
  object-fit: cover;
  /* Screenshots are captured from the top of the page, so pin the crop there
     rather than letting a tall one centre and cut the header off. */
  object-position: top center;
  background-color: var(--hp-green-dark);
}

/* The branded "no screenshot uploaded yet" panel that used to live here is
   gone: the theme now ships a default screenshot, so the empty state was
   unreachable. The screen keeps its dark background above, which is what shows
   if the file is ever missing. */

/* ---- QR ----
 * A compact square badge on the phone's lower-left corner, so the two read as
 * one object: "scan this and the site opens on your phone".
 *
 * Square rather than the wide image-beside-text card it started as: at ~182px
 * that card covered well over half the phone, and everything narrow enough to
 * avoid that left no room for the caption. Stacking the caption under the code
 * gets the whole badge down to 112px, which overhangs the phone by about a
 * third — enough to read as attached to it, not enough to hide the screen.
 *
 * Positioned against the PHONE (it is a child of it), so left: -56px is always
 * exactly half the badge sticking out, whatever width the phone resolves to. */
.hp-app__qr {
  position: absolute;
  left: -56px;
  bottom: 28px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 112px;
  padding: 10px;
  border-radius: 14px;
  background-color: #fff;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hp-app__qr:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.42);
}

.hp-app__qr img {
  display: block;
  width: 92px;
  height: 92px;
}

.hp-app__qr-text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--hp-ink);
}

/* ---- closing bar ---- */
.hp-app__foot {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background-color: rgba(0, 0, 0, 0.18);
}

.hp-app__foot-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.hp-app__foot-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 20px);
  color: #fff;
}

.hp-app__foot-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.hp-app__foot-tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.hp-app__foot-tel svg { color: var(--hp-orange); }
.hp-app__foot-tel:hover { color: var(--hp-orange); }

/* ------------------------------------------------- 7c. Service promise ---
 * Copy on the left, the round "rate us on Google" badge on the right.
 *
 * Built as a card rather than bare text on the tint: with the badge pinned to
 * the far right and the copy capped at ~62ch, the two ended up as separate
 * islands with a stretch of empty background between them. A panel with a
 * fixed badge column and a rule between the two ties them together, and the
 * gap becomes deliberate spacing instead of a hole. */
.hp-promise {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  align-items: center;
  gap: clamp(26px, 3.4vw, 48px);
  padding: clamp(26px, 3.2vw, 46px);
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  background-color: var(--hp-surface);
  box-shadow: var(--hp-shadow);
}

/* See .hp-wa__body — grid items need this or a long word widens the track. */
.hp-promise__body { min-width: 0; }

/* .hp-title carries margin:0 by design, since .hp-head owns the spacing around
   it. Used on its own here, it left the heading sitting on the paragraph. */
.hp-promise__title {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--hp-ink);
  text-wrap: balance;
}

.hp-promise__text {
  margin: 0 0 14px;
  max-width: 62ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--hp-body);
}

.hp-promise__text:last-of-type { margin-bottom: 24px; }

.hp-promise__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

.hp-promise__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--hp-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.hp-promise__link svg { color: var(--hp-green); flex-shrink: 0; }
.hp-promise__link:hover { color: var(--hp-green); }

/* ---- the badge ---- */
.hp-promise__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: 16px;
  padding-left: clamp(20px, 2.6vw, 40px);
  border-left: 1px solid var(--hp-line);
  text-decoration: none;
}

/* Google's four colours as a conic ring. An image would be one more request
   and would soften on a retina screen; this stays sharp at any size. The
   sequence starts at 12 o'clock and runs clockwise: red, yellow, green, blue. */
.hp-promise__ring {
  display: block;
  width: clamp(160px, 15vw, 190px);
  aspect-ratio: 1;
  padding: 9px;
  border-radius: 50%;
  background: conic-gradient(
    #EA4335 0deg 90deg,
    #FBBC05 90deg 180deg,
    #34A853 180deg 270deg,
    #4285F4 270deg 360deg
  );
  box-shadow: 0 12px 30px rgba(22, 48, 10, 0.14);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hp-promise__badge:hover .hp-promise__ring {
  transform: translateY(-4px) rotate(-4deg);
  box-shadow: 0 18px 40px rgba(22, 48, 10, 0.2);
}

.hp-promise__disc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 100%;
  padding: 16px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
}

.hp-promise__badge-kicker {
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--hp-body);
}

/* The asset is the Google wordmark with its five stars underneath. */
.hp-promise__disc img {
  display: block;
  width: clamp(96px, 9vw, 116px);
  height: auto;
}

.hp-promise__badge-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--hp-green);
  transition: gap 0.25s ease;
}

.hp-promise__badge:hover .hp-promise__badge-note { gap: 12px; }

/* ------------------------------------------------------- 8. Testimonials */
.hp-reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hp-gap);
}

.hp-review {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 32px 28px;
  border-radius: var(--hp-radius);
  background-color: var(--hp-surface);
  border: 1px solid var(--hp-line);
  box-shadow: var(--hp-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hp-review:hover { transform: translateY(-5px); box-shadow: var(--hp-shadow-lg); }

.hp-review__stars {
  display: inline-flex;
  gap: 3px;
  color: var(--hp-orange);
  line-height: 0;
}

.hp-review__text {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--hp-body);
}

.hp-review__person {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--hp-line);
}

.hp-review__avatar {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.hp-review__name {
  display: block;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--hp-ink);
}

.hp-review__meta {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--hp-body);
}

/* --------------------------------------------------------- 9. Quote form */
.hp-quote {
  position: relative;
  overflow: hidden;
  background-color: var(--hp-green-dark);
}

.hp-quote::before {
  content: "";
  position: absolute;
  top: -25%;
  right: -8%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 165, 0, 0.16), transparent 68%);
  pointer-events: none;
}

.hp-quote__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
}

.hp-quote__points {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hp-quote__points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.hp-quote__points svg { flex-shrink: 0; color: var(--hp-orange); }

.hp-quote__card {
  padding: clamp(24px, 3vw, 40px);
  border-radius: clamp(16px, 2vw, 24px);
  background-color: #fff;
  box-shadow: var(--hp-shadow-lg);
}

.hp-quote__card-title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 23px;
  color: var(--hp-ink);
}

.hp-quote__card-sub {
  margin: 0 0 22px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--hp-body);
}

/* WPForms inside the quote card. Scoped so it cannot reach the contact page's
   form, which has its own rules in page-contact.php. */
.hp-quote__card .wpforms-container,
.hp-quote__card div.wpforms-container-full { margin: 0; }

.hp-quote__card .wpforms-field { padding: 0; margin: 0 0 16px; }

.hp-quote__card .wpforms-field-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--hp-ink);
  margin-bottom: 6px;
}

.hp-quote__card input[type="text"],
.hp-quote__card input[type="email"],
.hp-quote__card input[type="tel"],
.hp-quote__card input[type="number"],
.hp-quote__card select,
.hp-quote__card textarea {
  width: 100%;
  max-width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--hp-line);
  border-radius: 10px;
  background-color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--hp-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hp-quote__card input:focus,
.hp-quote__card select:focus,
.hp-quote__card textarea:focus {
  outline: none;
  border-color: var(--hp-green);
  box-shadow: 0 0 0 3px rgba(39, 108, 3, 0.12);
}

.hp-quote__card ::placeholder { color: #9AA394; }

.hp-quote__card button.wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 30px;
  border: none;
  border-radius: 36px;
  background-color: var(--hp-orange);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(255, 165, 0, 0.26);
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.hp-quote__card button.wpforms-submit:hover {
  background-color: var(--hp-orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(255, 165, 0, 0.34);
}

/* ---------------------------------------------------------- 10. CTA band */
.hp-cta {
  position: relative;
  overflow: hidden;
  background-color: var(--hp-green-deep);
}

.hp-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}

.hp-cta__inner {
  position: relative;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}

.hp-cta .hp-actions { justify-content: center; }

/* -------------------------------------------------------------- 11. FAQ */
/* Single column at container width — the decorative aside was competing with
   the questions and squeezed the answers into a narrow measure. */
.hp-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hp-faq__item {
  border-radius: var(--hp-radius-sm);
  border: 1px solid var(--hp-line);
  background-color: var(--hp-surface);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.hp-faq__item[open] {
  border-color: rgba(39, 108, 3, 0.4);
  box-shadow: var(--hp-shadow);
}

.hp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
  color: var(--hp-ink);
  transition: color 0.25s ease;
}

.hp-faq__q::-webkit-details-marker { display: none; }
.hp-faq__q:hover { color: var(--hp-green); }

.hp-faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--hp-green-tint);
  transition: background-color 0.25s ease, transform 0.3s ease;
}

.hp-faq__icon::before,
.hp-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--hp-green);
  transition: opacity 0.25s ease, background-color 0.25s ease;
}

.hp-faq__icon::before { width: 12px; height: 2px; }
.hp-faq__icon::after { width: 2px; height: 12px; }

.hp-faq__item[open] .hp-faq__icon {
  background-color: var(--hp-orange);
  transform: rotate(180deg);
}

.hp-faq__item[open] .hp-faq__icon::before { background-color: #fff; }
.hp-faq__item[open] .hp-faq__icon::after { opacity: 0; }

.hp-faq__a {
  padding: 0 24px 22px;
  animation: hpFaqIn 0.28s ease;
}

.hp-faq__a p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--hp-body);
}

@keyframes hpFaqIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* Closing CTA: one full-width row under the questions. */
.hp-faq__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: clamp(28px, 3vw, 40px);
  padding: clamp(24px, 3vw, 34px) clamp(24px, 3.4vw, 40px);
  border-radius: var(--hp-radius);
  background-color: var(--hp-green-tint);
  border: 1px solid rgba(39, 108, 3, 0.18);
}

.hp-faq__cta-text { min-width: 0; }

.hp-faq__cta-title {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(19px, 2vw, 23px);
  color: var(--hp-ink);
}

.hp-faq__cta-sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--hp-body);
}

.hp-faq__cta-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* -------------------------------------------------------- 12. Responsive */
@media (max-width: 1100px) {
  .hp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Copy and device stay side by side; the device track just gets narrower. */
  .hp-app__inner {
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: clamp(26px, 3.4vw, 44px);
  }
  .hp-app__phone { max-height: 560px; }
  /* left stays at half the width, so the overhang keeps its proportion. */
  .hp-app__qr { width: 100px; left: -50px; }
  .hp-app__qr img { width: 80px; height: 80px; }

  .hp-split--portrait { grid-template-columns: 290px minmax(0, 1fr); }
  .hp-split--portrait.hp-split--reverse { grid-template-columns: minmax(0, 1fr) 290px; }
  .hp-video__frame--portrait { max-width: 260px; }
}

@media (max-width: 900px) {
  .hp-split,
  .hp-split--portrait,
  .hp-split--portrait.hp-split--reverse,
  .hp-about__grid,
  .hp-quote__grid,
  .hp-promise,
  .hp-video__head {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Badge below the copy rather than beside it, so the rule that separated the
     two columns has to move from the left edge to the top. */
  .hp-promise__badge {
    align-items: flex-start;
    padding-left: 0;
    padding-top: 26px;
    border-left: none;
    border-top: 1px solid var(--hp-line);
  }

  .hp-video__head { gap: 16px; }

  /* Media always leads on a single column, whatever the desktop order was. */
  .hp-split--reverse .hp-split__media { order: 0; }

  .hp-split--portrait .hp-split__media { max-width: 440px; margin-inline: auto; }
  .hp-video__frame--portrait { max-width: 280px; }

  /* Nothing to stick to on one column — the picture sits above its text. */
  .hp-split__img {
    position: static;
    height: clamp(230px, 40vw, 330px);
  }
  .hp-split__body { max-width: none; }

  .hp-about__photo { height: clamp(260px, 46vw, 380px); min-height: 0; }
  .hp-about__badge { left: 0; bottom: -12px; padding: 14px 20px; }

  .hp-steps__list { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hp-steps__list::before { display: none; }

  .hp-gallery__item:nth-child(-n+3),
  .hp-gallery__item:nth-child(n+4) { grid-column: span 3; aspect-ratio: 16 / 10; }

  .hp-faq__cta { flex-direction: column; align-items: flex-start; }
  .hp-faq__cta-actions { width: 100%; }
  .hp-faq__cta-actions .hp-btn { flex: 1 1 auto; }

  .hp-inline-cta { flex-direction: column; align-items: flex-start; }
  .hp-inline-cta__actions { width: 100%; }
  .hp-inline-cta__actions .hp-btn { flex: 1 1 auto; }

  /* One column: the copy first (it says what the section is for), the device
     under it as the illustration. */
  .hp-app__inner { grid-template-columns: minmax(0, 1fr); }

  /* The phone goes back to being sized by width: there is no tall column
     beside it any more for its height to match. The QR badge keeps its
     overhang — it is anchored to the phone, so it travels with it. */
  .hp-app__device {
    align-items: center;
    justify-content: center;
  }

  .hp-app__phone {
    height: auto;
    width: 232px;
    max-height: none;
  }
}

@media (max-width: 680px) {
  .hp-cards,
  .hp-features { grid-template-columns: minmax(0, 1fr); }

  .hp-stats__grid { gap: 14px; }
  .hp-stat { padding: 22px 14px; }

  .hp-gallery__grid { grid-template-columns: minmax(0, 1fr); }
  .hp-gallery__item:nth-child(-n+3),
  .hp-gallery__item:nth-child(n+4) { grid-column: span 1; aspect-ratio: 16 / 10; }

  .hp-gallery__head { flex-direction: column; align-items: flex-start; }

  .hp-step__media { width: 150px; height: 150px; }

  .hp-promise { padding: 24px 20px; }
  .hp-promise__contact { flex-direction: column; gap: 12px; }
  .hp-promise__ring { width: 150px; }

  /* The two cards stack. Each keeps its own panel, so it is still obvious
     where one proposition ends and the next begins — which is what the border
     between the old bare columns was doing by hand. */
  .hp-app__inner { gap: 28px; }
  .hp-app__cards { grid-template-columns: minmax(0, 1fr); }
  .hp-app__phone { width: 196px; }

  .hp-app__qr { width: 92px; left: -46px; padding: 8px; }
  .hp-app__qr img { width: 76px; height: 76px; }
  .hp-app__qr-text { font-size: 11px; }

  .hp-app__foot-inner { flex-direction: column; align-items: stretch; }
  .hp-app__foot-actions { width: 100%; flex-direction: column; align-items: stretch; gap: 14px; }
  .hp-app__foot-actions .hp-btn { justify-content: center; }
  .hp-app__foot-tel { justify-content: center; }

  /* The reel becomes a swipe rail — three 9:16 clips stacked would be a very
     tall column on a phone. */
  .hp-reel {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 68%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin-inline: -24px;
    padding-inline: 24px;
    scrollbar-width: none;
  }

  .hp-reel::-webkit-scrollbar { display: none; }
  .hp-reel__item { scroll-snap-align: center; }

  /* Reviews become a swipeable rail rather than a tall stack. */
  .hp-reviews {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin-inline: -24px;
    padding-inline: 24px;
    scrollbar-width: none;
  }

  .hp-reviews::-webkit-scrollbar { display: none; }
  .hp-review { scroll-snap-align: center; }
}