/* The Dcycle Loop: the "How we work" section shared by the home page and the About page.
   Section markup lives in each page; behaviour in loop.js. Moved out of index.html so both
   pages stay identical. The four helpers below are the home-page utilities the section
   relies on, scoped to the section so they do not touch other pages. */
.dloop .eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.dloop .h2{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-0.045em;line-height:1.04;font-size:clamp(2rem,4.2vw,3.55rem)}
.dloop .serif-i{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}
.dloop .rv-d1{transition-delay:.08s}

.dloop{
      background: #070707;
      color: #fff;
      position: relative;
      --g: #EFC63F;
      --acc: #5FD4C8;
      --band: 30vh;
      --col: min(552px, 54svh);
      transition: --acc .5s cubic-bezier(.5, 0, .2, 1)
    }
/* The section used to pin to the screen and turn the mark as the page
   scrolled past it. It no longer does: it is an ordinary block that you open
   by clicking, so nothing takes the scroll away from the reader. */
    .dloop{
      overflow: hidden;
      padding: 88px 0 96px
    }
@media(min-width:900px){
      .dloop {
        padding: 118px 0 128px
      }
    }
.dl-inner{
      position: relative;
      z-index: 2
    }
.dl-aurora{
      position: absolute;
      inset: -30% -10%;
      z-index: 0;
      pointer-events: none;
      opacity: .6;
      background:
        radial-gradient(38% 44% at 24% 36%, color-mix(in srgb, var(--acc) 20%, transparent), transparent 62%),
        radial-gradient(34% 40% at 76% 64%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 66%),
        radial-gradient(30% 34% at 60% 10%, rgba(255, 255, 255, .05), transparent 60%);
      filter: blur(16px);
      transition: background .6s ease;
      animation: dlaur 30s ease-in-out infinite alternate
    }
.dl-eyebrow{
      color: rgba(255, 255, 255, .42);
      margin-bottom: 20px
    }
.dl-head{
      display: flex;
      flex-wrap: wrap;
      align-items: end;
      justify-content: space-between;
      gap: 26px;
      margin-bottom: 40px
    }
/* on two columns the head becomes the same grid, so the lede lines up with the
   panel below it instead of floating off to the right edge */
    @media(min-width:1020px){
      .dl-head {
        display: grid;
        grid-template-columns: var(--col) minmax(0, 1fr);
        gap: 48px;
        align-items: end
      }
    }
@media(min-width:1200px){
      .dl-head {
        gap: 56px
      }
    }
@media(min-width:1020px){
      .dl-head {
        margin-bottom: 22px
      }
    }
.dl-lede{
      font-size: 15px;
      line-height: 1.75;
      color: rgba(255, 255, 255, .52);
      max-width: 46ch
    }
.dl-body{
      display: grid;
      gap: 16px;
      align-items: start
    }
@media(min-width:1020px){
      .dl-body {
        grid-template-columns: var(--col) minmax(0, 1fr);
        gap: 48px
      }
    }
@media(min-width:1200px){
      .dl-body {
        gap: 56px
      }
    }
/* ── the mark ── */
    .dl-mark{
      position: relative;
      width: 100%;
      max-width: 420px;
      margin: 0 auto;
      aspect-ratio: 1
    }
@media(min-width:1020px){
      .dl-mark {
        max-width: var(--col);
        margin: 0
      }
    }
.dl-mark>svg{
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible
    }
.dl-glow{
      transition: opacity .8s ease
    }
.dl-hair{
      fill: none;
      stroke: rgba(255, 255, 255, .10);
      stroke-width: 1
    }
.dl-dash{
      fill: none;
      stroke: rgba(255, 255, 255, .13);
      stroke-width: 1;
      stroke-dasharray: 2 11;
      transform-origin: 300px 300px;
      animation: dlspinr 110s linear infinite
    }
/* ── the arrows arrive ──────────────────────────────────────────────
   The mark starts empty and each stage brings its own arrow in. Every
   arrow appears in its own place — the first at twelve o'clock, the second
   at two, and so on clockwise round the wheel — and from there goes one
   full clockwise turn, top, right, bottom, left, and settles back exactly
   where it started. Arrows that have arrived stay, so reaching the seventh
   leaves the finished mark on screen.

   One turn is a rotate from -360deg to 0 about the wheel's centre. In SVG
   coordinates an increasing angle is clockwise, and 0deg is where the path
   already draws the arrow, so nothing is positioned twice. */
    .dl-arm{
      transform-origin: 300px 300px;
      transform-box: view-box;
      opacity: 0;
      pointer-events: none;
      --from: -360deg;
      --dur: 1.2s
    }
.dl-arm.in{
      opacity: 1;
      pointer-events: auto
    }
.dl-arm.arrive{
      animation: dlarrive var(--dur) cubic-bezier(.36, .02, .22, 1) both
    }
.dl-face{
      fill: rgba(255, 255, 255, .085);
      transition: fill .45s ease, fill-opacity .45s ease
    }
.dl-edge{
      fill: none;
      stroke: rgba(255, 255, 255, .24);
      stroke-width: 1;
      transition: stroke .45s ease, stroke-opacity .45s ease, stroke-width .45s ease
    }
/* an arrow that is placed but not the open stage */
    .dl-arm.done .dl-face{
      fill: var(--acc);
      fill-opacity: .26
    }
.dl-arm.done .dl-edge{
      stroke: var(--acc);
      stroke-opacity: .42
    }
.dl-arm.on .dl-face{
      fill: var(--acc);
      fill-opacity: 1
    }
.dl-arm.on .dl-edge{
      stroke: #fff;
      stroke-opacity: .55;
      stroke-width: 1.15
    }
.dl-arm.on{
      filter: drop-shadow(0 0 26px color-mix(in srgb, var(--acc) 55%, transparent))
    }
/* the leading arm redraws its own outline on arrival */
    .dl-arm.on .dl-edge.draw{
      animation: dldraw .8s cubic-bezier(.6, 0, .2, 1) both
    }
/* ── centre readout ── */
    .dl-core{
      position: absolute;
      inset: 0;
      display: grid;
      place-content: center;
      text-align: center;
      pointer-events: none;
      padding: 0 12%
    }
.dl-core-n{
      display: block;
      font-family: 'Archivo', sans-serif;
      font-weight: 800;
      letter-spacing: -.055em;
      font-size: clamp(3.2rem, 8.6vw, 4.8rem);
      line-height: .92;
      background: linear-gradient(150deg, #ffffff, var(--acc) 46%, var(--acc));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      filter: drop-shadow(0 6px 26px color-mix(in srgb, var(--acc) 38%, transparent))
    }
.dl-core-l{
      display: block;
      margin-top: 10px;
      font-family: 'Archivo', sans-serif;
      font-weight: 700;
      font-size: clamp(11px, 2.6vw, 13.5px);
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .74);
      white-space: nowrap
    }
/* ── panel: the seven, as an accordion ──────────────────────────────
   One row per stage, numbered, the open one showing its line and its
   description. Opening a row is what sends that stage's arrow round. */
    .dl-panel{
      max-width: 560px
    }
.dl-acc{
      list-style: none;
      margin: 0;
      padding: 0;
      border-top: 1px solid rgba(255, 255, 255, .13)
    }
.dl-row{
      border-bottom: 1px solid rgba(255, 255, 255, .13)
    }
.dl-btn{
      width: 100%;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 17px 2px;
      background: none;
      border: 0;
      cursor: pointer;
      text-align: left;
      color: inherit;
      font-family: 'Archivo', sans-serif
    }
@media(min-width:1020px){
      .dl-btn {
        padding: 19px 2px;
        gap: 20px
      }
    }
.dl-no{
      flex: 0 0 auto;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11.5px;
      letter-spacing: .12em;
      color: rgba(255, 255, 255, .34);
      transition: color .4s ease
    }
.dl-nm{
      flex: 1;
      font-weight: 800;
      letter-spacing: -.035em;
      line-height: 1.1;
      font-size: clamp(1.25rem, 2.6vw, 1.72rem);
      color: rgba(255, 255, 255, .62);
      transition: color .4s ease
    }
.dl-chev{
      flex: 0 0 auto;
      width: 15px;
      height: 15px;
      fill: none;
      stroke: rgba(255, 255, 255, .38);
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform .45s cubic-bezier(.2, .8, .2, 1), stroke .4s ease
    }
.dl-btn:hover .dl-nm{
      color: #fff
    }
.dl-btn:hover .dl-chev{
      stroke: #fff
    }
.dl-row.open .dl-no{
      color: var(--acc)
    }
.dl-row.open .dl-nm{
      color: #fff
    }
.dl-row.open .dl-chev{
      transform: rotate(180deg);
      stroke: var(--acc)
    }
/* height animates between 0 and the panel's own measured height, set by the
   script — "auto" cannot be transitioned, and a fixed max-height either clips
   a long stage or makes a short one drift open */
    .dl-fold{
      overflow: hidden;
      height: 0;
      transition: height .45s cubic-bezier(.3, .8, .25, 1), opacity .35s ease;
      opacity: 0
    }
.dl-row.open .dl-fold{
      opacity: 1
    }
.dl-fold-in{
      padding: 0 0 22px
    }
@media(min-width:1020px){
      .dl-fold-in {
        padding-bottom: 26px
      }
    }
.dl-sub{
      font-family: 'Instrument Serif', Georgia, serif;
      font-style: italic;
      font-size: 19px;
      line-height: 1.35;
      color: rgba(255, 255, 255, .55);
      margin: 0 0 13px
    }
.dl-p{
      font-size: 15px;
      line-height: 1.78;
      color: rgba(255, 255, 255, .64);
      max-width: 50ch;
      margin: 0
    }
.dl-out{
      margin: 18px 0 0;
      padding-top: 15px;
      border-top: 1px solid rgba(255, 255, 255, .11);
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: baseline;
      max-width: 50ch
    }
.dl-out b{
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .36);
      font-weight: 400
    }
.dl-out span{
      font-size: 14px;
      line-height: 1.6;
      color: rgba(255, 255, 255, .82);
      flex: 1;
      min-width: 210px
    }
.dl-foot{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 18px;
      margin-top: 30px
    }
.dl-cta{
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-family: 'Archivo', sans-serif;
      font-weight: 700;
      font-size: 13.5px;
      color: #0A0A0A;
      border-radius: 100px;
      padding: 13px 24px;
      background: linear-gradient(135deg, #F8DC6B, #EFC63F 52%, #DCA92A);
      box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 14px 34px -14px rgba(239, 198, 63, .7);
      transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s
    }
.dl-cta svg{
      width: 15px;
      height: 15px;
      transition: transform .3s cubic-bezier(.2, .8, .2, 1)
    }
.dl-cta:hover{
      transform: translateY(-2px);
      box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 20px 44px -14px rgba(239, 198, 63, .85)
    }
.dl-cta:hover svg{
      transform: translateX(4px)
    }
/* Asked for less motion: the arrows still appear as their stage opens, and
   the mark still assembles — they simply stop flying round to get there, and
   the fold opens without sliding. Nothing becomes unreadable or unreachable. */
    @media(prefers-reduced-motion:reduce){

      .dl-aurora,
      .dl-dash {
        animation: none
      }

      .dl-arm,
      .dl-face,
      .dl-edge,
      .dl-chev {
        transition: none
      }

      .dl-arm.arrive {
        animation: dlfade .3s ease both
      }

      @keyframes dlfade {
        from {
          opacity: 0
        }

        to {
          opacity: 1
        }
      }

      .dl-arm.on .dl-edge.draw {
        animation: none
      }

      .dl-fold {
        transition: none
      }
    }