/* ===========================================================================
   Home page - built from the boards "Home - desktop" (Main.dc.html, 1440) and
   "Home - mobile" (Home-Mobile.dc.html, 390).
   Section order follows the desktop board exactly:
   hero, media strip, case results, how we can help, team, Google reviews,
   client stories, two offices, case review form, follow El Gallo.
   =========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; background: var(--ink); overflow: hidden;
  /* The home board sets a smaller headline than the interior pages, at a
     slightly looser line height. */
  --h1-max: 76px;
}
.hero .h-display--lg { line-height: .94; margin-top: 22px; }

.hero__media { position: absolute; inset: 0; }
.hero__media img {
  position: absolute; top: 0; right: 0; width: 82%; height: 100%;
  max-width: none; object-fit: cover; object-position: 70% 30%;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(18,12,13,.97) 0%, rgba(18,12,13,.92) 42%, rgba(18,12,13,.45) 60%, rgba(18,12,13,0) 74%);
}
/* Sits inside .hero__media so it always fades the bottom of the photo,
   whether the photo fills the hero (desktop) or is a 300px band (mobile). */
.hero__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 2;
  background: linear-gradient(0deg, rgba(18,12,13,.85), rgba(18,12,13,0));
}

.hero__inner {
  position: relative; z-index: 2;
  max-width: var(--wrap); margin-inline: auto;
  padding: 84px var(--pad-x) 96px; min-height: 720px;
  display: flex; flex-direction: column; justify-content: center;
}
.hero__col { max-width: 880px; display: flex; flex-direction: column; }
.hero h1 { margin: 22px 0 0; color: #FFF; }
.hero__script { margin: 16px 0 0 4px; }
.hero .lede { margin: 18px 0 0; max-width: 580px; color: #EDE3DD; }

.hero__choices { margin-top: 34px; display: flex; gap: 16px; flex-wrap: wrap; }
.choice {
  width: 300px; max-width: 100%; min-height: 84px; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-radius: 4px; color: #FFF; text-decoration: none;
}
.choice:hover { color: #FFF; }
.choice--red { background: var(--red); }
.choice--red:hover { background: var(--red-hover); }
.choice--ghost { background: rgba(255,251,246,.06); border: 1.5px solid var(--cream-2); }
.choice--ghost:hover { background: rgba(255,251,246,.14); }
.choice__txt { display: flex; flex-direction: column; gap: 2px; }
.choice__kicker {
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.choice--red .choice__kicker { color: #FFD9D6; }
.choice--ghost .choice__kicker { color: var(--on-dark); }
.choice__name {
  font-family: var(--cond); font-size: 28px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
}

/* The space between the kicker and the name is leading, not the 2px gap:
   13px text sits in a 20.8px line box and 28px text in a 44.8px one, so
   most of that gap is empty line box rather than spacing. Tightened above
   the 1100px breakpoint only, so the phone layout is untouched. */
@media (min-width: 1101px) {
  .choice__kicker { line-height: 1.25; }
  .choice__name { line-height: 1.1; }
}

.hero__trust {
  margin-top: 34px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  color: var(--on-dark); font-size: 15px; font-weight: 500;
}
.hero__trust > span { display: flex; align-items: center; gap: 10px; }
.hero__trust strong { color: #FFF; }
.hero__trust .bar { width: 1px; height: 20px; background: var(--line-dark-2); }

@media (max-width: 1100px) {
  .hero__inner { min-height: 0; padding: 0 0 36px; display: block; max-width: none; }
  .hero__media { position: relative; height: 300px; }
  .hero__media img { position: absolute; width: 195%; left: -85%; right: auto; object-position: 80% 30%; }
  .hero__media::after { background: none; }
  .hero__fade { height: 160px; background: linear-gradient(0deg, #1A1213 24%, rgba(26,18,19,0)); }
  .hero__col { position: relative; z-index: 4; margin-top: -40px; padding: 0 16px; max-width: none; }
  .hero h1 { margin-top: 10px; }
  .hero__script { margin: 10px 0 0 2px; }
  .hero .lede { margin-top: 14px; font-size: 16px; }
  .hero__choices { margin-top: 22px; flex-direction: column; gap: 10px; }
  /* Stacked, these were width:100% all the way up to the 1100px breakpoint,
     so on a tablet each one became a 1068px banner with its arrow stranded
     843px from the text. The phone case is unaffected - at 390 the column is
     358px, already under this cap - it just stops the stretch above that.
     The height came entirely from min-height with no vertical padding, so
     the 61px text block sat in a 68px box with 3px above and below it.
     Padding now sets the breathing room and the box grows from its content;
     min-height stays as a floor. */
  .choice { width: 100%; max-width: 380px; min-height: 68px; padding: 15px 18px; }
  .choice__name { font-size: 24px; }
  .hero__trust { margin-top: 18px; gap: 8px; font-size: 14px; }
  .hero__trust .bar, .hero__trust .is-desktop { display: none; }
}

/* --------------------------------------------------------------------------
   Case results
   -------------------------------------------------------------------------- */
.results__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; margin-bottom: 44px;
}
.results__tabs { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
.results__tablist { display: flex; gap: 10px; }

.results__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.rescard {
  background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 18px 40px -28px rgba(58,11,13,.45);
}
/* Doubled to (0,2,0): a broad `.block p` rule out-ranks a single class
   and was deciding this element size. Same pattern as site.css. */
.rescard__type.rescard__type { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.rescard__amt { font-family: var(--cond); font-size: clamp(48px, 4vw, 58px); font-weight: 700; line-height: 1; color: var(--ink); }
.rescard__kind { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* :where() drops this to (0,0,1) so it styles the description paragraph
   without out-ranking .rescard__amt / __type / __kind, which are all <p>
   too - as a bare `.rescard p` it was (0,1,1) and flattened the figure
   from 58px to 15px. */
:where(.rescard) p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--body); }

.rescard--quote { background: var(--oxblood); border: 0; color: #FFF; gap: 14px; }
.rescard--quote .rescard__type { color: var(--pink); }
.rescard--quote p { margin: 0; font-size: 17px; line-height: 1.5; color: #FFF; }
.rescard--quote .who { font-size: 14px; color: #E0CFC9; }

.results__foot {
  margin-top: 44px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}

.results__nav { display: flex; align-items: center; gap: 18px; }

@media (max-width: 1100px) {
  .results__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .results__head { margin-bottom: 20px; align-items: flex-start; }
  .results__tabs { align-items: stretch; width: 100%; }
  .results__tablist { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .results__tablist .pill { min-height: 44px; padding: 0 12px; font-size: 13px; }
  .results__grid {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; margin-inline: calc(var(--pad-x) * -1); padding-inline: var(--pad-x);
  }
  .results__grid::-webkit-scrollbar { display: none; }
  .rescard { width: 290px; flex: none; scroll-snap-align: start; padding: 24px 22px; }
  .rescard__amt { font-size: 48px; }
  .results__foot { margin-top: 20px; }
  .results__nav .rnd { display: none; }
}
/* --------------------------------------------------------------------------
   How we can help (practice tabs)
   Desktop: group buttons in column 1, the open group's panel across
   columns 2-3. Mobile: each group is an accordion, matching the mobile board.
   -------------------------------------------------------------------------- */
.help { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.help__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.help__head .script { margin-top: 0; }
.help__tablist { display: flex; gap: 10px; }
.help__tablist .pill { min-height: 52px; padding: 0 30px; font-size: 15px; }

.help__body { width: 100%; }

.groupbtn {
  min-height: 66px; padding: 0 24px; border: 0; border-radius: 4px;
  background: var(--cream-2); color: var(--ink);
  font-family: var(--sans); font-size: 15px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer;
}
.groupbtn svg { stroke: #B9A69F; flex: none; }
.groupbtn[aria-selected="true"] { background: var(--oxblood); color: #FFF; }
.groupbtn[aria-selected="true"] svg { stroke: var(--pink); }
.groupbtn__m { display: none; }

.grp__text { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.grp__text h3 {
  font-size: clamp(32px, 2.9vw, 42px); line-height: 1;
  text-transform: uppercase; color: var(--oxblood);
}
.grp__text > p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--body); }

.help__services { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.help__services a, .help__services .is-plain {
  display: flex; align-items: center; gap: 12px;
  font-size: 18px; font-weight: 600; color: var(--ink);
}
.help__services a {
  text-decoration: underline; text-decoration-color: #E3B4B0; text-underline-offset: 5px;
}
.help__services a:hover { color: var(--red); }
.help__services .is-plain { color: var(--muted); text-decoration: none; }
.help__services svg { flex: none; }
.help__hub { margin-top: 14px; align-self: flex-start; }

.help__art { position: relative; width: 420px; max-width: 100%; aspect-ratio: 420 / 470; }
.help__art::before {
  content: ""; position: absolute; left: 5.24%; top: 4.68%;
  width: 94.76%; height: 95.32%; background: var(--red); border-radius: var(--radius);
}
.help__art img {
  position: absolute; left: 0; top: 0; width: 94.76%; height: 95.32%;
  object-fit: cover; border-radius: var(--radius);
}
.help__stamp {
  position: absolute; left: -26px; bottom: 7.2%; padding: 6px 22px 10px;
  background: var(--cream); border-radius: 4px;
  box-shadow: 0 10px 30px -12px rgba(26,18,19,.35);
  font-family: var(--script); font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; color: var(--red);
}

/* The mobile board puts a single "How much is my case worth?" button under
   the groups; on desktop that job belongs to the mega menu promo. */
.help__casevalue { display: none; }

@media (min-width: 901px) {
  .help__body {
    display: grid; grid-template-columns: 360px minmax(0, 1fr) 420px;
    column-gap: 56px; row-gap: 8px; align-items: start;
  }
  .grp { display: contents; }
  .groupbtn { grid-column: 1; }
  .grp__panel {
    grid-column: 2 / -1; grid-row: 1 / 5;
    display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: start;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .help__body { grid-template-columns: 300px minmax(0, 1fr); column-gap: 36px; }
  .grp__panel { grid-template-columns: minmax(0, 1fr); }
  .help__art { display: none; }
}

@media (max-width: 900px) {
  .help { gap: 18px; align-items: stretch; }
  .help__head { align-items: flex-start; text-align: left; }
  .help__tablist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .help__tablist .pill { min-height: 44px; padding: 0 12px; font-size: 13px; }

  .help__body { display: flex; flex-direction: column; gap: 8px; }
  .grp { border-radius: var(--radius); overflow: hidden; }
  .grp:has(.groupbtn[aria-selected="true"]) { background: var(--oxblood); }
  .groupbtn { width: 100%; min-height: 60px; padding: 0 18px; font-size: 14px; border-radius: var(--radius); }
  .grp:has(.groupbtn[aria-selected="true"]) .groupbtn { border-radius: var(--radius) var(--radius) 0 0; }
  .groupbtn__i { display: none; }
  .groupbtn__plus { display: block; }
  .groupbtn__minus { display: none; }
  .groupbtn[aria-selected="true"] .groupbtn__plus { display: none; }
  .groupbtn[aria-selected="true"] .groupbtn__minus { display: block; }

  .grp__panel { display: flex; flex-direction: column; background: var(--cream); }
  .grp__text { gap: 0; padding: 0; }
  .grp__text h3, .grp__text > p { display: none; }
  .help__services { padding: 16px 18px 20px; gap: 10px; margin-top: 0; }
  .help__services a, .help__services .is-plain { font-size: 16px; }
  .help__services svg { display: none; }
  .help__hub { margin: 0 18px 18px; align-self: stretch; }

  .grp__panel .help__art { width: 100%; aspect-ratio: auto; height: 170px; order: -1; }
  .grp__panel .help__art::before, .grp__panel .help__stamp { display: none; }
  .grp__panel .help__art img { position: static; width: 100%; height: 170px; border-radius: 0; }

  .help__casevalue { display: flex; min-height: 56px; }
}
/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */
.team .gallo { left: -120px; top: 40px; width: 720px; height: 720px; opacity: .22; }
.team__grid { display: grid; grid-template-columns: 540px minmax(0,1fr); gap: 80px; align-items: center; }
.team__copy { display: flex; flex-direction: column; color: #FFF; }
.team__lede { display: none; }
.team__copy h2 { color: #FFF; }
.team__copy > p:not(.eyebrow):not(.script):not(.team__lede) { margin: 22px 0 0; font-size: 18px; line-height: 1.65; color: var(--on-dark-3); }
.team__points { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
.team__points div { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 600; }
.team__points i {
  width: 44px; height: 44px; flex: none; border-radius: 50%; background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
}
.team__points svg { stroke: var(--pink); }
.team__ctas { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }

.team__cards { display: flex; flex-direction: column; gap: 22px; }

/* The copy column is a fixed 540px on the board. Every other two-column
   band on this page collapses at 1100px; this one was missed, so below
   1100 the column stayed 540px wide inside a section that clips, and the
   headline and body text were cut off mid-word on every phone. */
@media (max-width: 1100px) {
  .team__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* The team rail. Three cards fit the column the board gives this band, so
   Alex, Adrian and Vale are on screen before anyone scrolls and the other
   four are a swipe away. Snapping is `proximity`, not `mandatory`: mandatory
   cancels programmatic scrollTo, which is what silently broke the results
   arrows once already. */
.team__rail {
  --team-gap: 20px;
  display: flex; gap: var(--team-gap);
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 2px;
  /* Load-bearing. A flex item defaults to min-width:auto, so without this
     the rail and its column grow to fit all seven cards instead of
     scrolling: measured 912px wide inside a 390px band, one card visible
     and the rest unreachable. The section clips, so nothing overflowed the
     page and the sweep stayed green while the carousel was useless.
     width:100% is the half that actually fixes it: the cards size with a
     percentage flex-basis, which is circular while the rail is auto-width,
     so it fell back to the portrait's intrinsic 582px. A definite width
     resolves the percentage against the band instead. */
  min-width: 0; width: 100%;
}
.team__cards { min-width: 0; width: 100%; }
.team__rail::-webkit-scrollbar { display: none; }
.team__rail > .person {
  flex: 0 0 calc((100% - var(--team-gap) * 2) / 3);
  scroll-snap-align: start;
}
.team__rail .person > img, .team__rail .person__ph { height: 260px; }
.team__rail .person__mono { width: 84px; height: 84px; font-size: 34px; }
.team__rail .person__body { padding: 18px 18px 22px; }
/* At three across the role runs to two lines on the attorneys and one on
   everyone else, so each bio started at a different height and the cards
   read as misaligned. Reserving the second line puts every bio on the same
   baseline; the line-height is restated because the rule it comes from sets
   none, so the reserved height has to be derived from something stable. */
.team__rail .person__role { line-height: 1.35; min-height: calc(14px * 1.35 * 2); }
.team__rail .person__name { font-size: 24px; }

.team__nav { display: flex; justify-content: flex-end; gap: 12px; }
.rnd--light { border-color: rgba(243, 197, 192, .45); }
.rnd--solid-light { border: 0; background: var(--pink); }

/* Two across once the band stacks, one on a phone. */
@media (max-width: 1100px) {
  .team__rail > .person { flex: 0 0 calc((100% - var(--team-gap)) / 2); }
}
@media (max-width: 620px) {
  .team__rail > .person { flex: 0 0 78%; }
}

/* --------------------------------------------------------------------------
   Google reviews
   -------------------------------------------------------------------------- */
.reviews__grid { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 60px; align-items: start; }
.reviews__score { margin-top: 18px; display: flex; align-items: flex-end; gap: 14px; }
.reviews__num { font-family: var(--cond); font-size: clamp(80px, 8.3vw, 120px); font-weight: 700; line-height: .85; color: var(--ink); }
.reviews__meta { display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; }
.reviews__meta span:last-child { font-size: 16px; font-weight: 600; }
.reviews__acts { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.reviews__acts .btn { min-height: 50px; }
.reviews__acts a.is-text { font-size: 15px; font-weight: 600; color: var(--red); }

.reviews__cards { display: flex; flex-direction: column; gap: 26px; }
.reviews__row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.rev {
  background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
}
.rev__who { display: flex; align-items: center; gap: 12px; }
.rev__av {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px;
}
.rev__av--a { background: var(--oxblood); color: var(--pink); }
.rev__av--b { background: var(--red); color: #FFF; }
.rev__av--c { background: var(--ink); color: #FFF; }
.rev__name { display: flex; flex-direction: column; }
.rev__name > span:first-child { font-size: 16px; font-weight: 700; }
.rev p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.rev__tags { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.rev__tags span {
  padding: 4px 10px; border-radius: 999px; background: var(--surface-3);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--body);
}
.reviews__nav { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }

@media (max-width: 1100px) {
  .reviews__grid { grid-template-columns: 1fr; gap: 28px; }
  .reviews__row { grid-template-columns: 1fr; }
  .reviews__nav { justify-content: center; }
  .reviews__nav .rnd { display: none; }
}
@media (max-width: 640px) {
  .reviews__num { font-size: 80px; }
  .rev { padding: 22px; }
}

/* --------------------------------------------------------------------------
   Client stories (video slots)
   -------------------------------------------------------------------------- */
.stories__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; margin-bottom: 44px;
}
.stories__head h2 { color: #FFF; }
.stories__more { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.stories__more > div { display: flex; align-items: center; gap: 12px; color: var(--on-dark); font-size: 15px; font-weight: 600; }
.stories__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
.story {
  min-height: 420px; border-radius: var(--radius); background: var(--panel);
  border: 1px solid var(--panel-border); position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 22px;
}
.story--empty { border-style: dashed; border-color: var(--line-dark-2); }
.story .gallo { position: absolute; right: -60px; top: -30px; width: 280px; height: 280px; opacity: .35; }
.story__play {
  position: absolute; left: 50%; top: 42%; transform: translateX(-50%);
  width: 72px; height: 72px; border-radius: 50%; border: 0; background: var(--red);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.story--empty .story__play { border: 1.5px solid var(--line-dark-2); background: transparent; }
.story--empty .story__play svg { fill: #8A7A74; }
.story__play svg { fill: #FFF; }
.story__name {
  position: relative; font-family: var(--cond); font-size: 26px; font-weight: 700;
  text-transform: uppercase; color: #FFF;
}
.story--empty .story__name { color: var(--on-dark-2); }
.story__sub { position: relative; font-size: 14px; color: var(--on-dark-2); }
.story--empty .story__sub { color: #8A7A74; }

@media (max-width: 1100px) { .stories__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px) {
  .stories__head { margin-bottom: 18px; align-items: flex-start; }
  .stories__more { align-items: flex-start; }
  .stories__grid { gap: 10px; }
  .story { min-height: 260px; padding: 14px; }
  .story__play { width: 56px; height: 56px; top: 40%; }
  .story__name { font-size: 18px; }
  .story--empty { display: none; }
}

/* --------------------------------------------------------------------------
   Two offices
   -------------------------------------------------------------------------- */
.offices__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; margin-bottom: 44px;
}
.offices__head > p { margin: 0; max-width: 440px; font-size: 17px; line-height: 1.6; color: var(--body); }
.offices__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)) 340px; gap: 24px; }

.communities {
  background: var(--oxblood); border-radius: var(--radius); padding: 30px 28px;
  display: flex; flex-direction: column; gap: 18px; color: #FFF;
}
.communities h3 { font-size: 30px; text-transform: uppercase; }
.communities__list { display: flex; flex-direction: column; gap: 2px; }
.communities__list a, .communities__list span {
  min-height: 44px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #5A2427; color: #FFF; text-decoration: none;
  font-size: 17px; font-weight: 600;
}
/* Phase 2 city pages are plain text until they exist (build plan section 2),
   so they must not carry the arrow that marks a real link. */
.communities__list span { color: var(--on-dark-3); }
.communities__list span svg { display: none; }
.communities__list > :last-child { border-bottom: 0; }
.communities__list svg { stroke: var(--pink); flex: none; }

@media (max-width: 1100px) { .offices__grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .offices__head { margin-bottom: 14px; }
  .offices__grid { gap: 14px; }
  .office__body { padding: 18px; gap: 4px; }
  .office__name { font-size: 24px; }
  .office__addr { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   Case review (steps + intake form)
   -------------------------------------------------------------------------- */
.caserev .gallo { right: -140px; bottom: -120px; width: 640px; height: 640px; opacity: .2; }
.caserev__grid { display: grid; grid-template-columns: minmax(0,1fr) 600px; gap: 80px; align-items: start; }
.caserev__copy { display: flex; flex-direction: column; color: #FFF; }
.caserev__copy h2 { color: #FFF; }
.steps { margin-top: 34px; display: flex; flex-direction: column; gap: 26px; }
.step { display: flex; gap: 20px; }
.step__n { font-family: var(--cond); font-size: 44px; font-weight: 700; line-height: 1; color: var(--red-bright); width: 56px; flex: none; }
.step__t { font-size: 20px; font-weight: 700; }
.step__d { font-size: 16px; line-height: 1.55; color: var(--on-dark-3); }
.caserev__talk { margin-top: 40px; display: flex; flex-direction: column; gap: 6px; }
.caserev__tel { font-family: var(--cond); font-size: clamp(34px, 3.2vw, 46px); font-weight: 700; color: #FFF; text-decoration: none; }
.caserev__chan { display: flex; gap: 18px; font-size: 15px; font-weight: 600; }
.caserev__chan a { color: #FFF; }

.intake {
  /* A cream card sitting inside the oxblood band, which sets color:#FFF.
     Without its own colour every child that declares none inherits white -
     the Preferred language radio labels did, and were white on cream. */
  background: var(--cream); color: var(--ink); border-radius: 8px; padding: 38px 40px;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
}
.intake__title { font-family: var(--cond); font-size: 32px; font-weight: 700; text-transform: uppercase; color: var(--ink); }
.intake fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.intake legend {
  padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--body);
}
.choicegrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.choicegrid label {
  min-height: 50px; border-radius: 4px; border: 1.5px solid var(--border-2);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.choicegrid input { accent-color: var(--red); }
.choicegrid label:has(input:checked) { background: var(--red); border-color: var(--red); color: #FFF; }
.choicegrid label:has(input:checked) input { accent-color: #FFF; }

.fieldgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.field input, .field textarea, .field select {
  min-height: 48px; border: 1px solid var(--border-2); border-radius: 4px;
  background: #FFF; padding: 12px 14px; font: inherit; font-size: 16px; font-weight: 400; color: var(--ink);
}
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus, .field textarea:focus { outline: 3px solid var(--red-bright); outline-offset: 1px; }
.req { color: var(--red); }

.langset { flex-direction: row !important; align-items: center; gap: 20px; flex-wrap: wrap; }
.langset legend { float: left; margin: 0 6px 0 0; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.langset label { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.langset input { accent-color: var(--red); }

.intake__submit { min-height: 56px; }
.intake__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.intake__foot a { font-size: 15px; font-weight: 700; color: var(--red); }
.intake__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

.formmsg { margin: 0; font-size: 15px; font-weight: 600; }
.formmsg[data-state="error"] { color: var(--red); }

@media (max-width: 1100px) {
  .caserev__grid { grid-template-columns: 1fr; gap: 32px; }
  .caserev .gallo { display: none; }
}
@media (max-width: 640px) {
  .intake { padding: 22px 18px; gap: 12px; }
  /* The legend beside both options was wider than the form, so "Español"
     dropped under "English". The legend takes its own line instead. */
  .langset legend { float: none; width: 100%; margin: 0 0 2px; }
  .fieldgrid { grid-template-columns: 1fr; gap: 10px; }
  .steps { gap: 18px; }
  .step__n { font-size: 34px; width: 44px; }
}

/* --------------------------------------------------------------------------
   Follow El Gallo
   -------------------------------------------------------------------------- */
.follow__wrap { display: flex; align-items: center; gap: 56px; }
.follow__head { flex: none; display: flex; flex-direction: column; }
.follow__cards { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.soc {
  background: var(--cream-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column; gap: 20px;
  color: var(--ink); text-decoration: none;
}
.soc:hover { color: var(--ink); border-color: var(--red); }
.soc__top { display: flex; align-items: center; gap: 14px; }
.soc__ico {
  width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--red);
  display: flex; align-items: center; justify-content: center; color: #FFF;
}
.soc__txt { display: flex; flex-direction: column; gap: 2px; }
.soc__net { font-family: var(--cond); font-size: 26px; font-weight: 700; text-transform: uppercase; }
.soc__at { font-size: 16px; color: var(--body); }
.soc__cta {
  align-self: flex-start; padding: 10px 16px; white-space: nowrap;
  border: 1.5px solid var(--red); border-radius: 999px; color: var(--red);
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

@media (max-width: 1100px) {
  .follow__wrap { flex-direction: column; align-items: stretch; gap: 24px; }
  .follow__cards { grid-template-columns: 1fr; gap: 12px; }
  .soc { flex-direction: row; align-items: center; gap: 14px; padding: 16px; }
  .soc__top { flex: 1 1 auto; }
  .soc__net { font-size: 22px; }
  .soc__at { font-size: 15px; }
  .soc__cta { align-self: center; padding: 9px 16px; }
  .soc__cta .is-long { display: none; }
}

/* Below 360 the card's row cannot hold the handle and the Follow pill side by
   side: "@alexmartinezlaw" is one unbreakable token, so shrinking it would
   break the handle mid-word. The pill wraps onto its own line instead,
   indented to the text, and nothing is hidden. */
@media (max-width: 359px) {
  .soc { flex-wrap: wrap; }
  .soc__top { min-width: 0; }
  .soc__cta { margin-left: 62px; }
}

/* --------------------------------------------------------------------------
   Small corrections / additions
   -------------------------------------------------------------------------- */
.step__t, .step__d { display: block; }
.step > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.step > span:last-child br { display: none; }

.socials-inline {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--line-dark-2);
  display: inline-flex; align-items: center; justify-content: center; color: #FFF;
}
.socials-inline:hover { border-color: var(--pink); color: #FFF; }

.reviews__meta > span:last-child { font-size: 16px; font-weight: 600; }
.rev__name .stars { margin-top: 2px; }

/* ---------------------------------------------------------------------------
   Mobile, read band by band off Home-Mobile.dc.html. The mobile board is a
   shorter composition than the desktop one, not just a stacked version of it,
   so these rules follow it rather than reflowing the desktop layout.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {

  /* Practice areas. The board drops the underline and the hub button and
     keeps the links tight. The 44px row stays - the plan requires touch
     targets of at least 44px - so the gap closes instead of the target. */
  .help__services { gap: 0; }
  .help__services a { text-decoration: none; }
  .help__hub { display: none; }

  /* Client stories. The 900px block above already sizes the tiles, the play
     mark and the title, and hides the two empty tiles - do not restate
     those here: .story also sets display, so a second .story rule after
     .story--empty wins on source order and the empty tiles come back.
     What the board drops beyond that is the script line, the socials row,
     the sub-line, and "Client" from the tile label, which is what made the
     title wrap onto the play mark. */
  /* The mobile board keeps the script line on the hero, the team, the
     reviews, the offices and Follow El Gallo, and drops it on the results,
     practice areas, client stories and contact bands. Matched band by band
     against Home-Mobile.dc.html rather than applied across the board. */
  .stories__head .script, .stories__more { display: none; }
  .results__head .script, .help__head .script, .caserev__copy > .script { display: none; }
  .stories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story__sub, .story__pre { display: none; }

  /* Meet the team. The board puts the two cards straight after the heading
     and closes with one short line; the bio, the three points and the two
     buttons are desktop only. display:contents lets the heading, the cards
     and that line order as siblings without changing the desktop grid. */
  .team__copy { display: contents; }
  .team__grid { display: flex; flex-direction: column; gap: 18px; }
  .team__head { order: 1; }
  .team__cards { order: 2; }
  /* Doubled: `.team__copy > p:not(.eyebrow):not(.script):not(.team__lede)` is (0,3,1) and set
     this to 18px. */
  .team__lede.team__lede { display: block; order: 3; margin: 0; font-size: 15px; line-height: 1.6; color: var(--on-dark-3); }
  .team__bio, .team__points, .team__ctas { display: none; }
  .person__rolemore, .person__bio { display: none; }

  /* Google reviews. The board shows one card with dots under it, so the row
     becomes a swipeable carousel instead of a stack. x proximity, not
     mandatory: mandatory cancels the programmatic scroll the dots use. */
  .reviews__cards, .reviews__row { min-width: 0; }
  .reviews__row {
    display: flex; gap: 12px;
    overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .reviews__row::-webkit-scrollbar { display: none; }
  .reviews__row > .rev { flex: 0 0 100%; scroll-snap-align: start; }
}