/* ============================================================================
   HIGHLIGHTS page (built 2026-09-10 from the client's brief: "split it up
   between each event and include some catchy wording about each one about a
   peek inside the booth", her three event types (social events, corporate,
   weddings), an about band under the hero carrying the HOME page's about
   copy, and a closing blurb that past event galleries are shared on request.

   Shared section vocabularies are COPIED from css/social-events.css (stm bar,
   wmenu burger, menu overlay geometry, rise plumbing, sal- footer and the
   per-colorway oxblood bakes) and from css/services.css (sbd- closing
   cross-sell, hlp- print duo stage) — keep in step with those files where
   marked. New to this page: hlh- hero (the drifting contact-sheet wall), abh-
   about band and its two taped keepsakes, hl- event bands (mosaic + print
   row), gal- the galleries-on-request blurb.

   Her sentence "the experience in action, the memories made and the final
   product given to every guest" is the page's structure, not just its copy:
   every event band runs a mosaic of candid captures and then a print row of
   the finished templates and 2x6 strips on white mats, because each of her
   three photo sets contains both.
   ========================================================================== */

/* menu overlay: copied verbatim from css/social-events.css 2026-09-10 */
.z-menu-open_0 { left: 12px; top: 4px; width: 30px; height: 48px; color: rgba(255,255,255,1); }
.z-menu-open_1 { left: 1068px; top: 754px; width: 28px; height: 21px; color: rgba(255,255,255,1); }
.z-menu-open_2 { left: 1136px; top: 754px; width: 28px; height: 21px; color: rgba(255,255,255,1); }
.z-menu-open_3 { left: 1103px; top: 754px; width: 28px; height: 21px; color: rgba(255,255,255,1); }
.z-menu-open_4 { left: 218px; top: 435px; width: 762px; height: 1px; background: currentColor; opacity:.5; transform: rotate(270deg); }
.z-menu-open_6 { left: 471px; top: 243px; width: 256px; height: 322px; }
.z-menu-open_7 { left: -15px; top: 54px; width: 1230px; height: 1px; background: currentColor; opacity:.5; }
.z-menu-open_8 { left: 803px; top: 318px; width: 320px; height: auto; }
.z-menu-open_9 { left: 795px; top: 425px; width: 327px; color: rgba(255,255,255,1); font-size: 17px; text-align: center; }
.z-menu-open_10 { left: 868px; top: 592px; width: 182px; height: 49px; }
.z-menu-open_11 { left: 6px; top: 211px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; }
.z-menu-open_12 { left: 6px; top: 266px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; }
.z-menu-open_13 { left: 6px; top: 321px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; }
.z-menu-open_14 { left: 6px; top: 376px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; }
.z-menu-open_15 { left: 6px; top: 431px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; }
.z-menu-open_16 { left: 6px; top: 486px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; }
.menu-overlay a.t-title { text-decoration: none; }
.menu-overlay a.t-title:hover { opacity: .7; }
.z-menu-open_20 { left: 100px; top: 606px; width: 263px; color: rgba(255,255,255,1); font-size: 13px; }
.z-menu-open_21 { left: 100px; top: 674px; width: 263px; color: rgba(255,255,255,1); font-size: 13px; }

/* the white menu bar that slides down past the hero (script.js toggles
   .is-shown at scrollY > 700; the slide rule lives in style.css) */
.sec-stick-top-menu-white { --h: 53px; background: var(--white); position: fixed;
  top: 0; left: 0; right: 0; z-index: 40; transform: translateY(-100%);
  transition: transform .4s; border-bottom: 1px solid rgba(37,31,24,.28); }
.stm-in { height: 53px; display: flex; align-items: center; justify-content: center;
  gap: 44px; }
.stm-in a { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); }
.stm-in a:hover { opacity: .6; }
.stm-in a[aria-current] { border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.stm-burger { position: absolute; left: 24px; top: 10px; width: 42px; height: 32px;
  background: none; border: 0; cursor: pointer; }
.stm-burger svg { fill: rgba(89,87,84,1); }
.stm-burger:hover { opacity: .55; }

/* floating hamburger shell over the hero (the hero is dark, so it runs cream) */
.sec-on-image-aperol-menu { --h: 1px; background: transparent; overflow: visible; z-index: 6; }
.wmenu-btn { left: calc(36px - var(--gutter)); top: 30px; width: 42px; height: 32px;
  background: none; border: 0; cursor: pointer; }
.wmenu-btn svg { fill: var(--cream); }
.wmenu-btn:hover { opacity: .55; }

/* ============ reveal plumbing: script.js stamps .rise-armed on every
   [data-rise] section, then .rise-in on first intersection; without JS
   nothing is ever hidden ============ */
[data-rise].rise-armed:not(.rise-in) .abh-wrap,
[data-rise].rise-armed:not(.rise-in) .hl-top,
[data-rise].rise-armed:not(.rise-in) .gal-in { opacity: 0; transform: translateY(22px); }
.abh-wrap, .hl-top, .gal-in {
  transition: opacity .9s ease, transform .9s cubic-bezier(.23,1,.32,1); }

/* ============ hero: THE CONTACT SHEET WALL. Two rows of real highlight
   frames drifting in opposite directions behind a black veil, centred type
   over the top. Black rather than the colorway tint, matching the social
   page's hero and reviews band, so the guests' own photos keep their colour.
   The tracks carry each row's frames TWICE over (markup) and translate by
   -50%, which is what makes the loop seamless. ============ */
.sec-header-image { --h: max(100vh, 780px); background: var(--dark); overflow: hidden; }
.hlh-wall { position: absolute; inset: -2% -0% ; display: flex; flex-direction: column;
  justify-content: center; gap: 14px; }
/* will-change + a 3d transform so the belt composites on its own layer instead
   of repainting 16 frames every tick (same call css/single-service.css makes
   on the tpb- template belt) */
.hlh-track { display: flex; width: max-content;
  will-change: transform; backface-visibility: hidden; }
/* two rows at 42vh plus the gap fill ~85vh of the hero. At 30vh they left a
   dead black band top and bottom that read as a loading failure.
   The 14px spacing is a per-frame MARGIN, not a flex `gap`: the track carries
   each row twice and the loop translates -50%, but with `gap` the 16 frames
   have only 15 gaps, so -50% landed 7px short of one whole copy and the belt
   jumped on every pass (measured 2026-09-13). As a margin each frame owns its
   trailing space, both halves are identical, and the loop is seamless. */
.hlh-track img { display: block; height: 42vh; min-height: 300px; width: auto;
  margin-right: 14px; object-fit: cover; }
.hlh-track-a { animation: hlh-drift-a 78s linear infinite; }
.hlh-track-b { animation: hlh-drift-b 92s linear infinite; }
@keyframes hlh-drift-a { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hlh-drift-b { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .hlh-track-a, .hlh-track-b { animation: none; }
}
.sec-header-image::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.78)); }
.hlh-core { position: relative; z-index: 2; height: 100%; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--cream); padding: 80px 24px 96px; }
.hlh-logo { width: 290px; height: auto; margin-bottom: 30px;
  opacity: 0; animation: hlh-rise .9s ease .15s forwards; }
.hlh-kicker { font-family: var(--font-label); font-weight: 600; font-size: 11px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--teal);
  opacity: 0; animation: hlh-rise .9s ease .3s forwards; }
.hlh-h1 { font-family: var(--font-title); font-weight: 400;
  font-size: clamp(54px, 6.5vw, 82px); line-height: 1.04; text-transform: uppercase;
  letter-spacing: .03em; margin-top: 20px; }
.hlh-h1 span { display: block; opacity: 0;
  animation: hlh-rise 1s cubic-bezier(.23,1,.32,1) forwards; }
.hlh-h1 span:nth-child(1) { animation-delay: .45s; }
.hlh-h1 span:nth-child(2) { animation-delay: .58s; }
.hlh-h1 span:nth-child(3) { animation-delay: .71s; }
.hlh-para { max-width: 640px; font-size: 16.5px; line-height: 1.75;
  color: color-mix(in srgb, var(--cream) 90%, transparent); margin-top: 26px;
  opacity: 0; animation: hlh-rise 1s ease .9s forwards; }
.hlh-ctas { display: flex; gap: 18px; margin-top: 38px; flex-wrap: wrap;
  justify-content: center; opacity: 0; animation: hlh-rise 1s ease 1.05s forwards; }
.hlh-cta { text-decoration: none; color: var(--cream);
  border: 1px solid rgba(252,251,249,.8); padding: 16px 32px; transition: all .4s; }
.hlh-cta span { font-family: var(--font-label); font-weight: 500; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; }
.hlh-cta:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.hlh-ghost { border-color: rgba(252,251,249,.4); }
.hlh-ghost:hover { background: transparent; border-color: var(--cream); color: var(--cream); }
.hlh-roll { position: absolute; bottom: 34px; left: 0; right: 0; z-index: 2;
  text-align: center; font-family: var(--font-label); font-weight: 500;
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 62%, transparent); }
@keyframes hlh-rise { from { opacity: 0; transform: translateY(18px); }
                      to { opacity: 1; transform: none; } }

/* ============ about band: the HOME page's about copy (client request: "one
   about section under the hero that matches copy from the home page's about
   section"). The homepage runs it as the absolutely-positioned abw- collage on
   its 1200px canvas; here it is rebuilt as a flow two-column band so it sits
   under the hero without importing that geometry. Copy is the homepage's
   verbatim, headshot and all. ============ */
/* z-index 3 so the taped strip below can hang OUT of this section and over the
   social events band. Both are position:relative via .sec, so without this the
   later section paints on top and swallows the overhang. */
.sec-about { --h: auto; background: var(--white); padding: 124px 0 128px; z-index: 3; }
.abh-wrap { position: relative; width: min(1180px, calc(100% - 80px)); margin: 0 auto;
  display: grid; grid-template-columns: 440px 1fr; gap: 0 76px; align-items: center; }
.abh-figure { position: relative; }
/* child combinator, not a descendant: .abh-piece's image is also inside this
   figure, and a fixed height on it stretches the tipped 4x6 into a smear */
.abh-figure > img { display: block; width: 100%; height: 540px; object-fit: cover; }
/* scrim under the names: the headshot's flower wall is near-white at the
   bottom left, where cream type on a shadow alone was not legible */
.abh-figure::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 220px; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.52)); }
.abh-names { position: absolute; z-index: 1; left: 26px; bottom: 34px;
  font-family: var(--font-title); font-size: 42px; line-height: 1;
  text-transform: uppercase; letter-spacing: .02em; color: var(--cream);
  text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.abh-names em { font-family: var(--font-heading); font-style: italic;
  text-transform: none; letter-spacing: 0; font-size: 1.15em; }
.abh-kicker { font-family: var(--font-label); font-weight: 600; font-size: 11px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink); opacity: .55; }
.abh-script { margin-top: 14px; font-family: var(--font-script); font-style: italic;
  font-size: 54px; line-height: 1; color: #5a1a12; }
.abh-para { margin-top: 20px; font-family: var(--font-body); font-size: 16px;
  line-height: 1.78; color: var(--ink); opacity: .9; max-width: 560px; }
.abh-rule { width: 68px; height: 1px; margin: 26px 0;
  background: color-mix(in srgb, var(--ink) 45%, transparent); }
.abh-quote { font-family: var(--font-serif); font-size: 19px; line-height: 1.5;
  color: var(--ink); max-width: 520px; }
.abh-att { display: block; margin-top: 12px; font-family: var(--font-label);
  font-weight: 600; font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; opacity: .5; }

/* ---- the two tucked-in keepsakes (owner request 2026-09-13) ----------------
   (1) .abh-strip: a 2x6 strip taped into the about band and hanging past its
       bottom edge onto the social events section, and
   (2) .abh-piece: a 4x6 template laid small and tipped over the founders'
       photo, jutting off its right edge into the column gap.
   Both are the .ovt-piece / .int-snap vocabulary already on the site: white
   mat, soft drop shadow, a few degrees of rotation. The tape recipe (74x24,
   cream at .85, hairline keyline) is .int-snap's verbatim, which took it from
   the weddings scatter's .sct-fl. Heights are auto so both keep their true
   print proportions, like everything else on this page. */
/* Anchored on .abh-wrap, at its right edge and BELOW the copy (owner
   2026-09-13: "down a little bit and over to the right, more on the right side
   of the screen in that empty space"). Starting it below the copy's last line
   rather than beside it is what makes the right-hand placement safe: an
   earlier version sat in the lane to the right of the Monroe quote and
   overran it at around 1200px, because that lane is part of a 1fr column and
   closes as the viewport narrows. Nothing lives below the wrap but section
   padding, so at this height the horizontal position cannot collide with text
   at any width. The wrap's bottom edge is also the band's content bottom in
   the stacked phone layout, so the same anchor works there. */
.abh-strip { position: absolute; z-index: 3; left: auto; right: 10px;
  bottom: -373px; width: 118px; background: #fff; padding: 7px;
  transform: rotate(4deg); box-shadow: 0 18px 42px rgba(37,31,24,.24); }
.abh-strip img { display: block; width: 100%; height: auto; }
/* single piece of tape across the top: it reads as hung, which is what the
   overhang is doing. .int-snap uses two diagonal corner tapes because it sits
   flat inside its band. Sunk far enough onto the strip that most of it is over
   the photo: at .85 cream it is nearly invisible against the cream band. */
.abh-strip::before { content: ""; position: absolute; left: 50%; top: -9px;
  width: 74px; height: 26px; margin-left: -37px; transform: rotate(-3deg);
  background: rgba(240,226,205,.92); border: 1px solid rgba(37,31,24,.12);
  box-shadow: 0 2px 7px rgba(37,31,24,.14); }
.abh-piece { position: absolute; z-index: 2; right: -34px; top: 46px;
  width: 124px; background: #fff; padding: 6px; transform: rotate(-6deg);
  box-shadow: 0 16px 38px rgba(37,31,24,.28); }
.abh-piece img { display: block; width: 100%; height: auto; }
/* ---- the clothesline (owner 2026-09-14: "add more taped templates across
   this section so it fills up more of the space"). Four more prints hung on
   the same band, spread left to right at staggered heights, one of each look
   from the print stages below (a dark 4-up card, a white strip, a neon
   landscape, a pink card) so the row reads as five different templates beside
   the teal strip. Same anchor, mat, shadow and tape as .abh-strip. Lefts are
   percentages of .abh-wrap so the spread follows it; widths are fixed so the
   prints keep their scale, and at the wrap's narrowest (820px at the 900px
   breakpoint) the neighbours still clear each other by a few px. Bottoms stay
   at least 36px above the galleries content, which starts 428px below the
   wrap (128px of this band's padding plus the next section's 300px lead-in). */
.abh-hang { position: absolute; z-index: 3; background: #fff; padding: 7px;
  box-shadow: 0 18px 42px rgba(37,31,24,.24); }
.abh-hang img { display: block; width: 100%; height: auto; }
.abh-hang::before { content: ""; position: absolute; left: 50%; top: -9px;
  width: 74px; height: 26px; margin-left: -37px; transform: rotate(-3deg);
  background: rgba(240,226,205,.92); border: 1px solid rgba(37,31,24,.12);
  box-shadow: 0 2px 7px rgba(37,31,24,.14); }
.abh-hang-1 { left: 24px; bottom: -318px; width: 148px; transform: rotate(-5deg); }
.abh-hang-2 { left: 23%; bottom: -392px; width: 100px; transform: rotate(3deg); }
.abh-hang-3 { left: 43%; bottom: -262px; width: 190px; transform: rotate(-3deg); }
.abh-hang-4 { left: 67%; bottom: -372px; width: 128px; transform: rotate(5deg); }
.abh-hang-3::before { transform: rotate(2deg); }
/* two of the cards are taped at opposite corners instead of hung from one
   piece (owner 2026-09-14: "one top left, one bottom right"). The corner
   recipe is the social events page's .int-snap verbatim: 74x24, cream at
   .85, rotated -38deg so both pieces lie along the same diagonal. */
.abh-hang-1::before, .abh-hang-1::after,
.abh-hang-4::before, .abh-hang-4::after { content: ""; position: absolute;
  left: auto; right: auto; top: auto; bottom: auto; margin: 0;
  width: 74px; height: 24px; background: rgba(245,234,217,.85);
  border: 1px solid rgba(37,31,24,.08); box-shadow: 0 2px 6px rgba(37,31,24,.08);
  transform: rotate(-38deg); }
.abh-hang-1::before, .abh-hang-4::before { left: -26px; top: -10px; }
.abh-hang-1::after, .abh-hang-4::after { right: -26px; bottom: -10px; }

/* ============ the event bands. One band per event type, each running her
   three beats in order: the mosaic of candid captures (the experience in
   action and the memories made), then the print row (the final product every
   guest takes home). Grounds alternate white / oxblood / cream down the page,
   the site's rhythm; the oxblood is the same per-colorway bake as the social
   page's packages band. ============ */
.sec-hl { --h: auto; padding: 132px 0 138px; }
.sec-hl.hl-white { background: var(--white); }
.sec-hl.hl-cream { background: var(--cream); }
.sec-hl.hl-ox { --hl-ox: #5a1a12; background: var(--hl-ox); color: var(--cream); }
:root[data-colorway="coffee-espresso"] .sec-hl.hl-ox { --hl-ox: #241009; }
:root[data-colorway="ew-chestnut"] .sec-hl.hl-ox { --hl-ox: #3a0e04; }
:root[data-colorway="ew-espresso"] .sec-hl.hl-ox { --hl-ox: #2c0d06; }
:root[data-colorway="champagne-coffee"] .sec-hl.hl-ox { --hl-ox: #34150f; }
:root[data-colorway="champagne-coffee-red"] .sec-hl.hl-ox { --hl-ox: #34150f; }

/* the taped strip's clearance now belongs to .sec-galleries, which follows the
   about band since the galleries blurb moved up (owner 2026-09-13). The event
   bands keep their standard lead-in. */
.hl-wrap { width: min(1240px, calc(100% - 80px)); margin: 0 auto; }
.hl-top { text-align: center; max-width: 760px; margin: 0 auto; }
.hl-kicker { font-family: var(--font-label); font-weight: 600; font-size: 11px;
  letter-spacing: .26em; text-transform: uppercase; opacity: .55; }
.hl-script { margin-top: 14px; font-family: var(--font-script); font-style: italic;
  font-size: 56px; line-height: 1; color: #5a1a12; }
.sec-hl.hl-ox .hl-script { color: var(--cream); }
.hl-para { margin: 18px auto 0; font-size: 15.5px; line-height: 1.75; opacity: .85; }
.hl-beats { margin-top: 22px; font-family: var(--font-label); font-weight: 600;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; opacity: .45; }
/* cream at .45 over the oxblood ground was close to invisible; the dark bands
   carry both small labels a stop brighter than the light ones do */
.sec-hl.hl-ox .hl-beats { opacity: .68; }
.sec-hl.hl-ox .hl-kicker { opacity: .75; }
.sec-hl.hl-ox .hl-plabel { opacity: .7; }

/* the mosaic: a MASONRY of whole photos. It was a uniform-row grid with
   object-fit:cover, which filled every cell neatly but cut the guests off
   (owner, 2026-09-12: "I just dont love how some photos are cut off") — a
   portrait dropped into a wide cell lost heads, and the bride-alone frame lost
   the bride. Columns of natural-height photos crop NOTHING: each frame keeps
   its real proportions, and the variety of photo-booth shapes (2x6 strips,
   4x6s, squares, wide group shots) supplies the rhythm the spans used to.
   CSS multi-column rather than grid masonry, which is not supported widely
   enough to ship. Reading order runs down each column, which is how a gallery
   is read anyway. */
.hl-mosaic { margin-top: 46px; columns: 3; column-gap: 18px; }
.hl-cell { position: relative; overflow: hidden; display: block;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin: 0 0 18px; background: rgba(0,0,0,.06); }
.hl-cell img { display: block; width: 100%; height: auto;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.hl-cell:hover img { transform: scale(1.045); }

/* the print section of each event band (owner 2026-09-12: "make the little
   templates a little bit more like they are on the other pages, and when you
   click on one it changes the big one to be that one", then 2026-09-13 with a
   screenshot of the weddings page: "that's the layout and design I want"). */
.hl-product { margin-top: 62px; }
.hl-plabel { text-align: center; font-family: var(--font-label); font-weight: 600;
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; opacity: .5; }
/* THE DUO STAGE, carried over from the weddings page's templates section
   (css/services.css .tpx-stage / .tpx-card / .tpx-strip, owner request
   2026-09-13 with a screenshot of it): a 4x6 stage and a 2x6 strip stage side
   by side at matched height, a format label under each, and one tray of
   thumbnails below driving the 4x6 stage while the strip stage cycles itself.

   Two departures, both forced by what these bands actually hold:
   - the 4x6 stage TURNS. The weddings page's prints are all 4x6 portrait, so
     one fixed stage fit every one of them. These bands also hold 4x6
     LANDSCAPE prints (9 of corporate's 20), and a fixed portrait stage serves
     them badly either way: cover crops them, and contain strands them in a
     tall column of empty white. The stage swaps to landscape for those, so
     every print is whole and the mat always hugs it.
   - corporate has no strip stage: her corporate photos contain no 2x6 strips
     at all (20 4x6s, 0 strips), so that band runs the 4x6 stage alone.
   content-box is load-bearing: the global reset is border-box, under which
   these pixel sizes would describe the mat and leave the photo area at the
   wrong ratio. Stages are bottom-aligned so a turned (shorter) card keeps its
   label in line with the strip stage's. */
.hlp-duo { margin-top: 34px; display: flex; justify-content: center;
  align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.hlp-stage { position: relative; box-sizing: content-box; background: #fff;
  padding: 10px; box-shadow: 0 24px 54px rgba(37,31,24,.22); }
.sec-hl.hl-ox .hlp-stage { box-shadow: 0 26px 60px rgba(0,0,0,.42); }
.hlp-stage img { position: absolute; inset: 10px; width: calc(100% - 20px);
  height: calc(100% - 20px); object-fit: contain; opacity: 0;
  transition: opacity .7s ease; }
.hlp-stage img.on { opacity: 1; }
/* exact print ratios at a shared 472px height: 4x6 is .667, 2x6 is .333 */
.hlp-card { width: 315px; height: 472px;
  transition: width .5s cubic-bezier(.2,.7,.2,1), height .5s cubic-bezier(.2,.7,.2,1); }
.hlp-card.is-land { width: 472px; height: 315px; }   /* the same 4x6, turned */
.hlp-strip { width: 157px; height: 472px; }
.hlp-lbl { margin-top: 12px; text-align: center; font-family: var(--font-label);
  font-weight: 600; font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  opacity: .5; }
.hlp-tray { margin-top: 26px; display: flex; justify-content: center;
  align-items: flex-end; gap: 14px; flex-wrap: wrap; }
/* thumbs turn with their print too, for the same reason the stage does: a
   landscape squeezed into a portrait thumb is unreadable at this size. They
   share a height, so the tray still reads as one even row. */
.hlp-th { box-sizing: content-box; height: 84px; aspect-ratio: .667;
  padding: 3px; background: #fff; border: 1px solid rgba(37,31,24,.2);
  cursor: pointer; display: block;
  transition: transform .3s, border-color .3s; }
.hlp-th.is-land { aspect-ratio: 1.5; }
.hlp-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hlp-th:hover, .hlp-th:focus-visible { transform: translateY(-4px); }
/* var(--brown), not a baked hex: this is the only accent on the page that had
   no per-colorway override, so it stayed oxblood when the palette changed */
.hlp-th.on { border-color: var(--brown); transform: translateY(-4px); }
/* the ink keyline and its oxblood active state both disappear on the dark
   band, so the corporate tray runs cream instead */
.sec-hl.hl-ox .hlp-th { border-color: rgba(255,255,255,.34); }
.sec-hl.hl-ox .hlp-th.on { border-color: var(--cream); }

/* ============ the galleries blurb (client request: "we can include a blurb
   that we are happy to share past event galleries upon request, we believe
   in showing our work"). Its own quiet band on paper so it reads as a
   standing offer rather than another gallery. ============ */
/* the long top lead-in is the taped strip's clearance: this band now follows
   the about band, and the strip hangs ~245px down into it. The strip is hard
   right and this blurb is centred, so they only threaten to meet at narrower
   widths where the centred block widens toward it. */
.sec-galleries { --h: auto; background: var(--paper); padding: 300px 0 112px; }
/* THE PLATE (design-variants winner 2026-09-13): frame left, copy right and
   left-aligned. .gal-in keeps its name because the [data-rise] reveal above
   targets it; it is now the two-column grid rather than the centred column. */
.gal-in { width: min(1180px, calc(100% - 80px)); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 0 72px;
  align-items: center; text-align: left; }
.gal-plate { background: #fff; padding: 14px; transform: rotate(-1.2deg);
  box-shadow: 0 26px 58px rgba(52,21,15,.22); }
.gal-plate figure { position: relative; overflow: hidden; }
.gal-plate img { display: block; width: 100%; height: 390px; object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.gal-plate:hover img { transform: scale(1.05); }
.gal-cap { margin-top: 12px; text-align: center; font-family: var(--font-label);
  font-weight: 600; font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink); opacity: .5; }
.gal-copy { padding-right: 10px; }
.gal-lbl { font-family: var(--font-label); font-weight: 600; font-size: 10px;
  letter-spacing: .28em; text-transform: uppercase; opacity: .55; }
.gal-rule { width: 56px; height: 1px; margin: 24px 0;
  background: color-mix(in srgb, var(--ink) 45%, transparent); }
.gal-script { margin-top: 14px; font-family: var(--font-script); font-style: italic;
  font-size: 58px; line-height: 1; color: #5a1a12; }
.gal-para { font-family: var(--font-serif); font-size: 18px; line-height: 1.66;
  color: var(--ink); max-width: 460px; }
.gal-cta { display: inline-flex; margin-top: 32px; padding: 16px 32px;
  border: 1px solid var(--ink); color: var(--ink); text-decoration: none;
  transition: all .4s; }
.gal-cta span { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; }
.gal-cta:hover { background: var(--ink); color: var(--cream); }

/* deep-orange scripts baked per colorway, mirroring the social page's list */
:root[data-colorway="oxblood-glow"] .hl-script, :root[data-colorway="oxblood-glow"] .gal-script, :root[data-colorway="oxblood-glow"] .abh-script { color: #5a1a12; }
:root[data-colorway="coffee-espresso"] .hl-script, :root[data-colorway="coffee-espresso"] .gal-script, :root[data-colorway="coffee-espresso"] .abh-script { color: #241009; }
:root[data-colorway="ew-chestnut"] .hl-script, :root[data-colorway="ew-chestnut"] .gal-script, :root[data-colorway="ew-chestnut"] .abh-script { color: #3a0e04; }
:root[data-colorway="ew-espresso"] .hl-script, :root[data-colorway="ew-espresso"] .gal-script, :root[data-colorway="ew-espresso"] .abh-script { color: #2c0d06; }
:root[data-colorway="champagne-coffee"] .hl-script, :root[data-colorway="champagne-coffee"] .gal-script, :root[data-colorway="champagne-coffee"] .abh-script { color: #34150f; }
:root[data-colorway="champagne-coffee-red"] .hl-script, :root[data-colorway="champagne-coffee-red"] .gal-script, :root[data-colorway="champagne-coffee-red"] .abh-script { color: #34150f; }
/* the oxblood band's script stays cream in every colorway (set above) */
:root[data-colorway] .sec-hl.hl-ox .hl-script { color: var(--cream); }

/* ============ closing cross-sell: the weddings page's sideboard, copied from
   css/services.css 2026-09-13 (owner screenshot: "redesign that to look more
   like this one ... also have the weddings page included"). It replaced the
   ovt- overture card that closed this page. Keep in step with services.css
   where marked; the one structural difference is a THIRD row, because the
   weddings page cannot link to itself and this page links to all three
   services. Entrance plays on first view via script.js's existing
   .sbd-prep/.sbd-on module, which keys off .sec-gallery-cta.
   The rows sit on the 1200px .cv canvas, so .cv > * is absolute here. ====== */
/* DARK, where the weddings page runs this section on cream (owner 2026-09-13:
   "change the background to one of the dark colors from the coffee and
   champagne palette"). --sbd-dark is the palette's espresso, baked per
   colorway the same way .sec-hl.hl-ox is, so it follows a palette change
   instead of freezing this one in. It is the same dark the corporate band
   above uses; the cream weddings band sits between them, so the two never
   touch. Everything inside the section flips to cream below. */
.sec-gallery-cta { --h: 760px; --sbd-dark: #5a1a12; background: var(--sbd-dark);
  color: var(--cream); }
:root[data-colorway="coffee-espresso"] .sec-gallery-cta { --sbd-dark: #241009; }
:root[data-colorway="ew-chestnut"] .sec-gallery-cta { --sbd-dark: #3a0e04; }
:root[data-colorway="ew-espresso"] .sec-gallery-cta { --sbd-dark: #2c0d06; }
:root[data-colorway="champagne-coffee"] .sec-gallery-cta { --sbd-dark: #34150f; }
:root[data-colorway="champagne-coffee-red"] .sec-gallery-cta { --sbd-dark: #34150f; }
.sbd-left { left: 8px; top: 0; bottom: 0; width: 520px; display: flex;
            flex-direction: column; justify-content: center; }
.sbd-script { font-family: var(--font-script); font-size: 38px; color: var(--cream); }
.sbd-title { margin-top: 16px; font-family: var(--font-title); font-weight: 400;
             font-size: 52px; line-height: 1.14; }
.sbd-title em { font-family: var(--font-script); font-style: italic; text-transform: none;
                letter-spacing: 0; font-size: 1.02em; line-height: 0; }
.sbd-micro { margin-top: 26px; font-size: 13px; color: var(--cream); opacity: .62; }
.sbd-btn { display: inline-flex; width: max-content; margin-top: 22px;
           padding: 16px 30px; border: 1px solid var(--cream); color: var(--cream);
           text-decoration: none; transition: all .4s; }
.sbd-btn span { font-family: var(--font-label); font-weight: 600; font-size: 12px;
                letter-spacing: .18em; text-transform: uppercase; }
.sbd-btn:hover { background: var(--cream); color: var(--sbd-dark); }
.sbd-list { left: 620px; right: 8px; top: 50%; transform: translateY(-50%); }
.sbd-row { display: flex; align-items: center; gap: 26px; padding: 30px 6px;
           text-decoration: none; color: var(--cream); }
/* white hairlines, not ink: the ink rule vanished on the dark ground */
.sbd-row + .sbd-row { border-top: 1px solid rgba(255,255,255,.26); }
.sbd-th { width: 104px; height: 104px; overflow: hidden; flex: none; }
.sbd-th img { width: 100%; height: 100%; object-fit: cover; display: block;
              transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.sbd-row.a .sbd-th img { object-position: 50% 28%; }
.sbd-row.b .sbd-th img { object-position: 50% 26%; }
.sbd-row.c .sbd-th img { object-position: 50% 30%; }
.sbd-row:hover .sbd-th img { transform: scale(1.07); }
.sbd-body { flex: 1; }
.sbd-nm { display: block; font-family: var(--font-title); font-size: 28px;
          letter-spacing: .04em; }
.sbd-d { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5;
         color: var(--cream); opacity: .72; }
.sbd-arw { font-family: var(--font-label); font-weight: 500; font-size: 12px;
           letter-spacing: .18em; text-transform: uppercase; color: var(--cream);
           opacity: .82; white-space: nowrap; }
.sbd-arw i { font-style: normal; display: inline-block; transition: transform .4s; }
.sbd-row:hover .sbd-arw i { transform: translateX(6px); }
.sbd-prep .sbd-left, .sbd-prep .sbd-row { opacity: 0; }
.sbd-on .sbd-left { animation: sbd-rise 1s .1s both; }
.sbd-on .sbd-row:nth-child(1) { animation: sbd-rise 1s .3s both; }
.sbd-on .sbd-row:nth-child(2) { animation: sbd-rise 1s .45s both; }
.sbd-on .sbd-row:nth-child(3) { animation: sbd-rise 1s .6s both; }  /* this page's extra row */
@keyframes sbd-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ============ footer: the salone footer, copied from css/social-events.css
   2026-09-10 ============ */
.sal-footer { background: var(--teal); color: var(--white); position: relative;
              overflow: hidden; }
.sal-grid { display: grid; grid-template-columns: 1fr 340px;
            width: min(1200px, calc(100% - 80px)); margin: 0 auto;
            padding: 78px 0 0; gap: 0 80px; }
.sal-invite { padding-right: 40px; }
.sal-logo { display: block; width: 240px; height: auto; margin-bottom: 26px; }
.sal-h { font-family: var(--font-serif); font-weight: 400; font-size: 74px;
         line-height: 1.02; text-transform: uppercase; letter-spacing: .01em; }
.sal-h em { font-family: 'MrsSaintDelafield', cursive; font-style: normal;
            text-transform: none; font-size: 96px; letter-spacing: 0; line-height: .9; }
.sal-nl { display: flex; align-items: flex-end; max-width: 520px; }
.sal-nl .sal-go { background: transparent; border: 1px solid var(--white);
                  color: var(--white); font-family: var(--font-label);
                  font-weight: 600; font-size: 12px; letter-spacing: .18em;
                  text-transform: uppercase; padding: 14px 26px; margin-left: 0;
                  text-decoration: none; white-space: nowrap; transition: all .4s; }
.sal-nl .sal-go:hover { background: var(--white); color: var(--ink); }
.sal-rail { border-left: 1px solid rgba(255,255,255,.35); padding-left: 52px;
            display: flex; flex-direction: column; }
.sal-rail a { display: flex; align-items: center; justify-content: space-between;
              font-family: var(--font-label); font-weight: 600; font-size: 13px;
              letter-spacing: .2em; text-transform: uppercase; padding: 15px 0;
              border-bottom: 1px solid rgba(255,255,255,.3);
              text-decoration: none; }
.sal-rail a:first-child { padding-top: 4px; }
.sal-arw { opacity: 0; transform: translateX(-10px); transition: all .35s ease;
           font-family: var(--font-body); }
.sal-rail a:hover .sal-arw { opacity: 1; transform: none; }
.sal-ticker { margin-top: 64px; border-top: 1px solid rgba(255,255,255,.35);
              overflow: hidden; white-space: nowrap; padding: 20px 0 24px; }
.sal-ticker-track { display: inline-block;
                    animation: sal-tick 38s linear infinite; }
.sal-ticker span { font-family: var(--font-serif); font-size: 44px;
                   letter-spacing: .06em; text-transform: uppercase;
                   opacity: .55; padding-right: .6em; }
@keyframes sal-tick { from { transform: translateX(0); }
                      to { transform: translateX(-50%); } }
.sal-legal { display: flex; justify-content: space-between; align-items: center;
             width: min(1200px, calc(100% - 80px)); margin: 0 auto;
             padding: 16px 0 22px; font-family: var(--font-label);
             font-weight: 600; font-size: 11px; letter-spacing: .2em;
             text-transform: uppercase; opacity: .75; }
.sal-legal a { text-decoration: none; }
:root[data-colorway] .sal-footer { background: var(--cream); color: var(--ink); }
:root[data-colorway] .sal-nl .sal-go { border-color: var(--ink); color: var(--ink); }
:root[data-colorway] .sal-nl .sal-go:hover { background: var(--ink); color: var(--cream); }
:root[data-colorway] .sal-rail { border-left-color: color-mix(in srgb, var(--ink) 35%, transparent); }
:root[data-colorway] .sal-rail a { border-bottom-color: color-mix(in srgb, var(--ink) 30%, transparent); }
:root[data-colorway] .sal-ticker { border-top-color: color-mix(in srgb, var(--ink) 35%, transparent); }

/* ============ mobile layer (additive; the style.css blanket flows the .cv
   canvases, these re-layout this page's flow sections) ============ */
@media (max-width: 900px) {
  /* page chrome, same two fixes the social page needs: the floating burger is
     a `.cv > *` the blanket would flow to static and balloon, and the white
     bar's six desktop links measure past 390px, so the nav drops and the bar
     keeps its hamburger */
  /* the DESCENDANT selectors are load-bearing: style.css's mobile blanket is
     `.sec .cv > *` at (0,2,0), so a bare `.wmenu-btn` (0,1,0) loses to it and
     the burger balloons into two full-width bars across the hero logo. Tying
     the specificity and winning on source order is how css/social-events.css
     solves the same problem. */
  .sec-on-image-aperol-menu { height: 1px; }
  .sec-on-image-aperol-menu .cv { height: 1px; }
  .sec-on-image-aperol-menu .wmenu-btn { position: absolute; left: 18px; top: 20px;
    width: 42px; height: 32px; }
  .sec-stick-top-menu-white { height: 53px; }
  .sec-stick-top-menu-white .stm-in { display: none; }
  .sec-stick-top-menu-white .stm-burger { left: 18px; }

  /* hero: shorter frames so two rows still read, type reflowed */
  .sec-header-image { height: max(88vh, 620px); }
  /* The wall TURNS on mobile: two columns drifting vertically, instead of two
     rows drifting sideways. Two rows cannot work at this width. The row height
     is the hero split two ways (~366px), so a photo-shaped frame is ~430px
     wide and you see ONE cropped photo per row, which reads as a broken image
     (and shrinking the frames instead just brings back the dead black bands
     that the 22vh version had). Turned 90 degrees the maths inverts in our
     favour: each column is ~190px wide, frames are ~215px tall, and about
     seven of them are visible at once, so it reads as the collage it is meant
     to be. The seamless loop is unaffected: it is the same "each frame owns
     its trailing margin, translate half the track" trick on the other axis. */
  .hlh-wall { inset: 0; flex-direction: row; gap: 10px; }
  .hlh-track { flex: 1 1 0; flex-direction: column; width: auto; min-width: 0;
               height: max-content; }
  .hlh-track img { width: 100%; height: auto; min-height: 0;
                   margin-right: 0; margin-bottom: 10px; }
  .hlh-track-a { animation-name: hlh-drift-a-v; }
  .hlh-track-b { animation-name: hlh-drift-b-v; }
  @keyframes hlh-drift-a-v { from { transform: translate3d(0,0,0); }
                             to { transform: translate3d(0,-50%,0); } }
  @keyframes hlh-drift-b-v { from { transform: translate3d(0,-50%,0); }
                             to { transform: translate3d(0,0,0); } }
  .hlh-core { padding: 72px 20px 84px; }
  .hlh-logo { width: 210px; margin-bottom: 22px; }
  .hlh-h1 { font-size: clamp(38px, 12vw, 54px); }
  .hlh-para { font-size: 15px; margin-top: 20px; }
  .hlh-ctas { flex-direction: column; gap: 12px; margin-top: 28px;
              width: 100%; max-width: 340px; }
  .hlh-cta { padding: 14px 22px; text-align: center; }
  /* one frame of the wall lands right behind the wordmark, and the white
     flower backdrops in it are bright enough that the desktop veil leaves the
     cream logo barely separated from them */
  .sec-header-image::after { background: linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.84)); }
  .hlh-roll { bottom: 20px; font-size: 9px; letter-spacing: .18em;
              padding: 0 18px; line-height: 1.7; }

  /* about: one column, headshot first, the offset names tucked back in */
  .sec-about { padding: 76px 0 80px; }
  .abh-wrap { grid-template-columns: 1fr; gap: 30px; width: calc(100% - 40px); }
  .abh-figure > img { height: 380px; }
  .abh-names { left: 16px; bottom: 20px; font-size: 32px; }
  /* both keepsakes shrink and pull fully inside the edge. The figure is now
     full-width, so the desktop juts (-34px, and the rotation on top of that)
     hung them past the viewport, where the mobile overflow-x:clip sliced them.
     They sit ON the art here rather than off its edge. The strip switches from
     left- to right-placed because the wrap is now full width, and its shorter
     overhang is matched by .sec-galleries' mobile lead-in below. */
  .abh-piece { right: 12px; top: 18px; width: 84px; padding: 5px; }
  /* sits LOW: the stacked layout puts the quote directly above the wrap's
     bottom edge, so a taller overhang reached back up over the text. It now
     clears the wrap by ~50px and the quote reserves a lane for it. */
  .abh-strip { left: auto; right: 22px; bottom: -186px; width: 76px; padding: 5px; }
  .abh-strip::before { width: 50px; height: 19px; margin-left: -25px; top: -7px; }
  /* the clothesline keeps three prints on a phone (owner 2026-09-14: "add one
     more in the center"): the band is only ~230px deep here and the strip
     already takes the right; the first card hangs on the left at the strip's
     scale and the neon landscape sits between them, centred. The white strip
     and the pink card stay hidden; five would crowd a 390px screen. */
  .abh-hang { display: none; }
  .abh-hang-1 { display: block; left: 18px; bottom: -150px; width: 70px; padding: 5px; }
  /* the corner tapes scale with the card (70px wide here) */
  .abh-hang-1::before, .abh-hang-1::after { width: 46px; height: 16px; }
  .abh-hang-1::before { left: -16px; top: -6px; }
  .abh-hang-1::after { right: -16px; bottom: -6px; }
  /* a little bigger (owner 2026-09-14); clamp keeps it clear of the card on
     the left and the strip on the right down to a 320px screen */
  .abh-hang-3 { display: block; left: 50%; bottom: -172px; width: clamp(92px, 27vw, 112px); padding: 5px;
    transform: translateX(-50%) rotate(-3deg); }
  .abh-hang-3::before { width: 46px; height: 16px; margin-left: -23px; top: -6px; }
  .abh-quote { padding-right: 96px; }
  .abh-script { font-size: 40px; }
  .abh-para, .abh-quote { max-width: none; }
  .abh-para { font-size: 15px; }
  .abh-quote { font-size: 17px; }

  /* event bands: the mosaic collapses to two columns */
  .sec-hl { padding: 74px 0 78px; }
  .hl-wrap { width: calc(100% - 40px); }
  .hl-script { font-size: 38px; }
  .hl-para { font-size: 14.5px; }
  .hl-beats { font-size: 9px; letter-spacing: .16em; line-height: 1.8; }
  .hl-mosaic { margin-top: 30px; columns: 2; column-gap: 10px; }
  .hl-cell { margin-bottom: 10px; }
  .hl-product { margin-top: 42px; }
  /* the duo scales to a 300px stage height so both stages plus the gap still
     sit side by side on a 390px screen (200 + 100 + 18 = 318) */
  .hlp-duo { margin-top: 26px; gap: 18px; }
  .hlp-stage { padding: 7px; }
  .hlp-stage img { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); }
  .hlp-card { width: 200px; height: 300px; }
  .hlp-card.is-land { width: 300px; height: 200px; }
  .hlp-strip { width: 100px; height: 300px; }
  .hlp-lbl { margin-top: 10px; font-size: 9px; letter-spacing: .18em; }
  .hlp-tray { margin-top: 20px; gap: 10px; }
  .hlp-th { height: 68px; padding: 2px; }

  /* galleries + closing cross-sell + footer */
  .sec-galleries { padding: 152px 0 74px; }   /* lead-in clears the taped strip */
  .gal-in { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 34px; }
  .gal-plate img { height: 260px; }
  .gal-copy { padding-right: 0; }
  .gal-script { font-size: 40px; }
  .gal-para { font-size: 16px; max-width: none; }
  /* the cross-sell stacks: its two halves are absolute on the 1200px canvas,
     which the style.css blanket flows to static here (same rules as
     css/services.css's mobile block for this section) */
  .sec-gallery-cta { height: auto; }
  .sec-gallery-cta .cv { height: auto; }
  .sec-gallery-cta .sbd-left { position: static; width: auto;
    padding: 74px 20px 0; }
  .sec-gallery-cta .sbd-script { font-size: 28px; }
  .sec-gallery-cta .sbd-title { font-size: clamp(30px, 8.6vw, 38px); }
  .sec-gallery-cta .sbd-btn { width: 100%; max-width: 320px;
    justify-content: center; }
  .sec-gallery-cta .sbd-list { position: static; left: auto; right: auto;
    top: auto; transform: none; padding: 8px 20px 78px; }
  .sec-gallery-cta .sbd-row { gap: 16px; padding: 22px 0; }
  .sec-gallery-cta .sbd-th { width: 74px; height: 74px; flex: none; }
  .sec-gallery-cta .sbd-nm { font-size: 20px; }
  .sec-gallery-cta .sbd-d { font-size: 13px; }
  .sec-gallery-cta .sbd-arw { font-size: 11px; white-space: nowrap; }
  .sal-grid { grid-template-columns: 1fr; gap: 40px; padding: 54px 0 0;
              width: calc(100% - 40px); }
  .sal-invite { padding-right: 0; }
  .sal-h { font-size: 46px; }
  .sal-h em { font-size: 58px; }
  .sal-rail { border-left: 0; padding-left: 0; }
  .sal-ticker { margin-top: 40px; }
  .sal-ticker span { font-size: 28px; }
  .sal-legal { width: calc(100% - 40px); font-size: 9.5px; }

  /* --- menu overlay: the 1200px canvas becomes a scrollable column. This
     block was missing here (owner 2026-09-14: "on mobile, when I click the
     menu, it doesn't show the menu"): the overlay opened, but its links kept
     their desktop canvas coordinates and sat off a 390px screen, so only the
     close button and the three social icons were on it. Rules are
     css/social-events.css's verbatim (same markup and z-menu-open_* classes
     on every page in this set); keep them in step. */
  .menu-overlay .cv { width: auto; height: auto; min-height: 100%;
    display: flex; flex-direction: column; padding: 84px 28px 96px; }
  .menu-overlay .z-menu-open_0 { position: absolute; left: 16px; top: 12px;
    width: 30px; height: 48px; }
  .menu-overlay .z-menu-open_4, .menu-overlay .z-menu-open_6,
  .menu-overlay .z-menu-open_7 { display: none; }
  .menu-overlay .cv > .t-title { width: auto; text-align: left;
    font-size: 26px; margin: 9px 0; }
  .menu-overlay .z-menu-open_10 { order: 20; margin-top: 30px;
    width: 100%; max-width: 340px; height: 50px; }
  .menu-overlay .cv > .z-menu-open_8 { order: 21; margin: 34px 0 0;
    width: 200px; height: auto; }
  .menu-overlay .z-menu-open_9 { order: 22; width: auto; text-align: left;
    font-size: 14px; margin-top: 10px; }
  .menu-overlay .z-menu-open_19 { order: 23; margin-top: 28px; width: auto;
    text-align: left; }
  .menu-overlay .z-menu-open_20, .menu-overlay .z-menu-open_21 { order: 24;
    width: auto; text-align: left; margin-top: 6px; }
  .menu-overlay .z-menu-open_1, .menu-overlay .z-menu-open_2,
  .menu-overlay .z-menu-open_3 { position: absolute; bottom: 30px;
    width: 26px; height: 20px; }
  .menu-overlay .z-menu-open_1 { left: 30px; }
  .menu-overlay .z-menu-open_3 { left: 68px; }
  .menu-overlay .z-menu-open_2 { left: 106px; }
}

/* the smallest phones (320px, iPhone SE 1st gen and the like): the bigger
   centre print met the card and the strip beside it, so the two step out to
   the wrap's edges here. Above 340px the clamp on .abh-hang-3 keeps clear. */
@media (max-width: 340px) {
  .abh-strip { right: 10px; }
  .abh-hang-1 { left: 10px; }
}