/*
 * About Us: the hero product showcase.
 *
 * One slide per product, and everything on a slide belongs to that product —
 * its logotype, its screen, its line. They cannot drift apart because they are
 * one element.
 *
 * SCALE. The device is back to the scene kit's own size. An earlier version
 * shrank it to 232px wide so the controls would clear the fold; the reference
 * page draws its phone at 346, and at two thirds of that the hero object read
 * as a thumbnail marooned in a 580px column. The controls moved rather than the
 * device.
 */

/*
 * THREE ROWS: the stacked slides, the subtext, the controls.
 *
 * Every slide occupies row 1 so they can cross-fade on top of one another, but
 * the subtext and the controls get rows of their own. An earlier version put
 * the text at grid-area 1/1 as well and it painted straight over the logotype
 * at the top of the slide.
 */
.srco-page .srco-showcase {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-rows: auto;
  justify-items: center;
}

/* ---------------------------------------------------------------------------
   Slides
   ------------------------------------------------------------------------ */

/*
 * The no-script state is the DEFAULT. Only the slide carrying `is-current` in
 * the markup shows, so with the script blocked the hero is ShareRing Me with
 * its screen and its line — a whole page, not a broken carousel.
 */
/*
 * ONE BLOCK, aligned to the device.
 *
 * The logotype and the line used to float centred and full-column above a
 * narrower device, so they read as three separate things stacked near each
 * other rather than as one product. They are now held to the frame's own width
 * and set flush left, which is how the rest of this page and both hero pages
 * set their copy.
 *
 * --srco-frame-w is declared per slide type below, so the head aligns to the
 * phone on a phone slide and to the browser on the Link one without either
 * being hard-coded here.
 */
/*
 * justify-content:center matters only for ShareRing Link.
 *
 * All three slides share one grid cell, so the cell is as tall as the tallest,
 * which is a phone. Link is a browser frame and roughly half that height, and
 * pinned to the top it left a very visible hole beneath itself. Centred, the
 * shorter composition sits in the middle of the space it has.
 *
 * The logotype and the frame move TOGETHER, which is the guarantee the whole
 * showcase was rebuilt around: they are one element and cannot disagree. What
 * changes between slides is where that element sits, and since the slides
 * cross-fade rather than slide, it reads as a different composition per product
 * rather than as a jump.
 */
.srco-page .srco-slide {
  display: none;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vh, 16px);
}

/*
 * ONE WIDTH PER SLIDE TYPE, and the frame reads it too.
 *
 * The head was aligned to 300px while the phone frame was drawn at 330, so the
 * logotype and the line sat a few pixels narrower than the device and the line
 * hung past its right edge. Declaring the width once and having the frame
 * consume it is what stops those two drifting again.
 */
/*
 * The phone frame takes the page's ONE phone width.
 *
 * This used to be its own min(100%, 330px), which is how the hero ended up
 * showing a 330px device two screens above a 277px one on the Mission scene —
 * the mismatch Rohan called out. Both now read --srco-phone-w, declared once in
 * company-about.css and derived from the height of the screen the device has to
 * fit inside.
 *
 * It has to be changed HERE rather than overridden from company-about.css. Both
 * selectors are .srco-page .srco-slide--phone, an exact specificity tie, and
 * this stylesheet is enqueued after that one (inc/enqueue.php), so the later
 * rule wins and an override there is silently ignored. It was, for one build.
 */
.srco-page .srco-slide--phone   { --srco-frame-w: var(--srco-phone-w, min(100%, 330px)); }
/*
 * ShareRing Link's frame is the LARGEST on the deck, deliberately.
 *
 * It is the only desktop product in the showcase and the only slide whose
 * screen is a working canvas rather than a phone UI: at 460px its workflow
 * builder was a grid of unreadable grey cards. It is also last in the running
 * order now, so it is the note the hero ends on.
 *
 * The 100px reserve keeps the frame clear of the deck's own corner control.
 */
.srco-page .srco-slide--browser { --srco-frame-w: min(760px, 100%); }

.srco-page .srco-slide {
  grid-row: 1;
  grid-column: 1;
}

.srco-page .srco-slide.is-current {
  display: flex;
}

.srco-page .srco-showcase.is-live .srco-slide {
  display: flex;
  grid-row: 1;
  grid-column: 1;
  opacity: 0;
  transition: opacity 640ms var(--srk-ease, cubic-bezier(0.22, 1, 0.36, 1));
  pointer-events: none;
}

.srco-page .srco-showcase.is-live .srco-slide.is-current {
  opacity: 1;
  pointer-events: auto;
}

/* ---------------------------------------------------------------------------
   The product logotype
   ------------------------------------------------------------------------ */

/*
 * Sized off the optical registry, so the three marks share a CAP HEIGHT rather
 * than a box. ShareRing Link's lockup is stacked, DigitalMe's is a wordmark
 * alone; set to one pixel height their letters would come out at wildly
 * different sizes. --sr-logo-m is the ratio and the cap is set here, which is
 * the split tokens.css gained for exactly this.
 */
.srco-page .srco-slide-mark {
  --sr-logo-cap: clamp(1rem, 1.5vw, 1.3rem);
  width: 100%;
  max-width: var(--srco-frame-w);
  height: calc(var(--sr-logo-cap) * 2.6);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  text-decoration: none;
}

.srco-page .srco-slide-mark img {
  height: calc(var(--sr-logo-cap) * var(--sr-logo-m));
  width: auto;
  display: block;
  transition: opacity 240ms var(--srk-ease, ease);
}

.srco-page .srco-slide-mark:hover img,
.srco-page .srco-slide-mark:focus-visible img {
  opacity: 0.75;
}

/* ---------------------------------------------------------------------------
   Frames
   ------------------------------------------------------------------------ */

/*
 * TWO FRAMES, because the products are genuinely different shapes.
 *
 * ShareRing Me and DigitalMe are phone apps and their captures are 0.43–0.46
 * portrait. ShareRing Link is a desktop workflow builder — its real UI is a
 * 1232x770 browser window. Putting that in a phone would misrepresent the
 * product as surely as putting a DigitalMe screen under a ShareLedger
 * wordmark would, which is the mistake this whole showcase was rebuilt to stop.
 */
.srco-page .srco-frame {
  position: relative;
}

/* The phone: the scene kit's own device, at the scene kit's own size. */
/*
 * 285, not 316 and not 232.
 *
 * The arithmetic, at a 900px viewport: 827 usable under the header, less the
 * logotype, the subtext and the controls with their gaps — about 182px of
 * furniture — leaves roughly 645 for the device. At 760x1744 that is 281px
 * wide. 285 with the hero's own padding trimmed is the largest the phone can be
 * while the pause control stays on screen, and the control has to stay on
 * screen because it is what makes the deck WCAG 2.2.2 compliant.
 */
/*
 * THE DEVICE MAY BLEED BELOW THE FOLD, and that is the reference behaviour
 * rather than a compromise: ShareRing Me draws its phone 346 wide at a 900px
 * viewport, which puts its bottom at 939. A hero device is meant to run off the
 * bottom edge; that is part of why it reads as an object rather than a picture.
 *
 * Two earlier attempts got this backwards and shrank the phone to fit the
 * controls on screen — first to 232, then to a height-derived clamp that gave
 * 205px on a 800px laptop. Both produced a thumbnail. The controls do not need
 * to be above the fold to satisfy WCAG 2.2.2; they need to EXIST and be
 * reachable, and they are, by scroll and by keyboard.
 */
.srco-page .srco-frame--phone {
  width: var(--srco-frame-w);
  padding: 12px;
  border-radius: var(--srk-phone-radius, 38px);
  background: #050d2c;
  border: 1px solid rgba(234, 240, 255, 0.2);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62);
}

.srco-page .srco-frame--phone .srco-frame-screen {
  position: relative;
  /*
   * 966/2092, THE RATIO OF THE CLIPS, not 760/1744.
   *
   * The frame was cut for a 760x1744 screenshot. The videos that replaced those
   * screenshots are 966x2092 and 402x874, both about 0.46 against the frame's
   * 0.4358, so object-fit:cover scaled them up and sliced the interface: a row
   * of "Any ID Country / Australia Passport" cut in half at the top edge and a
   * control cut in half at the bottom. That is what "broken video playback in
   * the phone silhouette" was — it was playing, and it was being trimmed.
   *
   * Matching the ratio means there is nothing to crop, and object-fit:contain
   * below guarantees it stays that way if a future clip is cut differently.
   */
  aspect-ratio: 966 / 2092;
  border-radius: var(--srk-phone-screen-radius, 26px);
  overflow: hidden;
  background: linear-gradient(180deg, #0a1a4d 0%, #071238 100%);
}

/*
 * The browser. Same materials as the phone — same ground, same hairline, same
 * shadow — so the two read as one family rather than as two widgets. The bar is
 * a plain strip rather than drawn chrome: three fake traffic-light dots would
 * be pretending to be an operating system.
 */
/*
 * Wider than the phone, because it is a desktop product.
 *
 * The scene kit sizes its right column from --srk-phone-width, which caps at
 * 380px — right for a phone and far too narrow for a workflow builder. At 345px
 * the Link UI was an unreadable grid of grey cards. The hero widens its own
 * column (see .srco-hero in company-about.css) and the frame fills it.
 */
.srco-page .srco-frame--browser {
  /*
   * Always leaves 100px of column for the chevrons to sit in.
   *
   * At full column width the browser frame reached both edges and the chevrons
   * landed on top of the screenshot; the phone, being much narrower, had room
   * either side and looked fine. Reserving the gutter here makes one rule work
   * for both frames instead of tuning the nav per slide.
   */
  width: var(--srco-frame-w);
  padding: 10px;
  border-radius: 16px;
  background: #050d2c;
  border: 1px solid rgba(234, 240, 255, 0.2);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62);
}

.srco-page .srco-frame-bar {
  display: block;
  height: 8px;
  width: 62px;
  margin: 2px auto 10px;
  border-radius: 999px;
  background: rgba(234, 240, 255, 0.18);
}

.srco-page .srco-frame--browser .srco-frame-screen {
  position: relative;
  aspect-ratio: 1232 / 770;
  border-radius: 8px;
  overflow: hidden;
  background: #0a1a4d;
}

/*
 * CONTAIN, NOT COVER, inside the device.
 *
 * A user interface must never be cropped: a sliced row of text does not read as
 * a tight crop, it reads as a bug. With the frame ratio now matching the source
 * this changes nothing visually, and it is the guarantee that keeps it that way.
 */
.srco-page .srco-frame-screen img,
.srco-page .srco-frame-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /*
   * The video and the still it replaces are laid out identically, so a slide
   * that has a clip and a slide that does not occupy the frame the same way and
   * the deck cannot shift as it turns over. object-fit also makes the POSTER
   * fill the frame, which matters more than it sounds: the posters are 966x2092
   * and 402x874 while the frame is 760x1744, and without it the first paint
   * would be letterboxed and then jump when the clip started.
   */
  display: block;
  background: #050d2c;
}

/* ---------------------------------------------------------------------------
   The subtext: REMOVED 2026-08-29
   ------------------------------------------------------------------------ */

/*
 * The slide carried a line of copy between its logotype and its device. It is
 * gone on Rohan's direction: the hero shows the PRODUCT BRAND and the product,
 * and nothing else, until the copy is written properly.
 *
 * The rule that lived here is deleted rather than commented out, but the trap
 * it recorded is worth keeping because it will happen again to the next
 * paragraph anyone puts inside a slide:
 *
 *   .srk-page .srk-scene p { max-width: var(--srk-measure) } is (0,2,1).
 *   .srco-page .srco-slide-text was (0,2,0) and LOST, so the line rendered at
 *   62ch (537px) over a 330px phone and hung past both its edges. It needed the
 *   third class — .srco-page .srco-slide .srco-slide-text — to win on count.
 *
 * The symptom was a layout that looked untidy rather than broken, which is the
 * same shape as the Elementor Global Kit trap this project already documents.
 * PHP still holds the strings (srco_hero_slides), so restoring the line means
 * restoring this rule too.
 */

/*
 * Announcement only. The visible line is in the slide; this exists so a
 * screen-reader user is told the deck has turned over, since the slides that
 * are not current are aria-hidden and change silently.
 */
.srco-page .srco-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* ---------------------------------------------------------------------------
   Page navigation
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   The page-navigation chevron: MOVED
   ------------------------------------------------------------------------ */

/*
 * These rules left this file when Pricing became the second page to need them
 * and it was clear the chevron was never about this page's hero deck. The
 * behaviour that draws them moved at the same time, from company-about.js to
 * scene-flow.js.
 *
 * They landed in scene-kit.css as .srk-pagenav, and on 2026-09-01 they were
 * retired again in favour of .srk-chrome, which that file had been drawing in
 * parallel all along: both shipped on every cinema page until then. The
 * surviving rules are under "Cinema chrome" in assets/css/scene-kit.css.
 */

/* ---------------------------------------------------------------------------
   What we do
   ------------------------------------------------------------------------ */

.srco-page .srco-whatwedo {
  list-style: none;
  margin: clamp(24px, 4vh, 44px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(28px, 4vw, 52px);
}

@media (min-width: 860px) {
  .srco-page .srco-whatwedo { grid-template-columns: repeat(3, 1fr); }
}

.srco-page .srco-what { margin: 0; }

.srco-page .srco-what-icon {
  width: 38px;
  height: 38px;
  color: var(--srk-accent-live, var(--srh-accent));
  margin-bottom: 18px;
  display: block;
}

.srco-page .srco-what h3 {
  font-size: var(--srk-display-s);
  color: var(--srh-pale);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

.srco-page .srco-what p {
  margin: 0;
  color: var(--srh-ink);
  max-width: 42ch;
}

/* ---------------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  /*
   * The script still advances under reduce — see the note in
   * assets/js/company-about.js. What goes is the fade, so a change lands as an
   * instant cut rather than as animation.
   */
  .srco-page .srco-showcase.is-live .srco-slide,
  .srco-page .srco-dot,
  .srco-page .srco-slide-mark img {
    transition: none;
  }
}


/* ---------------------------------------------------------------------------
   The entrance
   ------------------------------------------------------------------------ */

/*
 * THE DEVICE ARRIVES FIRST, THEN THE WORDS.
 *
 * A static line sitting above a static picture reads as a caption someone
 * forgot to place. Staged, the same three elements read as a product being
 * presented — which is what both hero pages do: ShareRing Link starts every
 * beat at `opacity: 0; translateY(24px)` and transitions it in over 620ms, and
 * DigitalMe rises its mark with an overshoot before its tagline fades up
 * behind it.
 *
 * The values here are Link's, not new ones: 24px of travel, 620ms, and the
 * kit's own easing curve. What differs is the trigger — Link fires beats from
 * scroll progress because its scenes are scrubbed, and this is the top of a
 * page that is not, so it plays on arrival and replays whenever a slide becomes
 * current.
 *
 * `both` on the fill matters: without it each element flashes at its final
 * position for one frame before its delay elapses.
 */
@keyframes srco-beat-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.srco-page .srco-showcase.is-live .srco-slide.is-current .srco-frame {
  animation: srco-beat-in 700ms var(--srk-ease, cubic-bezier(0.22, 1, 0.36, 1)) 0ms both;
}

.srco-page .srco-showcase.is-live .srco-slide.is-current .srco-slide-mark {
  animation: srco-beat-in 620ms var(--srk-ease, cubic-bezier(0.22, 1, 0.36, 1)) 300ms both;
}

/*
 * With the children staging themselves, the container no longer cross-fades:
 * two overlapping fades fight each other and the result reads as a smear. The
 * outgoing slide simply stops being displayed.
 */
.srco-page .srco-showcase.is-live .srco-slide {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  /*
   * No travel and no stagger. Everything is simply present, which is exactly
   * what ShareRing Link does under reduce — its beats resolve to
   * `opacity: 1; transform: none` rather than animating.
   */
  .srco-page .srco-showcase.is-live .srco-slide.is-current .srco-frame,
  .srco-page .srco-showcase.is-live .srco-slide.is-current .srco-slide-mark {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   The pause control
   ------------------------------------------------------------------------ */

/*
 * SCOPED TO [data-srco-deck], NOT TO .srco-showcase.
 *
 * It was scoped to the hero showcase, which was correct when the hero was the
 * only deck on the page. There are three now, and the other two got a button
 * with no styling at all — which does not mean an unstyled button, it means an
 * ELEMENTOR button: the Global Kit paints every one at (0,1,1), so both new
 * decks rendered a full-width solid blue slab across the middle of the panel.
 *
 * That is the same specificity trap as the page-nav chevrons, the Contact form
 * inputs and the case-study headings. The pattern is always the same: a control
 * this theme forgets to style is not neutral, it is Elementor-styled.
 *
 * Discreet, not hidden.
 *
 * The deck turns over every six seconds and WCAG 2.2.2 wants a way to stop it.
 * The page shipped without a control on the argument that hover, focus and the
 * chevron together were a mechanism — and then the chevron leg quietly stopped
 * existing when the page navigation moved into scene-flow.js. The reasoning is
 * in assets/js/company-about.js beside the code that builds this.
 *
 * It sits at low contrast in the corner of the deck and comes to full on hover
 * and focus. It is NOT revealed on hover: a control that only appears on hover
 * does not exist for a keyboard user until they have already tabbed into it,
 * which is the wrong way round.
 *
 * The specificity goes through .srco-showcase for the reason the page-nav
 * chevrons had to: Elementor's Global Kit styles every button on the site at
 * (0,1,1), and a bare .srco-deck-toggle would be (0,1,0) and lose — which is
 * exactly how the chevrons came to render as solid blue rectangles.
 */
.srco-page [data-srco-deck] .srco-deck-toggle {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--srh-hairline);
  border-radius: 999px;
  background: var(--srh-surface);
  color: var(--srh-ink-fade);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 160ms var(--srk-ease, ease), color 160ms var(--srk-ease, ease);
}

.srco-page [data-srco-deck] .srco-deck-toggle:hover {
  opacity: 1;
  color: var(--srh-pale);
}

.srco-page [data-srco-deck] .srco-deck-toggle:focus-visible {
  opacity: 1;
  color: var(--srh-pale);
  outline: 2px solid var(--srk-accent-live, var(--srh-accent));
  outline-offset: 2px;
}

/* The showcase has to be a containing block for the control to sit in it. */
.srco-page .srco-showcase {
  position: relative;
}

/* ---------------------------------------------------------------------------
   A stable stage, so slides do not jump
   ------------------------------------------------------------------------ */

/*
 * ONE HEIGHT FOR EVERY SLIDE (Rohan, 2026-08-30: "the screen that comes up is
 * jarring").
 *
 * The three slides share a grid cell, so the cell was as tall as the tallest —
 * the phone — and the browser frame sat centred in a box with hundreds of
 * pixels of nothing above and below it. Cross-fading between two frames of
 * wildly different height reads as a jump even though nothing moves, because
 * the eye tracks the outline rather than the pixels.
 *
 * Capping the frame's height makes the two occupy a similar envelope. The phone
 * keeps its ratio and simply gets narrower to fit, which is handled by
 * --srco-phone-w in company-about.css; this is the backstop that guarantees it
 * on viewports where the width term wins.
 */
.srco-page .srco-frame--phone {
  max-height: min(62vh, 620px);
}

.srco-page .srco-frame--phone .srco-frame-screen {
  max-height: min(58vh, 580px);
}