/* ============================================================
   Service 04 · Digital Authority
   Structural clone of the source service page.
   Source uses a fluid root font-size (1 spacing unit = 1px at the
   design width of the band). We reproduce that with --u instead of
   touching html{font-size}, so the shared header/menu/footer keep
   their own rem scale.
     <640   root 3.8835vw  -> 1u = 0.24272vw   (1px at 412)
     >=640  root 2.08333vw -> 1u = 0.13021vw   (1px at 768)
     >=1024 root 1.11111vw -> 1u = 0.06944vw   (1px at 1440)
   ============================================================ */

.p-digital-authority{
  --u: 0.24272vw;
  display: block;
  color: var(--teal);
  background: var(--paper);
}
@media (min-width: 640px){ .p-digital-authority{ --u: 0.130208vw } }
@media (min-width: 1024px){ .p-digital-authority{ --u: 0.0694444vw } }

.p-digital-authority section:where(:not(.cta-hands)){ padding: 0 var(--gutter) }
.p-digital-authority h1,.p-digital-authority h2,.p-digital-authority h3{ font-weight: 400 }
.p-digital-authority p{ margin: 0 }

/* the section reset above also strips the shared bands; give it back */
.p-digital-authority section.osvc{ padding: 6rem clamp(1rem,3vw,2.5rem) }
/* the inquiry band keeps the global treatment on every page */

.p-digital-authority .aid-sr{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- grid: 6 cols -> 12 cols at 1024 ---- */
.p-digital-authority .aid-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  column-gap: calc(10 * var(--u));
}
@media (min-width: 640px){ .p-digital-authority .aid-grid{ column-gap: calc(12.5 * var(--u)) } }
@media (min-width: 1024px){
  .p-digital-authority .aid-grid{
    grid-template-columns: repeat(12, minmax(0,1fr));
    column-gap: calc(15 * var(--u));
  }
}

/* ---- type ---- */
.p-digital-authority .page-title{
  font-family: var(--sans); font-weight: 500; letter-spacing: 0;
  font-size: calc(52 * var(--u)); line-height: 1;
}
@media (min-width: 1024px){
  .p-digital-authority .page-title{ font-size: calc(160 * var(--u)); line-height: calc(150 * var(--u)) }
}
.p-digital-authority .page-text{
  font-family: var(--sans); font-weight: 400; letter-spacing: 0;
  font-size: calc(22 * var(--u)); line-height: 1;
}
@media (min-width: 1024px){
  .p-digital-authority .page-text{ font-size: calc(30 * var(--u)); line-height: calc(30 * var(--u)) }
}
.p-digital-authority .mono{
  font-family: var(--mono); font-weight: 400; letter-spacing: 0;
  text-transform: uppercase;
  font-size: calc(14 * var(--u)); line-height: 1.21;
}
@media (min-width: 1024px){
  .p-digital-authority .mono{ font-size: calc(12 * var(--u)); line-height: 1.33 }
}

/* ---- section label rows ---- */
.p-digital-authority .aid-labelrow{ position: relative }
.p-digital-authority .aid-labelrow .eyebrow{
  margin: 0; padding-top: calc(20 * var(--u));
  border-top: 1px solid var(--teal); color: var(--teal);
  line-height: 1; align-items: flex-start;
}
@media (min-width: 1024px){
  .p-digital-authority .aid-labelrow .eyebrow{ position: absolute; top: 0; left: 0; width: 100% }
}

/* ============================ 1 · HERO ============================ */
.p-digital-authority .aid-hero{ padding-top: calc(180 * var(--u)) }
@media (min-width: 1024px){ .p-digital-authority .aid-hero{ padding-top: calc(312 * var(--u)) } }

.p-digital-authority .aid-htitle{ padding: 0 }
.p-digital-authority .aid-htitle .page-title{ text-align: right; color: var(--teal) }
@media (min-width: 1024px){ .p-digital-authority .aid-htitle .page-title{ text-align: left } }

/* the hero plate runs edge to edge; the copy over it keeps the gutter (Marlo, 2026-09-09) */
.p-digital-authority .aid-stack{
  position: relative;
  margin: calc(32 * var(--u)) calc(-1 * var(--gutter)) 0;
  display: grid;
  grid-template-areas: "stack";
}
.p-digital-authority .aid-stack > .aid-hcopy,
.p-digital-authority .aid-stack > .aid-stairs{ padding-inline: var(--gutter) }
.p-digital-authority .aid-stack > *{ grid-area: stack }

.p-digital-authority .aid-img{
  overflow: hidden;
  aspect-ratio: 412 / 825;
  background: var(--teal-deep);
}
.p-digital-authority .aid-img img{ width: 100%; height: 100%; object-fit: cover; display: block }
@media (min-width: 1024px){ .p-digital-authority .aid-img{ aspect-ratio: auto } }
.p-digital-authority .aid-img canvas{
  display: block; width: 100%; height: 100%; object-fit: cover;
}
/* the source paints this rect with a fine WebGL dither; our 2D dither is
   coarser, so a flat brand veil keeps the paper copy over it readable */
.p-digital-authority .aid-img::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(7, 64, 61, .46);
}

.p-digital-authority .aid-hcopy{
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  column-gap: calc(10 * var(--u));
  align-content: start;
  margin-top: calc(20 * var(--u));
  padding: 0 var(--gutter);
  color: var(--paper);
}
@media (min-width: 640px){ .p-digital-authority .aid-hcopy{ column-gap: calc(12.5 * var(--u)) } }
@media (min-width: 1024px){
  .p-digital-authority .aid-hcopy{
    grid-template-columns: repeat(12, minmax(0,1fr));
    column-gap: calc(15 * var(--u));
    padding-bottom: calc(400 * var(--u));
  }
}
.p-digital-authority .aid-hcopy-line{ grid-column: 1 / -1; color: var(--paper) }
@media (min-width: 1024px){ .p-digital-authority .aid-hcopy-line{ grid-column: span 9 } }
.p-digital-authority .aid-hlede{ grid-column: 1 / -2; margin-top: calc(200 * var(--u)); color: var(--paper) }
@media (min-width: 1024px){ .p-digital-authority .aid-hlede{ grid-column: 8 / -2 } }

.p-digital-authority .aid-stairs{
  position: absolute; bottom: -1px; left: 0; width: 100%;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  column-gap: calc(10 * var(--u));
  pointer-events: none;
}
@media (min-width: 640px){ .p-digital-authority .aid-stairs{ column-gap: calc(12.5 * var(--u)) } }
@media (min-width: 1024px){
  .p-digital-authority .aid-stairs{
    grid-template-columns: repeat(12, minmax(0,1fr));
    column-gap: calc(15 * var(--u));
  }
}
.p-digital-authority .aid-stair{
  grid-column: 1 / -1;
  width: calc(var(--f) * 100% + 30 * var(--u));
  height: calc(130 * var(--u));
  margin-left: calc(-1 * var(--gutter));
  background: var(--paper);
  transform-origin: left center;
}
@media (min-width: 1024px){
  .p-digital-authority .aid-stair{ grid-column: 1 / 10; height: calc(140 * var(--u)) }
}

/* ============ 2 · WHY A WEBSITE · the buyer's screen, in sequence ============
   An ink stage. The schematic on the left is one column of the five screens a
   buyer passes between the search and the call. The notes on the right drive
   the ring-and-cross sight down it, checks stamp on what has been passed, and
   the empty result keeps its cross. Below 1024 the stage is static and every
   note is at full strength: the content survives, the pinning does not. */
.p-digital-authority .aid-approach{
  background: var(--ink); color: var(--paper);
  margin-top: calc(110 * var(--u));
  padding: calc(60 * var(--u)) clamp(1.1rem, 3.4vw, 3rem) calc(40 * var(--u));
}
.p-digital-authority .aid-approach .aid-labelrow .eyebrow{
  border-top-color: rgba(234,232,226,.34); color: var(--paper); opacity: .6;
}

.p-digital-authority .da-seq{
  display: grid; grid-template-columns: repeat(6, minmax(0,1fr));
  column-gap: calc(10 * var(--u));
}
@media (min-width: 1024px){
  .p-digital-authority .da-seq{
    grid-template-columns: repeat(12, minmax(0,1fr));
    column-gap: calc(15 * var(--u));
  }
}

.p-digital-authority .da-seq-head{ grid-column: 1 / -1; margin-top: calc(60 * var(--u)) }
@media (min-width: 1024px){
  .p-digital-authority .da-seq-head{ grid-column: 2 / span 9; margin-top: calc(90 * var(--u)) }
}
.p-digital-authority .da-seq-head h2{
  font-family: var(--sans); font-weight: 400; letter-spacing: -.01em;
  font-size: calc(30 * var(--u)); line-height: 1.18;
  color: var(--paper); margin: 0;
}
@media (min-width: 1024px){
  .p-digital-authority .da-seq-head h2{ font-size: calc(42 * var(--u)); line-height: calc(50 * var(--u)) }
}
.p-digital-authority .da-src{
  display: block; margin-top: calc(20 * var(--u));
  color: var(--paper); opacity: .5; text-transform: none; letter-spacing: .02em;
}

.p-digital-authority .da-stagecol{ grid-column: 1 / -1; margin-top: calc(60 * var(--u)) }
.p-digital-authority .da-notes{ grid-column: 1 / -1; margin-top: calc(40 * var(--u)) }
@media (min-width: 1024px){
  .p-digital-authority .da-stagecol{ grid-column: 1 / span 6; grid-row: 2; margin-top: calc(90 * var(--u)) }
  .p-digital-authority .da-notes{ grid-column: 8 / span 5; grid-row: 2; margin-top: calc(90 * var(--u)) }
  .p-digital-authority .da-stage{ position: sticky; top: calc(90 * var(--u)) }
}

#daSvg{ width: 100%; height: auto; display: block; overflow: visible }
#daSvg text{
  font-family: var(--mono); font-size: 12px; letter-spacing: .07em;
  text-transform: uppercase; fill: currentColor; stroke: none;
}
#daSvg .da-t2{ font-size: 11px; text-transform: none; letter-spacing: .01em; opacity: .8 }
#daSvg .da-t3{ font-size: 9px; letter-spacing: .06em; opacity: .8 }
@media (max-width: 1023px){
  #daSvg text{ font-size: 15px }
  #daSvg .da-t2{ font-size: 14px }
  #daSvg .da-t3{ font-size: 12px }
}

#daSvg .da-spine{ stroke: rgba(234,232,226,.3) }
#daSvg .da-prog{ stroke: var(--paper); stroke-width: 2; opacity: .75 }
#daSvg .dar{
  color: rgba(234,232,226,.85); stroke: currentColor; opacity: .34;
  transition: opacity .45s var(--e-out), transform .5s var(--e-out);
}
#daSvg .dar.done{ opacity: .6 }
#daSvg .dar.act{ color: var(--paper); opacity: 1; transform: translateY(-3px) }
#daSvg .dar.act rect:first-of-type{ fill: rgba(11,92,88,.34) }
#daSvg .dar text{ fill: currentColor }

#daSvg .da-ok{
  stroke: var(--paper); stroke-width: 2.2; fill: none;
  stroke-dasharray: 26; stroke-dashoffset: 26;
  transition: stroke-dashoffset .5s var(--e-out) .15s;
}
#daSvg .dar.done .da-ok{ stroke-dashoffset: 0 }
#daSvg .da-x{
  stroke: var(--paper); stroke-width: 2.2; fill: none;
  opacity: 0; transition: opacity .4s var(--e-out) .2s;
}
#daSvg .dar.done .da-x{ opacity: .9 }

#daSvg .da-wire{
  stroke: var(--paper); fill: none; stroke-dasharray: 5 4;
  opacity: 0; transition: opacity .6s var(--e-out);
}
#daSvg .da-wire[cx]{ fill: var(--paper); stroke: none }
#daSvg.wire-on .da-wire{ opacity: .75 }

#daSvg .da-sight-g{ pointer-events: none }
#daSvg .da-sight-fill{ fill: rgba(11,92,88,.24); stroke: none }
#daSvg .da-sight-ring{ stroke: var(--paper); stroke-width: 2; fill: none }
#daSvg .da-sight-cross{ stroke: var(--paper); stroke-width: 1; fill: none; opacity: .8 }
#daSvg .da-sight-dot{ fill: var(--paper); stroke: none }

.p-digital-authority .da-brief{
  display: inline-block; margin-top: calc(30 * var(--u));
  color: var(--paper); opacity: .65; text-decoration: none;
  border-bottom: 1px solid transparent; transition: opacity .3s, border-color .3s;
}
.p-digital-authority .da-brief:hover{ opacity: 1; border-bottom-color: var(--paper) }

.p-digital-authority .da-note{ padding: calc(34 * var(--u)) 0; color: var(--paper) }
.p-digital-authority .da-note .da-n{
  display: inline-block; align-self: flex-start;
  opacity: .5; margin-bottom: calc(16 * var(--u));
}
.p-digital-authority .da-note h3{
  font-family: var(--sans); font-weight: 500; letter-spacing: -.015em;
  font-size: calc(26 * var(--u)); line-height: 1.15;
  color: var(--paper); margin: 0 0 calc(16 * var(--u));
}
.p-digital-authority .da-p{
  color: var(--paper); opacity: .68;
  text-transform: none; letter-spacing: .01em; line-height: 1.8;
  font-size: calc(15 * var(--u)); max-width: 44ch;
}
@media (min-width: 1024px){
  .p-digital-authority .da-p{ font-size: calc(13.5 * var(--u)) }
}
@media (min-width: 1024px){
  .p-digital-authority .da-note{
    min-height: 76vh; display: flex; flex-direction: column; justify-content: center;
    padding: 0; opacity: .34; transition: opacity .5s var(--e-out);
  }
  .p-digital-authority .da-note:first-child{ min-height: 54vh }
  .p-digital-authority .da-note:last-child{ min-height: 62vh; padding-bottom: calc(80 * var(--u)) }
  .p-digital-authority .da-note.act{ opacity: 1 }
  .p-digital-authority .da-note h3{ font-size: calc(30 * var(--u)) }
  .p-digital-authority .da-note.act .da-n{
    background: var(--paper); color: var(--ink); padding: .12rem .45rem; opacity: 1;
  }
}
/* mobile and tablet: the sequence keeps its content, the stage stops moving */
@media (max-width: 1023px){
  #daSvg .dar, #daSvg .dar.act, #daSvg .dar.done{ opacity: .82; transform: none }
  #daSvg .dar.act rect:first-of-type{ fill: none }
  #daSvg .da-ok{ stroke-dashoffset: 0 }
  #daSvg .da-x{ opacity: .9 }
  #daSvg .da-wire{ opacity: .7 }
  #daSvg .da-sight-g{ display: none }
  .p-digital-authority .da-note{ border-top: 1px solid rgba(234,232,226,.16) }
}
@media (prefers-reduced-motion: reduce){
  #daSvg .dar, #daSvg .dar.act, #daSvg .dar.done{ opacity: .82; transform: none }
  #daSvg .da-ok{ stroke-dashoffset: 0 }
  #daSvg .da-x, #daSvg .da-wire{ opacity: .85 }
  .p-digital-authority .da-note{ opacity: 1 }
}

/* ======================= 3 · HOW IT WORKS ======================= */
.p-digital-authority .aid-how{ padding: calc(90 * var(--u)) var(--gutter) 0 }
@media (min-width: 1024px){ .p-digital-authority .aid-how{ padding-top: calc(24 * var(--u)) } }

.p-digital-authority .aid-how-grid{
  margin-top: calc(50 * var(--u));
  row-gap: calc(70 * var(--u));
}
@media (min-width: 1024px){
  .p-digital-authority .aid-how-grid{ margin-top: calc(150 * var(--u)); row-gap: 0 }
}

.p-digital-authority .aid-step{ grid-column: 1 / -1 }
@media (min-width: 1024px){
  .p-digital-authority .aid-step{ grid-column: span 4; padding: 0 calc(50 * var(--u)) 0 calc(15 * var(--u)) }
}

.p-digital-authority .aid-meta{ display: flex; justify-content: space-between; color: var(--teal) }
@media (min-width: 1024px){ .p-digital-authority .aid-meta{ padding-right: calc(12 * var(--u)) } }
.p-digital-authority .aid-idx{ width: calc(15 * var(--u)) }

.p-digital-authority .aid-scap{ margin-top: calc(24 * var(--u)) }
.p-digital-authority .aid-scap p{
  color: var(--teal);
  padding: calc(12 * var(--u)) 0;
  border-top: 1px solid var(--teal);
}

/* ---- the three demonstrations: drawn, not photographed ---- */
.p-digital-authority .aid-hframe{
  position: relative; overflow: hidden;
  width: 100%; margin-top: calc(24 * var(--u));
  background: var(--ink); border: 1px solid rgba(22,33,30,.14);
  padding: 1rem; min-height: 230px;
  display: flex; flex-direction: column; gap: .8rem;
}
.dm-bar{display:flex; align-items:center; gap:.15rem; background:rgba(234,232,226,.07); border:1px solid rgba(234,232,226,.18);
  padding:.6rem .8rem; color:var(--paper); min-height:2.2rem}
.dm-q{font-size:.62rem; letter-spacing:.05em}
.dm-caret{width:1px; height:.9rem; background:var(--paper); animation:dmBlink 1s steps(1) infinite}
@keyframes dmBlink{50%{opacity:0}}
.dm-results{display:flex; flex-direction:column; gap:.55rem}
.dm-r{background:rgba(234,232,226,.05); border-left:2px solid var(--teal); padding:.55rem .7rem; color:var(--paper);
  opacity:0; transform:translateY(8px)}
.dm-r b{display:block; font-weight:500; font-size:.8rem; letter-spacing:-.01em}
.dm-r .mono{font-size:.52rem; opacity:.5; text-transform:none}
.on .dm-r{transition:opacity .5s var(--e-out), transform .5s var(--e-out)}
.on .dm-r1{opacity:1; transform:none; transition-delay:1.3s}
.on .dm-r2{opacity:1; transform:none; transition-delay:1.55s}
.on .dm-r3{opacity:1; transform:none; transition-delay:1.8s}
.dm-frame{flex:1; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr 1fr; gap:.5rem}
.dm-el{background:rgba(234,232,226,.07); border:1px solid rgba(234,232,226,.14); display:flex; align-items:flex-end; padding:.45rem .6rem;
  opacity:0; transform:scaleY(.6); transform-origin:top}
.dm-el .mono{font-size:.5rem; color:var(--paper); opacity:.6}
.dm-nav{grid-column:1/-1; min-height:1.2rem}
.dm-hero{grid-column:1/-1; background:rgba(11,92,88,.35)}
.on .dm-el{transition:opacity .5s var(--e-out), transform .55s var(--e-out)}
.on .dm-nav{opacity:1; transform:none; transition-delay:.15s}
.on .dm-hero{opacity:1; transform:none; transition-delay:.4s}
.on .dm-cert{opacity:1; transform:none; transition-delay:.65s}
.on .dm-proj{opacity:1; transform:none; transition-delay:.8s}
.on .dm-contact{opacity:1; transform:none; transition-delay:.95s}
.dm-ask{color:var(--paper); opacity:.55; font-size:.6rem}
.dm-ans{color:var(--paper); font-size:.88rem; line-height:1.55; min-height:7em}
.dm-ans::after{content:""; display:inline-block; width:1px; height:.9em; background:var(--paper); margin-left:2px;
  vertical-align:-.1em; animation:dmBlink 1s steps(1) infinite}

/* =================== 4 · WHAT THE BUYER FINDS =================== */
.p-digital-authority .aid-live{ padding: calc(110 * var(--u)) var(--gutter) 0 }
@media (min-width: 1024px){ .p-digital-authority .aid-live{ padding-top: calc(140 * var(--u)) } }

.p-digital-authority .aid-panel{
  margin-top: calc(50 * var(--u));
  background: var(--ink); color: var(--paper);
}
@media (min-width: 1024px){ .p-digital-authority .aid-panel{ margin-top: calc(90 * var(--u)) } }

.p-digital-authority .aid-panel-top{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(234,232,226,.16);
  color: var(--paper);
}
.p-digital-authority .aid-panel-cap{ opacity: .55 }
.p-digital-authority .aid-panel-ctl{ display: flex; gap: .35rem; flex-wrap: wrap }
.p-digital-authority .aid-tg{
  font-family: var(--mono); font-size: inherit; letter-spacing: 0;
  text-transform: uppercase;
  background: none; border: 0; padding: .35rem .4rem; cursor: pointer;
  color: var(--paper); opacity: .45;
  transition: opacity .25s var(--e-out);
}
.p-digital-authority .aid-tg:hover{ opacity: .85 }
.p-digital-authority .aid-tg[aria-pressed="true"]{ opacity: 1 }
.p-digital-authority .aid-rerun{ opacity: .45 }

.p-digital-authority .aid-panel-body{
  display: grid; grid-template-columns: 1fr;
  gap: 1.6rem;
  padding: 1.2rem 1rem 1.5rem;
  transition: opacity .3s var(--e-out);
}
.p-digital-authority .aid-panel.fade .aid-panel-body{ opacity: 0 }
@media (min-width: 1024px){
  .p-digital-authority .aid-panel-body{
    grid-template-columns: minmax(0,7fr) minmax(0,5fr);
    gap: calc(50 * var(--u));
    padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(50 * var(--u));
  }
}

.p-digital-authority .aid-qbar{
  display: flex; align-items: center; gap: 2px;
  background: rgba(234,232,226,.06); border: 1px solid rgba(234,232,226,.18);
  padding: .7rem .9rem; min-height: 2.5rem;
}
.p-digital-authority .aid-q{ text-transform: none; letter-spacing: .04em }
.p-digital-authority .aid-caret{
  width: 1px; height: 1em; background: var(--paper);
  animation: dmBlink 1s steps(1) infinite;
}
.p-digital-authority .aid-ans{
  margin-top: 1.2rem;
  font-size: .95rem; line-height: 1.65;
  min-height: 8.5em;
}
@media (min-width: 1024px){
  .p-digital-authority .aid-ans{ font-size: calc(16 * var(--u)); min-height: 7em }
}
.p-digital-authority .aid-verdict{
  margin-top: 1rem; padding-top: .85rem;
  border-top: 1px solid rgba(234,232,226,.16);
  color: var(--paper);
  opacity: 0; transition: opacity .4s var(--e-out);
}
.p-digital-authority .aid-verdict.in{ opacity: .85 }

.p-digital-authority .aid-panel-src{
  border-top: 1px solid rgba(234,232,226,.16); padding-top: 1.1rem;
}
@media (min-width: 1024px){
  .p-digital-authority .aid-panel-src{
    border-top: 0; padding-top: 0;
    border-left: 1px solid rgba(234,232,226,.16);
    padding-left: calc(40 * var(--u));
  }
}
.p-digital-authority .aid-src-head{
  display: flex; justify-content: space-between;
  padding-bottom: .7rem; border-bottom: 1px solid rgba(234,232,226,.16);
  opacity: .7;
}
.p-digital-authority .aid-src-list{
  list-style: none; margin: 0; padding: 0; min-height: 10.5rem;
}
.p-digital-authority .aid-src{
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid rgba(234,232,226,.1);
  opacity: 0; transform: translateX(18px);
}
.p-digital-authority .aid-src.in{
  opacity: 1; transform: none;
  transition: opacity .45s var(--e-out), transform .45s var(--e-out);
}
.p-digital-authority .aid-src b{
  font-family: var(--mono); font-weight: 400; font-size: .68rem;
  letter-spacing: .02em; text-transform: none; word-break: break-all;
}
.p-digital-authority .aid-src .mono{ font-size: calc(10 * var(--u)); opacity: .5; white-space: nowrap; text-transform: none }
@media (max-width: 1023px){ .p-digital-authority .aid-src .mono{ font-size: .55rem } }

/* the four adoption figures under the panel */
.p-digital-authority .aid-stats{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  margin-top: calc(20 * var(--u));
  border-left: 1px solid var(--teal);
  border-top: 1px solid var(--teal);
}
@media (min-width: 1024px){
  .p-digital-authority .aid-stats{ grid-template-columns: repeat(4, minmax(0,1fr)); margin-top: calc(15 * var(--u)) }
}
.p-digital-authority .aid-stat{
  display: flex; flex-direction: column;
  border-right: 1px solid var(--teal); border-bottom: 1px solid var(--teal);
  padding: calc(22 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
}
.p-digital-authority .aid-stat-n{
  font-family: var(--sans); font-weight: 500; color: var(--teal);
  font-size: calc(44 * var(--u)); line-height: 1;
}
@media (min-width: 1024px){ .p-digital-authority .aid-stat-n{ font-size: calc(56 * var(--u)) } }
.p-digital-authority .aid-stat-l{
  margin-top: .7rem; color: var(--teal);
  font-size: .8rem; line-height: 1.4;
}
@media (min-width: 1024px){ .p-digital-authority .aid-stat-l{ font-size: calc(13 * var(--u)); flex: 1 } }
.p-digital-authority .aid-stat-s{ margin-top: .9rem; color: var(--teal); opacity: .55; font-size: .55rem }
@media (min-width: 1024px){ .p-digital-authority .aid-stat-s{ font-size: calc(10 * var(--u)) } }

/* ====================== 5 · WHAT GETS BUILT ====================== */
.p-digital-authority .aid-projects{ padding: calc(110 * var(--u)) var(--gutter) 0 }

.p-digital-authority .aid-prule{
  border-top: 1px solid var(--teal);
  padding-top: calc(50 * var(--u));
}
@media (min-width: 1024px){ .p-digital-authority .aid-prule{ padding-top: calc(100 * var(--u)) } }

.p-digital-authority .aid-ptitle{ grid-column: 1 / -1; text-align: left }
.p-digital-authority .aid-ptitle h2{
  font-family: var(--sans); font-weight: 500; letter-spacing: 0;
  font-size: calc(80 * var(--u)); line-height: .9375;
  color: var(--teal);
}
@media (min-width: 1024px){
  .p-digital-authority .aid-ptitle h2{ font-size: calc(160 * var(--u)); line-height: calc(150 * var(--u)) }
}

.p-digital-authority .aid-build{
  margin-top: calc(70 * var(--u));
  row-gap: calc(70 * var(--u));
  padding-bottom: calc(30 * var(--u));
}
@media (min-width: 1024px){ .p-digital-authority .aid-build{ margin-top: calc(60 * var(--u)) } }

/* the deliverables board: the acquisition board's grammar, on paper, with the
   spec on every row instead of a hover reveal. Two groups carry the hierarchy,
   because three of these live on the site and three get sent to a buyer. */
.p-digital-authority .da-board{
  position: relative;
  margin-top: calc(70 * var(--u));
  border-top: 1px solid var(--teal);
}
@media (min-width: 1024px){ .p-digital-authority .da-board{ margin-top: calc(100 * var(--u)) } }

.p-digital-authority .da-grp{
  margin: 0; padding: calc(26 * var(--u)) 0 calc(12 * var(--u)) calc(15 * var(--u));
  color: var(--teal); opacity: .5;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 1024px){
  .p-digital-authority .da-grp{ padding-left: calc(95 * var(--u)); padding-top: calc(34 * var(--u)) }
}

.p-digital-authority .da-row{
  position: relative;
  display: grid;
  grid-template-columns: calc(50 * var(--u)) minmax(0,1fr);
  column-gap: calc(12 * var(--u)); row-gap: calc(10 * var(--u));
  padding: calc(22 * var(--u)) 0;
  border-bottom: 1px solid var(--line);
  color: var(--teal);
  transition: opacity .3s var(--e-out), background .45s var(--e-out);
}
@media (min-width: 1024px){
  .p-digital-authority .da-row{
    grid-template-columns: calc(95 * var(--u)) minmax(0,1fr) minmax(0, calc(300 * var(--u)));
    column-gap: calc(30 * var(--u)); row-gap: 0;
    align-items: center;
    padding: calc(26 * var(--u)) 0;
  }
}
.p-digital-authority .da-rn{
  opacity: .4; padding-left: calc(15 * var(--u));
  transition: opacity .25s var(--e-out);
}
@media (min-width: 1024px){ .p-digital-authority .da-rn{ padding-left: calc(30 * var(--u)) } }
.p-digital-authority .da-name{
  font-family: var(--sans); font-weight: 500; letter-spacing: -.022em;
  font-size: calc(26 * var(--u)); line-height: 1.06;
  transition: transform .45s var(--e-out);
}
@media (min-width: 1024px){
  .p-digital-authority .da-name{ font-size: calc(44 * var(--u)) }
}
.p-digital-authority .da-spec{
  grid-column: 2; opacity: .55;
  text-transform: none; letter-spacing: .01em; line-height: 1.6;
  transition: opacity .3s var(--e-out);
}
@media (min-width: 1024px){
  .p-digital-authority .da-spec{ grid-column: 3; text-align: right; justify-self: end }
}

/* the field dims while one row holds the sight */
@media (min-width: 1024px){
  .p-digital-authority .da-board:hover .da-row{ opacity: .34 }
  .p-digital-authority .da-board:hover .da-row:hover{
    opacity: 1;
    background: linear-gradient(90deg, rgba(11,92,88,.11), rgba(11,92,88,0) 72%);
  }
  .p-digital-authority .da-row:hover .da-rn{ opacity: 0 }
  .p-digital-authority .da-row:hover .da-name{ transform: translateX(14px) }
  .p-digital-authority .da-row:hover .da-spec{ opacity: .8 }
  .p-digital-authority .da-board:hover .da-grp{ opacity: .22 }
}
.p-digital-authority .da-bsight{
  position: absolute; left: calc(18 * var(--u)); top: 0;
  width: calc(44 * var(--u)); min-width: 1.9rem; aspect-ratio: 1;
  color: var(--teal); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--e-out);
}
.p-digital-authority .da-board:hover .da-bsight{ opacity: 1 }
.p-digital-authority .da-bsight svg{ width: 100%; height: 100%; display: block; overflow: visible }
@media (max-width: 1023px){ .p-digital-authority .da-bsight{ display: none } }
@media (prefers-reduced-motion: reduce){
  .p-digital-authority .da-row,
  .p-digital-authority .da-name,
  .p-digital-authority .da-spec{ transition: none }
}

.p-digital-authority .aid-pcta{
  grid-column: 1 / -1;
  margin-top: calc(60 * var(--u));
}
@media (min-width: 1024px){
  .p-digital-authority .aid-pcta{ grid-column: 3 / span 3; justify-self: start; margin-top: calc(20 * var(--u)) }
}

/* ---- buttons (two-layer fill, source geometry) ---- */
.p-digital-authority .aid-btn{
  position: relative; display: block; overflow: hidden;
  text-decoration: none; border: 1px solid var(--teal);
  width: 100%;
}
.p-digital-authority .aid-btn-label,
.p-digital-authority .aid-btn-fill{
  display: block;
  font-family: var(--mono); font-weight: 400;
  font-size: calc(14 * var(--u)); line-height: 1;
  letter-spacing: .02em; text-transform: uppercase; text-align: center;
}
.p-digital-authority .aid-btn-fill{
  position: absolute; inset: 0;
  transform: translateY(101%) scaleX(.5);
  transform-origin: 50% 100%;
  transition: transform .45s var(--e-out), color .3s var(--e-out);
}
.p-digital-authority .aid-btn-label{
  transition: transform .45s var(--e-out), opacity .45s var(--e-out);
}
.p-digital-authority .aid-btn:hover .aid-btn-fill{ transform: translateY(0) scaleX(1) }
.p-digital-authority .aid-btn:hover .aid-btn-label{ transform: translateY(-70%); opacity: 0 }

.p-digital-authority .aid-btn-primary{ background: var(--teal) }
.p-digital-authority .aid-btn-primary .aid-btn-label{ padding: calc(25 * var(--u)) calc(46 * var(--u)); color: var(--paper) }
.p-digital-authority .aid-btn-primary .aid-btn-fill{ padding: calc(25 * var(--u)) calc(46 * var(--u)); background: var(--white); color: var(--teal) }
@media (min-width: 1024px){
  .p-digital-authority .aid-btn-primary{ width: calc(248 * var(--u)) }
}

/* ========================= 6 · FACTS STRIP ========================= */
.p-digital-authority .aid-facts{ padding: calc(80 * var(--u)) var(--gutter) calc(50 * var(--u)) }
.p-digital-authority .aid-facts-grid{ row-gap: 0; border-top: 1px solid var(--teal) }
.p-digital-authority .aid-fact{
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; gap: 1rem;
  padding: calc(16 * var(--u)) 0;
  border-bottom: 1px solid var(--line);
  color: var(--teal);
}
@media (min-width: 1024px){
  .p-digital-authority .aid-fact{
    grid-column: span 4;
    display: block; border-bottom: 0;
    padding: calc(20 * var(--u)) 0 0;
  }
}
.p-digital-authority .aid-fact-k{ opacity: .55 }
.p-digital-authority .aid-fact-v{ text-align: right }
@media (min-width: 1024px){
  .p-digital-authority .aid-fact-v{ display: block; text-align: left; margin-top: .55rem }
}

/* ---- split-text rig ---- */
.p-digital-authority .aid-line-mask{ overflow: clip; display: block }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .p-digital-authority .aid-stair{ transform: none !important }
  .p-digital-authority .aid-btn-fill,
  .p-digital-authority .aid-btn-label{ transition: none }
  .p-digital-authority .aid-caret,
  .dm-caret{ animation: none }
  .dm-r,.dm-el{ opacity: 1; transform: none }
}

/* legibility: substituted fonts need more leading than the source 1.0 ratio */
.p-digital-authority .page-text{ line-height:1.3 }



/* ---- built by Keybridge: the triangle. Two above, one below, each a small full-frame preview. The still
   is the poster; the pointer wakes the site itself - a recorded clip of the live page with its own
   animation running - so hovering feels like the site opening under your hand. ---- */
.p-digital-authority .aid-work{background:var(--ink); color:var(--paper); padding:0 0 6rem; overflow:hidden}
.p-digital-authority .aid-work .aid-labelrow{margin:0 var(--gutter)}
.p-digital-authority .aid-work .eyebrow{color:var(--paper); opacity:.6}
.p-digital-authority .tri{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem;
  padding:3rem clamp(1rem,3vw,2.5rem) 0; max-width:1180px; margin:0 auto}
.p-digital-authority .tri-item{display:block; text-decoration:none; color:var(--paper)}
.p-digital-authority .tri-item:nth-child(3){grid-column:1/-1; width:100%}
.p-digital-authority .tri-item:nth-child(3) .tri-plate{aspect-ratio:16/6}
.p-digital-authority .tri-plate{position:relative; display:block; aspect-ratio:16/10; overflow:hidden;
  background:var(--ink); border:1px solid rgba(234,232,226,.14);
  transition:border-color .4s, transform .55s var(--e-out), box-shadow .55s var(--e-out)}
.p-digital-authority .tri-plate img, .p-digital-authority .tri-plate video{position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block}
.p-digital-authority .tri-plate video{opacity:0; transition:opacity .45s var(--e-out)}
.p-digital-authority .tri-item:hover .tri-plate{transform:translateY(-4px); border-color:rgba(234,232,226,.45);
  box-shadow:0 26px 60px rgba(2,10,9,.6)}
.p-digital-authority .tri-item:hover .tri-plate video{opacity:1}
.p-digital-authority .tri-meta{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.9rem .2rem 0}
.p-digital-authority .tri-meta b{font-weight:400; font-size:.9rem; letter-spacing:.04em}
.p-digital-authority .tri-meta i{font-style:normal; font-size:.78rem; opacity:.55}
@media (max-width:700px){ .p-digital-authority .tri{grid-template-columns:1fr} .p-digital-authority .tri-item:nth-child(3){width:100%} }

/* the live panel clears the section eyebrow, which is absolute at desktop */
.p-digital-authority .aid-live .aid-panel{ margin-top: calc(34 * var(--u)) }

/* ================================================================
   HERO TITLE · Bruno Ace SC is a wide face, so the display size is
   tied to the viewport and kept clear of the fixed nav columns.
   Below 1024 the title is right-aligned and sits under those columns,
   so on that band it starts below them instead.
   ================================================================ */
html .p-digital-authority .aid-htitle .page-title,
html .p-digital-authority .aid-hcopy-line{
  font-size: clamp(2.8rem, 7vw, 10rem);
  line-height: .98;
}
@media (min-width: 640px) and (max-width: 1023.98px){
  html main.p-digital-authority .aid-hero.page-hero{ padding-top: 16rem !important }
}

/* ================================================================
   5b · CONSEQUENCE DIAGRAM · what a buyer's search leads to
   One root node forks into two lines of dot-nodes: the with-branch in
   brand teal, the without-branch muted. Desktop runs the branches
   horizontally off a drawn fork; below 900 they stack under a stem.
   ================================================================ */
.p-digital-authority .cwd{
  position: relative;
  margin-top: calc(60 * var(--u));
  padding-bottom: calc(40 * var(--u));
  color: var(--teal);
}
@media (min-width: 1024px){
  .p-digital-authority .cwd{
    display: grid;
    grid-template-columns: minmax(0, calc(250 * var(--u))) calc(115 * var(--u)) minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: calc(64 * var(--u));
    align-items: start;
    margin-top: calc(90 * var(--u));
    padding-bottom: calc(60 * var(--u));
  }
}

/* ---- the root ---- */
.p-digital-authority .cwd-root{ position: relative; padding-left: 24px }
@media (min-width: 1024px){
  .p-digital-authority .cwd-root{
    grid-column: 1; grid-row: 1 / span 2;
    align-self: center;
    padding-left: 0; padding-right: 0;
  }
}
.p-digital-authority .cwd-dot-root{ position: absolute; left: -2px; top: 3px }
@media (min-width: 1024px){
  .p-digital-authority .cwd-dot-root{ position: static; left: auto; top: auto }
}
/* the stem that carries the root into the fork */
.p-digital-authority .cwd-rootline{ display: none }
@media (min-width: 1024px){
  .p-digital-authority .cwd-rootline{
    display: block; position: absolute;
    left: 19px; right: 0; top: 7px; height: 1px;
    background: var(--teal); transform-origin: left center;
  }
}
.p-digital-authority .cwd-rootlabel{
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem); line-height: 1.25;
  letter-spacing: -.01em;
  margin-top: .85rem;
  max-width: 20ch;
}
@media (min-width: 1024px){
  .p-digital-authority .cwd-rootlabel{ margin-top: 1.1rem }
}

/* ---- dots ---- */
.p-digital-authority .cwd-dot{
  display: block; width: 11px; height: 11px; border-radius: 50%;
  background: var(--teal); flex: none;
}
.p-digital-authority .cwd-dot-root{ width: 15px; height: 15px }
.p-digital-authority .cwd-branch-without .cwd-dot{ background: var(--muted); opacity: .75 }
.p-digital-authority .cwd-node-end .cwd-dot{
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--teal);
}
.p-digital-authority .cwd-branch-without .cwd-node-end .cwd-dot{
  background: transparent; opacity: 1;
  box-shadow: 0 0 0 1px var(--muted) inset, 0 0 0 4px var(--paper), 0 0 0 5px var(--muted);
}

/* ---- the drawn fork (desktop only) ---- */
.p-digital-authority .cwd-fork{ display: none }
@media (min-width: 1024px){
  .p-digital-authority .cwd-fork{
    display: block;
    grid-column: 2; grid-row: 1 / span 2;
    width: 100%; height: 100%;
    overflow: visible;
  }
}
.p-digital-authority .cwd-fk{ fill: none; stroke-width: 1; vector-effect: non-scaling-stroke }
.p-digital-authority .cwd-fk-with{ stroke: var(--teal) }
.p-digital-authority .cwd-fk-without{ stroke: var(--muted); opacity: .55 }

/* ---- a branch ---- */
.p-digital-authority .cwd-branch{ position: relative }
@media (min-width: 1024px){
  .p-digital-authority .cwd-branch{ grid-column: 3 }
  .p-digital-authority .cwd-branch-with{ grid-row: 1 }
  .p-digital-authority .cwd-branch-without{ grid-row: 2 }
}
.p-digital-authority .cwd-tag{
  display: block; color: var(--teal);
  padding-bottom: calc(14 * var(--u));
}
.p-digital-authority .cwd-branch-without .cwd-tag{ color: var(--muted) }

/* stacked layout: a hairline opens each branch, the page's own grammar */
.p-digital-authority .cwd-stem{
  display: block; width: 100%; height: 1px;
  margin-bottom: 18px;
  background: var(--teal); transform-origin: left center;
}
.p-digital-authority .cwd-branch-without{ margin-top: 40px }
.p-digital-authority .cwd-branch-without .cwd-stem{ background: var(--muted); opacity: .55 }
@media (min-width: 1024px){
  .p-digital-authority .cwd-stem{ display: none }
  .p-digital-authority .cwd-branch-without{ margin-top: 0 }
}

/* ---- the nodes ---- */
.p-digital-authority .cwd-nodes{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; row-gap: 0;
}
@media (min-width: 1024px){
  /* the terminal node takes only the width of its verdict, so the three
     consequences before it get the room and the branch ends at the edge */
  .p-digital-authority .cwd-nodes{ grid-template-columns: repeat(3, minmax(0,1fr)) max-content }
  /* the terminal label keeps the page gutter off the viewport edge */
  .p-digital-authority .cwd-node-end{ padding-right: calc(30 * var(--u)) }
}
.p-digital-authority .cwd-node{ position: relative; padding: 0 0 26px 24px }
@media (min-width: 1024px){
  .p-digital-authority .cwd-node{ padding: 0 calc(26 * var(--u)) 0 0 }
}
.p-digital-authority .cwd-node > .cwd-dot{ position: absolute; left: 0; top: 3px }
@media (min-width: 1024px){
  .p-digital-authority .cwd-node > .cwd-dot{ position: static; margin-bottom: calc(18 * var(--u)) }
}
.p-digital-authority .cwd-node p{
  font-family: var(--sans); font-weight: 400;
  font-size: .95rem; line-height: 1.4; color: var(--teal);
  max-width: 30ch;
}
@media (min-width: 1024px){
  .p-digital-authority .cwd-node p{ font-size: max(12px, calc(15 * var(--u))); line-height: 1.45 }
}
.p-digital-authority .cwd-branch-without .cwd-node p{ color: var(--muted) }
.p-digital-authority .cwd-node-end p{ font-weight: 500 }

/* the connector between two dots: vertical when stacked, horizontal in a row */
.p-digital-authority .cwd-line{
  position: absolute; left: 5px; top: 14px; bottom: 4px; width: 1px;
  background: var(--teal); transform-origin: top center;
}
.p-digital-authority .cwd-branch-without .cwd-line{ background: var(--muted); opacity: .55 }
@media (min-width: 1024px){
  .p-digital-authority .cwd-line{
    left: 11px; right: 0; top: 5px; bottom: auto; width: auto; height: 1px;
    transform-origin: left center;
  }
}

/* ---- pre-animation states, only when GSAP will drive them ---- */
.p-digital-authority .cwd-anim .cwd-dot{ transform: scale(0) }
.p-digital-authority .cwd-anim .cwd-rootlabel,
.p-digital-authority .cwd-anim .cwd-tag,
.p-digital-authority .cwd-anim .cwd-node p{ opacity: 0 }
.p-digital-authority .cwd-anim .cwd-stem,
.p-digital-authority .cwd-anim .cwd-rootline{ transform: scaleX(0) }
.p-digital-authority .cwd-anim .cwd-line{ transform: scaleY(0) }
@media (min-width: 1024px){
  .p-digital-authority .cwd-anim .cwd-line{ transform: scaleX(0) }
}

/* demo toggles: 40px tap box, same drawing (mobile audit 2026-09-04) */
.p-digital-authority .aid-tg{min-height:40px; display:inline-flex; align-items:center}


/* Keep the white title and body legible over pale monitor panels on narrow crops. */
@media(max-width:1023px){
 .p-digital-authority .aid-img::after{background:linear-gradient(180deg,rgba(2,27,24,.72) 0%,rgba(2,27,24,.62) 30%,rgba(2,27,24,.74) 66%,rgba(2,27,24,.65) 100%)}
}