/* FM Digital Solutions: Web design and custom work. Depends on tokens.css, global.css */
.wd-hero { padding-top: calc(var(--nav-h) + 5rem); padding-bottom: 4.5rem; border-bottom: 1px solid var(--border); background: radial-gradient(60% 80% at 85% 0%, rgba(107,61,150,.14), transparent 70%); }
.wd-eyebrow { display: flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 1rem; }
.wd-dot { width: 8px; height: 8px; border-radius: 50%; background: #6b3d96; box-shadow: 0 0 0 4px rgba(107,61,150,.2); }
.wd-h1 { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.75rem); line-height: 1.05; letter-spacing: -.035em; color: #fff; margin-bottom: 1.25rem; max-width: 18ch; text-wrap: balance; }
.wd-h2 { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.1; letter-spacing: -.03em; color: #fff; margin-bottom: 1.5rem; max-width: 24ch; text-wrap: balance; }
.wd-sub { color: var(--fg-muted); line-height: 1.7; max-width: 58ch; }
.wd-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2rem; }
.wd-btn { background: #6b3d96; }
.wd-btn:hover { background: #55307a; }
.wd-ghost { display: inline-flex; align-items: center; color: var(--fg); text-decoration: none; font-weight: 600; border: 1px solid var(--border); border-radius: 6px; padding: 10px 18px; transition: border-color .15s; }
.wd-ghost:hover { border-color: #6b3d96; }
.wd-section { padding-block: 4.5rem; border-bottom: 1px solid var(--border); }
.wd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.wd-cell { padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.wd-cell h3, .wd-step h3, .wd-price h3 { font-family: var(--font-head); font-size: 1.05rem; color: var(--fg); margin-bottom: .5rem; }
.wd-cell p, .wd-step p, .wd-price p { color: var(--fg-muted); font-size: .9rem; line-height: 1.6; }
.wd-num { display: block; font-family: var(--font-mono); font-size: 11px; color: #c4a4ea; margin-bottom: .75rem; }
.wd-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: s; }
.wd-step { padding: 1.5rem; border-left: 2px solid #6b3d96; background: var(--surface); border-radius: 0 10px 10px 0; }
.wd-step-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(107,61,150,.18); color: #c4a4ea; font-weight: 700; margin-bottom: .75rem; }
.wd-price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.wd-price { padding: 1.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.wd-price-alt { border-color: rgba(107,61,150,.5); }
.wd-tag { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #c4a4ea; background: rgba(107,61,150,.15); padding: .25rem .6rem; border-radius: 999px; margin-bottom: 1rem; }
.wd-note { margin-top: 1.25rem; color: var(--fg-muted); font-size: .9rem; }
.wd-why { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.wd-faq { display: grid; gap: .75rem; max-width: 760px; }
.wd-q { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.25rem; }
.wd-q summary { cursor: pointer; font-weight: 600; color: var(--fg); }
.wd-q p { margin-top: .75rem; color: var(--fg-muted); line-height: 1.65; font-size: .92rem; }
.wd-quote { border-bottom: 0; }
.wd-quote-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.wd-form { display: grid; gap: .5rem; padding: 1.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.wd-form label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-subtle); margin-top: .5rem; }
.wd-form input, .wd-form textarea { width: 100%; background: var(--bg, #0b0b12); border: 1px solid var(--border); border-radius: 6px; padding: 11px 12px; color: var(--fg); font: inherit; }
.wd-form input:focus, .wd-form textarea:focus { outline: none; border-color: #6b3d96; }
.wd-form .wd-btn { justify-self: start; margin-top: 1rem; }
.wd-fb { margin-top: .75rem; font-size: .9rem; }
.wd-fb.ok { color: #c4a4ea; }
.wd-fb.err { color: #fca5a5; }
@media (max-width: 960px) { .wd-grid, .wd-steps { grid-template-columns: repeat(2, 1fr); } .wd-quote-inner { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .wd-grid, .wd-steps, .wd-price-grid { grid-template-columns: 1fr; } }

.wd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.wd-col { padding: 1.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.wd-col.yes { border-color: #6b3d96; }
.wd-col h3 { font-family: var(--font-head); color: #fff; margin-bottom: .75rem; }
.wd-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; color: var(--fg-muted); font-size: .92rem; line-height: 1.55; }
.wd-col li { position: relative; padding-left: 1.2rem; }
.wd-col li:before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: #6b3d96; }
.wd-col.no li:before { background: var(--fg-subtle); }
.wd-proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.wd-proof a { display: block; padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; text-decoration: none; transition: border-color .2s; }
.wd-proof a:hover { border-color: #6b3d96; }
.wd-proof h3 { font-family: var(--font-head); color: #fff; margin-bottom: .4rem; }
.wd-proof p { color: var(--fg-muted); font-size: .9rem; line-height: 1.6; margin-bottom: .75rem; }
.wd-proof span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6b3d96; }
@media (max-width: 760px) { .wd-two, .wd-proof { grid-template-columns: 1fr; } }

/* How a project runs: two-process tabs */
.wd-tablist { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 1.75rem; flex-wrap: wrap; }
.wd-tab { appearance: none; border: 0; background: transparent; color: var(--fg-muted); font: inherit; font-weight: 600; padding: .65rem 1.15rem; border-radius: 7px; cursor: pointer; transition: background .2s, color .2s; }
.wd-tab:hover { color: #fff; }
.wd-tab.is-on { background: #6b3d96; color: #fff; box-shadow: 0 0 18px rgba(107,61,150,.45); }
.wd-tab:focus-visible { outline: 2px solid #c4a4ea; outline-offset: 2px; }
.wd-pane[hidden] { display: none; }
.wd-pane.is-on { animation: wd-fade .35s ease; }
@keyframes wd-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wd-pane-lead { color: var(--fg-muted); margin-bottom: 1.25rem; }
.wd-pane .wd-steps { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .wd-pane .wd-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .wd-pane .wd-steps { grid-template-columns: 1fr; } .wd-tablist { display: flex; } .wd-tab { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .wd-pane.is-on { animation: none; } }

/* Steps as one moving row */
.wd-marq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.wd-mtrack { display: flex; gap: 1rem; width: max-content; animation: wd-slide 120s linear infinite; }
.wd-pane .wd-steps { display: flex; gap: 1rem; grid-template-columns: none; margin: 0; padding: 0; list-style: none; }
.wd-pane .wd-step { flex: 0 0 300px; min-height: 190px; }
@keyframes wd-slide { from { transform: translateX(0); } to { transform: translateX(calc(-25% - .25rem)); } }
@media (max-width: 640px) { .wd-pane .wd-step { flex-basis: 250px; } }
@media (prefers-reduced-motion: reduce) { .wd-marq { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .wd-mtrack { animation: none; } .wd-pane .wd-steps[aria-hidden] { display: none; } }

/* Final tile in the row: call to action */
.wd-pane .wd-step.wd-cta-tile { display: flex; flex-direction: column; justify-content: space-between; gap: .75rem; border: 0; background: linear-gradient(135deg, #8b4fd0 0%, #c04fa8 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 10px 40px rgba(155,79,208,.45); }
.wd-cta-tile h3 { color: #fff; font-family: var(--font-head); font-size: 1.25rem; margin: 0; }
.wd-cta-tile p { color: rgba(255,255,255,.88); margin: 0; }
.wd-cta-tile a { align-self: flex-start; background: #fff; color: #3a1b57; font-weight: 700; text-decoration: none; padding: .65rem 1.1rem; border-radius: 6px; animation: wd-pulse 2s ease-in-out infinite; }
@keyframes wd-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 50% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .wd-cta-tile a { animation: none; } }

/* Heading and tabs on one line */
.wd-how-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.wd-how-head .wd-h2 { margin: 0; max-width: none; }
.wd-how-head .wd-tablist { margin: 0; }

/* Draggable moving row */
.wd-mtrack { animation: none !important; will-change: transform; }
.wd-marq { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.wd-marq.is-drag { cursor: grabbing; }
.wd-marq a { -webkit-user-drag: none; }
.wd-hint { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: 1.1rem 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-subtle); transition: opacity .4s; }
.wd-hint svg { animation: wd-nudge 1.8s ease-in-out infinite; color: #c4a4ea; }
.wd-hint.is-gone { opacity: 0; }
@keyframes wd-nudge { 0%, 100% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .wd-hint svg { animation: none; } }

/* Call to action pinned at the end of the row; the steps loop and fade out beneath it */
.wd-row { display: flex; align-items: stretch; gap: 1.25rem; }
.wd-row .wd-marq { flex: 1 1 auto; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 88%, transparent 100%); }
.wd-cta-fixed { flex: 0 0 380px; display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: 2rem; border-radius: 14px; background: linear-gradient(135deg, #8b4fd0 0%, #c04fa8 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 12px 44px rgba(155,79,208,.5); }
.wd-cta-fixed h3 { font-family: var(--font-head); font-size: 1.5rem; line-height: 1.15; color: #fff; margin: 0; }
.wd-cta-fixed p { color: rgba(255,255,255,.9); margin: 0; line-height: 1.55; }
.wd-cta-fixed a { align-self: flex-start; background: #fff; color: #3a1b57; font-weight: 700; text-decoration: none; padding: .8rem 1.35rem; border-radius: 6px; animation: wd-pulse 2s ease-in-out infinite; }
@media (max-width: 900px) { .wd-row { flex-direction: column; } .wd-cta-fixed { flex-basis: auto; } .wd-row .wd-marq { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } }
@media (prefers-reduced-motion: reduce) { .wd-cta-fixed a { animation: none; } }

/* Narrower CTA, and equal heights between the moving tiles and the CTA */
.wd-row { align-items: stretch; }
.wd-row .wd-marq { display: flex; align-items: stretch; }
.wd-row .wd-mtrack { align-items: stretch; }
.wd-row .wd-pane .wd-steps, .wd-pane .wd-steps { align-items: stretch; }
.wd-pane .wd-step { min-height: 210px; }
.wd-cta-fixed { flex-basis: 290px; min-height: 210px; padding: 1.6rem; box-sizing: border-box; }
.wd-cta-fixed h3 { font-size: 1.3rem; }
@media (max-width: 900px) { .wd-cta-fixed { flex-basis: auto; min-height: 0; } }

/* Fix: the moving track and its step lists must never shrink, or tiles overlap and text gets cut off */
.wd-row .wd-marq .wd-mtrack { flex: 0 0 auto; width: max-content; }
.wd-pane .wd-steps { flex: 0 0 auto; width: max-content; }
.wd-pane .wd-step { flex: 0 0 300px; width: 300px; box-sizing: border-box; }
@media (max-width: 640px) { .wd-pane .wd-step { flex-basis: 250px; width: 250px; } }

/* Build cards: flip in, and decode the title like matrix code */
.wd-grid { perspective: 1100px; }
.wd-grid.wd-anim .wd-cell { opacity: 0; transform: rotateX(-82deg) translateY(24px); transform-origin: 50% 0; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .5s ease, border-color .25s, box-shadow .25s; will-change: transform; }
.wd-grid.wd-anim .wd-cell.is-in { opacity: 1; transform: none; }
.wd-cell:hover { border-color: rgba(196,164,234,.55); box-shadow: 0 0 28px rgba(107,61,150,.28); }
.wd-cell h3.is-scr, .wd-cell .wd-num.is-scr { font-family: inherit; font-size: inherit; letter-spacing: inherit; color: #c4a4ea; text-shadow: 0 0 12px rgba(196,164,234,.65); }
.wd-cell h3, .wd-cell .wd-num { transition: color .35s ease, text-shadow .35s ease; }
@media (prefers-reduced-motion: reduce) { .wd-grid.wd-anim .wd-cell { opacity: 1; transform: none; transition: none; } }

/* Once a tile has been hovered or clicked, its title stays purple */
.wd-cell.is-lit h3 { color: #c4a4ea; text-shadow: 0 0 14px rgba(196,164,234,.5); }
.wd-cell.is-lit { border-color: rgba(196,164,234,.45); }

/* What to expect from me */
.wd-me { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.25rem; align-items: stretch; }
.wd-about { padding: 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; gap: 1rem; }
.wd-about h3 { font-family: var(--font-head); font-size: 1.5rem; color: #fff; margin: 0; }
.wd-about p { color: var(--fg-muted); line-height: 1.7; margin: 0; }
.wd-about-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: auto; padding-top: .5rem; }
.wd-expect { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.wd-expect li { display: grid; gap: .25rem; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid #6b3d96; border-radius: 0 10px 10px 0; }
.wd-expect b { color: #fff; font-family: var(--font-head); }
.wd-expect span { color: var(--fg-muted); font-size: .92rem; line-height: 1.55; }
@media (max-width: 860px) { .wd-me { grid-template-columns: 1fr; } }

/* Second hover: the tile turns green and the scramble is done */
.wd-cell h3.is-scr.is-scr-g { color: #7fdc88; text-shadow: 0 0 12px rgba(127,220,136,.6); }
.wd-cell.is-lit2 h3 { color: #7fdc88; text-shadow: 0 0 14px rgba(127,220,136,.45); }
.wd-cell.is-lit2 { border-color: rgba(46,158,58,.55); box-shadow: 0 0 26px rgba(46,158,58,.18); }

/* Glowing line that runs round the tile edge, one second after hover */
@property --wd-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.wd-cell { position: relative; --glow: #c4a4ea; }
.wd-cell.is-lit2 { --glow: #7fdc88; }
.wd-cell::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: conic-gradient(from var(--wd-a), transparent 0 62%, var(--glow) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 7px var(--glow)); }
.wd-cell.is-run::before { opacity: 1; animation: wd-orbit 2.4s linear infinite; }
@keyframes wd-orbit { to { --wd-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .wd-cell.is-run::before { animation: none; opacity: 0; } }

/* Expect section: no stretched dead space in the about card */
.wd-me { align-items: start; }
.wd-about-cta { margin-top: .75rem; }

.wd-expect-wrap{display:flex;flex-direction:column;gap:.9rem}
.wd-expect-h{margin:0;font-size:1.05rem;font-weight:700;opacity:.9}
.wd-me-note{margin:.25rem 0 0;font-size:.95rem;line-height:1.6;opacity:.8}

/* Expect cards effect */
.wd-expect{counter-reset:ex}
.wd-expect li{position:relative;counter-increment:ex;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.wd-expect li::after{content:"0" counter(ex);position:absolute;top:.7rem;right:1rem;font:700 1.5rem var(--font-head);color:rgba(107,61,150,.35);transition:color .35s,transform .35s}
.wd-expect li::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;opacity:0;transition:opacity .35s;background:conic-gradient(from var(--wd-a),transparent 0 70%,#6b3d96,#fff,#6b3d96 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.wd-expect li:hover{transform:translateY(-4px) translateX(4px);box-shadow:0 10px 30px rgba(107,61,150,.28)}
.wd-expect li:hover::before{opacity:1;animation:wd-spin 2.4s linear infinite}
.wd-expect li:hover::after{color:#6b3d96;transform:scale(1.15)}
@keyframes wd-spin{to{--wd-a:360deg}}
.wd-expect.ex-anim li{opacity:0;transform:perspective(700px) rotateX(-70deg) translateY(20px);transform-origin:top}
.wd-expect.ex-anim.ex-in li{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.wd-expect.ex-anim.ex-in li:hover{transform:translateY(-4px) translateX(4px)}
@media (prefers-reduced-motion:reduce){.wd-expect.ex-anim li{opacity:1;transform:none}.wd-expect li:hover::before{animation:none}}
.wd-expect{grid-template-columns:1fr!important}

/* Expect deck (accordion) */
.ex-deck{display:flex;flex-direction:column;gap:10px}
.ex-card{position:relative;border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.ex-card.is-active{border-color:rgba(107,61,150,.7);box-shadow:0 0 32px rgba(107,61,150,.22)}
.ex-card:not(.is-active):hover{border-color:rgba(107,61,150,.45)}
.ex-rail{display:flex;align-items:center;gap:14px;width:100%;padding:15px 18px;background:transparent;border:0;color:var(--fg);cursor:pointer;text-align:left;font:inherit;position:relative}
.ex-n{font:600 12px ui-monospace,Menlo,monospace;color:#c9a6ee;letter-spacing:.08em}
.ex-t{font-weight:600;font-size:1rem;color:var(--fg-muted)}
.ex-card.is-active .ex-t{color:var(--fg)}
.ex-rail::after{content:"+";margin-left:auto;font-size:1.4rem;line-height:1;color:#c9a6ee;transition:transform .35s}
.ex-card.is-active .ex-rail::after{transform:rotate(45deg)}
.ex-rail::before{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,#6b3d96,#c9a6ee);box-shadow:0 0 10px #6b3d96;opacity:0}
.ex-card.is-arming:not(.is-active) .ex-rail::before{opacity:1;animation:ex-load .7s linear forwards}
@keyframes ex-load{from{width:0}to{width:100%}}
.ex-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.ex-card.is-active .ex-body{grid-template-rows:1fr}
.ex-inner{min-height:0;overflow:hidden;padding:0 18px}
.ex-card.is-active .ex-inner{padding:0 18px 18px}
.ex-inner p{margin:0;color:var(--fg-muted);font-size:.95rem;line-height:1.6}
@media (prefers-reduced-motion:reduce){.ex-card,.ex-body{transition:none!important}}

/* Proof cards: same style as the Services page */
.wd-work{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.wd-w{--ac:#2e9e3a;display:block;padding:1.75rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;text-decoration:none;color:inherit;transition:border-color .2s}
.wd-fmc{--ac:#F97316}
.wd-w:hover{border-color:var(--ac)}
.wd-w h3{font-family:var(--font-head);color:#fff;margin:0 0 .5rem}
.wd-w p{color:var(--fg-muted);font-size:.92rem;line-height:1.6;margin:0 0 1rem}
.wd-more{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ac)}
@media (max-width:640px){.wd-work{grid-template-columns:1fr}}