/* =====================================================================
   Workvolve theme v2: the "Start with an audit" tile, shared by blog posts and service pages.
   Load after theme-v2.css and the page's own stylesheet (blog-v2.css or pages-v2.css), with audit-v2.js.
   Its classes are its own (audit-tile, at-*, ar-*), so nothing in blog-v2.css or pages-v2.css reaches it.
   1 the tile . 2 the example roadmap (the homepage's, drawn at a fixed size and scaled) . 3 where it sits
   4 reduced motion
   ===================================================================== */

/* ---------- 1. the tile: one even card, the same radius and padding all round ---------- */
.audit-tile{container-type:inline-size;position:relative;isolation:isolate;overflow:hidden;margin:44px 0;border-radius:28px;font-size:16px;line-height:1.6;color:var(--ink-2);text-align:left;
  background:linear-gradient(180deg,#fbf8f0 0%,#f7efdd 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(200,164,85,.24),0 2px 6px -3px rgba(60,44,12,.08),0 24px 48px -34px rgba(60,44,12,.38)}
.audit-tile p{margin:0}
.at-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "copy" "vis" "cta";row-gap:22px;padding:24px}
.at-left{display:contents}
.at-h{grid-area:head;font-size:clamp(1.5rem,1.05rem + 3cqi,2rem);line-height:1.08;letter-spacing:-.04em;font-weight:500;color:var(--ink);text-wrap:balance}
.at-h span{display:block;color:var(--gold-ink)}
.at-copy{grid-area:copy}
.at-p{font-size:15.5px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.audit-tile .at-small{margin-top:12px;font-size:15px;line-height:1.5;font-weight:500;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.at-ctas{grid-area:cta;display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px}
.at-ctas .btn{width:100%;justify-content:space-between}
.audit-tile .btn{text-decoration:none}
.audit-tile .btn-dark,.audit-tile .btn-dark:hover{color:#fff}
.at-note{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;line-height:1.4;color:var(--ink-3)}
.at-note .i{width:15px;height:15px;flex:none;color:var(--gold-deep)}

/* the example: a soft glow and the dotted paper texture sit behind the roadmap, wherever the roadmap is */
.audit-tile .at-vis{grid-area:vis;position:relative;margin:0;min-width:0}
html:not(.js) .at-vis{display:none}
.js .at-vis{padding-bottom:44px}
.at-vis::before{content:"";position:absolute;left:-14%;right:-14%;top:-10%;bottom:-2%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(233,203,138,.52),rgba(233,203,138,.16) 62%,rgba(233,203,138,0))}
.at-vis::after{content:"";position:absolute;left:-10%;right:-10%;top:-8%;bottom:4%;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(122,93,34,.14) 1px,transparent 1.2px);background-size:18px 18px;-webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent);mask-image:radial-gradient(closest-side,#000 30%,transparent)}
.at-stage{position:relative;width:100%;aspect-ratio:610/650}
.at-foot{position:absolute;left:0;right:0;bottom:0;height:30px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.at-cap{min-width:0;font-size:12px;line-height:1.35;color:var(--ink-3)}
.at-replay{position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 10px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(29,29,31,.08),0 2px 6px -3px rgba(60,44,12,.25);font-size:12px;font-weight:550;line-height:1;color:var(--ink-2);transition:opacity .3s,background-color .25s,color .25s}
.at-replay::before{content:"";position:absolute;left:-4px;right:-4px;top:-7px;bottom:-7px}
.at-replay .i{width:13px;height:13px;transition:transform .5s var(--ease)}
.at-replay:hover{background:#fff;color:var(--ink)}
.at-replay:hover .i{transform:rotate(-140deg)}
.at-replay:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.at-vis[data-state="playing"] .at-replay{opacity:.5;cursor:default}

/* wide tiles (a blog post's or service page's main column), laid out like the homepage's audit band: heading,
   words and button on the left, the roadmap on the right, the two centred on each other */
@container (min-width:600px){
  .at-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-areas:"left vis";column-gap:clamp(24px,4.6cqi,40px);align-items:center;padding:clamp(28px,5cqi,40px)}
  .at-left{grid-area:left;display:flex;flex-direction:column;align-items:flex-start}
  .at-h{font-size:clamp(1.5rem,4.3cqi,1.875rem);line-height:1.1}
  .at-copy{margin-top:18px}
  .at-ctas{margin-top:26px}
  .at-ctas .btn{width:auto}
}

/* ---------- 2. the example roadmap: four A4 pages drawn at 610 x 650 and scaled to the stage by audit-v2.js.
   Closed, the cover sits on top of the pile. Open, the cover turns away on its left edge, slips behind and lands at
   the back on the left, while "What I'd do, in order", the first solution and "Where things stand" fan out ---------- */
.ar-fan{position:absolute;left:0;top:0;width:610px;height:650px;transform:scale(var(--s,.5));transform-origin:0 0;perspective:1500px}
.ar-pg{--x0:140px;--y0:86px;--r0:0deg;position:absolute;left:0;top:0;width:330px;height:467px;display:flex;flex-direction:column;padding:20px 22px 13px;border-radius:3px;background:linear-gradient(180deg,#f1ede6,#ede8df);color:#2a2824;font-family:var(--font);font-size:10px;line-height:1.35;letter-spacing:0;text-align:left;box-shadow:0 0 0 1px rgba(60,44,12,.07),0 1px 2px rgba(60,44,12,.08),0 22px 44px -24px rgba(60,44,12,.5);transform:translate(var(--x0),var(--y0)) rotate(var(--r0)) rotateY(0deg);transform-origin:0 50%;transition:transform .85s var(--ease) var(--dl,0s);will-change:transform;backface-visibility:hidden}
.ar-fan.open .ar-pg{transform:translate(var(--x1),var(--y1)) rotate(var(--r1)) rotateY(0deg)}
.ar-cover{z-index:5;--x0:140px;--y0:96px;--r0:-1.6deg;--xm:118px;--ym:96px;--x1:-4px;--y1:132px;--r1:-5deg}
.ar-list{z-index:2;--x0:146px;--y0:100px;--r0:1.4deg;--x1:262px;--y1:0px;--r1:-1.4deg}
.ar-sol{z-index:3;--x0:136px;--y0:102px;--r0:-.6deg;--x1:281px;--y1:88px;--r1:1.7deg;--dl:.03s}
.ar-table{z-index:4;--x0:143px;--y0:98px;--r0:.8deg;--x1:270px;--y1:178px;--r1:.3deg;--dl:.06s}
.ar-fan.open .ar-cover{z-index:0;animation:arTurn 1.25s both}
.ar-fan.still .ar-cover{animation:none}
.ar-fan.open .ar-table{box-shadow:0 0 0 1px rgba(60,44,12,.07),0 2px 4px rgba(60,44,12,.08),0 34px 60px -28px rgba(60,44,12,.55)}
@keyframes arTurn{
  0%{transform:translate(var(--x0),var(--y0)) rotate(var(--r0)) rotateY(0deg);z-index:5;animation-timing-function:cubic-bezier(.45,0,.75,.5)}
  38%{transform:translate(var(--xm),var(--ym)) rotate(var(--r0)) rotateY(89deg);z-index:5;animation-timing-function:step-end}
  39%{transform:translate(var(--xm),var(--ym)) rotate(var(--r0)) rotateY(89deg);z-index:0;animation-timing-function:cubic-bezier(.2,.75,.3,1)}
  100%{transform:translate(var(--x1),var(--y1)) rotate(var(--r1)) rotateY(0deg);z-index:0}
}
.at-freeze .ar-pg{transition:none!important;animation:none!important}
/* page furniture, as on the homepage: ring mark and name, gold caps label and month, footer with page numbers */
.ar-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ar-brand{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:-.02em;color:#1d1d1f}
.audit-tile .ar-logo{width:15px;height:15px;max-width:none;border-radius:0;box-shadow:none}
.ar-meta{display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.3}
.ar-meta b{font-size:7px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#9a7a37}
.ar-meta span{font-size:7.5px;color:#8a8478}
.ar-f{margin-top:auto;display:flex;justify-content:space-between;gap:8px;padding-top:9px;border-top:1px solid rgba(60,44,12,.13);font-size:6.3px;line-height:1.4;color:#8a8478;white-space:nowrap}
.ar-hd{display:block;margin-top:20px;font-family:Georgia,"Times New Roman",serif;font-size:19px;line-height:1.2;font-weight:400;letter-spacing:-.005em;color:#1f1d1a}
.ar-in{display:block;margin-top:5px;font-size:9.5px;line-height:1.4;color:#6b665c}
/* cover */
.ar-cv{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:30px}
.audit-tile .ar-ring{width:72px;height:72px;max-width:none;border-radius:0;box-shadow:none}
.ar-title{display:block;margin-top:20px;max-width:184px;font-family:Georgia,"Times New Roman",serif;font-size:20px;line-height:1.22;color:#1f1d1a}
.ar-subt{display:block;margin-top:10px;max-width:166px;font-size:9.5px;line-height:1.45;color:#6b665c}
.ar-prep{display:block;margin-top:auto;margin-bottom:16px;font-size:8.5px;line-height:1.6;color:#6b665c}
/* where things stand */
.ar-tb{margin-top:14px;font-size:10.5px;line-height:1.35}
.ar-tr{display:grid;grid-template-columns:28.5% 30% minmax(0,1fr);border-bottom:1px solid rgba(60,44,12,.11);color:#3a3731}
.ar-tr>span{padding:8px 6px 8px 0}
.ar-tr>span:first-child{font-weight:600;color:#1f1d1a}
.ar-tr.ar-th{border-bottom-color:rgba(60,44,12,.24)}
.ar-tr.ar-th>span{padding:0 6px 6px 0;font-size:8.5px;font-weight:600;color:#6b665c}
.ar-rt{display:inline-flex;align-items:baseline;gap:5px;font-weight:600;color:#1f1d1a}
.ar-rt::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;transform:translateY(-1px);box-shadow:inset 0 0 0 1.3px #b8913f}
.ar-rt-high::before{background:#c39d4c;box-shadow:none}
.ar-rt-mid::before{background:linear-gradient(90deg,#c39d4c 50%,transparent 50%)}
/* what I'd do, in order */
.ar-ol{margin-top:15px;display:flex;flex-direction:column;gap:11px}
.ar-li{position:relative;display:flex;flex-direction:column;gap:2px;padding-left:23px}
.ar-num{position:absolute;left:0;top:0;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:8px;font-weight:600;line-height:1;color:#7a5d22;box-shadow:inset 0 0 0 1px rgba(184,145,63,.7)}
.ar-li b{font-size:10.5px;font-weight:600;line-height:1.3;color:#1f1d1a}
.ar-ds{font-size:9.5px;line-height:1.35;color:#6b665c}
/* a solution page */
.ar-sol .ar-hd{font-size:16.5px}
.ar-n{color:#9a7a37}
.ar-blk{margin-top:11px}
.ar-blk b{display:block;font-size:8.5px;font-weight:600;color:#7a5d22}
.ar-blk span{display:block;margin-top:3px;font-size:9.5px;line-height:1.42;color:#3d3a34}
.ar-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:3px;padding-top:2px;border-top:1px solid rgba(60,44,12,.1)}

/* ---------- 3. where it sits: in a post it beats the article's own spacing rules; on a service page the last
   section's own bottom padding already makes the gap above it ---------- */
.article-body .audit-tile{margin:44px 0}
.sv-main .audit-tile{margin:0}

/* ---------- 4. reduced motion: the open roadmap, nothing moves, no Replay ---------- */
@media (prefers-reduced-motion:reduce){
  .ar-pg{transition:none}
  .ar-fan.open .ar-cover{animation:none}
  .at-replay{display:none}
}