/* design-phase — ported from design-phase-standalone.css, scoped under #bt-root. Font from theme.css. */
#bt-root {
  /* Brand */
  --c-blue:        #00517D;
  --c-blue-2:      #1B3E70;
  --c-blue-3:      #203C86;
  --c-navy:        #0A142F;
  --c-black:       #000000;
  --c-white:       #FFFFFF;

  /* Surfaces */
  --c-bg:          #FFFFFF;
  --c-bg-soft:     #F6F6F6;
  --c-bg-soft-2:   #F2F2F2;

  /* Text */
  --c-text:        #0A142F;
  --c-text-muted:  #656464;
  --c-text-faint:  #A9A9A9;

  /* Lines */
  --c-border:      #E4E3E3;
  --c-border-2:    #E7E7E7;

  /* Accents */
  --c-star:        #FBBC04;
  --c-link:        #0081FE;

  /* Layout */
  --maxw: 1320px;          /* content max-width (1512 canvas - ~96px gutters) */
  --gutter: 24px;
  --radius-pill: 50px;
  --radius-card: 16px;

  /* Type */
  --font: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* --- componenti da base.css --- */
#bt-root .dp-container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* Layout helper */
#bt-root .container {
  width: 100%;
  /* max-width: var(--maxw); */
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Reusable pill button */
#bt-root .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 30px;
  padding: 16px 28px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
#bt-root .btn--dark { background: var(--c-black); color: #fff; }
#bt-root .btn--ghost { background: #fff; color: var(--c-black); border: 1px solid var(--c-black); }
#bt-root .btn--blue { background: var(--c-blue);  color: #fff; }

#bt-root .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Back-to-top button (shown after scrolling) */
#bt-root .back-to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--c-blue); color: #fff; border: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(10,20,47,.25);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
#bt-root .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ==========================================================================
   Design Phase page  (values from Figma Dev Mode MCP)
   ========================================================================== */

/* ---------- Overlay header (shared pattern with Build Phase) ---------- */
#bt-root .site-header--overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 100; }
/* hero image/overlay must never intercept clicks meant for the nav */
#bt-root .dp-hero__bg, #bt-root .dp-hero__overlay { pointer-events: none; }
#bt-root .site-header--overlay .nav a, #bt-root .site-header--overlay .nav button { position: relative; z-index: 2; }
#bt-root .site-header--overlay .nav { padding-inline: 80px; padding-top: 47px; }
#bt-root .site-header--overlay .nav__logo img { filter: brightness(0) invert(1); }
#bt-root .site-header--overlay .nav__pill { background: rgba(255,255,255,.5); }
#bt-root .site-header--overlay .nav__pill a { color: rgba(0,0,0,.8); }
#bt-root .site-header--overlay .nav__pill a.is-active { background: rgba(255,255,255,.8); }
#bt-root .site-header--overlay .nav__phone { background: transparent; color: #000; border-color: #000; }
/* phone.svg is white; invert it to black so it shows on the light phone pill */
#bt-root .site-header--overlay .nav__phone img { filter: brightness(0); }
#bt-root .site-header--overlay .nav__quote { background: #000; color: #fff; }
#bt-root .site-header--overlay .nav__burger span { background: #fff; }

/* ---------- Hero ---------- */
/* Figma hero is near full-width (1464 of a 1512 frame) — wider than the content container.
   Override .container's max-width so the hero spans the viewport with small gutters. */
#bt-root .dp-hero-wrap {
  /* max-width: 1512px; */
  padding-top: 24px;
  padding-inline: 24px;
}
#bt-root .dp-hero {
  position: relative; border-radius: 40px; overflow: hidden;
  aspect-ratio: 1464 / 846;
  display: flex; flex-direction: column; justify-content: flex-end;
}
#bt-root .dp-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* dark gradient on left for title legibility + bottom band for the review bar */
#bt-root .dp-hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 22%),
    linear-gradient(to right, rgba(0,0,0,.72) 0%, rgba(27,62,112,.25) 40%, transparent 60%);
}
#bt-root .dp-hero__content {
  position: relative; padding: 0 0 10% 7%; max-width: 46%; margin-top: auto;
}
@media (min-width: 1481px) {
  #bt-root .dp-hero__content { padding: 0 0 12% 7%; }
}
#bt-root .dp-hero__title {
  font-size: clamp(56px, 8.6vw, 130px); font-weight: 500; line-height: 1.0;
  color: #fff; margin-bottom: 2%;
}
#bt-root .dp-hero__sub { font-size: clamp(16px, 1.65vw, 25px); line-height: 1.36; color: #e2e2e2; }
#bt-root .dp-hero__sub b { font-weight: 600; font-style: italic; }

/* bottom bar — items aligned to the very bottom edge of the hero */
#bt-root .dp-hero__bar {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 7%;            /* no bottom padding: review card sits flush to hero edge */
  padding-bottom: 0;
}
/* keep the left stat + right directions lifted off the very edge */
#bt-root .dp-stat, #bt-root .dp-directions { margin-bottom: 4%; }
#bt-root .dp-stat { display: flex; align-items: center; gap: 14px; color: #fff; }
#bt-root .dp-stat__num { font-size: clamp(30px, 3.3vw, 50px); font-weight: 500; line-height: 1; }
#bt-root .dp-stat__label { font-size: clamp(13px, 1.3vw, 20px); color: #dcdcdc; line-height: 1.2; }
#bt-root .dp-reviews {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 20px 20px 0 0;
  padding: 14px 24px; align-self: flex-end;
  margin-bottom: 0;   /* flush to the hero's bottom edge */
}
#bt-root .dp-reviews__avatars { display: flex; }
#bt-root .dp-reviews__avatars img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; margin-left: -10px;
}
#bt-root .dp-reviews__avatars img:first-child { margin-left: 0; }
#bt-root .dp-reviews__score { display: block; font-size: 21px; font-weight: 600; color: #000; display: flex; align-items: center; gap: 8px; }
#bt-root .dp-reviews__stars { display: inline-flex; gap: 1px; }
#bt-root .dp-reviews__stars img { width: 18px; height: 18px; }
#bt-root .dp-reviews__label { font-size: 18px; color: #000; }
#bt-root .dp-directions { font-size: clamp(16px, 2vw, 30px); font-weight: 500; color: #fff; }

/* mobile-only title/sub/CTA block below the hero image (hidden on desktop) */
#bt-root .dp-hero__below { display: none; }

/* ---------- Summary ---------- */
#bt-root .dp-summary { padding-top: 72px; padding-inline: 5%; }
#bt-root .dp-summary__label { font-size: 35px; font-weight: 500; color: rgba(0,0,0,.8); margin-bottom: 14px; }
#bt-root .dp-summary__text { font-size: 18px; line-height: 1.66; color: rgba(0,0,0,.5); max-width: 1315px; margin-bottom: 28px; }
#bt-root .dp-summary__text b { font-weight: 600; color: rgba(0,0,0,.7); }
#bt-root .dp-summary__cta { display: flex; gap: 16px; flex-wrap: wrap; }
#bt-root .dp-summary__cta .btn { padding: 18px 30px; font-size: 15px; }

/* ---------- What you walk away with ---------- */
/* soft blue glow behind the section (Figma: #00517D ellipse, 60% fill × 40% layer) */
#bt-root .dp-walk-wrap { position: relative; overflow: hidden; padding-top: 56px; }
#bt-root .dp-walk__glow {
  position: absolute; left: 55%; top: 52%;
  width: 1500px; height: 620px; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 48% 50% at 50% 50%,
              rgba(0,81,125,.24) 0%,
              rgba(0,81,125,.10) 40%,
              rgba(0,81,125,.03) 62%,
              rgba(0,81,125,0) 80%);
  filter: blur(70px); pointer-events: none;
}
#bt-root .dp-walk {
  position: relative;
  padding-inline: 5%;
  display: grid; grid-template-columns: 500px 1fr; gap: 72px; align-items: center;
}
#bt-root .dp-walk__image { position: relative; border-radius: 30px; overflow: hidden; min-height: 483px; }
#bt-root .dp-walk__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#bt-root .dp-walk__title {
  position: absolute; top: 30px; left: 32px; right: 32px;
  font-size: 45px; font-weight: 500; color: #fff; line-height: 1.22;
}
/* arrow flows inline right after "away with" */
#bt-root .dp-walk__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle;
  width: 46px; height: 46px; border-radius: 50%;
  background: #000; margin-left: 8px;
  position: relative; top: -4px;
}
#bt-root .dp-walk__list { display: flex; flex-direction: column; gap: 10px; justify-content: flex-start; }
#bt-root .dp-walk__list li {
  background: rgba(255,255,255,.7); border: 1px solid var(--c-border);
  border-radius: 20px; padding: 18px 28px; font-size: 20px; color: #000;
}

/* ---------- How the design phase runs ---------- */
#bt-root .dp-runs-wrap { position: relative; padding-block: 72px; padding-inline: 5%; overflow: hidden; margin-top: 8px; }
/* Figma: #00517D ellipse 1512×885, 70% fill on a 40%-opacity layer ≈ soft blue
   wash spanning the full card area (not an off-centre blob) */
#bt-root .dp-runs__glow {
  position: absolute; left: 50%; top: 47%;
  width: 116%; height: 620px; transform: translate(-50%, -50%);
  /* wide horizontally so the tint still reaches the edge cards (01/04), but a
     shorter vertical spread so it fades out before the title and the note. */
  background: radial-gradient(ellipse 82% 52% at 52% 46%,
              rgba(0,81,125,.22) 0%,
              rgba(0,81,125,.16) 28%,
              rgba(0,81,125,.10) 48%,
              rgba(0,81,125,.05) 68%,
              rgba(0,81,125,.015) 84%,
              rgba(0,81,125,0) 100%);
  filter: blur(78px); pointer-events: none;
}
#bt-root .dp-runs { position: relative; }
#bt-root .dp-runs__title { font-size: 50px; font-weight: 500; color: #000; margin-bottom: 36px; }
/* mobile-only forced line break in titles (no effect on desktop) */
#bt-root .br-mobile { display: none; }
#bt-root .dp-runs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
#bt-root .run-step {
  background: rgba(255,255,255,.6); border-radius: 20px; padding: 28px;
  min-height: 178px;
}
#bt-root .run-step--hl { background: rgba(0,81,125,.18); }
#bt-root .run-step__num { display: block; font-size: 45px; font-weight: 500; color: #000; margin-bottom: 24px; }
#bt-root .run-step__title { font-size: 17px; line-height: 1.58; color: #000; min-height: 2.9em; }
#bt-root .dp-runs__note {
  display: flex; gap: 14px; align-items: center;
  margin-top: 42px; width: 80%; margin-inline: auto;
}
#bt-root .dp-runs__note-icon {
  flex: 0 0 auto; margin-top: 2px;
  width: 22px; height: 22px; object-fit: contain;
}
#bt-root .dp-runs__note p { font-size: 15px; line-height: 1.55; color: #000; }

/* ---------- Fixed-fee design bundles ---------- */
#bt-root .dp-bundles { padding-block: 72px; padding-inline: 5%; }
#bt-root .dp-bundles__title { font-size: 50px; font-weight: 500; color: #000; margin-bottom: 32px; }
#bt-root .dp-bundles__list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 28px; }
#bt-root .bundle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: rgba(246,246,246,.7); border-radius: 30px; padding: 28px 32px;
}
#bt-root .bundle-row--hl { background: rgba(0,81,125,.15); }
#bt-root .bundle-row__name { font-size: 20px; color: #000; }
#bt-root .bundle-row__price { font-size: 20px; color: #000; white-space: nowrap; }
#bt-root .dp-bundles__cta {
  display: inline-block; border: 3px solid var(--c-blue); color: var(--c-blue);
  border-radius: 35px; padding: 18px 40px; font-size: 16px; font-weight: 500;
}

/* ---------- What can go wrong (reused card style) ---------- */
#bt-root .dp-wrong { padding-block: 32px 72px; padding-inline: 5%; }
#bt-root .dp-wrong__title { font-size: 55px; font-weight: 500; color: #000; line-height: 1.27; margin-bottom: 36px; }
#bt-root .dp-wrong__title span { color: rgba(0,0,0,.5); }
#bt-root .dp-wrong__list { display: flex; flex-direction: column; gap: 20px; }
#bt-root .wrong-card { background: rgba(246,246,246,.7); border-radius: 30px; padding: 26px 52px; }
#bt-root .wrong-card__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-size: 23px; font-weight: 600; color: #000; margin-bottom: 12px;
  list-style: none;
  /* no blue tap-highlight or text-selection when tapping to expand */
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
#bt-root .wrong-card__q::-webkit-details-marker { display: none; }
/* desktop: cards are always-expanded, no chevron (static look) */
#bt-root .wrong-card__chev { display: none; }
#bt-root .wrong-card__a { font-size: 16px; line-height: 1.6; color: rgba(0,0,0,.6); display: block; }

/* ---------- Design with us (split) ---------- */
#bt-root .dp-choose { padding-block: 56px; padding-inline: 5%; }
#bt-root .dp-choose__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; margin-bottom: 36px;
}
#bt-root .dp-choose__title { font-size: 55px; font-weight: 500; color: #000; line-height: 1.27; }
#bt-root .dp-choose__title span { color: rgba(0,0,0,.5); }
#bt-root .dp-choose__lead { font-size: 20px; font-weight: 300; line-height: 1.65; color: #000; text-align: right; max-width: 410px; flex: 0 0 auto; }
#bt-root .dp-choose__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
#bt-root .choose-card { background: rgba(0,81,125,.15); border-radius: 30px; padding: 35px 40px; display: flex; flex-direction: column; }
#bt-root .choose-card__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; background: #000;
  margin-bottom: 60px;
}
#bt-root .choose-card__title { font-size: 23px; font-weight: 600; color: rgba(0,0,0,.5); margin-bottom: 10px; }
#bt-root .choose-card__body { font-size: 18px; color: rgba(0,0,0,.5); line-height: 1.45; margin-bottom: 18px; }
#bt-root .choose-card__link { font-size: 20px; font-weight: 500; color: var(--c-blue); margin-top: auto; }

/* ---------- Recent design projects ---------- */
#bt-root .dp-projects { padding-block: 56px; padding-inline: 5%; }
#bt-root .dp-projects__title { font-size: 55px; font-weight: 500; color: #000; margin-bottom: 36px; }
#bt-root .dp-projects__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
#bt-root .dp-proj-card {
  position: relative; aspect-ratio: 1 / 1.1; border-radius: 30px; overflow: hidden;
  cursor: pointer;
  transition: transform .35s ease, box-shadow .35s ease;
}
#bt-root .dp-proj-card:hover, #bt-root .dp-proj-card:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
#bt-root .dp-proj-card__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
#bt-root .dp-proj-card:hover .dp-proj-card__photo, #bt-root .dp-proj-card:focus-within .dp-proj-card__photo {
  transform: scale(1.06);
}
#bt-root .dp-proj-card__overlay {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 32px;
  min-height: 55%;                 /* gradient covers the lower ~half of the card */
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(to top,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.55) 30%,
    rgba(0,0,0,0) 100%);
}
#bt-root .dp-proj-card__place { font-size: 23px; font-weight: 600; color: #fff; margin-bottom: 6px; }
#bt-root .dp-proj-card__meta { font-size: 17px; color: #e7e7e7; margin-bottom: 14px; }
#bt-root .dp-proj-card__link { align-self: flex-start; font-size: 14px; font-weight: 500; color: #fff; border: 1.5px solid #fff; border-radius: 30px; padding: 9px 16px; display: inline-block; transition: background-color .25s ease, color .25s ease; }
#bt-root .dp-proj-card:hover .dp-proj-card__link, #bt-root .dp-proj-card__link:hover, #bt-root .dp-proj-card__link:focus-visible { background: #fff; color: #000; }

/* honour reduced-motion: keep the fill cues, drop the movement */
@media (prefers-reduced-motion: reduce) {
  #bt-root .dp-proj-card, #bt-root .dp-proj-card__photo { transition: none; }
  #bt-root .dp-proj-card:hover, #bt-root .dp-proj-card:focus-within { transform: none; }
  #bt-root .dp-proj-card:hover .dp-proj-card__photo, #bt-root .dp-proj-card:focus-within .dp-proj-card__photo { transform: none; }
}

/* ---------- FAQ (reused accordion) ---------- */
#bt-root .dp-faq-wrap { padding-bottom: 72px; }
#bt-root .dp-faq { background: #F6F6F6; border-radius: 50px; padding: 48px; padding-inline: 4%; }
#bt-root .dp-faq__title { font-size: 55px; font-weight: 500; color: #000; margin-bottom: 36px; }
/* CTA centered at the bottom of the FAQ list */
#bt-root .dp-faq__cta {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin-top: 48px;
}
#bt-root .dp-faq__cta-title { font-size: 32px; font-weight: 500; color: #000; margin-bottom: 24px; }
#bt-root .dp-faq__cta .btn { padding: 22px 44px; font-size: 17px; font-weight: 600; border-radius: 40px; }
/* desktop: CTA inside the card is shown; the outside copy is hidden */
#bt-root .dp-faq__cta--out { display: none; }
#bt-root .dp-faq__list { display: flex; flex-direction: column; gap: 20px; }
#bt-root .faq-item { background: #fff; border-radius: 30px; overflow: hidden; }
#bt-root .faq-item__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 30px 32px; cursor: pointer; list-style: none; font-size: 22px; color: #000;
  /* no blue tap-highlight or text-selection when tapping to expand */
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
#bt-root .faq-item__q::-webkit-details-marker { display: none; }
#bt-root .faq-item__icon {
  flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%;
  background: var(--c-blue);     /* blue circle so the white + shows clearly */
  display: flex; align-items: center; justify-content: center; transition: transform .2s ease;
}
#bt-root .faq-item__icon img { width: 18px; height: 18px; }
#bt-root .faq-item[open] .faq-item__icon { transform: rotate(45deg); }
#bt-root .faq-item__a { padding: 0 32px 28px; font-size: 17px; color: rgba(0,0,0,.6); line-height: 1.6; }

/* ==========================================================================
   Mobile (≤900px)
   ========================================================================== */
@media (max-width: 900px) {
  /* --- nav: drop the overlay treatment, render as a normal white-bg bar --- */
  #bt-root .site-header--overlay { position: static; }
  #bt-root .site-header--overlay .nav { padding-inline: 0px; padding-top: 20px; }
  #bt-root .site-header--overlay .nav__logo img { filter: none; }            /* colored logo on white */
  #bt-root .site-header--overlay .nav__burger span { background: #000; }
  /* black phone pill with white text/icon (matches mobile design) */
  #bt-root .site-header--overlay .nav__phone { background: #000; color: #fff; border: 0; }
  #bt-root .site-header--overlay .nav__phone img { filter: brightness(0) invert(1); }

  /* --- hero image card: no title inside; stats top-left, directions top-right, reviews bottom --- */
  /* fixed 350px tall image on mobile (not full/aspect height) */
  #bt-root .dp-hero {
    aspect-ratio: auto; height: 350px; min-height: 0; border-radius: 24px;
    justify-content: flex-start;
    padding-bottom: 0;
  }
  #bt-root .dp-hero__overlay {
    background:
      linear-gradient(to bottom, rgba(0,0,0,.45) 0%, transparent 26%),
      linear-gradient(to top, rgba(0,0,0,.35) 0%, transparent 26%);
  }
  #bt-root .dp-hero__content { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; padding:0!important; } /* v0.26: keep the H1 for screen readers */     /* title/sub move below the image */

  #bt-root .dp-hero__bar {
    position: absolute; inset: 0;
    flex-direction: column; align-items: stretch; justify-content: space-between;
    padding: 0;
  }
  /* stats top-left + directions top-right share the first row */
  #bt-root .dp-stat {
    order: 1; margin: 0; padding: 22px 24px 0; padding-right: 4px;
    flex-direction: row; align-items: center; gap: 10px;
    max-width: 62%;
  }
  #bt-root .dp-stat__num { font-size: 24px; }
  #bt-root .dp-stat__label { font-size: 12px; line-height: 1.2; }
  #bt-root .dp-directions {
    order: 1; margin: 0; padding: 24px 24px 0;
    position: absolute; top: 0; right: 0; font-size: 14px;
  }
  /* reviews: a floating white card with space on both sides, overlapping the photo's bottom edge */
  #bt-root .dp-reviews {
    order: 3; margin: 0 20px; align-self: stretch; justify-content: flex-start;
    gap: 14px; padding: 12px 18px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
  }
  #bt-root .dp-reviews__avatars img { width: 38px; height: 38px; }
  #bt-root .dp-reviews__text { display: flex; flex-direction: column; gap: 2px; }
  #bt-root .dp-reviews__score { font-size: 18px; gap: 6px; }
  #bt-root .dp-reviews__stars img { width: 15px; height: 15px; }
  #bt-root .dp-reviews__label { font-size: 15px; white-space: nowrap; }

  /* --- title + sub + CTAs below the image (blue title on white) --- */
  #bt-root .dp-hero__below { display: block; text-align: center; padding: 36px 24px 8px; }
  #bt-root .dp-hero__below-title { font-size: 45px; font-weight: 500; line-height: 1; color: var(--c-blue); }
  #bt-root .dp-hero__below-sub {
    font-size: 17px; line-height: 1.4; color: rgba(0,0,0,.55);
    margin: 16px auto 0; max-width: 360px;
  }
  #bt-root .dp-hero__below-sub b { font-weight: 600; font-style: italic; color: rgba(0,0,0,.7); }
  #bt-root .dp-hero__below-cta { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; align-items: center; }
  #bt-root .dp-hero__below-cta .btn { justify-content: center; padding: 18px 30px; font-size: 16px; min-width: 280px; }
  /* "See the bundles" hugs its text (smaller than the primary CTA), per design */
  #bt-root .dp-hero__below-cta .btn--ghost { min-width: 0; padding: 16px 28px; }

  /* SUMMARY section is hidden on mobile (per design) */
  #bt-root .dp-summary { display: none; }

  #bt-root .dp-walk-wrap { padding-top: 32px; }
  #bt-root .dp-walk { grid-template-columns: 1fr; gap: 18px; padding-top: 36px; }
  /* no image on mobile: heading sits as dark text directly above the list (per design) */
  #bt-root .dp-walk__image {
    min-height: 0; border-radius: 0; overflow: visible; background: none;
  }
  #bt-root .dp-walk__image img { display: none; }
  #bt-root .dp-walk__title {
    position: static; padding: 0; margin-bottom: 4px;
    font-size: 32px; color: #000; line-height: 1.15;
  }
  /* small dark arrow circle inline after the heading */
  #bt-root .dp-walk__arrow {
    top: 0; left: auto; right: auto;
    width: 30px; height: 30px; margin-left: 10px;
  }
  #bt-root .dp-walk__arrow svg { width: 18px; height: 13px; }
  #bt-root .dp-walk__list li { font-size: 15px; padding: 14px 20px; }

  #bt-root .dp-runs-wrap { padding-block: 40px; }
  #bt-root .dp-runs__title { font-size: 30px; margin-bottom: 24px; }
  #bt-root .br-mobile { display: inline; }   /* break "How the design" / "phase runs" on mobile */
  #bt-root .dp-runs__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  #bt-root .run-step { min-height: auto; padding: 20px; }
  #bt-root .run-step__num { font-size: 28px; margin-bottom: 16px; }
  #bt-root .run-step__title { font-size: 15px; min-height: auto; }
  #bt-root .dp-runs__note { font-size: 15px; padding-inline: 20px; width: 100%; gap: 10px; margin-top: 28px; }
  #bt-root .dp-runs__note p { font-size: 11px; line-height: 1.5; }
  #bt-root .dp-runs__note-icon { width: 16px; height: 16px; margin-top: 0; }

  #bt-root .dp-bundles { padding-block: 40px; }
  #bt-root .dp-bundles__title { font-size: 36px; line-height: 1.15; margin-bottom: 24px; }
  #bt-root .dp-bundles__title-dim { color: rgba(0,0,0,.45); }   /* "design bundles" greyed on mobile */
  /* name on the left (wraps to 2 lines), price aligned right — per design */
  #bt-root .bundle-row { flex-direction: row; align-items: center; gap: 16px; padding: 20px 22px; }
  #bt-root .bundle-row__name { font-size: 15px; line-height: 1.3; }
  #bt-root .bundle-row__price { font-size: 15px; text-align: right; flex: 0 0 auto; }
  /* smaller CTA that hugs its text, per design */
  #bt-root .dp-bundles__cta { border-width: 2px; border-radius: 30px; padding: 14px 22px; font-size: 13px; }

  #bt-root .dp-wrong { padding-block: 24px 40px; }
  #bt-root .dp-wrong__title { font-size: 28px; margin-bottom: 24px; }
  /* mobile: collapsible accordion — closed by default, chevron on the right */
  #bt-root .wrong-card { padding: 0; overflow: hidden; }
  #bt-root .wrong-card__q {
    font-size: 16px; margin-bottom: 0; cursor: pointer;
    padding: 20px 22px;
  }
  #bt-root .wrong-card__chev {
    display: inline-flex; flex: 0 0 auto; color: rgba(0,0,0,.5);
    transition: transform .2s ease;
  }
  #bt-root .wrong-card[open] .wrong-card__chev { transform: rotate(180deg); }
  /* answer hidden when closed; shown (with padding) when open */
  #bt-root .wrong-card:not([open]) > .wrong-card__a { display: none; }
  #bt-root .wrong-card__a { padding: 0 22px 22px; font-size: 15px; }

  #bt-root .dp-choose { padding-block: 40px; }
  #bt-root .dp-choose__head { flex-direction: column; gap: 24px; }
  #bt-root .dp-choose__title { font-size: 30px; }
  #bt-root .dp-choose__lead { text-align: left; font-size: 15px; }
  #bt-root .dp-choose__cards { grid-template-columns: 1fr; gap: 16px; }
  /* smaller text + arrow buttons on mobile */
  #bt-root .choose-card { padding: 26px 28px; }
  #bt-root .choose-card__arrow { width: 38px; height: 38px; margin-bottom: 26px; }
  #bt-root .choose-card__arrow svg { width: 16px; height: 16px; }
  #bt-root .choose-card__title { font-size: 19px; }
  #bt-root .choose-card__body { font-size: 15px; }
  #bt-root .choose-card__link { font-size: 16px; }

  #bt-root .dp-projects { padding-block: 40px; }
  #bt-root .dp-projects__title { font-size: 30px; margin-bottom: 24px; }
  #bt-root .dp-projects__grid { grid-template-columns: 1fr; gap: 16px; }
  #bt-root .dp-proj-card { aspect-ratio: 4 / 3; }
  /* smaller text + a button that hugs its label (not full-width) */
  #bt-root .dp-proj-card__overlay { padding: 22px; }
  #bt-root .dp-proj-card__place { font-size: 19px; margin-bottom: 4px; }
  #bt-root .dp-proj-card__meta { font-size: 14px; margin-bottom: 12px; }
  #bt-root .dp-proj-card__link { align-self: flex-start; font-size: 12px; padding: 8px 14px; }

  #bt-root .dp-faq { padding: 28px 20px; border-radius: 28px; }
  #bt-root .dp-faq__title { font-size: 30px; }
  /* mobile: hide the in-card CTA, show the one outside the FAQ card */
  #bt-root .dp-faq__cta--in { display: none; }
  #bt-root .dp-faq__cta--out { display: flex; margin-top: 36px; }
  #bt-root .dp-faq__cta-title { font-size: 24px; }
  #bt-root .dp-faq__cta .btn { padding: 19px 30px; font-size: 14px; }
  #bt-root .faq-item__q { font-size: 16px; padding: 22px 20px; }
  #bt-root .faq-item__a { padding: 0 20px 20px; font-size: 15px; line-height: 1.5; }
  /* smaller plus icon on mobile (matches Design Bundles page) */
  #bt-root .faq-item__icon { width: 32px; height: 32px; flex: 0 0 auto; }
  #bt-root .faq-item__icon img { width: 13px; height: 13px; }
}


/* ============================================================
   OVERRIDE LEGACY — stessi conflitti mappati su build-phase
   #bt-root new_design.css riga 9-12: section {max-width:1140px; display:flow-root !important}
   #bt-root site.css riga 67-72: h1 {30px !important, Arimo, padding/margin forzati}
   ============================================================ */

/* reset scoped (box-sizing e azzeramenti che base.css dava globalmente) */
section[class*="dp-"], section[class*="dp-"] *,
#bt-root .dp-container, #bt-root .dp-container * { box-sizing: border-box; }
#bt-root section[class*="dp-"] img, #bt-root section[class*="dp-"] svg { display: block; max-width: 100%; }
#bt-root section[class*="dp-"] ul { margin: 0; padding: 0; list-style: none; }
#bt-root section[class*="dp-"] a { text-decoration: none; }

/* h1: neutralizza Arimo e i padding/margin forzati */
#bt-root section[class*="dp-"] h1 {
  font-family: 'Mulish', sans-serif !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  font-weight: inherit;
}

/* griglie dentro <section>: display:flow-root !important le annulla */
#bt-root section.dp-split, #bt-root section[class*="dp-"][class*="grid"] { display: grid !important; }

/* celle grid che non si restringono sotto il contenuto */
#bt-root .dp-container [class*="__grid"] > *, #bt-root .dp-container [class*="-row"] > * { min-width: 0; }


/* --- correzioni da audit 23 lug 2026 --- */

/* 1. i due H1 dell'hero, schiacciati a 30px da site.css riga 68 */
#bt-root h1.dp-hero__title { font-size: clamp(56px, 8.6vw, 130px) !important; line-height: 1.02 !important; color: #fff !important; }
#bt-root .dp-hero__below-title { margin:0;  font-size: clamp(28px, 3vw, 44px) !important; }
@media (max-width: 900px) { h1.dp-hero__title { font-size: clamp(40px, 11vw, 64px) !important; } }

/* 2. dp-walk-wrap non ha .dp-container: eredita max-width 1140px mentre
      il contenuto interno e' disegnato per 1320px */
#bt-root section.dp-walk-wrap { max-width: 1320px !important; }
#bt-root .dp-walk { max-width: 100%; }

/* 3. glow decorativi che sbordano dal contenitore */
#bt-root .dp-runs__glow, #bt-root .dp-walk__glow { max-width: 100%; }

/* 4. margin-bottom dei titoli che perde contro bootstrap (10px generico) */
#bt-root .dp-walk__title { margin-bottom: 24px !important; }
#bt-root .dp-choose__title { margin-bottom: 36px !important; }

/* style.css riga 1311: * {box-sizing: inherit !important} batte il nostro border-box */
section[class*="dp-"], section[class*="dp-"] *,
#bt-root .dp-container, #bt-root .dp-container * { box-sizing: border-box !important; }

/* --- hero mobile: il flex dei blocchi stat/reviews viene annullato da regole legacy --- */
@media (max-width: 900px) {
  #bt-root .dp-hero__bar { display: flex !important; }
  #bt-root .dp-stat { display: flex !important; align-items: center; }
  #bt-root .dp-reviews { display: flex !important; align-items: center; background: #fff; }
  #bt-root .dp-reviews__avatars { display: flex !important; flex: 0 0 auto; }
  #bt-root .dp-reviews__text { display: flex !important; flex: 1 1 auto; min-width: 0; }
  #bt-root .dp-reviews__score { display: flex !important; }
}

/* la barra e' absolute su tutto l'hero: i suoi figli finiscono sopra la nav.
   La ancoro alla sola area immagine. */
@media (max-width: 900px) {
  #bt-root .dp-hero { position: relative; }
  #bt-root .dp-hero__bar { top: auto !important; height: auto !important; }
  #bt-root .dp-stat { padding-top: 90px !important; }
}

/* rifinitura hero mobile: directions in alto a destra, stat con aria sotto */
@media (max-width: 900px) {
  #bt-root .dp-directions { top: 90px !important; right: 24px !important; padding: 0 !important; }
  #bt-root .dp-stat { padding-top: 90px !important; padding-bottom: 0 !important; }
  #bt-root .dp-reviews { margin-bottom: 20px !important; }
}

/* directions: ancorate all'angolo alto destro dell'immagine */
@media (max-width: 900px) {
  #bt-root .dp-hero__bar .dp-directions {
    position: absolute !important;
    top: 100px !important; right: 24px !important;
    margin: 0 !important; padding: 0 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
  }
}

/* glow decorativi: non devono generare scroll a viewport stretti */
#bt-root .dp-walk__glow, #bt-root .dp-runs__glow { max-width: 100%; }
#bt-root section[class*="dp-"] { overflow-x: clip; }

/* directions: ancoraggio a destra senza left calcolato (usciva fuori schermo a 390px) */
@media (max-width: 900px) {
  #bt-root .dp-hero__bar .dp-directions { left: auto !important; width: auto !important; }
}