/* ============================================================================
   VOYCE — design layer (dx)
   ----------------------------------------------------------------------------
   The composition language from the owner's reference boards: numbered section
   markers, a breadcrumb, monumental headings, image-led cards carrying a number
   and a tag row, circle-arrow actions, right-hand meta columns, hairline
   registration, numbered process rows and full-bleed media interruptions.

   Typography stays locked: Inter only, lowercase headings, black and white, the
   academy gradient as a hairline accent and nothing more. The references set
   headlines in sentence case; the live site and both books set them lowercase,
   and lowercase is the brand rule, so lowercase wins.

   Prefix dx- throughout. Nothing here styles a bare element.
   ========================================================================== */

:root{
  /* The yellow-orange -> red -> purple -> blue gradient is the Academy identity and
     lives in voyce-academy-x.css as --vac-g. It is deliberately NOT defined here:
     this layer is shared by Studios, Films, Symphony, Lab, go360, Access and Home,
     which use monochrome rules only. */
  --dx-ink:#ffffff;
  --dx-body:#d2d2cd;
  --dx-mute:#8f8f88;
  --dx-dim:#6a6a64;
  --dx-hair:rgba(255,255,255,.13);
  --dx-hair-soft:rgba(255,255,255,.07);
  --dx-fill:rgba(255,255,255,.028);
  --dx-fill-hi:rgba(255,255,255,.055);
  --dx-ground:#070707;
  --dx-pad:clamp(20px,5vw,80px);
  --dx-col:1240px;
}

/* ── shell ────────────────────────────────────────────────────────────────── */
.dx{position:relative;background:var(--dx-ground);color:var(--dx-body);
    font-family:Inter,system-ui,-apple-system,sans-serif;
    -webkit-font-smoothing:antialiased;z-index:1}
.dx *{box-sizing:border-box}
.dx-in{max-width:calc(var(--dx-col) + 2*var(--dx-pad));margin:0 auto;padding-left:var(--dx-pad);padding-right:var(--dx-pad)}
.dx-sec{padding:clamp(54px,7vw,104px) 0;border-top:1px solid var(--dx-hair-soft);position:relative}
.dx-sec:first-child{border-top:0}

/* ── section marker: 01 —— LABEL ──────────────────────────────────────────── */
.dx-mark{display:flex;align-items:center;gap:14px;margin:0 0 26px;
  font:500 10.5px/1 Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--dx-mute)}
.dx-mark i{font-style:normal;color:var(--dx-dim);font-variant-numeric:tabular-nums}
.dx-mark s{text-decoration:none;width:34px;height:1px;background:var(--dx-hair);display:block;flex:none}
.dx-mark.is-accent s{background:var(--dx-ink);height:2px;border-radius:2px}

/* ── headings ─────────────────────────────────────────────────────────────── */
.dx-head{margin:0 0 14px;color:var(--dx-ink);text-wrap:balance;text-transform:lowercase;
  font:600 clamp(32px,4.6vw,64px)/1.02 Inter,sans-serif;letter-spacing:-.036em}
.dx-head.xl{font-size:clamp(38px,6.2vw,88px);line-height:.98;letter-spacing:-.042em}
.dx-head em{font-style:normal;color:var(--dx-ink)}
.dx-lede{margin:0;color:var(--dx-body);font:400 clamp(14.5px,1.25vw,16.5px)/1.62 Inter,sans-serif;max-width:46ch}
.dx-lede.wide{max-width:62ch}
.dx-note{margin:0;color:var(--dx-mute);font:400 13.5px/1.6 Inter,sans-serif;max-width:52ch}

/* header row: heading left, supporting note right ───────────────────────── */
.dx-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(20px,4vw,64px);align-items:end;margin:0 0 clamp(28px,3.6vw,48px)}
.dx-row .dx-note{justify-self:end;text-align:left;max-width:38ch}

/* ── meta column (SKILLS / DISCIPLINE / …) ────────────────────────────────── */
.dx-meta{list-style:none;margin:0;padding:0;display:grid;gap:7px;
  font:500 10.5px/1.5 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--dx-mute)}
.dx-meta li{white-space:nowrap}
.dx-meta li.hi{color:var(--dx-ink)}

/* ── circle arrow action ──────────────────────────────────────────────────── */
.dx-act{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--dx-ink);
  font:500 11px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  background:none;border:0;padding:0;cursor:pointer}
.dx-act .ring{width:46px;height:46px;border-radius:50%;border:1px solid var(--dx-hair);
  display:grid;place-items:center;flex:none;position:relative;overflow:hidden;
  transition:border-color .35s ease,background .35s ease}
.dx-act .ring::after{content:"";position:absolute;inset:0;border-radius:50%;background:#fff;
  transform:scale(0);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.dx-act .ring svg{width:15px;height:15px;position:relative;z-index:1;
  transition:transform .4s cubic-bezier(.16,1,.3,1),stroke .35s ease}
.dx-act:hover .ring,.dx-act:focus-visible .ring{border-color:#fff}
.dx-act:hover .ring::after,.dx-act:focus-visible .ring::after{transform:scale(1)}
.dx-act:hover .ring svg,.dx-act:focus-visible .ring svg{stroke:#000;transform:translateX(2px)}
.dx-act.sm .ring{width:38px;height:38px}
.dx-act.sm{font-size:10px}

/* ── card grid ────────────────────────────────────────────────────────────── */
.dx-cards{display:grid;gap:1px;background:var(--dx-hair-soft);border:1px solid var(--dx-hair-soft)}
.dx-cards.c4{grid-template-columns:repeat(4,1fr)}
.dx-cards.c3{grid-template-columns:repeat(3,1fr)}
.dx-cards.c2{grid-template-columns:repeat(2,1fr)}

.dx-card{position:relative;display:flex;flex-direction:column;min-height:392px;
  background:var(--dx-ground);text-decoration:none;color:inherit;overflow:hidden;isolation:isolate}
.dx-card .pad{padding:clamp(18px,1.8vw,26px);position:relative;z-index:2}
.dx-card .no{font:500 10.5px/1 Inter,sans-serif;letter-spacing:.22em;color:var(--dx-dim);
  display:block;margin:0 0 14px;font-variant-numeric:tabular-nums}
.dx-card h3{margin:0 0 8px;color:var(--dx-ink);text-transform:lowercase;
  font:600 clamp(19px,1.9vw,25px)/1.08 Inter,sans-serif;letter-spacing:-.028em}
.dx-card p{margin:0;color:var(--dx-mute);font:400 13.5px/1.55 Inter,sans-serif;max-width:30ch}
.dx-card .shot{position:absolute;inset:0;z-index:0;overflow:hidden}
.dx-card .shot img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.08) brightness(.52);
  transform:scale(1.03);transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s ease,opacity .6s ease;opacity:.68}
.dx-card .shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#070707 0%,#070707 26%,rgba(7,7,7,.93) 40%,rgba(7,7,7,.66) 62%,rgba(7,7,7,.48) 82%,rgba(7,7,7,.56) 100%)}
.dx-card:hover .shot img,.dx-card:focus-within .shot img{transform:scale(1.08);opacity:.86;filter:grayscale(1) contrast(1.12) brightness(.66)}
.dx-card::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--dx-ink);
  opacity:0;transform:scaleX(0);transform-origin:0 50%;z-index:3;
  transition:opacity .4s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.dx-card:hover::before,.dx-card:focus-within::before{opacity:1;transform:scaleX(1)}
.dx-card .foot{margin-top:auto;position:relative;z-index:2;
  padding:clamp(16px,1.6vw,22px) clamp(18px,1.8vw,26px);display:flex;align-items:center;justify-content:space-between;gap:14px}
.dx-card a.stretch::after{content:"";position:absolute;inset:0;z-index:4}

/* tag row at the card foot */
.dx-tags{display:flex;flex-wrap:wrap;border-top:1px solid var(--dx-hair-soft);position:relative;z-index:2;background:var(--dx-ground);margin-top:auto}
.dx-tags span{flex:1 1 auto;text-align:center;padding:11px 8px;white-space:nowrap;
  font:500 9.5px/1 Inter,sans-serif;letter-spacing:.17em;text-transform:uppercase;color:var(--dx-dim);
  border-left:1px solid var(--dx-hair-soft)}
.dx-tags span:first-child{border-left:0}

/* ── numbered process row ─────────────────────────────────────────────────── */
.dx-flow{display:grid;gap:1px;background:var(--dx-hair-soft);border-top:1px solid var(--dx-hair-soft);
  border-bottom:1px solid var(--dx-hair-soft);grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.dx-flow.n6{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.dx-flow.n6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.dx-flow.n6{grid-template-columns:1fr}}
.dx-step{background:var(--dx-ground);padding:clamp(20px,2.2vw,30px) clamp(18px,1.8vw,26px);display:flex;gap:16px;align-items:flex-start}
.dx-step .pip{width:34px;height:34px;border-radius:50%;border:1px solid var(--dx-hair);flex:none;
  display:grid;place-items:center;font:500 10.5px Inter,sans-serif;letter-spacing:.08em;color:var(--dx-mute);
  font-variant-numeric:tabular-nums}
.dx-step h4{margin:0 0 6px;color:var(--dx-ink);text-transform:lowercase;
  font:600 15.5px/1.2 Inter,sans-serif;letter-spacing:-.02em}
.dx-step p{margin:0;color:var(--dx-mute);font:400 12.8px/1.5 Inter,sans-serif}

/* ── spec rows (rate / room / fact tables) ────────────────────────────────── */
.dx-spec{display:grid;gap:1px;background:var(--dx-hair-soft);border:1px solid var(--dx-hair-soft)}
.dx-spec.c3{grid-template-columns:repeat(3,1fr)}
.dx-specitem{background:var(--dx-ground);padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;gap:6px}
.dx-specitem .k{font:500 10px/1 Inter,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--dx-dim)}
.dx-specitem .v{color:var(--dx-ink);font:600 clamp(21px,2.3vw,30px)/1.05 Inter,sans-serif;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;text-transform:lowercase}
.dx-specitem .d{color:var(--dx-mute);font:400 12.8px/1.5 Inter,sans-serif;margin-top:2px}

/* ── full-bleed media interruption ────────────────────────────────────────── */
.dx-bleed{position:relative;width:100%;overflow:hidden;border-top:1px solid var(--dx-hair-soft);border-bottom:1px solid var(--dx-hair-soft)}
.dx-bleed img{width:100%;height:clamp(260px,42vw,560px);object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.05) brightness(.66)}
.dx-bleed .cap{position:absolute;left:var(--dx-pad);bottom:22px;z-index:2;
  font:500 10.5px/1 Inter,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--dx-mute)}
.dx-bleed::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,7,7,.55) 0%,rgba(7,7,7,.1) 40%,rgba(7,7,7,.75) 100%)}




/* ── reveal motion ────────────────────────────────────────────────────────── */
.dx-r{opacity:0;transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.dx-r.in{opacity:1;transform:none}
.dx-cards .dx-card{opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.dx-cards.in .dx-card{opacity:1;transform:none}
.dx-cards.in .dx-card:nth-child(2){transition-delay:.07s}
.dx-cards.in .dx-card:nth-child(3){transition-delay:.14s}
.dx-cards.in .dx-card:nth-child(4){transition-delay:.21s}
.dx-cards.in .dx-card:nth-child(5){transition-delay:.28s}
/* the marker rule draws itself in */
.dx-mark s{transform:scaleX(0);transform-origin:0 50%;transition:transform .8s cubic-bezier(.16,1,.3,1) .1s}
.dx-r.in .dx-mark s,.dx-mark.in s{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .dx-r,.dx-cards .dx-card{opacity:1 !important;transform:none !important;transition:none !important}
  .dx-mark s{transform:scaleX(1) !important;transition:none !important}
  .dx-card .shot img{transition:none !important}
}

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .dx-cards.c4{grid-template-columns:repeat(2,1fr)}
  .dx-row{grid-template-columns:1fr;gap:18px;align-items:start}
  .dx-row .dx-note{justify-self:start}
}
@media (max-width:860px){
  .dx-cards.c3{grid-template-columns:repeat(2,1fr)}
  .dx-spec.c3{grid-template-columns:1fr}
  .dx-card{min-height:290px}
}
@media (max-width:620px){
  .dx-cards.c4,.dx-cards.c3,.dx-cards.c2{grid-template-columns:1fr}
  .dx-card p{max-width:none}
  .dx-step{padding:18px 20px}
  .dx-head{font-size:clamp(28px,8.4vw,40px)}
  .dx-head.xl{font-size:clamp(34px,10.5vw,50px)}

  /* Mobile is its own composition, not a squeezed desktop. The image stops being a
     background behind the text and becomes a real 16:9 plate under it, so the card
     reads text -> picture -> action -> tags instead of cramming a photograph into a
     thin band. The picture also gets to be brighter, because nothing sits on it. */
  .dx-card{min-height:0;display:flex;flex-direction:column}
  .dx-card .shot{position:relative;inset:auto;width:100%;aspect-ratio:16/9;order:2;flex:none}
  .dx-card .shot img{opacity:.92;filter:grayscale(1) contrast(1.05) brightness(.78)}
  .dx-card .shot::after{background:linear-gradient(180deg,rgba(7,7,7,.30) 0%,rgba(7,7,7,.06) 45%,rgba(7,7,7,.42) 100%)}
  .dx-card .pad{order:1;padding-bottom:18px}
  .dx-card .foot{order:3;margin-top:0;padding-top:16px;padding-bottom:4px}
  .dx-card .dx-tags{order:4;margin-top:0;padding:0 clamp(18px,1.8vw,26px)}
  .dx-tags span{flex:0 1 auto;border-left:0;text-align:left;padding:11px 18px 11px 0}
}

.dx-card .foot ~ .dx-tags{margin-top:0}

/* ── spatial scene (pre-rendered sequence,scrubbed by scroll) ───────────────
   Rendered offline from real geometry traced off the master mark,with real
   materials and architectural lights{position:relative;background:#050505;display:block}

/* the site's base CSS sets img{height:auto} at a higher specificity{width:100% !important;height:100% !important;max-width:none !important;object-fit:cover !important}

@media(max-width:900px){
  
  
  
  
  /* On a phone the object and the type were at the same scale with the same horizontal
     rhythm{height:auto;min-height:0;display:grid;grid-template-columns:100%;grid-template-rows:minmax(230px,42vh) auto}
  
  
  
  
  
}

/* ── card wall depth ────────────────────────────────────────────────────────
   At rest the wall is disciplined. On engagement the chosen card comes forward
   a little and the others recede and darken, so the wall reads as objects in
   depth rather than four bordered panels. Weighted, no spring, no bounce, and
   the whole effect is suppressed for reduced motion. */
@media (hover:hover) and (pointer:fine){
  .dx-cards{perspective:1400px}
  .dx-card{
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .78s cubic-bezier(.16,1,.3,1),
               filter .6s cubic-bezier(.16,1,.3,1);
    will-change:transform}
  .dx-cards:hover .dx-card{transform:scale(.982);filter:brightness(.62)}
  .dx-cards:hover .dx-card:hover,
  .dx-cards:focus-within .dx-card:focus-within{transform:scale(1.014);filter:brightness(1.06);z-index:5}
  /* the index strip answers the same way, quietly */
  .dx-flow:hover .dx-step{transition:filter .6s cubic-bezier(.16,1,.3,1);filter:brightness(.66)}
  .dx-flow:hover .dx-step:hover{filter:brightness(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .dx-cards:hover .dx-card,.dx-cards:hover .dx-card:hover,
  .dx-flow:hover .dx-step,.dx-flow:hover .dx-step:hover{
    transform:none !important;filter:none !important;transition:none !important}
}

/* Entry price on a tier card. These pages described Essential and Signature
   but carried no figure, so the visitor had to leave for /pricing to find out
   what a project starts at. Sits directly under the tier description. */
.dx-from{margin:10px 0 0;font-size:12.5px;letter-spacing:.01em;color:#fff;font-weight:600;font-variant-numeric:tabular-nums;max-width:44ch}

/* Entry price on a go360 arm page. The arm pages described two levels and a
   90-day minimum but named no figure, so a visitor landing on an arm directly
   could not tell what it costs without going to go360 or /pricing. */
.arm-from{font-weight:600;color:#fff;font-variant-numeric:tabular-nums}