/* Service page: a self-contained premium editorial layer. */
.yfd-services-page {
    --yfd-ink: #08080a;
    --yfd-surface: #101014;
    --yfd-surface-raised: #16161b;
    --yfd-line: rgba(255,255,255,.14);
    --yfd-muted: #a7a7ae;
    --yfd-gradient: linear-gradient(135deg, #FFB51B 0%, #FC930E 20%, #FC5A17 40%, #FB442C 60%, #EE1C78 75%, #BE146C 90%, #8C085E 100%);
    background: var(--yfd-ink);
    color: #f7f7f8;
    overflow: clip;
}
.yfd-services-page *, .yfd-services-page *::before, .yfd-services-page *::after { box-sizing: border-box; }
.yfd-services-page h1, .yfd-services-page h2, .yfd-services-page h3, .yfd-services-page p { margin-top: 0; }
.yfd-services-page a { color: inherit; }
.yfd-services-page em { font-style: normal; background: var(--yfd-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.yfd-eyebrow { align-items: center; color: #d7d7db; display: flex; font-size: 11px; font-weight: 700; gap: 10px; letter-spacing: .16em; margin-bottom: 24px; text-transform: uppercase; }
.yfd-eyebrow span { background: var(--yfd-gradient); display: inline-block; height: 8px; transform: rotate(45deg); width: 8px; }

/* Hero */
.yfd-service-hero { isolation: isolate; min-height: min(730px, 79vw); overflow: hidden; padding: clamp(92px, 10vw, 152px) 0 clamp(96px, 11vw, 168px); position: relative; }
.yfd-service-hero::before { background: radial-gradient(circle at 78% 40%, rgba(238,28,120,.2), transparent 19%), radial-gradient(circle at 60% 76%, rgba(252,90,23,.15), transparent 25%), radial-gradient(circle at 24% 20%, rgba(255,181,27,.07), transparent 24%); content: ''; inset: 0; pointer-events: none; position: absolute; z-index: -2; }
.yfd-service-hero::after { background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size: 72px 72px; content: ''; inset: 0; mask-image: linear-gradient(90deg, black 0%, transparent 85%); opacity: .55; pointer-events: none; position: absolute; z-index: -1; }
.yfd-hero-layout { align-items: center; display: grid; gap: 34px; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); min-height: 440px; }
.yfd-hero-copy { max-width: 760px; position: relative; z-index: 2; }
.yfd-hero-copy h1 { color: #fff; font-size: clamp(43px, 5.25vw, 82px); font-weight: 600; letter-spacing: -.065em; line-height: .99; margin-bottom: 28px; }
.yfd-hero-lede { color: var(--yfd-muted); font-size: 17px; line-height: 1.65; max-width: 575px; }
.yfd-hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 28px; margin-top: 37px; }
.yfd-primary-link, .yfd-outline-link { align-items: center; background: var(--yfd-gradient); color: #fff !important; display: inline-flex; font-size: 13px; font-weight: 700; gap: 12px; justify-content: center; letter-spacing: .03em; min-height: 54px; padding: 0 23px; position: relative; text-decoration: none; transition: box-shadow .3s ease, transform .3s ease; }
.yfd-primary-link:hover, .yfd-primary-link:focus-visible { box-shadow: 0 16px 35px rgba(238,28,120,.23); color: #fff; transform: translateY(-3px); }
.yfd-text-link { align-items: center; border-bottom: 1px solid rgba(255,255,255,.35); display: inline-flex; font-size: 13px; font-weight: 600; gap: 12px; padding: 8px 0; text-decoration: none; transition: border-color .3s ease, color .3s ease; }
.yfd-text-link span { font-size: 18px; transition: transform .3s ease; }.yfd-text-link:hover { border-color: #ffb51b; color: #ffb51b; }.yfd-text-link:hover span { transform: translateY(4px); }
.yfd-hero-art { height: 440px; margin: 0 auto; max-width: 500px; position: relative; width: 100%; }
.yfd-orbit { border: 1px solid rgba(255,255,255,.14); border-radius: 50%; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%) rotate(-25deg); }
.yfd-orbit-one { height: 325px; width: 440px; }.yfd-orbit-two { border-color: rgba(255,121,52,.34); height: 210px; transform: translate(-50%,-50%) rotate(42deg); width: 350px; }
.yfd-orbit-one::before, .yfd-orbit-two::before { background: var(--yfd-gradient); border-radius: 50%; box-shadow: 0 0 17px #fc5a17; content: ''; height: 9px; left: 16%; position: absolute; top: 6%; width: 9px; }
.yfd-orbit-two::before { left: auto; right: 18%; top: 91%; }
.yfd-core { align-items: center; background: radial-gradient(circle at 28% 20%, rgba(255,255,255,.25), transparent 32%), var(--yfd-gradient); border: 1px solid rgba(255,255,255,.7); border-radius: 50%; box-shadow: 0 0 0 14px rgba(252,90,23,.04), 0 0 75px rgba(238,28,120,.27); display: flex; flex-direction: column; height: 154px; justify-content: center; left: 50%; position: absolute; text-align: center; top: 50%; transform: translate(-50%,-50%); width: 154px; }
.yfd-core span { font-size: 29px; font-weight: 700; letter-spacing: -.08em; line-height: 1; }.yfd-core small { font-size: 8px; font-weight: 700; letter-spacing: .13em; line-height: 1.35; margin-top: 10px; text-transform: uppercase; }
.yfd-node { align-items: center; background: rgba(14,14,18,.8); border: 1px solid rgba(255,255,255,.16); display: flex; font-size: 10px; gap: 8px; letter-spacing: .08em; padding: 10px 12px; position: absolute; backdrop-filter: blur(12px); }
.yfd-node b { font-size: 8px; font-weight: 700; letter-spacing: .1em; }.yfd-node-one { left: 4%; top: 15%; }.yfd-node-two { right: 0; top: 28%; }.yfd-node-three { bottom: 7%; left: 17%; }
.yfd-interface-fragment { background: rgba(20,20,26,.83); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 18px 40px rgba(0,0,0,.25); position: absolute; backdrop-filter: blur(10px); }
.yfd-fragment-a { bottom: 20%; display: grid; gap: 6px; padding: 13px; right: 8%; transform: rotate(-10deg); width: 115px; }.yfd-fragment-a i { background: rgba(255,255,255,.3); display: block; height: 3px; width: 70%; }.yfd-fragment-a i:nth-child(2) { width: 92%; }.yfd-fragment-a i:nth-child(3) { width: 48%; }.yfd-fragment-a span { background: var(--yfd-gradient); height: 22px; margin-top: 4px; width: 100%; }
.yfd-fragment-b { left: 10%; padding: 15px 16px; top: 47%; transform: rotate(8deg); }.yfd-fragment-b small { color: #adadb3; display: block; font-size: 8px; letter-spacing: .15em; margin-bottom: 13px; }.yfd-fragment-b strong { color: #fff; font-size: 18px; letter-spacing: -.06em; line-height: .9; }

/* Editorial service cards */
.yfd-service-system { background: #0b0b0e; overflow: hidden; padding: clamp(88px, 11vw, 162px) 0; position: relative; }.yfd-service-system::after { background: radial-gradient(circle, rgba(252,90,23,.13) 0, transparent 64%); content: ''; height: 560px; pointer-events: none; position: absolute; right: -270px; top: 22%; width: 560px; }
.yfd-section-heading { display: grid; gap: 35px; grid-template-columns: minmax(160px,.65fr) minmax(0,1.35fr); margin-bottom: clamp(55px, 7vw, 100px); position: relative; z-index: 1; }.yfd-section-heading .yfd-eyebrow { margin-bottom: 0; padding-top: 9px; }.yfd-section-heading h2, .yfd-journey-intro h2 { color: #f7f7f8; font-size: clamp(38px, 4.4vw, 66px); font-weight: 600; letter-spacing: -.06em; line-height: .98; margin-bottom: 22px; }.yfd-section-heading div > p { color: var(--yfd-muted); font-size: 16px; line-height: 1.65; margin-bottom: 0; max-width: 500px; }
.yfd-services-track { display: grid; gap: 26px; position: relative; z-index: 1; }.yfd-services-track::before { background: linear-gradient(180deg, transparent, rgba(255,255,255,.22) 8%, rgba(255,255,255,.22) 92%, transparent); content: ''; height: 95%; left: 50%; position: absolute; top: 3%; width: 1px; }
.yfd-service-card { --accent: #fc5a17; background: linear-gradient(110deg, rgba(255,255,255,.045), transparent 30%), #131318; border: 1px solid var(--yfd-line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, .82fr); min-height: 475px; overflow: hidden; padding: 30px; position: relative; transition: border-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.2,.75,.25,1); }
.yfd-service-card::before { background: radial-gradient(420px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,.11), transparent 35%); content: ''; inset: 0; opacity: 0; pointer-events: none; transition: opacity .35s ease; }.yfd-service-card::after { background: var(--yfd-gradient); content: ''; height: 2px; left: 0; position: absolute; top: 0; transform: scaleX(0); transform-origin: left; transition: transform .45s ease; width: 100%; }.yfd-service-card:hover { border-color: rgba(255,181,27,.48); box-shadow: 0 25px 60px rgba(0,0,0,.34), 0 0 50px rgba(238,28,120,.07); transform: translateY(-6px); }.yfd-service-card:hover::before { opacity: 1; }.yfd-service-card:hover::after { transform: scaleX(1); }
.yfd-service-card--strategy { --accent: #ffb51b; }.yfd-service-card--design { --accent: #fc7950; grid-template-columns: minmax(290px,.82fr) minmax(0,1fr); }.yfd-service-card--development { --accent: #ee1c78; }.yfd-service-card--cloud { --accent: #be146c; grid-template-columns: minmax(290px,.82fr) minmax(0,1fr); }.yfd-service-card--consulting { --accent: #fc930e; }
.yfd-card-top { grid-area: 1 / 1 / 2 / -1; align-items: flex-start; display: flex; justify-content: space-between; left: 30px; position: absolute; right: 30px; top: 29px; }/* #696970 measured 3.4:1 on the card, under the 4.5:1 minimum; #8a8a92 is 5.4:1 and still reads as muted next to the gradient it turns into on hover. */ .yfd-service-number { color: #8a8a92; font-size: 13px; font-weight: 700; letter-spacing: .08em; transition: color .35s ease, text-shadow .35s ease; }.yfd-service-card:hover .yfd-service-number { color: var(--accent); text-shadow: 0 0 18px color-mix(in srgb, var(--accent), transparent 25%); }.yfd-card-label { color: #8d8d94; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.yfd-service-content { grid-column: 1; grid-row: 1; align-self: end; max-width: 515px; padding: 68px 10px 4px 1px; position: relative; z-index: 2; }.yfd-service-card--design .yfd-service-content, .yfd-service-card--cloud .yfd-service-content { grid-column: 2; }.yfd-card-kicker { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .15em; margin-bottom: 13px; text-transform: uppercase; }.yfd-service-content h3 { font-size: clamp(34px, 3.55vw, 54px); font-weight: 600; letter-spacing: -.065em; line-height: .95; margin-bottom: 17px; }.yfd-service-content h3 a { text-decoration: none; }.yfd-service-content h3 span { color: var(--accent); }.yfd-card-summary { color: #adadb3; font-size: 14px; line-height: 1.55; margin-bottom: 22px; max-width: 445px; }
.yfd-service-list { display: flex; flex-wrap: wrap; gap: 7px 8px; list-style: none; margin: 0 0 25px; padding: 0; }.yfd-service-list li { border: 1px solid rgba(255,255,255,.16); color: #d2d2d5; font-size: 10px; line-height: 1.2; padding: 7px 9px; }.yfd-service-list--long li { font-size: 9px; padding: 6px 8px; }.yfd-explore { align-items: center; border-bottom: 1px solid rgba(255,255,255,.25); display: inline-flex; font-size: 11px; font-weight: 700; gap: 20px; letter-spacing: .04em; padding-bottom: 8px; text-decoration: none; transition: border-color .3s ease; }.yfd-explore span { color: var(--accent); font-size: 20px; line-height: 9px; transition: transform .3s ease; }.yfd-explore:hover { border-color: var(--accent); }.yfd-explore:hover span { transform: translateX(6px); }
.yfd-card-art { grid-column: 2; grid-row: 1; align-self: stretch; min-height: 340px; overflow: hidden; position: relative; }.yfd-service-card--design .yfd-card-art, .yfd-service-card--cloud .yfd-card-art { grid-column: 1; }.yfd-card-art::after { background: radial-gradient(circle, color-mix(in srgb, var(--accent), transparent 65%), transparent 67%); border-radius: 50%; content: ''; height: 330px; position: absolute; right: -70px; top: 45px; width: 330px; }
/* Service-specific, CSS-rendered visual language */
.yfd-brand-grid { background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px); background-size: 28px 28px; border: 1px solid rgba(255,255,255,.17); height: 205px; position: absolute; right: 8%; top: 19%; transform: rotate(-9deg); width: 250px; }.yfd-brand-circle { align-items: center; background: var(--yfd-gradient); border-radius: 50%; box-shadow: 0 0 48px rgba(255,181,27,.27); color: #fff; display: flex; font-size: 26px; font-weight: 700; height: 112px; justify-content: center; left: 17%; letter-spacing: -.1em; position: absolute; top: 37%; width: 112px; z-index: 1; }.yfd-brand-line { background: #fff; height: 1px; position: absolute; transform: rotate(-28deg); width: 174px; z-index: 2; }.yfd-brand-line-one { left: 12%; top: 22%; }.yfd-brand-line-two { background: var(--accent); bottom: 20%; right: 9%; width: 136px; }.yfd-art-brand small { bottom: 14%; color: #d7d7d7; font-size: 9px; font-weight: 700; letter-spacing: .14em; line-height: 1.4; position: absolute; right: 10%; z-index: 2; }
.yfd-screen { background: #1b1b22; border: 1px solid rgba(255,255,255,.24); box-shadow: 0 22px 35px rgba(0,0,0,.3); position: absolute; }.yfd-screen-back { height: 220px; left: 5%; top: 25%; transform: rotate(-11deg); width: 157px; }.yfd-screen-back i { background: rgba(255,255,255,.13); display: block; height: 8px; margin: 17px; }.yfd-screen-back i:first-child { background: var(--accent); height: 46px; }.yfd-screen-front { height: 275px; right: 14%; top: 12%; transform: rotate(8deg); width: 190px; z-index: 2; }.yfd-screen-front b { background: var(--yfd-gradient); display: block; height: 78px; margin: 13px; }.yfd-screen-front span, .yfd-screen-front small, .yfd-screen-front em { background: rgba(255,255,255,.18); display: block; height: 7px; margin: 12px 13px; }.yfd-screen-front small { width: 67%; }.yfd-screen-front em { background: var(--accent); height: 28px; margin-top: 21px; }.yfd-design-connector { border: 1px dashed var(--accent); border-radius: 50%; height: 265px; left: 16%; position: absolute; top: 9%; width: 265px; }
.yfd-code-window { background: #111117; border: 1px solid rgba(255,255,255,.24); box-shadow: 0 22px 35px rgba(0,0,0,.36); font-family: Consolas, monospace; left: 7%; padding: 15px 19px 23px; position: absolute; top: 21%; transform: rotate(-5deg); width: min(335px, 90%); z-index: 2; }.yfd-code-window header { display: flex; gap: 5px; margin-bottom: 22px; }.yfd-code-window header i { background: #74747a; border-radius: 50%; height: 6px; width: 6px; }.yfd-code-window header i:first-child { background: #fc5a17; }.yfd-code-window p { color: #d7d7da; font-size: 12px; margin-bottom: 8px; }.yfd-code-window b { color: #ffb51b; font-weight: 500; }.yfd-code-window p span { color: #ee1c78; }.yfd-code-window p em { color: #ffb51b; }.yfd-code-indent { padding-left: 18px; }.yfd-mobile-device { background: #0d0d12; border: 1px solid rgba(255,255,255,.34); border-radius: 18px; bottom: 7%; height: 240px; padding: 13px 10px; position: absolute; right: 10%; transform: rotate(8deg); width: 120px; }.yfd-mobile-device div { background: var(--yfd-gradient); border-radius: 9px; height: 98px; margin-bottom: 15px; }.yfd-mobile-device span { background: rgba(255,255,255,.21); display: block; height: 6px; margin-bottom: 9px; }.yfd-mobile-device span:last-child { width: 62%; }
.yfd-cloud-shape { filter: drop-shadow(0 0 25px rgba(190,20,108,.42)); height: 170px; left: 15%; position: absolute; top: 24%; width: 250px; z-index: 2; }.yfd-cloud-shape span { background: var(--yfd-gradient); border-radius: 50%; bottom: 10px; height: 110px; position: absolute; width: 110px; }.yfd-cloud-shape span:nth-child(1) { left: 0; }.yfd-cloud-shape span:nth-child(2) { bottom: 36px; left: 68px; }.yfd-cloud-shape span:nth-child(3) { right: 0; }.yfd-cloud-shape::after { background: var(--yfd-gradient); bottom: 10px; content: ''; height: 70px; left: 44px; position: absolute; width: 168px; }.yfd-network-line { background: linear-gradient(90deg, transparent, var(--accent), transparent); height: 1px; position: absolute; transform-origin: left; z-index: 3; }.yfd-network-line-one { left: 8%; top: 18%; transform: rotate(32deg); width: 180px; }.yfd-network-line-two { bottom: 23%; right: 4%; transform: rotate(-23deg); width: 180px; }.yfd-network-node { background: #fff; border-radius: 50%; box-shadow: 0 0 13px var(--accent); height: 10px; position: absolute; width: 10px; z-index: 3; }.yfd-network-node-one { left: 7%; top: 16%; }.yfd-network-node-two { right: 4%; top: 34%; }.yfd-network-node-three { bottom: 17%; right: 17%; }.yfd-data-readout { bottom: 14%; color: #fff; font-size: 31px; font-weight: 600; letter-spacing: -.08em; position: absolute; right: 7%; z-index: 4; }.yfd-data-readout span { color: var(--accent); font-size: 14px; }.yfd-data-readout small { color: #aaaab1; display: block; font-size: 8px; letter-spacing: .15em; margin-top: 2px; }
.yfd-document { background: rgba(23,23,29,.86); border: 1px solid rgba(255,255,255,.28); height: 235px; position: absolute; width: 175px; }.yfd-document-back { right: 13%; top: 19%; transform: rotate(11deg); }.yfd-document-main { left: 17%; padding: 25px 20px; top: 16%; transform: rotate(-6deg); z-index: 2; }.yfd-document-main i { background: rgba(255,255,255,.24); display: block; height: 6px; margin-bottom: 11px; }.yfd-document-main i:nth-child(2) { width: 69%; }.yfd-document-main i:nth-child(3) { width: 84%; }.yfd-document-main span { background: var(--yfd-gradient); display: block; height: 61px; margin-top: 20px; }.yfd-document-main b { border: 1px solid #ffb51b; color: #ffb51b; display: inline-block; font-size: 9px; letter-spacing: .12em; margin-top: 17px; padding: 6px; transform: rotate(-9deg); }.yfd-document-mark { color: rgba(255,255,255,.1); font-size: 115px; font-weight: 700; letter-spacing: -.1em; position: absolute; right: 7%; top: 13%; z-index: 3; }
.yfd-service-card:nth-child(even) .yfd-card-art::after { left: -90px; right: auto; }

/* Connected lifecycle */
.yfd-journey-section { background: #101015; overflow: hidden; padding: clamp(85px, 11vw, 158px) 0; position: relative; }.yfd-journey-section::before { background: radial-gradient(circle at 9% 60%, rgba(255,181,27,.1), transparent 25%), radial-gradient(circle at 92% 23%, rgba(238,28,120,.14), transparent 27%); content: ''; inset: 0; pointer-events: none; position: absolute; }.yfd-journey-intro { margin-left: auto; max-width: 720px; position: relative; z-index: 1; }.yfd-journey-intro > p:last-child { color: var(--yfd-muted); font-size: 16px; line-height: 1.7; max-width: 610px; }
.yfd-lifecycle { counter-reset: lifecycle; display: grid; gap: 0; grid-template-columns: repeat(6, 1fr); list-style: none; margin: clamp(58px, 7vw, 104px) 0 68px; padding: 0; position: relative; z-index: 1; }.yfd-lifecycle::before { background: linear-gradient(90deg, #ffb51b, #fc5a17 38%, #ee1c78 74%, #8c085e); content: ''; height: 1px; left: 4%; position: absolute; right: 4%; top: 22px; }.yfd-lifecycle li { padding: 0 8px; position: relative; }.yfd-lifecycle li::before { background: #101015; border: 1px solid #ffc15c; border-radius: 50%; content: ''; display: block; height: 45px; margin-bottom: 17px; position: relative; width: 45px; z-index: 1; }.yfd-lifecycle li:nth-child(3)::before, .yfd-lifecycle li:nth-child(4)::before { border-color: #fc5a17; }.yfd-lifecycle li:nth-child(5)::before, .yfd-lifecycle li:nth-child(6)::before { border-color: #ee1c78; }.yfd-lifecycle span { color: #babac1; font-size: 10px; left: 20px; position: absolute; top: 15px; z-index: 2; }.yfd-lifecycle strong { color: #fff; display: block; font-size: 15px; letter-spacing: -.03em; line-height: 1.1; }.yfd-lifecycle small { color: #909098; display: block; font-size: 10px; margin-top: 5px; }
.yfd-principles { border-top: 1px solid var(--yfd-line); display: grid; gap: 30px; grid-template-columns: 1fr 1fr auto; padding-top: 34px; position: relative; z-index: 1; }.yfd-principles > div { padding-right: 25px; }.yfd-principles > div + div { border-left: 1px solid var(--yfd-line); padding-left: 30px; }.yfd-principles span { color: #fc7950; font-size: 10px; font-weight: 700; letter-spacing: .12em; }.yfd-principles h3 { color: #f6f6f7; font-size: 18px; font-weight: 600; letter-spacing: -.04em; margin: 10px 0 8px; }.yfd-principles p { color: var(--yfd-muted); font-size: 13px; line-height: 1.6; margin-bottom: 0; }.yfd-outline-link { align-self: center; background: transparent; border: 1px solid rgba(255,255,255,.24); min-height: 48px; white-space: nowrap; }.yfd-outline-link span { color: #ffb51b; font-size: 20px; }.yfd-outline-link:hover { border-color: #fc5a17; color: #fff; transform: translateY(-3px); }

/* Metrics */
.yfd-expertise-section { background: #0b0b0e; padding: clamp(85px, 11vw, 155px) 0; }.yfd-metrics-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }.yfd-metric { align-items: center; background: #141419; border: 1px solid var(--yfd-line); display: flex; flex-direction: column; min-height: 290px; padding: 34px 16px; position: relative; text-align: center; transition: background .35s ease, border-color .35s ease, transform .35s ease; }.yfd-metric::before { background: radial-gradient(circle at 50% 30%, rgba(238,28,120,.15), transparent 55%); content: ''; inset: 0; opacity: 0; position: absolute; transition: opacity .35s ease; }.yfd-metric:hover { background: #18181d; border-color: rgba(255,181,27,.42); transform: translateY(-5px); }.yfd-metric:hover::before { opacity: 1; }.yfd-meter { height: 132px; margin-bottom: 23px; position: relative; width: 132px; z-index: 1; }.yfd-meter svg { height: 100%; transform: rotate(-90deg); width: 100%; }.yfd-meter circle { fill: none; stroke-width: 6; }.yfd-meter-track { stroke: rgba(255,255,255,.1); }.yfd-meter-value { stroke: #fc5a17; stroke: url(#yfd-meter-gradient); stroke-dasharray: 326.73; stroke-dashoffset: calc(326.73 * (1 - var(--yfd-progress, 0) / 100)); stroke-linecap: round; transition: stroke-dashoffset 1.5s cubic-bezier(.2,.7,.25,1); }.yfd-meter strong { align-items: baseline; color: #f8f8f8; display: flex; font-size: 31px; font-weight: 600; justify-content: center; left: 0; letter-spacing: -.07em; position: absolute; top: 46px; width: 100%; }.yfd-meter strong span { min-width: 36px; }.yfd-meter .yfd-pct { color: #fc7950; font-size: 14px; letter-spacing: 0; margin-left: 2px; }.yfd-metric h3 { color: #e7e7e9; font-size: 14px; font-weight: 600; letter-spacing: -.03em; line-height: 1.32; margin: 0; position: relative; z-index: 1; }

/* FAQ */
.yfd-faq-section { background: #0b0b0e; padding: 0 0 clamp(90px, 12vw, 165px); }.yfd-faq-shell { background: linear-gradient(125deg, rgba(255,181,27,.06), transparent 31%), #141419; border: 1px solid var(--yfd-line); padding: clamp(38px, 6vw, 76px); position: relative; }.yfd-faq-shell::after { background: radial-gradient(circle, rgba(238,28,120,.17), transparent 68%); content: ''; height: 310px; pointer-events: none; position: absolute; right: -100px; top: -105px; width: 310px; }.yfd-faq-heading { grid-template-columns: 1fr; margin-bottom: 37px; position: relative; text-align: left; z-index: 1; }.yfd-faq-heading .yfd-eyebrow { justify-content: center; }.yfd-faq-heading h2 { margin-bottom: 11px; }.yfd-faq-heading > p { color: var(--yfd-muted); font-size: 14px; line-height: 1.6; margin: 0 auto; max-width: 480px; }.yfd-faq-section .gt-faq-item, .yfd-faq-section .gt-faq-content { background: transparent; padding: 0; }.yfd-accordion { position: relative; z-index: 1; }.yfd-accordion .accordion-item { background: transparent; border: 0; border-bottom: 1px solid var(--yfd-line); border-radius: 0; margin: 0 !important; overflow: visible; }.yfd-accordion .accordion-button { align-items: center; background: transparent; box-shadow: none; color: #f4f4f5; display: flex; font-size: clamp(16px, 1.55vw, 20px); font-weight: 600; gap: 20px; letter-spacing: -.035em; padding: 23px 3px; }.yfd-accordion .accordion-button::after { display: none; }.yfd-accordion .accordion-button > span { color: #96969d; font-size: 11px; font-weight: 700; letter-spacing: .11em; margin-right: 10px; }.yfd-accordion .accordion-button > i { color: #cfcfd3; font-size: 13px; margin-left: auto; transition: color .25s ease, transform .35s ease; }.yfd-accordion .accordion-button:not(.collapsed) { color: #fff; }.yfd-accordion .accordion-button:not(.collapsed) > span { color: #fc7950; }.yfd-accordion .accordion-button:not(.collapsed) > i { color: #ffb51b; transform: rotate(45deg); }.yfd-accordion .accordion-body { color: #b4b4bb; font-size: 14px; line-height: 1.7; max-width: 710px; padding: 0 30px 24px 57px; }.yfd-accordion .thumb { display: none; }

/* Motion is intentionally restrained and respects visitor preferences. */
.yfd-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.25,1); }.yfd-reveal.is-visible { opacity: 1; transform: translateY(0); }.yfd-hero-art .yfd-orbit-one { animation: yfd-orbit 21s linear infinite; }.yfd-hero-art .yfd-orbit-two { animation: yfd-orbit-reverse 16s linear infinite; }.yfd-interface-fragment { animation: yfd-float 6s ease-in-out infinite; }.yfd-fragment-b { animation-delay: -3s; }
@keyframes yfd-orbit { to { transform: translate(-50%,-50%) rotate(335deg); } } @keyframes yfd-orbit-reverse { to { transform: translate(-50%,-50%) rotate(-318deg); } } @keyframes yfd-float { 50% { translate: 0 -10px; } }

@media (max-width: 991px) {
    .yfd-service-hero { min-height: initial; }.yfd-hero-layout { grid-template-columns: 1fr; }.yfd-hero-art { margin-top: 10px; max-width: 470px; }.yfd-services-track::before { left: 25px; }.yfd-service-card, .yfd-service-card--design, .yfd-service-card--cloud { grid-template-columns: 1fr minmax(260px,.78fr); }.yfd-service-card--design .yfd-service-content, .yfd-service-card--cloud .yfd-service-content { grid-column: 1; }.yfd-service-card--design .yfd-card-art, .yfd-service-card--cloud .yfd-card-art { grid-column: 2; }.yfd-lifecycle { grid-template-columns: repeat(3,1fr); row-gap: 29px; }/* Once the six steps wrap onto several rows the single connector joins nothing, so it is hidden; the numbers and the colour progression carry the sequence. */ .yfd-lifecycle::before { display: none; }.yfd-principles { grid-template-columns: 1fr 1fr; }.yfd-principles .yfd-outline-link { grid-column: 1 / -1; justify-self: start; }.yfd-metrics-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 767px) {
    .yfd-section-heading { display: block; }.yfd-section-heading .yfd-eyebrow { margin-bottom: 22px; }.yfd-hero-copy h1 { font-size: clamp(40px, 12vw, 57px); }.yfd-hero-art { height: 335px; transform: scale(.84); transform-origin: center top; margin-bottom: -45px; }.yfd-service-card, .yfd-service-card--design, .yfd-service-card--cloud { display: block; min-height: 0; padding: 21px; }.yfd-card-top { left: 21px; right: 21px; top: 20px; }.yfd-service-content, .yfd-service-card--design .yfd-service-content, .yfd-service-card--cloud .yfd-service-content { padding: 55px 1px 25px; }.yfd-service-content h3 { font-size: clamp(33px, 9.5vw, 48px); }.yfd-card-art, .yfd-service-card--design .yfd-card-art, .yfd-service-card--cloud .yfd-card-art { height: 260px; min-height: 260px; }.yfd-service-card--design .yfd-card-art, .yfd-service-card--cloud .yfd-card-art { grid-column: auto; }.yfd-brand-grid { height: 175px; width: 220px; }.yfd-brand-circle { left: 12%; }.yfd-code-window { left: 2%; }.yfd-mobile-device { right: 4%; }.yfd-cloud-shape { height: 132px; left: 4%; top: 20%; width: 196px; }.yfd-data-readout { bottom: 9%; font-size: 26px; right: 5%; }.yfd-lifecycle { grid-template-columns: 1fr 1fr; }.yfd-principles { display: block; }.yfd-principles > div { padding: 0 0 24px; }.yfd-principles > div + div { border-left: 0; border-top: 1px solid var(--yfd-line); padding: 25px 0; }.yfd-faq-shell { padding: 30px 22px; }.yfd-accordion .accordion-button { gap: 10px; padding: 19px 0; }.yfd-accordion .accordion-button > span { margin-right: 3px; }.yfd-accordion .accordion-body { padding: 0 4px 22px 29px; }
}
@media (max-width: 450px) { .yfd-hero-actions { align-items: flex-start; flex-direction: column; gap: 12px; }.yfd-hero-art { margin-left: -13%; transform: scale(.72); width: 126%; }.yfd-lifecycle strong { font-size: 13px; }.yfd-lifecycle small { font-size: 9px; }.yfd-metrics-grid { grid-template-columns: 1fr; }.yfd-metric { min-height: 245px; }.yfd-service-list li { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .yfd-reveal { opacity: 1; transform: none; transition: none; }.yfd-hero-art .yfd-orbit-one, .yfd-hero-art .yfd-orbit-two, .yfd-interface-fragment { animation: none; }.yfd-service-card, .yfd-metric { transition: none; }.yfd-meter-value { transition: none !important; } }

/* Holds the meter gradient definition; paints nothing itself. */
.yfd-defs { height: 0; position: absolute; width: 0; }