/* YARD layer on top of the Qubix Webflow CSS: SEO furniture + YARD rich text in the Qubix tokens. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.header-logo img{height:26px;width:auto}
.footer-logo img{width:100%;height:auto}

/* Breadcrumbs (visible, matches BreadcrumbList JSON-LD) */
.yard-crumbs{display:flex!important;flex-direction:row!important;width:auto;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 24px;padding:0;list-style:none;font-size:14px;color:var(--_color---normal-color--medium-gray)}
.yard-crumbs li{display:flex;gap:8px;align-items:center;width:auto!important;flex:0 0 auto;margin:0;padding:0;background:none}
.yard-crumbs li+li:before{content:"/";opacity:.5}
.yard-crumbs a{color:var(--_color---normal-color--snow-white);text-decoration:none}
.yard-crumbs a:hover{color:var(--_color---normal-color--vivid-orange)}

/* Meta row on articles: category · read time · date · author */
.yard-meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font-size:14px;color:var(--_color---normal-color--medium-gray)}
.yard-meta a{color:var(--_color---normal-color--vivid-orange);text-decoration:none}
.yard-excerpt{max-width:760px;margin-top:16px;font-size:20px;line-height:1.45;color:var(--_color---normal-color--medium-gray)}

/* Table of contents */
.yard-toc{border:1px solid rgba(253,252,252,.12);border-radius:16px;padding:24px 28px;margin:0 0 40px;background:rgba(253,252,252,.03)}
.yard-toc .yard-toc-title{color:var(--_color---normal-color--snow-white);font-size:20px;font-weight:500;margin-bottom:12px}
.yard-toc ol{margin:0!important;padding:0!important;list-style:none!important;display:grid;gap:8px}
.yard-toc li{background:none!important;padding:0!important;margin:0!important}
.yard-toc a{display:flex;gap:12px}
.yard-toc .n{color:var(--_color---normal-color--vivid-orange);font-variant-numeric:tabular-nums;min-width:22px}
.yard-toc a{color:var(--_color---normal-color--medium-gray);text-decoration:none}
.yard-toc a:hover{color:var(--_color---normal-color--vivid-orange)}

/* YARD rich text inside the Qubix rich-text containers */
.yard-rt{color:var(--_color---normal-color--medium-gray);font-size:18px;line-height:1.65}
.yard-rt h2{font-size:36px;line-height:1.15;letter-spacing:-.02em;font-weight:500;color:var(--_color---normal-color--snow-white);margin:56px 0 16px;scroll-margin-top:120px}
.yard-rt h3{font-size:26px;line-height:1.2;font-weight:500;color:var(--_color---normal-color--snow-white);margin:36px 0 12px}
.yard-rt h4,.yard-rt h5,.yard-rt h6{font-size:20px;font-weight:500;color:var(--_color---normal-color--vivid-orange);margin:28px 0 8px}
.yard-rt p{margin:0 0 18px}
.yard-rt strong{color:var(--_color---normal-color--snow-white);font-weight:500}
.yard-rt a{color:var(--_color---normal-color--vivid-orange);text-decoration:underline;text-underline-offset:3px}
.yard-rt ul,.yard-rt ol{margin:0 0 20px;padding-left:22px}
.yard-rt li{margin-bottom:8px;background:none!important;padding-left:0!important}
.yard-rt ul li::marker{color:var(--_color---normal-color--vivid-orange)}
.yard-rt blockquote{margin:28px 0;padding:8px 0 8px 22px;border-left:2px solid var(--_color---normal-color--vivid-orange);color:var(--_color---normal-color--snow-white);font-size:20px}
.yard-rt figure{margin:32px 0}
.yard-rt img{max-width:100%;height:auto;border-radius:16px;display:block}
.yard-rt figcaption{font-size:14px;margin-top:8px}
.yard-rt .w-embed,.yard-rt iframe{max-width:100%}
.yard-rt table,.yard-rt .tbl{width:100%;border-collapse:collapse;margin:0;font-size:15px}
.yard-rt .tbl-wrap{overflow-x:auto;margin:28px 0;border:1px solid rgba(253,252,252,.12);border-radius:16px}
.yard-rt th,.yard-rt td{text-align:left;padding:12px 16px;border-bottom:1px solid rgba(253,252,252,.08);vertical-align:top}
.yard-rt th{color:var(--_color---normal-color--snow-white);font-weight:500;background:rgba(253,252,252,.04)}
.yard-rt > :first-child{margin-top:0}

/* Author / share box under articles */
.yard-byline{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:48px;padding-top:24px;border-top:1px solid rgba(253,252,252,.12);font-size:15px}
.yard-byline a{color:var(--_color---normal-color--snow-white)}

/* Category chips on blog listings */
.yard-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.yard-chip{display:inline-flex;padding:8px 16px;border-radius:999px;border:1px solid rgba(253,252,252,.18);color:var(--_color---normal-color--snow-white);text-decoration:none;font-size:14px}
.yard-chip:hover,.yard-chip.is-on{background:var(--_color---normal-color--vivid-orange);border-color:var(--_color---normal-color--vivid-orange);color:#0e0e0e}

/* FAQ answers rendered as <details> where the template has no accordion */
.yard-faq details{border-bottom:1px solid rgba(253,252,252,.12);padding:18px 0}
.yard-faq summary{cursor:pointer;color:var(--_color---normal-color--snow-white);font-size:20px;list-style:none}
.yard-faq summary::-webkit-details-marker{display:none}
.yard-faq details p{margin:12px 0 0}

/* Price line on pricing plans */
.yard-price{display:block;margin-top:14px;color:var(--_color---normal-color--snow-white);font-size:32px;font-weight:500}
.yard-price small{font-size:16px;color:var(--_color---normal-color--medium-gray);font-weight:400}

@media (max-width:767px){
  .yard-rt{font-size:17px}
  .yard-rt h2{font-size:28px;margin-top:40px}
  .yard-rt h3{font-size:22px}
  .yard-toc{padding:18px 20px}
}

/* Listing heroes (blog, categories, case studies): the Qubix row shrinks the H1 to min-content,
   so keep the headline on as few lines as fit and give the intro a fixed column. */
@media (min-width:992px){
  .blog-hero-left-box,.projects-hero-left-box{align-items:flex-end;gap:32px;flex:1 1 auto;min-width:0}
  .blog-hero-left-box > h1,.projects-hero-left-box > h1{flex:0 0 auto;white-space:nowrap}
  .blog-hero-left-box > h1.yard-h1-long,.projects-hero-left-box > h1.yard-h1-long{font-size:80px}
  .blog-hero-left-box > .mt-mainus,.projects-hero-left-box > .mt-mainus{flex:0 0 280px;width:280px;max-width:280px;min-width:220px}
}

/* Home hero, left column: "industries we serve" ticker, the mirror of the services ticker on the right (same pills and
   fade overlay) scrolling top to bottom. CSS-driven, because the template's IX3 timeline moves every .ui-link-main-box up.
   Each cycle shifts one list + gap, so the loop has no jump. */
.yard-industries{position:relative;display:flex;flex-direction:column;row-gap:var(--_common-spacing---spacing-medium);
  height:245px;overflow:hidden;background-color:var(--_color---normal-color--black)}
.yard-industries-list{display:flex;flex-direction:column;row-gap:var(--_common-spacing---spacing-medium);animation:yard-industries-down 20s linear infinite}
@keyframes yard-industries-down{from{transform:translateY(calc(-100% - var(--_common-spacing---spacing-medium)))}to{transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.yard-industries-list{animation:none}}
.hero-left-box .hero-left-top-box{align-items:flex-start}
/* Phones: the two tickers share the width, and at 16px "Performance Marketing" needed 189px of a ~160px column (clipped
   at the edge). Scale the pills with the screen, 14px at 375px down to 12px at 320px, and pin the services ticker to the
   right edge so any spare width spills into the gap between the tickers, not past the page edge. */
@media (max-width:479px){
  .hero-wrap .hero-tag-text{font-size:clamp(12px,3.75vw,14px);padding:8px 10px}
  .hero-right-box .hero-right-top-box{margin-left:0;align-self:flex-end}
  .hero-section .hero-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}  /* 1fr grew to the widest pill */
}
/* Desktop: the left column takes the right column's height (ticker + gap + 80px scroll mouse), so both tickers start level */
@media (min-width:992px){.hero-wrap .hero-left-box{height:calc(245px + var(--_common-spacing---spacing-37xl-large) + 80px);justify-content:space-between;row-gap:0}}

/* Home "Real Results" banner: the brand reel (1080p, 16:9, so the box takes its ratio and nothing is cropped) with a
   small violet play button that glows on hover; yard.js starts it with sound and hands over to the native controls. */
.home-banner-content-child .home-banner-image{position:relative;height:auto;aspect-ratio:16/9;background:#000}
.yard-reel{display:block;width:100%;height:100%;object-fit:cover}
.yard-play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;padding:0;border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;
  background:linear-gradient(to bottom right,#9B7CFF,#6C3BFF);box-shadow:0 0 0 1px rgba(155,124,255,.5),0 6px 18px rgba(108,59,255,.35);
  transition:box-shadow .3s ease,transform .3s ease,opacity .3s ease}
.yard-play svg{width:22px;height:22px;margin-left:3px;fill:currentColor}
.yard-play:hover,.yard-play:focus-visible{outline:none;transform:scale(1.06);
  box-shadow:0 0 0 1px rgba(155,124,255,.85),0 0 26px 8px rgba(155,124,255,.55),0 0 60px 18px rgba(108,59,255,.35)}
.home-banner-image.is-playing .yard-play{opacity:0;pointer-events:none}
/* Tablet and phone: "Real Results" on one line and the reel full width below it (squeezed between the words it was
   only 150-280px wide) */
@media (max-width:991px){
  .home-banner-content .home-banner-content-child{flex-wrap:wrap;justify-content:center;align-content:center}
  .home-banner-content-child .home-banner-image{order:1;flex:0 0 100%}
}

/* Testimonial cards, Figma YARD-AI-DECK 917:841: landscape cards overlapping in a row, the white centre card larger.
   Only size, spacing and type change; the slide-in and the hover tilts are the template's IX. */
.testimonial-cards .testimonial-card{background-color:#1C1C1C;justify-content:flex-start;gap:14px;border-radius:24px}
.testimonial-cards .testimonial-card.card-two{background-color:#FDFCFC}
@media (min-width:768px){
  .testimonial-cards .testimonial-card{width:min(33vw,476px);max-width:none;min-height:min(20vw,288px);padding:28px 26px}
  .testimonial-cards .testimonial-card.card-two{width:min(41vw,590px);min-height:min(22.5vw,320px);padding:36px 32px;
    margin-top:-2vw;margin-left:max(-14vw,-200px);position:relative;z-index:4!important}  /* IX3 stacks the cards 1-2-3 inline */
  .testimonial-cards .testimonial-card.card-three{margin-left:max(-14vw,-200px)}
}
.testimonial-card .testimonial-card-rating{gap:4px}
.testimonial-card .star-image{width:15px;height:15px}
.testimonial-card.card-two .star-image{width:18px;height:18px}
.testimonial-card .testimonial-card-info{flex:1;justify-content:space-between;gap:20px}
.testimonial-card .testimonial-card-info > .h6{font-size:16px;line-height:24px;font-weight:500}
.testimonial-card.card-two .testimonial-card-info > .h6{font-size:19px;line-height:28.5px}
.testimonial-card .testimonial-image{width:42px;height:42px}
.testimonial-card.card-two .testimonial-image{width:49px;height:49px}
.testimonial-card .testimonial-profile-info{gap:2px}
.testimonial-card .testimonial-profile-info > .body:first-child{font-size:15px;font-weight:600;line-height:1.2}
.testimonial-card .testimonial-profile-info > .body:last-child{font-size:13px;line-height:1.2;color:#A1A1A1}
.testimonial-card.card-two .testimonial-profile-info > .body:first-child{font-size:17px}
.testimonial-card.card-two .testimonial-profile-info > .body:last-child{font-size:14px;color:#222}

/* Footer: official partners (Google Partner badge + Gallabox logo) in place of the tagline */
.yard-partners{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px;margin:24px 0}
.yard-partners a{display:block;line-height:0;transition:transform .3s ease}
.yard-partners a:hover{transform:translateY(-2px)}
.yard-partners a img{width:112px;height:auto}
.yard-partners > img{width:170px;height:auto}
@media (max-width:479px){.yard-partners a img{width:92px}.yard-partners > img{width:140px}}
/* Footer: "Our Partners" is a small label over the badges, and the big YARD AI wordmark sits back (owner, 2026-10-28) */
.footer .footer-top-bar .footer-title-mw{font-size:20px;line-height:1.3}
.footer .footer-bottom-bar .footer-logo img{opacity:.4}

/* Home hero: wordmark in the ring centre instead of text */
.hero-rotated-info-text .yard-hero-logo{display:block;width:clamp(120px,17vw,260px);height:auto;margin:0 auto}
.hero-rotated-info-text-two:empty{display:none}
@media (max-width:767px){.hero-rotated-info-text .yard-hero-logo{width:84px}}

/* Thinking orbs (github.com/Jakubantalik/thinking-orbs, MIT) — subtle, monochrome */
.yard-orb-inline{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;opacity:.85;vertical-align:middle}
.yard-orb-inline canvas{display:block}
.yard-has-orb{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:8px!important}
.yard-toc-title.yard-has-orb{display:flex!important}
.yard-orb-block{display:flex;justify-content:center;margin:0 auto 20px;opacity:.9}
.wrapper-image-change-service{position:relative}
.yard-orb-replace{position:absolute;inset:0;margin:auto;pointer-events:none}
.yard-cursor-orb{position:fixed;left:0;top:0;margin:-15px 0 0 -15px;pointer-events:none;z-index:2147483000;opacity:0;
  transition:opacity .35s ease;mix-blend-mode:difference;will-change:transform}
.yard-cursor-orb.on{opacity:.85}
@media (prefers-reduced-motion: reduce){.yard-cursor-orb{display:none}}

/* Every CTA pill (.main-button: header Book a call, section CTAs, form submit): a violet shine (#9B7CFF → #6C3BFF) orbiting the pill border.
   The button has the template gooey SVG filter, so the ring stays crisp (no outer blur glow). */
@property --yard-cta-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.main-button .button-content-wrap{position:relative;isolation:isolate}
.main-button .button-content-wrap::before,.main-button .button-content-wrap::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  animation:yard-cta-spin 3.2s linear infinite}
.main-button .button-content-wrap::before{padding:2px;z-index:1;
  background:conic-gradient(from var(--yard-cta-a),transparent 0 52%,#9B7CFF 72%,#fff 80%,#6C3BFF 88%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.main-button .button-content-wrap::after{z-index:-1;opacity:.9;
  background:conic-gradient(from var(--yard-cta-a),transparent 0 55%,rgba(155,124,255,.45) 75%,rgba(108,59,255,.4) 88%,transparent 100%)}
@keyframes yard-cta-spin{to{--yard-cta-a:360deg}}
@media (prefers-reduced-motion: reduce){.main-button .button-content-wrap::before,.main-button .button-content-wrap::after{animation:none;--yard-cta-a:200deg}}

/* Home "Who we are": numbered service list under the guarantee line, kept compact (the template's ol is a flex column
   with an 8px gap and its li a 1.54 line-height) */
.home-services-left-box .home-services-text{font-weight:400}  /* a step lighter than the template's 500 */
.home-services-text .yard-services-list{margin:10px 0 0;padding-left:1.4em;font-size:18px;line-height:1.35;font-weight:400;gap:2px}
.home-services-text .yard-services-list li{margin:0;padding-left:4px;line-height:1.35}
/* Home "Real results" cards: Figma mockups (src/img/home-cases) that object-fit crops at the sides on narrower screens,
   so the 1px card frame from Figma (YARD-AI-DECK 917:344) is drawn here instead of baked into the image */
.home-project-section .project-img-wrap{border:1px solid rgba(255,255,255,.2)}
/* "Who we are" card: the picture slot spans the card at its top/right inset (the card pads its left side wider for the
   text, 2xl vs 9xl spacing, 16 vs 32px on desktop and 12 vs 16px on phones) and grows into the height the row leaves
   free, so the growth scene fills it instead of an empty band */
.home-services-left-box .home-services-image-box{height:auto;flex:1 1 auto;min-height:180px;
  width:calc(100% + var(--_common-spacing---spacing-9xl-large) - var(--_common-spacing---spacing-2xl-large));
  margin-left:calc(var(--_common-spacing---spacing-2xl-large) - var(--_common-spacing---spacing-9xl-large))}
/* About page, Figma YARD-AI-DECK 928:2 "Mono · UV accent": a dot-matrix ground (30% baked into the tile) that fades
   out over the FAQ, film grain over the content but under the sticky header (z 1000), and founder photos shown whole. */
body.yard-about{background:#000 url(/assets/yard/about/dot-matrix.png) 0 0/320px 320px repeat}
body.yard-about .faq-section{background:linear-gradient(to bottom,transparent,#000 45%);
  margin-bottom:0;padding-bottom:var(--_common-spacing---spacing-34xl-large)} /* template margin -> padding, so the gap above the form is black too */
body.yard-about .footer{background:#000}
body.yard-about::before,body.yard-about::after{content:"";position:fixed;inset:0;z-index:999;pointer-events:none}
body.yard-about::before{background:url(/assets/yard/about/grain-overlay.jpg) 0 0/256px 256px repeat;opacity:.35;mix-blend-mode:overlay}
body.yard-about::after{background:url(/assets/yard/about/grain-speckle.png) 0 0/256px 256px repeat;opacity:.4}
/* Founders: on desktop the frame hugs the portrait (it was 632x534 with the photo letterboxed) and sits centred in its
   column; name and role stack left-aligned under the photo at every size */
@media (min-width:992px){
  .yard-about .section-founder-profile-item{justify-self:center;width:fit-content}
  .yard-about .section-founder-profile-img{aspect-ratio:860/1068;width:auto}
}
.yard-about .section-founder-profile-info{flex-direction:column;align-items:flex-start;gap:4px}
/* Selected results: no hover image (the template script still animates the empty wrap, so hide it rather than drop it) */
.yard-about .about-award-item-banner-wrap{display:none}

/* Site-wide: the template's vivid orange (#fe6512: link and title hovers, menu, form underlines, buttons, error box)
   becomes the CTA violet. yard.css loads before the Webflow CSS, so :root:root is needed to outrank its :root. */
:root:root{--_color---normal-color--vivid-orange:#6C3BFF}
/* Form fields: on hover/focus the underline becomes the CTA's violet shine, a white highlight sweeping along it */
input.text-field:hover,input.text-field:focus,select.select-field:hover,select.select-field:focus,textarea.textarea:hover,textarea.textarea:focus{
  border-bottom-color:transparent;
  background-image:linear-gradient(90deg,#6C3BFF 0%,#9B7CFF 35%,#fff 50%,#9B7CFF 65%,#6C3BFF 100%);
  background-size:200% 1px;background-repeat:repeat-x;background-origin:border-box;background-position:0 100%;
  animation:yard-field-shine 3.2s linear infinite}
@keyframes yard-field-shine{to{background-position:200% 100%}}
@media (prefers-reduced-motion: reduce){input.text-field,select.select-field,textarea.textarea{animation:none!important}}
/* Contact form block (every page): the template's sticky box (.form-wrap-box, top 25%) had no room to stick, so the form
   scrolled away right after it appeared. A 50vh spacer lets it hold for half a screen of scroll. Tablet and desktop only,
   where its IX2 reveal runs (paired with the e-108 startsEntering patch in build.py). */
@media (min-width:768px){.form-wrap-child::after{content:"";display:block;height:50vh}}
/* "View service" (/services) and "Get started" (/pricing) pill: near-black with white text, so it reads over the
   light-lavender card scenes where the violet gradient washed out. A faint violet ring and soft drop shadow lift it
   off the scene; the template's IX2 hover still scales it in from 0. */
div.service-btn-child-box{background:#0F0F0F;color:#fff;border:1px solid rgba(155,124,255,.45);
  box-shadow:0 10px 28px -6px rgba(15,15,15,.55),0 2px 6px rgba(15,15,15,.25)}
/* The /services scenes have no stacking context of their own, so their z-index:2..5 layers painted over the pill
   (it vanished on the Creative card). Lift the pill layer above them; the card's transform keeps it inside the card. */
div.service-btn-main-box{z-index:10}

/* Home "Services" marquee: shorter pinned scroll (was 400vh), paired with the IX2 a-16 keyframe patch in build.py.
   Phones (<480px) stack the cards with height:auto, so leave them alone. */
@media (min-width:480px){.home-marquee-section .home-marquee-main-wrap{height:360vh}}
/* Its cards show the /services animated scenes (build.py), each wrapped in a link to the service */
a.yard-marquee-scene{display:block;width:100%;height:100%}
/* The template keeps its "Services" title above the cards, which read over the old dark photos but washes out on the
   light scenes. Tablet/desktop: the cards slide over the title instead. Phones (cards stacked, title pinned over the
   first card): the title goes back in the flow, above the cards. */
@media (min-width:480px){.home-marquee-view-box .home-marquee-image-box{z-index:1}.home-marquee-wrap .home-marquee-title-box{z-index:0}}
@media (max-width:479px){.home-marquee-wrap .home-marquee-title-box{padding-left:0}
  .home-marquee-view-box .container{padding-left:0;padding-right:0}
  .home-marquee-section .h2.marquee-position{position:static;transform:none!important;margin-bottom:24px}}
.home-services-title-box .h2{text-transform:none;font-size:clamp(36px,3.6vw,58px)}
.yard-nowrap{white-space:nowrap}
.home-services-right-counte > .h5{text-align:center}

/* Home "What we do" counter card: violet gradient from Figma YARD-AI-DECK node 856:3102 (was template orange) */
.home-services-right-box{background:linear-gradient(to bottom right,#9B7CFF,#6C3BFF);box-shadow:0 0 48px rgba(108,59,255,.35)}
.home-services-right-box .counter-item-counte,.home-services-right-box .counter-text,.home-services-right-box .home-services-right-counte > .h5{color:#fff}


/* "What We Do" tick meter above the globe: a violet band (~20% of the visible arc) sweeps clockwise, left to right
   over the top. Masked by the ring image's own luminance, so only lit ticks turn violet; the dark lower ticks hide it. */
@property --yard-meter-a{syntax:"<angle>";inherits:false;initial-value:220deg}
.wrapper-circle-service::before{content:"";position:absolute;left:1.5%;top:1.5%;width:97%;height:97%;pointer-events:none;
  background:conic-gradient(from var(--yard-meter-a),transparent 0deg,#6C3BFF 5deg,#9B7CFF 20deg,#6C3BFF 35deg,transparent 40deg 360deg);
  -webkit-mask:url(/assets/cdn.prod.website-files.com/69a9212ffc8e44e1794fb799/69afa7cb204f15241f612317_cc3d8d4919ea9273a5e72ccc289fd9a4_Ellipse_2.png) 0 0/100% 100% no-repeat;
  mask:url(/assets/cdn.prod.website-files.com/69a9212ffc8e44e1794fb799/69afa7cb204f15241f612317_cc3d8d4919ea9273a5e72ccc289fd9a4_Ellipse_2.png) 0 0/100% 100% no-repeat;
  -webkit-mask-source-type:luminance;mask-mode:luminance;
  animation:yard-meter-sweep 9s linear infinite}
@keyframes yard-meter-sweep{from{--yard-meter-a:220deg}to{--yard-meter-a:580deg}}
@media (prefers-reduced-motion: reduce){.wrapper-circle-service::before{display:none}}
/* Ring and globe share one centre, dead centre of the section: the template anchored the 97% ring image top-left in its
   30vw box, and its heading row (flex, margin-left 50px) left the globe wherever the two words' widths put it. A
   1fr | globe | 1fr grid centres the globe whatever the words; the ring (and the sweep above) gets an even 1.5% inset.
   The template hides the ring at 767px and below. */
.inner-content-service .wrapper-content-service{display:grid;grid-template-columns:1fr auto 1fr;width:100%;margin-left:0}
.wrapper-content-service > .wrapper-text-heading-service:first-child{justify-self:end}
.wrapper-content-service > .wrapper-text-heading-service:last-child{justify-self:start}
@media (min-width:768px){.wrapper-circle-service .image-circle-service{display:block;margin:1.5%}}

/* Hero logo ring: the meter sweep again — a violet band (20% = 72deg) circles clockwise every 9s over the white ticks. */
@property --yard-ring-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.hero-round-shap::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:conic-gradient(from var(--yard-ring-a),transparent 0deg,#6C3BFF 9deg,#9B7CFF 36deg,#6C3BFF 63deg,transparent 72deg 360deg);
  -webkit-mask:url(/assets/cdn.prod.website-files.com/69a9212ffc8e44e1794fb799/69ad0d72280695115997761f_Ellipse_2.png) 50% 50%/contain no-repeat;
  mask:url(/assets/cdn.prod.website-files.com/69a9212ffc8e44e1794fb799/69ad0d72280695115997761f_Ellipse_2.png) 50% 50%/contain no-repeat;
  animation:yard-ring-sweep 9s linear infinite}
@keyframes yard-ring-sweep{to{--yard-ring-a:360deg}}
@media (prefers-reduced-motion: reduce){.hero-round-shap::before{display:none}}

/* Team member / author profile, Figma YARD-AI-DECK 856:1308: photo + follow buttons left, profile right, on the About
   page's dot-matrix ground. 1440 desktop: 440px photo | 64px | the rest of the 1280 container. 768-991px: narrower
   photo column. Below 768px it stacks photo, profile, then the follow buttons. */
.yard-member-section{padding:128px 0 120px;background:#000 url(/assets/yard/about/dot-matrix.png) 0 0/320px 320px repeat}
.yard-member-section .yard-crumbs{margin-bottom:40px}
.yard-member{display:grid;grid-template-columns:440px minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"photo main" "follow main";
  column-gap:64px;align-items:start}
.yard-member-photo{grid-area:photo;aspect-ratio:440/537;border-radius:24px;overflow:hidden;border:1px solid rgba(253,252,252,.16);background:#111}
.yard-member-photo img{display:block;width:100%;height:100%;object-fit:cover}
.yard-member-main{grid-area:main;min-width:0}
.yard-member-follow{grid-area:follow;margin-top:28px}
.yard-member-tag{display:inline-flex;margin:0;padding:8px 14px;border-radius:999px;border:1px solid rgba(155,124,255,.45);background:rgba(108,59,255,.12);
  color:#9B7CFF;font-size:12px;line-height:1;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.yard-member-name{margin:24px 0 0;font-size:clamp(44px,5.4vw,78px);line-height:1.08;font-weight:500;letter-spacing:-.03em;color:#FDFCFC;
  text-shadow:0 0 28px rgba(155,124,255,.6),0 0 2px rgba(255,255,255,.35);overflow-wrap:anywhere}
.yard-member-role{margin:18px 0 0;color:#9B7CFF;font-size:22px;line-height:1.3}
.yard-member-bio{margin:22px 0 0;color:#BDBDBD;font-size:18px;line-height:1.7}
.yard-member-label{display:block;color:#9B7CFF;font-size:12px;line-height:1.2;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.yard-member-article{display:flex;gap:20px;align-items:center;margin-top:32px;padding:16px;border-radius:20px;border:1px solid rgba(155,124,255,.22);
  background:rgba(253,252,252,.03);text-decoration:none;transition:border-color .3s ease,background-color .3s ease}
.yard-member-article:hover{border-color:rgba(155,124,255,.6);background:rgba(108,59,255,.08)}
.yard-member-article-img{flex:0 0 226px;aspect-ratio:226/126;border-radius:12px;overflow:hidden;background:#111}
.yard-member-article-img img{display:block;width:100%;height:100%;object-fit:cover}
.yard-member-article-text{display:flex;flex-direction:column;gap:8px;min-width:0}
.yard-member-article-title{color:#FDFCFC;font-size:20px;line-height:1.3;font-weight:500}
.yard-member-article-meta{color:#8A8A8A;font-size:13px;line-height:1.4}
.yard-member-main > .yard-member-label{margin-top:32px}
.yard-member-chips{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;margin:14px 0 0;padding:0;list-style:none}
.yard-member-chips li{margin:0;padding:10px 18px;border-radius:999px;border:1px solid rgba(253,252,252,.18);background:rgba(253,252,252,.03);
  color:#FDFCFC;font-size:15px;line-height:1.2}
.yard-member-btns{display:flex;gap:10px;margin-top:14px}
.yard-member-btn{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid rgba(253,252,252,.16);background:#0F0F0F;color:#FDFCFC;font-size:15px;font-weight:500;line-height:1;text-decoration:none;
  transition:border-color .3s ease,box-shadow .3s ease,background-color .3s ease}
.yard-member-btn svg{width:16px;height:16px;flex:0 0 auto}
.yard-member-btn:hover{border-color:rgba(155,124,255,.7)}
.yard-member-btn.is-primary{background:#6C3BFF;border-color:#6C3BFF}
.yard-member-btn.is-primary:hover{background:#7A4DFF;box-shadow:0 0 24px rgba(108,59,255,.45)}
@media (max-width:991px){
  .yard-member-section{padding:96px 0}
  .yard-member{grid-template-columns:300px minmax(0,1fr);column-gap:40px}
}
@media (max-width:767px){
  .yard-member{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"photo" "main" "follow"}
  .yard-member-photo{width:min(100%,360px)}
  .yard-member-main,.yard-member-follow{margin-top:32px}
  .yard-member-role{font-size:19px}
  .yard-member-bio{font-size:17px}
}
@media (max-width:479px){
  .yard-member-section{padding:72px 0 80px}
  .yard-member-article{flex-direction:column;align-items:stretch;gap:14px}
  .yard-member-article-img{flex:none;width:100%}
  .yard-member-article-title{font-size:18px}
  .yard-member-chips li{padding:9px 14px;font-size:14px}
}
/* Service detail pages (build_service): the hero shows the service's scene, sized by the scene's own 1600:896 ratio instead of the
   still's fixed 476px height; "Use cases" row = the /services card use cases as outline chips */
.service-details-img-title .yard-service-scene{height:auto}
.yard-rt ul.yard-usecases{display:flex;flex-flow:row wrap;align-items:flex-start;gap:10px;margin:0;padding:0;list-style:none}
.yard-rt ul.yard-usecases li{margin:0;padding:10px 18px!important;border:1px solid rgba(155,124,255,.4);border-radius:99px;
  color:var(--_color---normal-color--snow-white);font-size:16px;line-height:1.3}
@media (max-width:479px){.yard-rt ul.yard-usecases{gap:8px}.yard-rt ul.yard-usecases li{padding:8px 14px!important;font-size:15px}}

/* Blog articles, Figma YARD-AI-DECK 856:304 (blog-details-hero) + 856:892 ("On this page"), scoped to .yard-article
   (build_article). Figma sets Inter; the site's Interdisplay matches its line widths at the site's own tracking, so sizes,
   weights, colours and spacing follow the design and letter-spacing stays at the site values. Orange in the design is violet. */
body.yard-article-page{background:#000 url(/assets/yard/about/dot-matrix.png) 0 0/320px 320px repeat}
.yard-article .yard-crumbs li:last-child{flex:0 1 auto;min-width:0}  /* a long current-page title wraps instead of widening the phone page */
.yard-article .blog-details-title-box h1{color:#fff;text-shadow:0 0 10px rgba(155,124,255,.85),0 0 70px rgba(155,124,255,.7)}
.yard-article .yard-meta{justify-content:center;gap:10px 16px;font-size:15px;font-weight:500;line-height:18px;color:rgba(255,255,255,.85)}
@media (min-width:768px){.yard-article .blog-details-date{margin:-14px 0 4px}}  /* crumbs -> meta -> H1 rhythm of 856:304 (meta at 174, H1 at 229) */
.yard-article .yard-meta .yard-pill{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid rgba(155,124,255,.35);border-radius:999px;
  background:rgba(155,124,255,.16);color:#9B7CFF;font-size:12px;font-weight:600;line-height:15px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:background-color .2s}
.yard-article .yard-meta .yard-pill:hover{background:rgba(155,124,255,.28);color:#9B7CFF}
.yard-article .yard-meta-sep{width:1px;height:16px;background:rgba(255,255,255,.2)}
.yard-article .yard-meta-by{display:inline-flex;align-items:center;gap:8px;color:#fff}
.yard-article .yard-meta-by b{font-weight:600}
.yard-article .yard-avatar{flex:none;display:block;width:28px;height:28px;border:1.5px solid rgba(155,124,255,.8);border-radius:50%;object-fit:cover;box-sizing:border-box}
.yard-article .yard-excerpt{max-width:697px;font-size:20px;line-height:29px;color:#fff}
.yard-article .blog-details-image{border-radius:24px}

/* Body copy */
.yard-article .yard-rt{color:#fff;font-size:20px;line-height:1.34;letter-spacing:-.02em;overflow-wrap:break-word}
.yard-article .yard-rt p{margin:0 0 20px}
.yard-article .yard-rt h2{margin:80px 0 20px;color:#fff;font-size:36px;line-height:1.15;font-weight:600;letter-spacing:0;scroll-margin-top:120px;
  text-shadow:0 0 8px rgba(155,124,255,.75),0 0 48px rgba(155,124,255,.55)}
.yard-article .yard-rt h3{margin:40px 0 14px;color:#fff;font-size:26px;line-height:1.25;font-weight:600;letter-spacing:0}
.yard-article .yard-rt h4,.yard-article .yard-rt h5,.yard-article .yard-rt h6{color:#9B7CFF;font-weight:600}
.yard-article .yard-rt strong{color:#9B7CFF;font-weight:500}
.yard-article .yard-rt a{color:#9B7CFF;text-decoration:none}
.yard-article .yard-rt a:hover{text-decoration:underline;text-underline-offset:3px}
.yard-article .yard-rt ul,.yard-article .yard-rt ol{display:block;margin:0 0 24px;padding-left:22px}
.yard-article .yard-rt ul{list-style:none}
.yard-article .yard-rt li{margin:0;line-height:1.54}
.yard-article .yard-rt li+li{margin-top:14px}
.yard-article .yard-rt ul>li{position:relative}
.yard-article .yard-rt ul>li::before{content:"";position:absolute;left:-18px;top:.585em;width:8px;height:8px;border-radius:50%;background:#9B7CFF}
.yard-article .yard-rt ol>li::marker{color:#9B7CFF;font-weight:600}
.yard-article .yard-rt blockquote{margin:40px 0;padding:20px 24px 20px 20px;border-left:4px solid #9B7CFF;border-radius:0 16px 16px 0;
  background:rgba(108,59,255,.1);color:#fff;font-size:20px;line-height:1.34}
.yard-article .yard-rt blockquote p{margin:0 0 12px}
.yard-article .yard-rt blockquote>:last-child{margin-bottom:0}
.yard-article .yard-rt .yard-qa b{color:#9B7CFF;font-weight:600}
.yard-article .yard-rt .yard-qa-q{font-weight:600}
.yard-article .yard-rt .tbl-wrap{margin:32px 0;border:1px solid rgba(155,124,255,.3);border-radius:16px}
.yard-article .yard-rt th,.yard-article .yard-rt td{padding:12px 16px;border-bottom:1px solid rgba(155,124,255,.3);color:#fff;font-size:15px;line-height:1.65;letter-spacing:0}
.yard-article .yard-rt th{background:rgba(108,59,255,.28);font-weight:600}
.yard-article .yard-rt td:first-child{font-weight:500}
.yard-article .yard-rt tbody tr:nth-child(even) td{background:rgba(255,255,255,.04)}
.yard-article .yard-rt tbody tr:last-child td{border-bottom:0}

/* "On this page" card (856:892): summary column + chapters in two columns; yard.js sets .is-active and the bar width */
.yard-article .yard-rt .yard-toc-card{display:flex;gap:40px;margin:56px 0 44px;padding:32px;border:1px solid rgba(155,124,255,.35);border-radius:24px;
  background:radial-gradient(75% 130% at 0% 100%,rgba(108,59,255,.35),rgba(108,59,255,0) 70%),#07060E}
.yard-toc-card .yard-toc-summary{flex:0 0 260px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.yard-toc-card .yard-toc-tag{display:inline-flex;padding:7px 14px;border:1px solid rgba(155,124,255,.35);border-radius:999px;background:rgba(155,124,255,.16);
  color:#9B7CFF;font-size:13px;font-weight:600;line-height:16px;letter-spacing:.12em;text-transform:uppercase}
.yard-article .yard-rt .yard-toc-card .yard-toc-count{margin:0;color:#fff;font-size:40px;font-weight:600;line-height:1;letter-spacing:-.03em}
.yard-article .yard-rt .yard-toc-card .yard-toc-sub{margin:0;color:rgba(255,255,255,.75);font-size:16px;line-height:1.2;letter-spacing:0}
.yard-toc-card .yard-toc-bar{display:block;width:100%;height:4px;border-radius:2px;background:rgba(108,59,255,.3);overflow:hidden}
.yard-toc-card .yard-toc-bar span{display:block;width:14%;height:100%;border-radius:2px;background:#9B7CFF;transition:width .15s linear}
.yard-toc-card .yard-toc-cols{flex:1 1 auto;min-width:0;display:flex;align-items:flex-start;gap:12px}
.yard-article .yard-rt .yard-toc-card ol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.yard-article .yard-rt .yard-toc-card li{margin:0;padding:0;line-height:1.25}
.yard-article .yard-rt .yard-toc-card a{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid rgba(155,124,255,.3);border-radius:12px;
  background:rgba(255,255,255,.04);color:#fff;font-size:17px;font-weight:500;line-height:1.25;letter-spacing:0;text-decoration:none;transition:background-color .2s,border-color .2s}
.yard-article .yard-rt .yard-toc-card a:hover{border-color:rgba(155,124,255,.7);color:#fff;text-decoration:none}
.yard-article .yard-rt .yard-toc-card a.is-active{border-color:rgba(155,124,255,.7);background:rgba(108,59,255,.22);font-weight:600}
.yard-toc-card .n{flex:none;min-width:0;color:#9B7CFF;font-size:15px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.yard-toc-card .t{flex:1 1 auto;min-width:0}
.yard-toc-card .yard-arr{flex:none;width:16px;height:16px;color:#9B7CFF}

/* FAQ section as a white Q&A tile grid (build.py faq_card) */
.yard-article .yard-rt .yard-faq-card{margin:56px 0 0;padding:56px;border-radius:28px;background:#fff;color:#0F0F0F}
.yard-article .yard-rt .yard-faq-card h2{margin:0 0 32px;color:#0F0F0F;font-size:44px;line-height:1.1;letter-spacing:-.03em;text-shadow:none}
.yard-article .yard-rt .yard-faq-card>p{margin:-16px 0 32px;color:rgba(15,15,15,.6);font-size:16px;line-height:1.5;letter-spacing:0}
.yard-faq-card .yard-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
.yard-faq-card .yard-faq-item{display:flex;flex-direction:column;padding:24px 28px 28px;border:1px solid #E4DCFF;border-radius:16px;background:#F4F1FF}
.yard-faq-card .yard-faq-q{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid rgba(15,15,15,.08)}
.yard-faq-card .yard-faq-q .n{flex:none;margin-top:2px;padding:3px 8px;border-radius:6px;color:#6C3BFF;font-size:13px;font-weight:600;line-height:17px;font-variant-numeric:tabular-nums}
.yard-article .yard-rt .yard-faq-card .yard-faq-qt{margin:0;color:#0F0F0F;font-size:18px;font-weight:600;line-height:1.45;letter-spacing:0}
.yard-article .yard-rt .yard-faq-a,.yard-article .yard-rt .yard-faq-a p,.yard-article .yard-rt .yard-faq-a li{color:rgba(15,15,15,.72);font-size:16px;line-height:1.65;letter-spacing:0}
.yard-article .yard-rt .yard-faq-a p{margin:0 0 10px}
.yard-article .yard-rt .yard-faq-a>:last-child{margin-bottom:0}
.yard-article .yard-rt .yard-faq-a a{color:#6C3BFF}
.yard-article .yard-rt .yard-faq-a strong{color:#0F0F0F;font-weight:600}
.yard-faq-card .yard-faq-item:first-child{border-color:#6C3BFF;background:#6C3BFF}
.yard-faq-card .yard-faq-item:first-child .yard-faq-q{border-bottom-color:rgba(255,255,255,.2)}
.yard-faq-card .yard-faq-item:first-child .yard-faq-q .n{background:rgba(255,255,255,.2);color:#fff}
.yard-article .yard-rt .yard-faq-card .yard-faq-item:first-child .yard-faq-qt,.yard-article .yard-rt .yard-faq-item:first-child .yard-faq-a strong{color:#fff}
.yard-article .yard-rt .yard-faq-item:first-child .yard-faq-a,.yard-article .yard-rt .yard-faq-item:first-child .yard-faq-a p,
.yard-article .yard-rt .yard-faq-item:first-child .yard-faq-a li{color:rgba(255,255,255,.85)}
.yard-article .yard-rt .yard-faq-item:first-child .yard-faq-a a{color:#fff;text-decoration:underline}
.yard-article .yard-rt .yard-faq-cta{display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;margin:40px auto 0;padding:13px 22px;border-radius:999px;
  background:#6C3BFF;color:#fff;font-size:15px;font-weight:600;line-height:20px;letter-spacing:0;text-decoration:none;transition:background-color .2s}
.yard-article .yard-rt .yard-faq-cta:hover{background:#7d52ff;text-decoration:none}
.yard-faq-card .yard-faq-cta .yard-arr{width:16px;height:16px}

/* Byline: author + share pills */
.yard-article .yard-rt .yard-byline-card{align-items:center;gap:16px;margin-top:48px;padding-top:0;border-top:0;font-size:15px;letter-spacing:0}
.yard-article .yard-rt .yard-byline-author{display:flex;align-items:center;gap:14px;color:#fff;text-decoration:none}
.yard-article .yard-byline-card .yard-avatar{width:48px;height:48px}
.yard-byline-card .yard-byline-who{display:flex;flex-direction:column;gap:6px}
.yard-byline-card .yard-byline-label{color:#9B7CFF;font-size:11px;font-weight:600;line-height:1;letter-spacing:.14em;text-transform:uppercase}
.yard-byline-card .yard-byline-name{color:#fff;font-size:18px;font-weight:600;line-height:22px}
.yard-byline-card .yard-byline-share{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.yard-article .yard-rt .yard-share{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1px solid rgba(155,124,255,.45);border-radius:999px;
  color:#fff;font-size:14px;font-weight:600;line-height:17px;text-decoration:none;transition:border-color .2s,background-color .2s}
.yard-article .yard-rt .yard-share.is-primary{padding-left:16px;border-color:#9B7CFF;background:#6C3BFF}
.yard-article .yard-rt .yard-share:hover{border-color:#9B7CFF;text-decoration:none}
.yard-share svg{width:16px;height:16px}

@media (max-width:991px){
  .yard-article .yard-rt .yard-toc-card{flex-direction:column;gap:24px;padding:28px}
  .yard-toc-card .yard-toc-summary{flex:none;align-self:stretch}
  .yard-article .yard-rt .yard-faq-card{padding:40px 32px}
}
@media (max-width:767px){
  .yard-article .yard-meta-sep{display:none}
  .yard-article .yard-excerpt{font-size:18px;line-height:26px}
  .yard-article .yard-rt{font-size:17px}
  .yard-article .yard-rt p{margin-bottom:18px}
  .yard-article .yard-rt h2{margin:56px 0 16px;font-size:28px}
  .yard-article .yard-rt h3{margin-top:32px;font-size:22px}
  .yard-article .yard-rt li+li{margin-top:10px}
  .yard-article .yard-rt blockquote{margin:32px 0;padding:16px 18px 16px 16px;font-size:17px}
  .yard-article .yard-rt th,.yard-article .yard-rt td{padding:10px 12px;font-size:14px}
  .yard-article .yard-rt .yard-toc-card{margin:40px 0 36px;padding:20px;border-radius:20px}
  .yard-article .yard-rt .yard-toc-card .yard-toc-count{font-size:32px}
  .yard-toc-card .yard-toc-cols{flex-direction:column;align-items:stretch;gap:10px}
  .yard-article .yard-rt .yard-toc-card ol{flex:none}
  .yard-article .yard-rt .yard-toc-card a{gap:12px;padding:12px 14px;font-size:16px}
  .yard-article .yard-rt .yard-faq-card{margin-top:40px;padding:28px 20px;border-radius:20px}
  .yard-article .yard-rt .yard-faq-card h2{margin-bottom:24px;font-size:32px}
  .yard-faq-card .yard-faq-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .yard-faq-card .yard-faq-item{padding:20px}
  .yard-article .yard-rt .yard-faq-card .yard-faq-qt{font-size:17px}
  .yard-article .yard-rt .yard-faq-a,.yard-article .yard-rt .yard-faq-a p,.yard-article .yard-rt .yard-faq-a li{font-size:15px}
  .yard-article .yard-rt .yard-faq-cta{margin-top:28px}
  .yard-article .yard-rt .yard-byline-card{margin-top:40px}
}