/* ==========================================================================
   Palace Group One — home.css
   Homepage-only sections. Six blocks, nothing more:
   hero → brands → who we are → what we do → metrics → portfolio teaser
   Everything else lives on its own page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero — full-bleed image, minimal type (Five Star / Rainmaker pattern)
   -------------------------------------------------------------------------- */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;
  display:flex;align-items:flex-end}
.hero__media{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.hero__slide.is-active{opacity:1}
/* the media child is either a real <picture><img> or a .ph placeholder */
.hero__slide picture{display:block;position:absolute;inset:0}
.hero__slide img,
.hero__slide .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__slide.is-active img,
.hero__slide.is-active .ph{animation:kenburns 11s var(--ease-out) forwards}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero__veil{position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(15,31,45,.88) 0%,rgba(15,31,45,.30) 46%,rgba(15,31,45,.52) 100%)}

.hero__inner{position:relative;z-index:3;width:100%;padding-bottom:clamp(76px,11vh,132px)}
.hero h1{color:#fff;max-width:16ch}
.hero__sub{
  color:rgba(255,255,255,.8);font-size:var(--copy);line-height:1.8;
  max-width:46ch;margin-top:22px;
}
.hero__cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}

/* slide indicators */
.hero__dots{
  position:absolute;right:var(--gutter);bottom:clamp(76px,11vh,132px);z-index:3;
  display:flex;gap:10px;align-items:center;
}
/* The dot stays a 38x2 hairline; the BUTTON grows to meet WCAG 2.2's 24px
   minimum target (2.5.8). A 2px-tall tap target is a real problem on a phone,
   not a technicality — so the bar moves into ::before and the button becomes
   an invisible 38x24 hit area around it. The gap is reduced to keep the row
   the same width on screen. */
.hero__dot{
  width:38px;height:24px;background:none;border:0;padding:0;cursor:pointer;
  display:grid;place-items:center;
}
.hero__dot::before{
  content:'';display:block;width:100%;height:2px;
  background:rgba(255,255,255,.3);
  transition:background var(--t-fast) var(--ease);
}
.hero__dot.is-on::before{background:var(--gold)}
.hero__dot:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.hero__scroll{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  font-size:9px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.hero__scroll i{width:1px;height:44px;background:linear-gradient(rgba(255,255,255,.6),transparent);
  animation:drop 2.2s infinite}
/* The cue is pinned to the bottom CENTRE, and the two CTA buttons run from the
   left gutter towards it. Whether they collide depends on both axes:

     · height — .hero__inner's bottom padding is 11vh, so the button row drops
       towards the cue as the window gets shorter (900x700, 1024x768).
     · width  — the buttons are a fixed ~526px at this label size, so on a
       narrower wrap they simply reach further past the centre. At 1024 they
       end at x570 against a cue starting at x487; at 1280 they stop at x582
       against a cue starting at x615, and clear it.

   Fixing one axis only moved the problem to the other, so both are stated.
   The cue is decorative — the slide dots already mark the hero — so it is
   dropped where it cannot sit clear rather than given room the screen lacks. */
@media (max-width:1200px),(max-height:780px){ .hero__scroll{display:none} }
@keyframes drop{
  0%{transform:scaleY(0);transform-origin:top}
  48%{transform:scaleY(1);transform-origin:top}
  52%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* --------------------------------------------------------------------------
   2. Who we are — offset image collage + navy shape block behind text
   (this is the Jalaram layering idea, kept disciplined)
   -------------------------------------------------------------------------- */
.intro{position:relative;overflow:hidden}
.intro .ghost-word{top:-.12em;right:-3vw}

.intro__grid{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(40px,6vw,110px);align-items:center;position:relative;z-index:1;
}

/* left: stacked, overlapping images with a navy shape behind */
.collage{position:relative;padding:0 0 36px 54px}
.collage__shape{
  position:absolute;left:0;bottom:0;width:56%;height:72%;
  background:var(--navy);z-index:0;
}
.collage__main{position:relative;z-index:1;aspect-ratio:4/4.6;box-shadow:var(--shadow-md);overflow:hidden}
.collage__inset{
  position:absolute;right:-6%;bottom:0;width:52%;aspect-ratio:4/3.3;z-index:2;
  box-shadow:var(--shadow-lg);border:7px solid var(--paper);overflow:hidden;
}
/* image children fill their slot; sources are pre-cropped to these exact ratios */
.collage__main picture,.collage__inset picture{display:block;width:100%;height:100%}
.collage__main img,.collage__inset img{width:100%;height:100%;object-fit:cover}

/* The inset now carries the client-supplied artwork photograph, pre-cropped to
   this slot's 4:3.3 ratio so object-fit has nothing left to trim. */
.collage__badge{
  position:absolute;left:0;top:8%;z-index:3;
  background:var(--gold);color:var(--on-gold);padding:22px 26px;text-align:center;
  box-shadow:var(--shadow-md);
}
.collage__badge b{font-family:var(--display);font-size:42px;line-height:1;display:block}
.collage__badge span{font-size:var(--label);font-weight:600;letter-spacing:var(--label-track);
  text-transform:uppercase;display:block;margin-top:7px}

.intro__body p + p{margin-top:14px}
.intro__body .btn{margin-top:26px}
/* --------------------------------------------------------------------------
   3. What we do — an asymmetric composition, NOT a row of equal cards

   Three equal cards in a row is the single thing that made this page read as a
   template. Here Development stands alone as a tall portrait on the left, with
   Operations and Revenue stacked opposite in wider frames — three different
   ratios, two unequal columns. Do not "tidy" these into a uniform grid.
   -------------------------------------------------------------------------- */
/* align-items:stretch (the default) makes both columns the same height. The left
   column sets that height — intro copy plus one 5:6 portrait — and the two frames
   on the right then FLEX to fill it, so neither column can end early and leave a
   gap. Unequal flex weights keep their two ratios different from each other. */
.disciplines{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(22px,2.8vw,44px);position:relative;z-index:1;
}
.disc-col{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,38px)}

.disc-intro p{font-size:var(--copy);line-height:1.8;color:var(--body);max-width:44ch;margin-top:16px}
.disc-intro .link-u{margin-top:20px}

.disc{position:relative;display:block;overflow:hidden;background:var(--ink)}
.disc--tall{aspect-ratio:5/6}
/* no fixed ratio: these two divide whatever height the left column produces */
.disc--wide  {flex:1.15 1 0;min-height:210px}
.disc--wide-b{flex:1 1 0;min-height:190px}

.disc picture{display:block;position:absolute;inset:0}
.disc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease-out)}
.disc:hover img,.disc:focus-visible img{transform:scale(1.06)}

/* veil deepens on hover so the copy has something to sit on */
.disc__veil{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(15,31,45,.86) 0%,rgba(15,31,45,.12) 62%);
  opacity:.55;transition:opacity var(--t-mid) var(--ease);
}
.disc:hover .disc__veil,.disc:focus-visible .disc__veil{opacity:1}

/* Title and line of copy are revealed on hover. They are always in the DOM and
   are also shown on keyboard focus and on touch devices, where hover does not
   exist — hover-only content would otherwise be unreachable. */
.disc__body{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:clamp(20px,2vw,30px);color:#fff;
}
.disc__body h3{color:#fff;font-size:clamp(20px,1.8vw,27px);line-height:1.2}
.disc__body p{
  margin-top:10px;font-size:var(--copy);line-height:1.6;color:rgba(255,255,255,.86);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height var(--t-mid) var(--ease),opacity var(--t-mid) var(--ease),
             margin-top var(--t-mid) var(--ease);
}
.disc:hover .disc__body p,
.disc:focus-visible .disc__body p{max-height:8em;opacity:1}
.disc__rule{
  display:block;width:34px;height:2px;background:var(--gold);margin-top:14px;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-mid) var(--ease);
}
.disc:hover .disc__rule,.disc:focus-visible .disc__rule{transform:scaleX(1)}
.disc:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Hover-only copy is unreachable without a mouse, so it is revealed permanently
   on touch devices and on narrow screens. */
@media (hover:none),(max-width:1024px){
  .disc__veil{opacity:1}
  .disc__body p{max-height:8em;opacity:1;margin-top:10px}
  .disc__rule{transform:scaleX(1)}
}

/* --------------------------------------------------------------------------
   3b. Nearby — horizontal accordion

   Five panels sharing one row. The open panel takes five parts of the width,
   the other four one each; the closed ones show their name turned on its side.

   flex-grow is the ONLY animating property — no width, no transform — so the
   row never reflows its neighbours mid-slide.

   Hover drives it on a pointer with no JS at all: hovering the ROW closes
   everything, then the hovered panel re-opens. initAccordion exists only for
   click, keyboard and touch, where hover does not happen, and it sets the
   first panel open on load so the section never renders all-closed.

   The photographs are exported by assets/img/nearby/build.py at their NATIVE
   aspect — object-fit:cover does the cropping here rather than the export, so
   no width is thrown away before the browser ever sees it.
   -------------------------------------------------------------------------- */
.acc{
  display:flex;gap:4px;
  height:clamp(440px,58vh,620px);
  position:relative;z-index:1;
}
.acc__panel{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;
  background:var(--ink-soft);
  transition:flex-grow var(--t-slow) var(--ease);
}
.acc__panel.is-open{flex-grow:5}
/* A pointer overrides whatever the JS last stored — but it has to override the
   WHOLE open state, not just the width. Only flex-grow was being reset here,
   so the panel the JS had opened kept .is-open, kept its copy at full opacity
   and lost its spine, while flex-grow squeezed it down to a sliver: a 128px
   column with four paragraphs of text reflowed into it, one word per line,
   sitting next to the panel actually being hovered.

   Same specificity as the .is-open rules (0,3,0), so these must stay BELOW
   them; the :hover pair is (0,4,0) and wins over both. */
.acc:hover .acc__panel{flex-grow:1}
.acc:hover .acc__panel:hover{flex-grow:5}
.acc:hover .acc__panel .acc__body{opacity:0;transform:translateY(14px);pointer-events:none}
.acc:hover .acc__panel .acc__spine{opacity:1}
.acc:hover .acc__panel:hover .acc__body{opacity:1;transform:none;pointer-events:auto}
.acc:hover .acc__panel:hover .acc__spine{opacity:0}

.acc__panel picture{display:block;position:absolute;inset:0}
.acc__panel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.6s var(--ease-out);
}
.acc__panel.is-open img,
.acc__panel:hover img{transform:scale(1.05)}


.acc__veil{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(15,31,45,.92) 0%,rgba(15,31,45,.42) 58%,rgba(15,31,45,.30) 100%);
}

/* closed state — the name stood on its end, reading bottom to top */
.acc__spine{
  position:absolute;left:50%;bottom:clamp(26px,3vw,44px);z-index:3;
  translate:-50% 0;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:var(--label);font-weight:600;letter-spacing:var(--label-track);
  text-transform:uppercase;color:#fff;white-space:nowrap;
  transition:opacity var(--t-fast) var(--ease);
}
.acc__panel.is-open .acc__spine,
.acc__panel:hover .acc__spine{opacity:0}

/* open state */
/* A FIXED width, not left:0;right:0. Stretched edge to edge the copy re-wraps
   continuously as flex-grow animates the panel — the measure changes on every
   frame, so the paragraph visibly shuffles its line breaks for the whole
   0.9s slide. Pinning the width means the text is laid out once and simply
   slides out of view behind overflow:hidden. The value stays inside the open
   panel's inner width at every desktop size (55% of the row, less padding). */
.acc__body{
  position:absolute;left:0;bottom:0;z-index:3;
  width:min(540px,42vw);
  padding:clamp(26px,3vw,48px);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease);
}
.acc__panel.is-open .acc__body,
.acc__panel:hover .acc__body{opacity:1;transform:none;pointer-events:auto}
.acc__kicker{
  display:block;margin-bottom:12px;
  font-size:var(--label);font-weight:600;letter-spacing:var(--label-track);
  text-transform:uppercase;color:var(--gold-soft);
}
.acc__body h3{color:#fff;font-size:clamp(23px,2.2vw,34px);line-height:1.15}
.acc__body p{margin-top:14px;max-width:46ch;color:rgba(255,255,255,.86)}
/* --------------------------------------------------------------------------
   4. Portfolio teaser — a full-width navy statement panel stacked directly on
      a full-width team band.

      This used to be a text panel beside two property tiles. The client did
      not want two hand-picked hotels standing in for a seven-hotel portfolio,
      so the tiles are gone and the claim now carries itself: the panel states
      the numbers and "View All Properties" sends people to the full list.

      Both blocks span the wrap, which is why no dead space is possible here —
      neither block can end before the other. It also lets the team photo keep
      its natural 2.3:1 crop. That matters: the group in the source spans about
      75% of the frame width, so any slot squarer than roughly 3:2 starts
      cutting the outer two people. Do not put this photo in a narrow column.
   -------------------------------------------------------------------------- */
.folio{position:relative;overflow:hidden}

.folio__panel{
  background:var(--ink);color:rgba(255,255,255,.78);
  padding:clamp(32px,3.6vw,54px);
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(26px,3.4vw,60px);align-items:end;
}
.folio__panel h2{color:#fff}
.folio__panel .eyebrow{color:var(--gold-soft)}
.folio__panel .eyebrow::before{background:var(--gold-soft)}
.folio__panel__aside{display:flex;flex-direction:column;align-items:flex-start}
.folio__panel__aside .link-u{margin-top:28px}

/* the team band — sits flush under the panel and links through to the team page */
.folio__band{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:2.3/1;background:var(--ink);
}
.folio__band picture{display:block;position:absolute;inset:0}
.folio__band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease-out)}
.folio__band:hover img,.folio__band:focus-visible img{transform:scale(1.05)}
.folio__band__veil{position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(15,31,45,.88) 0%,rgba(15,31,45,.10) 58%)}
.folio__band__body{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:clamp(22px,2.4vw,38px);color:#fff}
.folio__band__flag{font-size:var(--label);font-weight:600;letter-spacing:var(--label-track);
  text-transform:uppercase;color:var(--gold-soft);margin-bottom:8px}
.folio__band h3{color:#fff;display:flex;align-items:center;gap:14px}
.folio__band .ar{transition:transform var(--t-fast) var(--ease)}
.folio__band:hover .ar,.folio__band:focus-visible .ar{transform:translateX(7px)}

/* --------------------------------------------------------------------------
   5. Closing CTA strip
   -------------------------------------------------------------------------- */
/* was a green gradient — the only green surface on the site, and the reference
   has none. It is now the deepest navy, so the closing strip still separates
   itself from the page without introducing a second hue. */
.closing{position:relative;overflow:hidden;background:var(--ink);text-align:center}
.closing::before{content:'';position:absolute;inset:0;
  background:linear-gradient(118deg,#0C141D 36%,#152436 100%)}
.closing::after{
  content:'';position:absolute;width:520px;height:520px;border:1px solid rgba(255,255,255,.07);
  border-radius:50%;top:-190px;right:-140px;
}
.closing .wrap{position:relative;z-index:2}
.closing h2{color:#fff;max-width:19ch;margin-inline:auto}
.closing p{color:rgba(255,255,255,.78);max-width:52ch;margin:14px auto 26px}
/* dark surface — the eyebrow must flip to the light gold, not the deep one */
.closing .eyebrow{color:var(--gold-soft)}
.closing .eyebrow::before{background:var(--gold-soft)}

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  /* The accordion stops sliding sideways and stacks: five panels side by side
     would each be under 100px closed, and the rotated titles would be taller
     than the row.

     It stays an ACCORDION though. Every panel used to be forced open here,
     which turned the section into five full-height photographs stacked down
     the page — no accordion at all, and a very long scroll. Now the closed
     panels collapse to a title bar and a tap opens one, which is what the
     JS has always done: initAccordion puts .is-open on the panel you click
     and takes it off the rest. This is a CSS-only change.

     The panel height is NOT set here, deliberately. A fixed open height is a
     guess, and it was wrong: the five write-ups differ in length and wrap
     harder as the screen narrows, so a 300px panel cut the longest copy by
     92px at 320px. Instead the body comes out of absolute positioning and
     back into flow, and the panel is sized by whatever it contains — the
     collapsing max-height on the copy is what animates it open, and the panel
     simply follows. Nothing to measure, nothing to keep in sync.

     :hover is neutralised — a touch device fires it on tap and would
     otherwise fight the class. */
  .acc{flex-direction:column;height:auto;gap:10px}
  .acc__panel,
  .acc:hover .acc__panel,
  .acc:hover .acc__panel:hover{
    flex:0 0 auto;height:auto;min-height:clamp(78px,15vw,98px);cursor:pointer;
  }
  .acc__spine{display:none}

  /* The title is always readable, so a closed panel still says what it is;
     only the kicker and the paragraph sit behind the tap. position:relative
     puts the body in flow (it stays above the veil on z-index:3); width:auto
     undoes the desktop fixed measure. */
  .acc__body,
  .acc__panel.is-open .acc__body,
  .acc:hover .acc__panel .acc__body,
  .acc:hover .acc__panel:hover .acc__body{
    position:relative;opacity:1;transform:none;pointer-events:none;
    width:auto;left:auto;right:auto;bottom:auto;
    padding:clamp(15px,3.6vw,22px);
    padding-right:clamp(44px,12vw,58px);   /* clear of the chevron */
  }
  /* max-height is a ceiling, not a height — the box settles at its own content
     height, so 24em only has to be comfortably ABOVE the longest write-up at
     the narrowest width. It is not a layout value to keep in sync. */
  .acc__kicker,
  .acc__body p{
    max-height:0;opacity:0;overflow:hidden;margin:0;
    transition:max-height var(--t-mid) var(--ease),opacity var(--t-mid) var(--ease),
               margin var(--t-mid) var(--ease);
  }
  .acc__panel.is-open .acc__kicker{max-height:3em;opacity:1;margin-bottom:10px}
  .acc__panel.is-open .acc__body p{max-height:24em;opacity:1;margin-top:12px}
  .acc__body h3{font-size:clamp(19px,4.6vw,24px)}

  /* Tap affordance. Anchored to the panel's top-right, which does not move
     when the panel grows — pinning it to the body would make it slide down
     the copy on open. */
  .acc__panel::after{
    content:'';position:absolute;z-index:4;
    top:clamp(26px,6.4vw,38px);right:clamp(18px,4.4vw,26px);
    width:10px;height:10px;
    border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
    transform:rotate(45deg);transform-origin:center;
    transition:transform var(--t-fast) var(--ease);
  }
  .acc__panel.is-open::after{transform:rotate(-135deg)}
  .intro__grid{grid-template-columns:1fr}
  /* This one was simply missed. Every other grid on the page got a stacking
     rule and .disciplines did not, so 5fr/7fr held all the way down: at 375px
     each track was ~160px, the heading was cut off mid-word and the copy ran
     one word per line. It went unnoticed because .section{overflow:hidden}
     CLIPS the spill instead of scrolling the page — a page-level overflow
     check reports zero while the content is quietly being cut. Measure the
     element, not the document.

     minmax(0,1fr), never a bare 1fr — the base rule already uses minmax for
     the same reason. A bare 1fr is minmax(auto,1fr), and that auto floor is
     the item's MIN-CONTENT width. The tiles below carry an aspect-ratio, which
     transfers their min-height back into a min-content width of 255 x 16/9 =
     453px, so the single track refused to go under 453 and hung 169px outside
     the section at 320px. Capping the floor at 0 lets the track shrink. */
  .disciplines{grid-template-columns:minmax(0,1fr)}
  .disc-col{min-width:0}
  /* The three tiles have to be re-sized in the SAME query that stacks them,
     not a narrower one. Their sizes come from the two-column composition —
     a 5:6 portrait on the left, two flex frames dividing the left column's
     height on the right — and none of that survives going full width: at
     900px the portrait became a 975px slab while the other two stayed
     210/190px letterbox strips.

     aspect-ratio alone is not enough either. The copy under each title is
     permanently visible below 1024px, and at 320px it needs ~225px; a 16:9
     box there is 149px, so the text was clipped by .disc{overflow:hidden}.
     The min-height floor is what guarantees it fits, and the ratio takes
     over once the screen is wide enough to make it the larger of the two.

     width:100% is load-bearing, not tidiness. A grid or flex item with an
     aspect-ratio does NOT get stretched to its track — `stretch` behaves as
     `start` once a ratio is present — so the ratio was free to size the box
     from the other axis. min-height:255px then produced a width of
     255 x 16/9 = 453px, and at a 320px viewport all three tiles were wider
     than the screen (silently, again, because the section clips). Making the
     width definite leaves min-height able to raise the height only. */
  .disc--tall,.disc--wide,.disc--wide-b{
    flex:0 0 auto;width:100%;aspect-ratio:16/9;min-height:clamp(255px,56vw,400px);
  }
  .collage{padding:0 0 60px 44px;max-width:560px}
  /* heading and copy stack instead of sitting side by side */
  .folio__panel{padding:clamp(34px,6vw,52px);grid-template-columns:1fr;
    gap:clamp(18px,3vw,26px);align-items:start}
  }
@media (max-width:760px){
  /* The hero content is bottom-aligned (align-items:flex-end on .hero). On a
     phone it is TALLER than the section — 738px of content inside a 640px hero
     at 320x568 — so it overflowed UPWARD: the headline started 98px above the
     viewport and its first line sat behind the fixed bar.

     height:auto lets the section grow to fit its content instead of clipping
     it, min-height keeps a full-screen hero wherever the content does fit, and
     padding-top reserves the bar so nothing can slide under it at any size.
     Reserving the bar is what makes this correct by construction rather than a
     size that happens to work on one handset.

     The bar height alone is not enough padding: it only guarantees the
     headline is not UNDER the bar, and the content then sits flush against it
     with no air at all on any phone short enough for the copy to be the
     constraint. The extra clamp is the breathing room. */
  .hero{height:auto;min-height:92svh;
    padding-top:calc(var(--hdr-h) + clamp(22px,4.5vh,44px))}
  .hero__inner{padding-bottom:clamp(44px,7vh,86px)}
  .hero__dots{display:none}
  /* The scroll cue is pinned to the bottom centre, which is exactly where the
     stacked CTA buttons land on a phone — it was printing through them at
     every handset width. */
  .hero__scroll{display:none}
  .collage{padding:0 0 48px 26px}
  .collage__badge{padding:16px 18px}
  .collage__badge b{font-size:32px}
  /* 2.3:1 is only ~145px tall on a phone — too short to carry the caption.
     16:9 is the squarest this photo takes before the outer two people clip. */
  .folio__band{aspect-ratio:16/9}
}