/* SPDX-License-Identifier: LicenseRef-Proprietary */
/* Copyright (C) 2026, araCreate Group */
/* Author: Vishnu <vishnu@aracreate.group> */
/* Description: This file contains the araCreate signature devices */

/* ==========================================================================
   araCreate Design System — Signature devices
   19 August 2026 · load after tokens.css and base.css
   --------------------------------------------------------------------------
   The handful of details that make a page look like araCreate rather than
   like anybody else. These are not components — they are treatments that get
   applied TO components, which is why they live beside the foundations.

   Every one of these was already on aracreate.group. This file names them,
   makes them consistent, and rebuilds them in original code:

     .ac-edge          the signature border — solid on the bottom and left,
                       dotted on the top and right. Found in 38 places on the
                       live site (as dashed; dotted chosen 19 Aug 2026).
                       Applied to every panel by default.
     .ac-dash          the 55px eyebrow rule above a heading.  122 uses.
     .ac-underline     the animated 2px underline on links.  2,259 uses.
     .ac-rule          full-width hairline.
     .ac-bleed         edge-to-edge, breaks out of the container.
     .ac-marquee       the endless horizontal scroller.
     .ac-reveal        the line that draws itself when scrolled into view.
     .ac-sticky-bar    the fixed header, 90 / 80 / 75px.
     .ac-eyebrow       the uppercase kicker above a heading.
     .ac-progress      scroll-progress bar for long pages.
     .ac-scroller      drag / swipe horizontal gallery.
     .ac-sticky-side   heading that stays while content scrolls past.
     .ac-dot           the loader dot.

   Rebuilt without jQuery. The live site's marquee, reveal and sticky
   behaviour all run through Webflow's 2.4 MB script and jQuery; these use
   CSS plus about fifteen lines of plain JavaScript.
   ========================================================================== */

:root {
  /* --- Signature edge -------------------------------------------------- */
  --ac-edge-width: 1px; /* @kind other */
  --ac-edge-color:        var(--ac-border-control);   /* #555555, as built  */
  /* DECISION 19 Aug 2026: dotted, 1px, square corners.
     The live site uses `dashed` with a 1–2px radius. Vishnu chose dotted and
     fully square after seeing all four forms rendered side by side. This is
     a deliberate, recorded departure from the current site: the main site
     will look very slightly different from the new sites until it is
     rebuilt on this system. Set --ac-edge-dash-style back to `dashed` and
     --ac-edge-radius to 2px to match the old site exactly.                 */
  --ac-edge-dash-style: dotted; /* @kind other */
  --ac-edge-solid-style: solid; /* @kind other */
  --ac-edge-radius:       0;

  /* --- Decorative marks ------------------------------------------------ */
  --ac-dash-width:        55px;     /* .dash on the live site              */
  --ac-dash-width-sm:     35px;     /* .dash.values                        */
  --ac-dash-thickness: 1px; /* @kind other */

  --ac-underline-thickness: 2px; /* @kind other */   /* .hover-underline                */
  --ac-underline-thickness-thin: 1px; /* @kind other */   /* .thin-underline                 */
  --ac-underline-thickness-bold: 3px; /* @kind other */   /* .underline-3px                  */

  /* --- Motion ---------------------------------------------------------- */
  --ac-marquee-duration: 40s; /* @kind other */
  --ac-marquee-duration-slow: 70s; /* @kind other */
  --ac-marquee-duration-fast: 22s; /* @kind other */
  --ac-marquee-gap:       8vw;      /* .marquee-text margin-right          */
  --ac-marquee-height:    40px;     /* .marquee-horizontal                 */
  --ac-reveal-duration: var(--ac-duration-slow); /* @kind other */

  /* --- Sticky bar ------------------------------------------------------ */
  --ac-bar-height:        90px;
  --ac-bar-border:        #55555580;
}


/* ==========================================================================
   1 · THE SIGNATURE EDGE
   Solid on the bottom and left, dotted on the top and right. Reads as though
   the panel has been drawn by hand and is still open on two sides.
   ========================================================================== */

.ac-edge {
  border-width: var(--ac-edge-width);
  border-color: var(--ac-edge-color);
  border-style: var(--ac-edge-dash-style)   /* top    */
                var(--ac-edge-dash-style)   /* right  */
                var(--ac-edge-solid-style)  /* bottom */
                var(--ac-edge-solid-style); /* left   */
  border-radius: var(--ac-edge-radius);
}

/* --- APPLIED BY DEFAULT ------------------------------------------------
   DECISION 19 Aug 2026: "every panel by default". Anything that reads as a
   panel or a control carries the signature without being asked. Put
   .ac-edge-none on the exception rather than .ac-edge on the rule.

   Deliberately NOT included: buttons (the yellow fill is their signature,
   a dotted edge round it reads as a mistake) and the page container itself.  */

.ac-panel,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
textarea,
select,
table,
blockquote,
figure img,
dialog,
.ac-card,
.ac-modal {
  border-width: var(--ac-edge-width);
  border-color: var(--ac-edge-color);
  border-style: var(--ac-edge-dash-style) var(--ac-edge-dash-style)
                var(--ac-edge-solid-style) var(--ac-edge-solid-style);
  border-radius: var(--ac-edge-radius);
}

/* The opt-out. */
.ac-edge-none {
  border-style: none !important;
}

/* Photographs inside a figure get the edge; a bare <img> used as a logo or
   an icon does not — a dotted box round a client logo would be wrong.       */

/* Quote blocks keep their yellow left rule AND take the signature: the
   left side is the accent, the top and right are dotted.                    */
blockquote {
  border-left-width: var(--ac-border-width-strong);
  border-left-color: var(--ac-surface-accent);
  padding-left: var(--ac-space-7);
}

/* A table's cells should not each grow a dotted box — only the table does. */
table th, table td { border-radius: 0; }

/* Focus must beat the dotted edge, or a keyboard user cannot tell which
   field they are in — a dotted border and a dotted focus ring look alike.
   The ring is solid, 2px, offset, and charcoal.                             */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-style: var(--ac-edge-solid-style);
  border-color: var(--ac-focus);
}

/* --- Which corner is "closed" -----------------------------------------
   The default closes bottom-left. Mirror it when a panel sits on the other
   side of a layout, so the open corners point outward.                    */

.ac-edge--mirror {           /* closes bottom-right */
  border-style: var(--ac-edge-dash-style) var(--ac-edge-solid-style)
                var(--ac-edge-solid-style) var(--ac-edge-dash-style);
}
.ac-edge--top {              /* closes top-left */
  border-style: var(--ac-edge-solid-style) var(--ac-edge-dash-style)
                var(--ac-edge-dash-style) var(--ac-edge-solid-style);
}
.ac-edge--top-mirror {       /* closes top-right */
  border-style: var(--ac-edge-solid-style) var(--ac-edge-solid-style)
                var(--ac-edge-dash-style) var(--ac-edge-dash-style);
}

/* --- Joining -----------------------------------------------------------
   When panels sit shoulder to shoulder, drop the shared edge so two
   1px borders do not stack into a 2px seam. The live site does this once,
   on .location-contact-card (`dashed none solid solid`).                   */

.ac-edge--join-right  { border-right-style: none; }
.ac-edge--join-left   { border-left-style: none; }
.ac-edge--join-top    { border-top-style: none; }
.ac-edge--join-bottom { border-bottom-style: none; }

/* In a row or grid of edges, join automatically. */
.ac-edge-row > .ac-edge:not(:last-child) { border-right-style: none; }

/* --- Weight and form --------------------------------------------------
   These set the border property directly rather than re-pointing the edge
   tokens. Nothing but .ac-edge itself reads width, radius or colour, so the
   indirection bought nothing and put four token names inside modifier
   selectors where the design system could not register them.

   One behaviour note: a .ac-dash INSIDE an --accent or --strong panel used to
   inherit the panel's edge colour through the token. It now keeps the page
   default; use .ac-dash--accent when you want the gold rule.
   ---------------------------------------------------------------------- */
.ac-edge--thick  { border-width: var(--ac-border-width-strong); }
.ac-edge--dotted { --ac-edge-dash-style: dotted; }   /* the side patterns read
                                                        this, so it stays a
                                                        variable             */
.ac-edge--square { border-radius: 0; }
.ac-edge--round  { border-radius: var(--ac-radius-lg); }

/* --- Emphasis --------------------------------------------------------- */
.ac-edge--strong { border-color: var(--ac-border-strong); }
.ac-edge--faint  { border-color: var(--ac-border); }
.ac-edge--accent { border-color: var(--ac-golden-sun); }

/* --- Interactive -----------------------------------------------------
   On a card that is also a link, the dashed sides resolve to solid on
   hover — the panel "closes". Cheap, and unmistakably araCreate.        */

.ac-edge--interactive {
  transition: border-color var(--ac-duration-fast) var(--ac-ease),
              border-style var(--ac-duration-fast) var(--ac-ease),
              transform var(--ac-duration) var(--ac-ease),
              box-shadow var(--ac-duration) var(--ac-ease);
}
.ac-edge--interactive:hover,
.ac-edge--interactive:focus-within {
  border-style: var(--ac-edge-solid-style);
  transform: translateY(-4px);
  box-shadow: var(--ac-shadow-lift);
}

/* On an inverse surface the edge follows the surface, not the page. */
[data-ac-surface="inverse"] .ac-edge,
.ac-surface-inverse .ac-edge { --ac-edge-color: #ffffff80; }


/* ==========================================================================
   2 · DECORATIVE MARKS
   ========================================================================== */

/* The short rule that sits above a heading. On the live site this is a 55px
   line with 9px of margin either side.                                     */
.ac-dash {
  display: block;
  width: var(--ac-dash-width);
  min-width: 15px;
  border-top: var(--ac-dash-thickness) solid var(--ac-edge-color);
  margin-bottom: var(--ac-space-3);
}
.ac-dash--sm     { width: var(--ac-dash-width-sm); }
.ac-dash--accent { border-top-color: var(--ac-golden-sun); }
.ac-dash--inline { display: inline-block; vertical-align: middle;
                   margin: 0 var(--ac-space-2) 0 0; }

/* The uppercase kicker above a heading. Your h6 style is effectively this
   already: 16px, weight 500, .08em tracking, uppercase.

   IMPORTANT — this was added after the yellow eyebrow on this system's own
   preview page failed contrast at 1.55:1. The eyebrow is charcoal on light
   surfaces and only becomes yellow on a dark one, where yellow measures
   8.11:1. Encoding it as a component is the only reliable fix: a rule that
   lives in prose gets broken by whoever writes the next page — including me. */

.ac-eyebrow {
  display: block;
  color: var(--ac-text-heading);
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-weight-medium);
  letter-spacing: var(--ac-tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--ac-space-6);
}

[data-ac-surface="inverse"] .ac-eyebrow,
.ac-surface-inverse .ac-eyebrow { color: var(--ac-golden-sun); }   /* 8.11:1 */

/* Full-width hairline. */
.ac-rule {
  border: 0;
  border-top: var(--ac-border-width) solid var(--ac-border);
  width: 100%;
  margin: var(--ac-space-10) 0;
}
.ac-rule--strong { border-top-color: var(--ac-border-strong); }
.ac-rule--dashed { border-top-style: var(--ac-edge-dash-style); }

/* Vertical rule, for the branding bar. */
.ac-rule-v {
  border: 0;
  border-left: var(--ac-border-width) solid var(--ac-border);
  align-self: stretch;
  margin: 0 var(--ac-space-6);
}


/* ==========================================================================
   3 · THE ANIMATED UNDERLINE
   The single most-used device on araCreate — 2,259 elements carry some form
   of it. Built with a pseudo-element scaling from the left, so it wipes in
   rather than fading. Transform-only, so it does not force layout.
   ========================================================================== */

.ac-underline {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.ac-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: var(--ac-underline-thickness);
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ac-duration) var(--ac-ease);
}

.ac-underline:hover::after,
.ac-underline:focus-visible::after { transform: scaleX(1); }

/* Starts visible and wipes OUT on hover — used on links that are already
   clearly links, so the hover is a lift rather than an arrival. */
.ac-underline--persistent::after { transform: scaleX(1); }
.ac-underline--persistent:hover::after { transform-origin: right center;
                                          transform: scaleX(0); }

.ac-underline--thin::after { height: var(--ac-underline-thickness-thin); }
.ac-underline--bold::after { height: var(--ac-underline-thickness-bold); }
.ac-underline--accent::after { background-color: var(--ac-golden-sun); }

/* Headings use the same device as a static rule under a word. */
.ac-underline-static {
  display: inline;
  border-bottom: var(--ac-underline-thickness-bold) solid var(--ac-golden-sun);
  padding-bottom: .06em;
}


/* ==========================================================================
   4 · EDGE TO EDGE
   Breaks an element out of its container to the full width of the window,
   without needing a different page structure. Uses margin rather than
   position, so the element still occupies its place in the flow.

   100vw would include the scrollbar and cause sideways scrolling, so the
   real viewport width is measured once into --ac-vw by signature.js.
   ========================================================================== */

.ac-bleed {
  width: var(--ac-vw, 100vw);
  margin-left: calc(50% - var(--ac-vw, 100vw) / 2);
  margin-right: calc(50% - var(--ac-vw, 100vw) / 2);
  max-width: none;
}

/* Full-width background, but the text inside stays on the container grid. */
.ac-bleed > .ac-bleed-inner {
  max-width: var(--ac-container-wide);
  margin: 0 auto;
  padding: 0 var(--ac-space-8);
}

/* A band: edge-to-edge colour with vertical breathing room. */
.ac-band {
  padding-top: var(--ac-space-13);
  padding-bottom: var(--ac-space-13);
}
.ac-band--tight { padding-top: var(--ac-space-10);
                  padding-bottom: var(--ac-space-10); }
.ac-band--tall  { padding-top: var(--ac-space-16);
                  padding-bottom: var(--ac-space-16); }
.ac-band--accent  { background-color: var(--ac-surface-accent);
                    color: var(--ac-text-on-accent); }
.ac-band--raised  { background-color: var(--ac-surface-raised); }

/* Edge-to-edge on phones only — a common need, because a card that looks
   right inset on desktop usually wants the full width on a small screen. */
@media (max-width: 767px) {
  .ac-bleed\@sm {
    width: var(--ac-vw, 100vw);
    margin-left: calc(50% - var(--ac-vw, 100vw) / 2);
    margin-right: calc(50% - var(--ac-vw, 100vw) / 2);
    max-width: none;
  }
}


/* ==========================================================================
   5 · THE MARQUEE
   Endless horizontal scroll. The live site runs this through Webflow's
   script; this is CSS only. The content is duplicated once in the markup
   and the track translates by exactly -50%, so the loop is seamless with
   no JavaScript timing.
   ========================================================================== */

.ac-marquee {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--ac-marquee-height);
  overflow: hidden;
  /* Fade the two ends so items appear and vanish rather than being clipped.
     The colour here is not a colour: mask-mode is alpha, so only the alpha
     channel is read. Graphite for consistency with the palette — it renders
     identically to the #000 this replaced. */
  mask-image: linear-gradient(to right, transparent, #555555 8%,
                              #555555 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #555555 8%,
                                      #555555 92%, transparent);
}

.ac-marquee-track {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--ac-marquee-gap);
  padding-right: var(--ac-marquee-gap);
  animation: ac-marquee-scroll var(--ac-marquee-duration) linear infinite;
  will-change: transform;
}

.ac-marquee-item {
  flex: none;
  text-transform: uppercase;
  letter-spacing: var(--ac-tracking-label);
  color: var(--ac-text-primary);
  white-space: nowrap;
}

@keyframes ac-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Pause on hover, so a visitor can actually read an item they spotted. */
.ac-marquee:hover .ac-marquee-track,
.ac-marquee:focus-within .ac-marquee-track { animation-play-state: paused; }

.ac-marquee--reverse .ac-marquee-track { animation-direction: reverse; }
.ac-marquee--slow .ac-marquee-track { animation-duration: var(--ac-marquee-duration-slow); }
.ac-marquee--fast .ac-marquee-track { animation-duration: var(--ac-marquee-duration-fast); }
.ac-marquee--bordered { border-top: var(--ac-border-width) solid var(--ac-border);
                        border-bottom: var(--ac-border-width) solid var(--ac-border); }

/* Motion sickness is not a rounding error. If the visitor has asked their
   operating system for less motion, the marquee becomes a static row.     */
@media (prefers-reduced-motion: reduce) {
  .ac-marquee-track { animation: none; }
  .ac-marquee { overflow-x: auto; }
  /* Duplicated content would read twice to a screen reader anyway; the
     second copy carries aria-hidden in the markup. */
}


/* ==========================================================================
   6 · SCROLL REVEAL
   The line that draws itself, and content that rises into place. Driven by
   a single class that signature.js adds when the element enters the
   viewport — no scroll listener, no jQuery, one IntersectionObserver.
   ========================================================================== */

.ac-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--ac-reveal-duration) var(--ac-ease),
              transform var(--ac-reveal-duration) var(--ac-ease);
}
.ac-reveal.is-in { opacity: 1; transform: none; }

/* The growing rule — the live site's .arrow-line, which scales from its
   left edge. */
.ac-reveal-line {
  border-top: var(--ac-border-width) solid var(--ac-border-strong);
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ac-duration-slow) var(--ac-ease);
}
.ac-reveal-line.is-in { transform: scaleX(1); }
.ac-reveal-line--accent { border-top-color: var(--ac-golden-sun); }
.ac-reveal-line--thick  { border-top-width: 2px; }

/* Stagger children of a revealed group. */
.ac-reveal-group > * { opacity: 0; transform: translateY(20px);
  transition: opacity var(--ac-reveal-duration) var(--ac-ease),
              transform var(--ac-reveal-duration) var(--ac-ease); }
.ac-reveal-group.is-in > * { opacity: 1; transform: none; }
.ac-reveal-group.is-in > :nth-child(2) { transition-delay: 80ms; }
.ac-reveal-group.is-in > :nth-child(3) { transition-delay: 160ms; }
.ac-reveal-group.is-in > :nth-child(4) { transition-delay: 240ms; }
.ac-reveal-group.is-in > :nth-child(5) { transition-delay: 320ms; }
.ac-reveal-group.is-in > :nth-child(6) { transition-delay: 400ms; }

/* Never hide content from someone who cannot receive the animation — if
   JavaScript fails or motion is reduced, everything is simply visible.    */
@media (prefers-reduced-motion: reduce) {
  .ac-reveal, .ac-reveal-group > * { opacity: 1; transform: none;
                                     transition: none; }
  .ac-reveal-line { transform: none; transition: none; }
}
.no-js .ac-reveal, .no-js .ac-reveal-group > * { opacity: 1; transform: none; }
.no-js .ac-reveal-line { transform: none; }


/* ==========================================================================
   7 · STICKY BAR
   The header that stays. Heights match the live site: 90px, 80px at 1280,
   75px at 1440.
   ========================================================================== */

.ac-sticky-bar {
  position: sticky;
  top: 0;
  z-index: var(--ac-z-header);
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--ac-bar-height);
  background-color: var(--ac-surface-page);
  border-bottom: var(--ac-border-width) solid var(--ac-bar-border);
  transition: height var(--ac-duration) var(--ac-ease),
              background-color var(--ac-duration) var(--ac-ease),
              box-shadow var(--ac-duration) var(--ac-ease);
}

/* signature.js adds .is-stuck once the page has scrolled past the top. */
.ac-sticky-bar.is-stuck {
  height: calc(var(--ac-bar-height) - 15px);
  box-shadow: var(--ac-shadow-lift);
}

.ac-sticky-bar--inverse { background-color: var(--ac-surface-dark);
                          color: var(--ac-text-inverse); }

@media (min-width: 1280px) { :root { --ac-bar-height: 80px; } }
@media (min-width: 1440px) { :root { --ac-bar-height: 75px; } }

/* Anything with an id that a sticky bar might scroll to needs clearance. */
:target { scroll-margin-top: calc(var(--ac-bar-height) + var(--ac-space-7)); }


/* ==========================================================================
   8 · SCROLL PROGRESS BAR
   A thin yellow line across the very top showing how far through a long page
   the reader is. Earns its place on Academy course pages and long articles;
   pointless on a short page, so it is opt-in per page.

   signature.js sets --ac-progress from 0 to 1. Transform-only, so it never
   causes layout work while scrolling.
   ========================================================================== */

.ac-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: var(--ac-z-toast);
  pointer-events: none;
  background-color: transparent;
}

.ac-progress::after {
  content: "";
  display: block;
  height: 100%;
  background-color: var(--ac-golden-sun);
  transform: scaleX(var(--ac-progress, 0));
  transform-origin: left center;
  /* No transition: it must track the scrollbar exactly, not lag behind it. */
}

.ac-progress--thick { height: 5px; }
.ac-progress--strong::after { background-color: var(--ac-border-strong); }

/* Under a sticky bar rather than over it, when both are present. */
.ac-progress--under-bar { top: var(--ac-bar-height); }


/* ==========================================================================
   9 · HORIZONTAL SCROLL GALLERY
   A row of panels the visitor drags, swipes or arrow-keys through. Unlike the
   marquee, this one is driven by the person and it stops. Native scrolling
   with snap points — no carousel library, and it works on touch for free.
   ========================================================================== */

.ac-scroller {
  display: flex;
  gap: var(--ac-space-7);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--ac-space-8);
  padding-bottom: var(--ac-space-6);   /* room for the scrollbar */
  /* Momentum scrolling on iOS. */
  -webkit-overflow-scrolling: touch;
}

.ac-scroller > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: min(78vw, 340px);
}

.ac-scroller--wide  > * { width: min(88vw, 520px); }
.ac-scroller--narrow > * { width: min(62vw, 240px); }

/* A visible, brand-coloured scrollbar rather than the browser's default,
   because the scrollbar IS the affordance telling people to drag.          */
.ac-scroller {
  scrollbar-width: thin;
  scrollbar-color: var(--ac-golden-sun) var(--ac-border);
}
.ac-scroller::-webkit-scrollbar { height: 4px; }
.ac-scroller::-webkit-scrollbar-track {
  background-color: var(--ac-border);
}
.ac-scroller::-webkit-scrollbar-thumb {
  background-color: var(--ac-golden-sun);
}

/* Edge-to-edge variant: the row runs off both sides of the window, which is
   the whole point of a gallery — it should look like there is more. The
   first item still lines up with the page's text.                          */
.ac-scroller--bleed {
  width: var(--ac-vw, 100vw);
  margin-left: calc(50% - var(--ac-vw, 100vw) / 2);
  padding-left: max(var(--ac-space-8), calc(50vw - var(--ac-container-wide) / 2 + var(--ac-space-8)));
  padding-right: var(--ac-space-8);
  scroll-padding-left: max(var(--ac-space-8), calc(50vw - var(--ac-container-wide) / 2 + var(--ac-space-8)));
}

/* Keyboard users need a focusable container to arrow through it. Give the
   element tabindex="0" and role="region" with an aria-label in the markup;
   this makes the focus visible when they do.                              */
.ac-scroller:focus-visible {
  outline: var(--ac-focus-width) solid var(--ac-focus);
  outline-offset: var(--ac-focus-offset);
}


/* ==========================================================================
   10 · MARGIN RULE
   The fixed right-edge line. Every live page carries a 1px vertical hairline
   down the right margin (.right-line) with a short tick at each section
   boundary (.right-section-seperator). One element, fixed, never
   interactive. Hidden under 991px where there is no margin to draw in.
   ========================================================================== */

.ac-margin-rule {
  position: fixed;
  top: 0;
  right: var(--ac-space-10);
  bottom: 0;
  width: 0;
  border-left: var(--ac-border-width) solid var(--ac-border);
  pointer-events: none;
  z-index: 1;
}
.ac-margin-rule__tick {
  position: absolute;
  right: 0;
  width: var(--ac-space-4);
  border-top: var(--ac-border-width) solid var(--ac-border-strong);
}
@media (max-width: 991px) { .ac-margin-rule { display: none; } }


/* ==========================================================================
   11 · STICKY SIDE TEXT
   A heading that stays put while the content beside it scrolls past. The
   live site does this with .our-people-sticky-text and
   .project-item-sticky.
   ========================================================================== */

.ac-sticky-side {
  position: sticky;
  top: calc(var(--ac-bar-height) + var(--ac-space-10));
  align-self: start;   /* required, or a grid item stretches and cannot stick */
}

/* Sticking is pointless on a narrow screen — there is no column beside it
   for the content to scroll past, so it just covers things. */
@media (max-width: 991px) {
  .ac-sticky-side { position: static; }
}

/* The layout it belongs in: a narrow sticky column and a tall scrolling one. */
.ac-split {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: var(--ac-space-11);
  align-items: start;
}
.ac-split--even { grid-template-columns: 1fr 1fr; }

@media (max-width: 991px) {
  .ac-split { grid-template-columns: 1fr; gap: var(--ac-space-9); }
}


/* ==========================================================================
   11 · THE LOADER DOT
   ========================================================================== */

.ac-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--ac-radius-pill);
  background-color: var(--ac-golden-sun);
  animation: ac-pulse 1.2s var(--ac-ease) infinite;
}
.ac-dot:nth-of-type(2) { animation-delay: .15s; }
.ac-dot:nth-of-type(3) { animation-delay: .3s; }

@keyframes ac-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;  }
  50%      { transform: scale(.55); opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-dot { animation: none; }
}