/* Motiohead site redo, 3 Oct 2026. Adds only what the new sections need on top of
   /motio_main_landing_css/main.css (Red Hat Text, purple #9762fd/#ad83ff, pale #f9f9ff). */
:root { --mh-purple:#9762fd; --mh-lilac:#ad83ff; --mh-pale:#f9f9ff; --mh-ink:#242627; --mh-yellow:#ffd464; --mh-cream:#fff8d1; }
body { background:#fff; }
.redo-hero { padding-bottom:4rem; }
.redo-hero-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:5rem 1rem 2rem; background:linear-gradient(180deg, rgba(20,10,40,.15) 0%, rgba(20,10,40,.55) 100%); }
@media (max-width:767px){ .redo-hero-overlay { position:relative; background:#2b1a55; padding:3rem 1rem; } .redo-hero-overlay h1 { font-size:2rem !important; line-height:1.2 !important; } }
.redo-hero-overlay h1 { text-wrap:balance; }
.redo-notice { background:var(--mh-cream); border:1px solid var(--mh-yellow); border-radius:1rem; padding:1rem 1.25rem; font-size:.95rem; line-height:1.5; }
.redo-notice-tag { display:block; color:#7a6a2a; font-size:.8rem; margin-top:.25rem; }
/* sector tiles on the home page. Square, her word 4 Oct 12:19: the thumbnails are square,
   so a 16/10 tile showed black bars at the sides. Same reason as the work tiles on 3 Oct. */
.redo-sector { position:relative; display:block; aspect-ratio:1/1; background-size:cover; background-position:center; overflow:hidden; text-decoration:none; color:#fff; }
.redo-sector::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,0) 30%, rgba(20,10,40,.85) 100%); transition:opacity .3s; }
.redo-sector:hover::after { opacity:.95; }
.redo-sector-all { background:linear-gradient(140deg, #2b1a55 0%, #9762fd 100%); }
.redo-sector-all::after { background:none; }
.redo-sector-label { position:absolute; left:1.25rem; right:1.25rem; top:1rem; z-index:1; color:#fff; }
/* Label at the top, not the bottom: the Google Reviews badge is fixed at the viewport's bottom-left and covered the bottom-left tile's label (Growth point 3, 3 Oct). */
/* work tiles + modal */
/* Square tiles, as on the live portfolio (her ask 17:52: the thumbnails are not 16:9, a wide tile shows bars). */
.redo-work { position:relative; display:block; aspect-ratio:1/1; background-size:cover; background-position:center; border:0; overflow:hidden; color:#fff; text-align:left; padding:0; }
.redo-work::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(20,10,40,.8) 100%); }
.redo-work-title { position:absolute; left:.9rem; right:.9rem; bottom:.7rem; z-index:1; font-size:.85rem; line-height:1.3; font-weight:500; }
.redo-work-play { position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; background:rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%239762fd' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/26px no-repeat; z-index:1; opacity:.0; transform:scale(.8); transition:all .25s; }
.redo-work:hover .redo-work-play, .redo-work:focus-visible .redo-work-play { opacity:1; transform:scale(1); }
.redo-work:focus-visible { outline:3px solid var(--mh-lilac); outline-offset:2px; }
/* logo rows (from the approved home v3 preview) */
.redo-logo-row { margin:1.25rem 0; }
.motio-logos { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:.25rem 0; }
.motio-logo { display:inline-flex; align-items:center; margin:.6rem 1rem; }
/* Her word, 4 Oct 16:13: "make sure all logos are the same colour, some of them are grey and
   some are black, suggesting everyone should be grey". grayscale() keeps each logo's own
   lightness, so black marks stayed black and pale ones stayed pale. brightness(0) turns
   every opaque pixel black and invert() lifts them all to one grey; transparency survives.
   Hover still returns the brand's own colour. */
.motio-logos img { height:28px; width:auto; max-width:180px; filter:brightness(0) invert(.55); opacity:.9; transition:all .25s; }
.motio-logos img:hover { filter:none; opacity:1; }
@media (max-width:575px){ .motio-logos img { height:22px; max-width:120px; } .motio-logo { margin:.4rem .6rem; } }
/* stat cards */
.redo-case:hover { filter:brightness(.97); }
.fs-7 { font-size:.85rem; }
.list-group-item { background:transparent; }
/* The Work menu rendered as a full-width horizontal strip, because the theme lays nav lists
   out in a row and that cascaded into the dropdown. Her report, 4 Oct. Written so it stacks
   whether the menu ends up display:flex or display:block. */
.dropdown-menu { flex-direction:column; min-width:17rem; max-width:24rem; }
.dropdown-menu > li { display:block; width:100%; float:none; }
.dropdown-menu .dropdown-item { white-space:normal; display:block; width:100%; }
.dropdown-menu > li > hr.dropdown-divider { display:block; width:auto; margin:.35rem .75rem; }
/* Her word, 4 Oct 16:4x: "can we make the drop down menu look more appealing". It was a bare
   list in a white box. Now the house card: soft purple-tinted shadow, hairline border, room
   inside, rounded items that tint lilac and turn purple on hover, the section label set
   small and spaced, a thin divider, and the caret kept on the baseline and turned, not
   lifted, when open. One short fade on open; none for reduced motion. */
.navbar .dropdown-menu { border:1px solid #E6E6EE; border-radius:1rem; padding:.6rem; margin-top:.6rem; box-shadow:rgba(118,126,194,.22) 0 10px 28px, rgba(118,126,194,.08) 0 1px 2px; background:#fff; }
.navbar .dropdown-menu .dropdown-item { padding:.65rem .95rem; border-radius:.65rem; color:var(--mh-ink) !important; font-weight:400; line-height:1.3; transition:background-color .12s, color .12s; }
/* !important on the colours: on the light-bar pages the collapse wrapper carries .text-dark and
   the theme pins link colour under it, so without this the hover tinted lilac but the text
   stayed black on /pricing/ while going purple on /work/. iMac's pass, 4 Oct. */
.navbar .dropdown-menu .dropdown-item:hover, .navbar .dropdown-menu .dropdown-item:focus-visible { background:#F5EFFF; color:var(--mh-purple) !important; outline:none; }
.navbar .dropdown-menu .dropdown-item:active { background:#E2D3FF; color:var(--mh-purple) !important; }
.navbar .dropdown-menu .dropdown-header { padding:.6rem .9rem .25rem; font-size:.7rem; letter-spacing:.08em; color:#9898a3; }
.navbar .dropdown-menu > li > hr.dropdown-divider { border-color:#E6E6EE; opacity:1; margin:.4rem .5rem; }
.navbar .dropdown-toggle::after { vertical-align:.15em; margin-left:.4em; border-top-width:.32em; border-right-width:.32em; border-left-width:.32em; transition:transform .15s; transform-origin:50% 40%; }
.navbar .dropdown-toggle.show::after, .navbar .dropdown-toggle[aria-expanded="true"]::after { transform:rotate(180deg); }
@media (min-width:992px){ .navbar .dropdown-menu.show { animation:redo-menu-in .14s ease-out; } }
@keyframes redo-menu-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .navbar .dropdown-menu.show { animation:none; } .navbar .dropdown-toggle::after { transition:none; } }
@media (max-width:991.98px){ .navbar .dropdown-menu { box-shadow:none; border:0; background:transparent; margin-top:0; padding:.2rem 0 .4rem; } .navbar .dropdown-menu .dropdown-item, .navbar .dropdown-menu .dropdown-header { text-align:center; } }
@media (prefers-reduced-motion: reduce){ .redo-work-play, .redo-sector::after, .motio-logos img { transition:none; } }

/* r4 fixes from the first screenshot round */
.redo-header { position:relative; z-index:1030; }
#navigation { z-index:1030; }
/* The copyright used to be pushed right with a 14rem left pad to dodge the Google badge,
   which read as misaligned. Now it sits alone, centred under the columns, with clearance
   below for the badge instead of beside it. Her word, 4 Oct 16:17. */
.redo-copyright { padding:1.5rem 1rem 4.5rem; border-top:1px solid rgba(255,255,255,.08); margin-top:1rem; }
#accordion .accordion-body { background:transparent !important; }
@media (max-width:575px){ .redo-work-title { font-size:.72rem; left:.6rem; right:.6rem; bottom:.5rem; } }

/* Hero film, full width as live (a contained 56vh version was tried for Growth's first-screen point and she rejected it at 17:57).
   Film colour measured at #041d35. Desktop film is 1:1, phone film is 9:16; the typed box inside never moves
   (desktop x 36-64% / y 25-28%, phone x 11-89% / y 24-28%), so the real box sits on it by percentage. */
.redo-hero-band { background:#041d35; }
/* Her word 17:57 ("sorry this should have stayed as was"): the film is full width again, as on the live site; the headline follows it. */
.redo-hero-film { position:relative; width:100%; aspect-ratio:1/1; }
.redo-hero-film video { display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:767px){ .redo-hero-film { height:auto; width:100%; aspect-ratio:9/16; } }
.redo-hero-prompt { position:absolute; left:36%; width:28%; top:25%; height:3.2%; margin:0; display:flex; align-items:center; border-radius:2rem; background:transparent; transition:box-shadow .2s, background .2s; }
.redo-hero-prompt input { flex:1; height:100%; background:transparent; border:0; outline:0; color:#fff; font-family:inherit; font-size:clamp(.9rem, 1.45vw, 1.4rem); padding:0 2.2em 0 1.2em; border-radius:2rem; }
/* The pill appeared to grow its type the moment someone typed: the placeholder rendered
   smaller than the value at 1440 but matched at 390, which is the signature of a theme
   rule styling ::placeholder on its own rather than anything in this file. Pinning the
   placeholder to the input's own font settings makes the two identical at every width,
   whatever the theme does. CP's browser pass, 4 Oct. */
.redo-hero-prompt input::placeholder { color:transparent; font-size:inherit; font-family:inherit; font-weight:inherit; letter-spacing:inherit; line-height:inherit; }
.redo-hero-prompt:focus-within, .redo-hero-prompt.is-typing { background:#0f2d4d; }
.redo-hero-prompt:focus-within input::placeholder { color:rgba(255,255,255,.55); }
.redo-hero-prompt:hover, .redo-hero-prompt:focus-within { box-shadow:0 0 0 2px rgba(255,255,255,.35), 0 0 24px rgba(151,98,253,.45); }
.redo-hero-prompt button { position:absolute; right:.35em; top:50%; transform:translateY(-50%); width:1.9em; height:1.9em; border-radius:50%; border:0; background:rgba(255,255,255,.18); color:#fff; font-size:clamp(.9rem, 1.45vw, 1.4rem); line-height:1; cursor:pointer; }
.redo-hero-prompt button:hover { background:var(--mh-purple); }
@media (max-width:767px){ .redo-hero-prompt { left:11%; width:78%; top:23.6%; height:4.6%; } .redo-hero-prompt input { font-size:.85rem; } .redo-hero-prompt button { font-size:.85rem; } }
/* Menu anchors land under the fixed-height header */
[id^=format-] { scroll-margin-top:5rem; }
.dropdown-header { color:#9898a3; font-weight:500; letter-spacing:.04em; }
/* Her word, 4 Oct: the home logo wall read as heavy, so home carries one centred row. */
.redo-logo-strip .motio-logos { gap:.75rem 0; }
.redo-logo-strip .motio-logo { margin:.9rem 1.6rem; }
/* Her word, 4 Oct 12:21 ("logos should be more prominent"): bigger, and at full strength
   rather than faded back. Greyscale stays so one row reads as one row. */
.redo-logo-strip img { height:48px; max-width:250px; opacity:1; }
.redo-logo-strip img:hover { filter:none; }
@media (max-width:767px){ .redo-logo-strip img { height:36px; max-width:170px; } .redo-logo-strip .motio-logo { margin:.7rem 1rem; } }
@media (max-width:575px){ .redo-logo-strip img { height:30px; max-width:140px; } .redo-logo-strip .motio-logo { margin:.6rem .8rem; } }
/* Attach control on every form, her word 4 Oct. Same idea as the live contact page:
   the input itself is hidden and the label is the button. */
.redo-attach { cursor:pointer; position:relative; }
/* The hidden file input must stay INSIDE the label's own box. Without position:relative on
   the label it resolved against a far ancestor, so clicking Attach a file focused an input
   somewhere else on the page and the browser scrolled there. Her report, 4 Oct. */
.redo-attach input[type=file] { position:absolute; left:0; top:0; width:1px; height:1px; opacity:0; overflow:hidden; }
.redo-attach-body { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border:1px dashed rgba(255,255,255,.5); border-radius:2rem; color:#fff; font-size:.9rem; }
.redo-attach:hover .redo-attach-body { border-color:#fff; background:rgba(255,255,255,.08); }
.redo-attach input[type=file]:focus-visible + .redo-attach-body { outline:2px solid #fff; outline-offset:2px; }
.redo-attach-icon { font-size:1.1rem; line-height:1; }
/* Before/after comparison, as the live retouching page shows it. */
/* The box takes the picture's own shape (her principle: the frame follows the asset).
   A portrait pair in a 16:9 box letterboxed, which left the slider clipping black bars
   instead of the photograph for the outer third of its travel. Found on the preview 4 Oct. */
.redo-pair { position:relative; margin:0 auto; width:fit-content; max-width:100%; overflow:hidden; }
/* The finished frame sits in normal flow and sets the box; the browser fits it by both
   width and height, so the shape is always exact and nothing runs past a phone screen.
   The before frame overlays it at the same rendered size and is revealed by clip-path. */
.redo-pair-after { display:block; max-width:100%; max-height:78vh; width:auto; height:auto; }
.redo-pair-before { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
.redo-pair-clip { position:absolute; inset:0; clip-path:inset(0 50% 0 0); }
/* clip-path rather than a narrowed box: the before image keeps the exact size and
   position of the after image, so the two line up at every slider position. */
.redo-pair-range { position:absolute; left:0; right:0; bottom:1rem; width:calc(100% - 2rem); margin:0 1rem; z-index:2; }
.redo-pair-tag { position:absolute; top:1rem; z-index:2; background:rgba(0,0,0,.55); color:#fff; font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; padding:.25rem .6rem; border-radius:1rem; }
.redo-pair-tag-l { left:1rem; }
.redo-pair-tag-r { right:1rem; }
/* Review carousel: the slide was a fixed 480 px, so on a 390 phone it ran from x -45 to
   435 and clipped about 45 px of every line at both edges. Measured on the preview 4 Oct. */
.slide-card { width:min(480px, calc(100vw - 2.5rem)); }
.slide-card .col-md-4 { width:100%; max-width:100%; }
/* The seven-logo row wrapped at 1440, leaving one client alone on a second line.
   Seven equal columns keep it one row and shrink the widest logo instead of dropping it. */
@media (min-width:992px){
  .redo-logo-strip .motio-logos { display:grid; grid-template-columns:repeat(7, 1fr); align-items:center; gap:0 1rem; }
  .redo-logo-strip .motio-logo { margin:.7rem 0; justify-content:center; }
  .redo-logo-strip img { max-width:100%; height:auto; max-height:48px; }
}

/* The plan table is 760px wide inside a 342px box on a 390 phone, so it scrolls
   sideways with only the first column visible and nothing saying the other two
   exist. CP's browser pass, 4 Oct. The hint line above it is in the markup; this
   makes the scroll look like a control rather than a clipped page, and closes the
   gap the removed toggle left above the table. */
.redo-plan-scroll { position:relative; margin-top:0 !important; }
@media (max-width: 767.98px) {
  .redo-plan-scroll::after { content:""; position:absolute; top:0; right:0; width:2.5rem; height:100%;
    pointer-events:none; background:linear-gradient(to right, rgba(255,255,255,0), #fff); }
}
/* Her word, 4 Oct: the stat band back to the shape it had on the live site, square
   corners with the figure last, so the corner marks read. */

/* Her report, 4 Oct 15:26: "double arrow". There are genuinely two. The hero film
   has the whole prompt painted into it, arrow included, and our real form is laid
   over the top; the two agree at one viewport width and drift at every other.
   Chasing the alignment cannot work, because the painted arrow is at a fixed point
   in a square frame while ours is pinned to a form whose width is a percentage of
   the page. So: keep the button exactly as it is for the click target, the keyboard
   and its aria-label, and stop drawing it. The film's own arrow is then the only
   arrow, and it cannot drift because it is part of the picture. The hit area is
   widened so a tap near the painted arrow still lands on the real control. */
.redo-hero-prompt button { background:transparent !important; color:transparent; width:2.6em; }
.redo-hero-prompt button:hover, .redo-hero-prompt button:focus { background:transparent !important; }
.redo-hero-prompt button:focus-visible { outline:2px solid rgba(255,255,255,.8); outline-offset:2px; border-radius:50%; }
/* The half the rule above missed, found by measuring every frame of both films: the
   painted arrow sits INSIDE our form's box, and the pill paints a solid background the
   moment it is focused or typed into. So hiding our button left the prompt with no send
   control at all in the one state where somebody needs it. Ours comes back exactly when
   the pill goes opaque, which cannot double because the painted one is covered at that
   moment. !important to beat the transparent rule above. */
.redo-hero-prompt:focus-within button, .redo-hero-prompt.is-typing button { background:rgba(255,255,255,.18) !important; color:#fff; }
.redo-hero-prompt:focus-within button:hover, .redo-hero-prompt.is-typing button:hover { background:var(--mh-purple) !important; }

/* An opened accordion question rendered in Bootstrap link blue with a blue chevron:
   the only off-brand colour on the site, and it lands exactly where the eye goes, on
   the question someone has just opened. Bootstrap sets both through its own variables,
   so they are overridden there rather than fought with selectors. The chevron is the
   same arc Bootstrap ships, drawn in the house purple. CP's browser pass, 4 Oct. */
.accordion { --bs-accordion-active-color:var(--mh-purple); --bs-accordion-btn-focus-border-color:var(--mh-purple); --bs-accordion-active-bg:transparent; --bs-accordion-btn-focus-box-shadow:0 0 0 .2rem rgba(151,98,253,.25); }
.accordion-button:not(.collapsed) { color:var(--mh-purple); background:transparent; box-shadow:none; }
/* The house accordion is the theme's purple disc with a white arrow, keyed to #accordion
   and #accordion-faq. My own chevron was a second style on one page; removed 4 Oct and the
   pricing accordion given the house id instead. Where she has already decided, that is
   the answer. The colour variables above still make the open question purple. */

/* The original pricing page's three-ways block, her word 4 Oct: "retain some elements from
   the original pricing page, it was looking much better". These are its rules, carried
   into this file so the page needs no second stylesheet. */
.cards-block .card-item { background:#fff; }
.cards-block .card-item p { display:block; }
.cards-block .active.green-card { background-color:#E0FFF1; }
.cards-block .active.purple-card { background-color:#F5EFFF; }
.cards-block .active.yellow-card { background-color:#FFF8D1; }
.text-shadow { color:#9898a3; }

/* Motion, her ask 4 Oct 16:1x after reviewing a studio site: "please do what you can to
   apply motion effects like they have". Their stack is scroll-driven reveals, carousels
   and hover states. Ours: the same patterns in plain CSS driven by one IntersectionObserver
   in redo.js, no library, and every rule gated so a browser asking for reduced motion sees
   a still page. Nothing is hidden until JS has marked the document, so no-JS shows all. */
html.redo-motion .rv { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.65,.2,1), transform .7s cubic-bezier(.2,.65,.2,1); transition-delay:var(--rv-delay, 0s); will-change:opacity, transform; }
html.redo-motion .rv.is-in { opacity:1; transform:none; }
html.redo-motion .rv-scale { transform:translateY(0) scale(.96); }
html.redo-motion .rv-scale.is-in { transform:none; }
/* Headline rise on load: the hero h1 and the first h2 of each section. */
html.redo-motion h1.rv { transform:translateY(28px); transition-duration:.9s; }
/* Hover: tiles lift and their picture breathes; cards lift; buttons lift a touch. */
.redo-sector, .redo-work, .redo-case, .card.shadow-motio-sm { transition:transform .35s cubic-bezier(.2,.65,.2,1), box-shadow .35s; }
.redo-sector:hover, .redo-case:hover, .card.shadow-motio-sm:hover { transform:translateY(-4px); box-shadow:rgba(118,126,194,.28) 0 14px 32px; }
.redo-sector { background-size:100% auto; background-size:cover; transition:transform .35s cubic-bezier(.2,.65,.2,1), box-shadow .35s, background-size .6s; }
.redo-work { overflow:hidden; }
.redo-work img { transition:transform .6s cubic-bezier(.2,.65,.2,1); }
.redo-work:hover img { transform:scale(1.04); }
.btn.rounded-pill { transition:transform .2s, box-shadow .2s, background-color .2s, color .2s, border-color .2s; }
.btn.rounded-pill:hover { transform:translateY(-2px); box-shadow:rgba(118,126,194,.25) 0 8px 18px; }
/* Logos arrive one after another. */
html.redo-motion .redo-logo-strip .motio-logo { opacity:0; transform:translateY(8px); transition:opacity .5s, transform .5s; transition-delay:var(--rv-delay, 0s); }
html.redo-motion .redo-logo-strip.is-in .motio-logo { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html.redo-motion .rv, html.redo-motion h1.rv, html.redo-motion .redo-logo-strip .motio-logo { opacity:1; transform:none; transition:none; }
  .redo-sector, .redo-work img, .redo-case, .card.shadow-motio-sm, .btn.rounded-pill { transition:none; }
  .redo-sector:hover, .redo-case:hover, .card.shadow-motio-sm:hover, .btn.rounded-pill:hover { transform:none; }
  .redo-work:hover img { transform:none; }
}

/* Legal pages: the live text in the new shell, readable rather than decorated. */
.redo-legal p { margin-bottom:1rem; } .redo-legal strong { font-weight:500; } .redo-legal a { color:var(--mh-purple); }
/* iMac's motion pass on r1614: a theme .card:hover rule drew a solid purple 20px bar out of the
   top of a card on hover, and the work still never breathed because the still is a background,
   not an <img>. The shadow is pinned, and the tile itself breathes instead. */
.card.shadow-motio-sm:hover { box-shadow:rgba(118,126,194,.28) 0 14px 32px !important; }
.redo-work { transition:transform .5s cubic-bezier(.2,.65,.2,1), box-shadow .5s; }
.redo-work:hover { transform:scale(1.025); box-shadow:rgba(118,126,194,.28) 0 14px 32px; }
@media (prefers-reduced-motion: reduce){ .redo-work:hover { transform:none; } }
/* Her word, 4 Oct 16:19: use cases tiled 2x2, split to two lines, more room. */
.redo-case { padding:2rem !important; } .redo-case h3 { font-size:1.35rem; } .redo-case p:last-child { font-size:1rem; line-height:1.5; }

/* Her word, 4 Oct 16:27: "make sure we don't crop anyone's heads and align the square preview
   that way". Stills are mostly portraits in a square tile; a centred crop takes the top of the
   head off. Anchoring to the top keeps faces and costs nothing on a landscape frame. Films keep
   the centre, where the action is. */
.redo-still { background-position:center top !important; }

/* The four steps are links now; the first card went grey on hover from a theme rule. */
.redo-step:hover { background:#fff !important; color:var(--mh-ink); }
.redo-step:hover h3 { color:var(--mh-purple); }
/* The ticker under the hero: one slow line of what we make. */
.redo-ticker { overflow:hidden; border-top:1px solid #ECECF4; border-bottom:1px solid #ECECF4; padding:.9rem 0; margin:0 0 1rem; background:var(--mh-pale); }
.redo-ticker-track { display:inline-flex; white-space:nowrap; align-items:center; gap:0; animation:redo-ticker 48s linear infinite; will-change:transform; }
.redo-ticker-track span { font-size:1.05rem; font-weight:300; color:var(--mh-ink); letter-spacing:.02em; padding:0 1.1rem; }
.redo-ticker-track i { font-style:normal; color:var(--mh-purple); font-size:.55rem; }
.redo-ticker:hover .redo-ticker-track { animation-play-state:paused; }
@keyframes redo-ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .redo-ticker-track { animation:none; } }
/* Her ask, 4 Oct 16:42: the ticker lower on the page, continuous and looped, and in its old
   place an animated arrow pointing down. The track is six copies of the line and moves by half
   its own width, so the join is invisible at any viewport. The arrow is a chevron that drifts
   down and fades, three seconds a cycle, and is a link to the next section. */
.redo-ticker { margin:1rem 0 .5rem; }
.redo-ticker-track { animation-duration:70s; }
.redo-scroll-arrow { display:flex; justify-content:center; align-items:center; height:3.5rem; margin:-.5rem auto 1rem; text-decoration:none; }
.redo-scroll-arrow span { display:block; width:14px; height:14px; border-right:2px solid var(--mh-purple); border-bottom:2px solid var(--mh-purple); transform:rotate(45deg); animation:redo-arrow 2.4s ease-in-out infinite; opacity:.9; }
@keyframes redo-arrow { 0% { transform:translateY(-6px) rotate(45deg); opacity:.25; } 50% { transform:translateY(4px) rotate(45deg); opacity:1; } 100% { transform:translateY(-6px) rotate(45deg); opacity:.25; } }
@media (prefers-reduced-motion: reduce){ .redo-scroll-arrow span { animation:none; opacity:.9; } }

/* iMac's alignment pass on r1641: every grid's outer edge sits 4px outside the heading block
   (the card gutter), except the cases, whose cells carry p-3 and sat 8px narrower. The row's
   margins widen by the difference so its edges meet the others'. And the logo row started on
   the grid line but ended 95px short: first and last logos now sit on their cell edges. */
.redo-cases-row { margin-left:-1rem; margin-right:-1rem; }
@media (min-width:992px){ .redo-logo-strip .motio-logo:first-child { justify-content:flex-start; } .redo-logo-strip .motio-logo:last-child { justify-content:flex-end; } }