/* Cyrclo — an independently authored reconstruction of the public visual reference.
   Values are kept as readable design tokens and explicit responsive rules. */
@font-face{font-family:"Google Sans Flex";src:url("assets/GoogleSansFlex-VariableFont_GRAD-ROND-opsz-slnt-wdth-wght.woff2") format("woff2");font-style:normal;font-weight:1 1000;font-display:swap}
@font-face{font-family:"Google Sans Code";src:url("assets/GoogleSansCode-VariableFont_wght.woff2") format("woff2");font-style:normal;font-weight:300 800;font-display:swap}
:root{--black:#000;--white:#fff;--paper:#f2f2f2;--card:#1f1f1f;--muted:#a7a7a7;--grey:#808080;--line:#ffffff26;--gutter:40px;--section:160px;color-scheme:dark;font-family:"Google Sans Flex",Arial,sans-serif;font-size:16px}
*{box-sizing:border-box}
html{margin:0;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--black);color:var(--white);font-size:16px;font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
button,input,textarea,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{color:inherit;cursor:pointer}
button{border:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
svg{display:block}
h1,h2,h3,h4,h5,h6,p,figure,blockquote{margin:0}
h1,h2,h3,h4,h5,h6{font-weight:400}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #a7a7a7;outline-offset:5px}
::selection{background:#b7b7b7;color:#000}
[hidden]{display:none!important}
.skip-link{position:fixed;top:12px;left:12px;z-index:2000;background:#fff;color:#000;padding:12px 18px;border-radius:8px;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.page-container{width:100%;max-width:1680px;margin-inline:auto;padding-inline:var(--gutter)}
.section-padding{padding-block:var(--section)}
.section-heading{font-size:96px;line-height:1.1;letter-spacing:1.6px;font-weight:400}
.heading-block{text-align:center;position:relative;z-index:5}
.section-kicker,.subtitle{font-family:"Google Sans Code",monospace;font-size:14px;line-height:1.5;font-weight:400;text-transform:uppercase;color:var(--muted)}
.heading-block .section-kicker{margin-bottom:32px}
.text-color-grey{color:var(--grey)}
.text-color-secondary{color:var(--muted)}
.text-size-regular{font-size:16px;line-height:1.6;color:var(--muted)}
.dividing-line,.dark-line{height:1px;width:100%;background:var(--line)}
.ui-icon{width:24px;height:24px;flex-shrink:0}
.width-100{width:100%!important}

/* The small, fixed white notch and its expanding dark menu. */
.navbar{position:fixed;inset:0 0 auto;z-index:1000;height:0;pointer-events:none}
.nav-block{position:relative;z-index:30;display:flex;align-items:center;justify-content:center;width:224px;height:40px;margin-inline:auto;background:url("assets/notch.svg") no-repeat center top/contain;pointer-events:auto}
.menu-button{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:transparent}
.nav-menu-block{position:absolute;inset:-1px 0 0;display:flex;align-items:center;justify-content:center}
.menu-button-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:21.6px;overflow:hidden}
.menu-line{display:block;flex:0 0 1px;height:1px;width:100%;background:#000;transform-origin:50% 50%;position:relative}
.nav-menu{position:fixed;inset:0;width:100%;height:100%;visibility:hidden;pointer-events:none}
.nav-menu-container{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding-top:64px;pointer-events:none}
.nav-menu-content{position:relative;display:flex;align-items:center;justify-content:center;width:320px;height:384px;border-radius:24px;overflow:clip;pointer-events:auto}
.nav-background{position:absolute;inset:0;background:var(--card);border:1px solid var(--line);border-radius:24px;transform-origin:50% 0;z-index:0}
.nav-menu-list{position:relative;z-index:2;display:flex;flex-direction:column;gap:16px}
.nav-overflow{overflow:hidden}
.nav-link{display:flex;flex-direction:column;align-items:center;height:40px;overflow:hidden;text-decoration:none;transition:opacity .35s}
.nav-link:hover{opacity:.5}
.nav-text-track{display:flex;flex-direction:column}
.nav-text{display:block;flex-shrink:0;font-size:32px;line-height:1.2;text-align:center;white-space:nowrap}
/* Keep the reveal mask stationary, as with the text rows. Margin preserves the
   gap without including it in the icon row's percentage-based animation. */
.nav-social-media{margin-top:16px}
.nav-social-media .social-media-wrapper{justify-content:center}

/* Shared illuminated pill buttons, rolling text links, and small social buttons. */
.main-button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:192px;min-height:64px;height:64px;flex-shrink:0;padding:1px;border-top:1px solid #8a8a8a;border-radius:1000px;background:transparent;overflow:hidden;isolation:isolate;vertical-align:middle}
.button-block{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:105%;height:100%;border-radius:100px;background:#1f1f1f;overflow:hidden;transition:background-color .35s}
.button-block:hover{background:#252525}
.button-text-wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:20px;overflow:hidden}
.button-text-track{display:flex;flex-direction:column;align-items:center}
.button-text{display:block;white-space:nowrap;font-size:16px;line-height:19.2px;height:19.2px;flex-shrink:0}
.button-line{position:absolute;inset:auto;height:110%;width:80px;background:#8f8f8f;filter:blur(8px);opacity:.6;z-index:0;pointer-events:none}
.text-link{display:inline-flex;flex-direction:column;color:#fff;font-size:16px;transition:opacity .35s}
.text-link-track{display:flex;flex-direction:column;height:20px;overflow:hidden}
.text-link-track>span{display:block;white-space:nowrap;line-height:19.2px;flex-shrink:0}
.text-link:hover{opacity:.5}
.social-media-wrapper{display:flex;align-items:center;gap:16px}
.social-link{height:44px;width:45.6px;display:flex;align-items:center;justify-content:center;background:var(--card);border-top:1px solid #fff3;border-radius:100%;transition:background-color .35s}
.social-link:hover{background:#252525}
.social-icon-wrap{display:block;width:18px;height:18px;overflow:hidden}
.social-icon-track{display:flex;flex-direction:column;gap:0;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.social-icon-track .ui-icon{width:18px;height:18px;flex-shrink:0}
.social-icon{height:18px;width:18px;flex-shrink:0;color:#f7f7f7}

/* Hero: a sticky stage; nested transforms keep time and scroll motion independent. */
.section-home-header{height:200vh;position:relative}
.circle-component{height:100vh;position:sticky;top:0;isolation:isolate}
/* Let the orbit extend into the next section when the sticky stage releases.
   A clip on this grid creates a hard horizontal edge across the image cards. */
.header-component-grid{position:relative;display:grid;place-items:center;height:100vh;width:100%;overflow:visible}
.circle-container,.inner-circle-container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1;transform-origin:center}
.circle-wrapper,.inner-circle-wrapper{position:relative;z-index:2;width:0;height:0;mix-blend-mode:difference;transform:scale(1.4)}
.circle-block,.inner-circle-block{position:relative;display:flex;align-items:center;justify-content:center;width:0;height:0;transform-origin:center;will-change:transform}
.circle-item,.inner-circle-item{position:absolute;width:72px;height:288px;border-radius:100%;perspective:1000px;transform:rotate(calc(var(--i) * 20deg))}
.circle-image-item{position:absolute;top:-125%;width:72px;height:80px;border-radius:10px;overflow:hidden}
.inner-circle-item{width:56px;height:192px;transform:rotate(calc(var(--i) * 30deg))}
.inner-circle-image-item{position:absolute;top:-100%;width:56px;height:64px;border-radius:10px;overflow:hidden}
.circle-image-item img,.inner-circle-image-item img{width:100%;height:100%;object-fit:cover}
.header-background{position:absolute;left:50%;top:50%;width:900px;max-width:none;height:900px;transform:translate(-50%,-50%);z-index:0;pointer-events:none}
.header-overlay{position:absolute;inset:0;z-index:2;height:150%;background:#00000080;pointer-events:none}
.header-content-wrap{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.header-content{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.registered-symbol{font-size:32px;line-height:48px}
.title{position:relative;top:-8px;font-size:72px;line-height:1;font-weight:500;letter-spacing:0}
.header-description{max-width:320px;font-size:14px;line-height:1.5;color:var(--muted)}

/* Intro and the expanding circular change from black to the pale service area. */
.overflow-wrapper{position:relative;overflow:clip}
.section-home-intro{position:relative;overflow:clip}
.scroll-title-wrapper{position:relative;display:flex;align-items:center;overflow:hidden;width:100%;white-space:nowrap}
.scroll-title-item{flex-shrink:0;will-change:transform}
.scroll-title{font-size:192px;font-weight:400;line-height:1.3;letter-spacing:-8px;padding-right:80px;white-space:nowrap}
.intro-wrap{max-width:960px;margin:0 auto 64px;width:100%}
.intro-text{font-size:56px;line-height:1.3;text-align:center}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;width:100%}
.intro-description{display:flex;flex-direction:column;gap:32px;max-width:576px}
.intro-description>p{font-size:16px;line-height:1.6;color:var(--muted)}
.intro-contact-wrap{display:flex;align-items:center;gap:24px}
.circle-text-wrap{display:flex;align-items:center;justify-content:flex-end}
.circle-text{width:160px;height:160px;opacity:.5}
.circle-shape-wrapper{height:60vh;position:relative;z-index:5}
.circle-shape-container{position:sticky;top:0;height:60vh;width:100%}
.circle-shape-block{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.circle-shape{position:absolute;z-index:2;width:250vw;height:250vw;flex-shrink:0;border-radius:100%;background:url("assets/circle-shape.svg") no-repeat center/cover;scale:0;transform-origin:center;will-change:auto}
.scrolling-text-wrap{display:flex;position:relative;z-index:10;flex-direction:column;align-items:center;gap:4px;color:#000}
.scrolling-text{font-size:16px}
.scrolling-plus{font-size:24px;line-height:32px;font-weight:400}
.section-home-service{position:relative;z-index:10;background:var(--paper);padding-bottom:96px;color:var(--black);overflow:clip}
.section-home-service .section-kicker{color:#808080}
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,auto);gap:16px;margin-top:96px;background:var(--paper)}
.service-block{padding:48px;border-radius:32px;background:#fff;overflow:hidden;min-width:0}
.service-rating{grid-area:1/1/2/2;padding:32px}
.service-card-0{grid-area:1/2/5/3}
.service-card-1{grid-area:1/3/5/4}
.service-review{grid-area:4/4/5/5;padding:32px}
.service-card-2{grid-area:1/4/4/5}
.service-card-3{grid-area:2/1/5/2}
.service-content-grid{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto auto;gap:16px;width:100%;height:100%}
.service-subtitle{font-family:"Google Sans Code",monospace;font-size:12px;line-height:1.5;text-transform:uppercase;color:#000;margin-bottom:16px}
.service-heading{font-size:32px;line-height:1.1;letter-spacing:0}
.dotted-line{height:1px;width:100%;border-top:1px dashed #ccc}
.service-content-grid>p,.service-rating>p,.service-review>p{font-size:14px;line-height:1.5;color:#000}
.service-content-grid>p{margin-bottom:10px}
.service-art{display:flex;align-items:flex-end;justify-content:flex-end;min-height:104px}
.icon-shape{height:auto;width:160px;object-fit:contain}
.client-avatar-block{display:flex;align-items:center;padding-left:10px;margin-bottom:16px}
.client-avatar{border:1px solid #fff;width:44px;height:44px;object-fit:cover;border-radius:100%;margin-left:-10px}
.review-wrap{display:flex;gap:3px;align-items:center}
.review-wrap .ui-icon{width:16px;height:16px}
.review-icon{height:24px;width:24px}
.service-review .review-wrap{margin-bottom:21px;color:#000}
.divider-wrap{height:128px;position:relative;overflow:hidden}
.background-grid{position:absolute;inset:0;width:100%;height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;pointer-events:none}
.background-grid:has(>.background-overflow:only-child){grid-template-rows:1fr}
.background-overflow{position:relative;overflow:hidden;width:100%;height:100%}
.menu-background{position:absolute;left:-200%;width:500vw;height:500vw;background:var(--paper);border-radius:100%}
.top-background{top:0}
.bottom-background{bottom:0}

/* Large photographic project sections with small, framed foreground previews. */
.case-study-top-content{display:flex;justify-content:space-between;gap:24px;margin-top:80px;margin-bottom:48px;color:#a7a7a7;font-size:16px}
.case-study-component{padding:12px;border:1px solid #ffffff1a;border-radius:40px;background:#1f1f1f}
.case-study-component-grid{display:grid;grid-template-columns:1fr;gap:14px}
.case-study-link-wrap{position:relative;display:block;width:100%;height:768px;overflow:clip;border-radius:32px;isolation:isolate}
.case-study-bg-image{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;z-index:0}
.case-study-overlay{position:absolute;inset:0;background:#000000b3;z-index:1}
.case-study-thumbnail-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.case-study-content-wrap{position:relative;width:480px;height:352px;background:#fff;border-radius:28px;display:flex;flex-direction:column;padding:16px 8px 8px;gap:16px;overflow:hidden}
.case-study-content{position:relative;z-index:1;display:grid;grid-template-columns:.5fr 1fr 1fr 1fr .5fr;gap:16px;padding-inline:8px;align-items:center;flex-shrink:0}
.case-study-text{color:#000;text-align:center;text-transform:uppercase;font-size:14px;line-height:1.5;white-space:nowrap}
.case-study-thumbnail-block{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:24px}
.case-study-thumbnail{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}

/* Chroma Grid image treatment, adapted from React Bits (c) 2026 David Haz.
   Integrated-site license and attribution: THIRD_PARTY_NOTICES.txt. */
.chroma-card{--chroma-x:-9999px;--chroma-y:-9999px;--chroma-power:0;--chroma-r:260px;--chroma-ox:0px;--chroma-oy:0px;--chroma-gray:1;--chroma-dim:.12;--chroma-glow:.5;--chroma-border:1;isolation:isolate}
.chroma-media{z-index:1}
.chroma-color{opacity:0;pointer-events:none}
.chroma-wash,.chroma-card-glow,.chroma-media-rim{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.chroma-wash{z-index:0;background:radial-gradient(130% 70% at 50% 100%,var(--chroma-accent),transparent 72%);opacity:0}
.chroma-card-glow{z-index:2;box-shadow:inset 0 0 0 1px var(--chroma-accent),inset 0 0 16px -8px var(--chroma-accent);opacity:0}
.chroma-media-rim{z-index:2;box-shadow:inset 0 0 0 1px #18181b14}
/* The original image remains fully visible without scripting, a fine pointer,
   or CSS masks. Decoration never intercepts the existing case-study link. */
@supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
  @media (any-hover:hover) and (any-pointer:fine) and (prefers-reduced-motion:no-preference){
    .chroma-ready .chroma-mono{filter:grayscale(var(--chroma-gray)) brightness(calc(1 - var(--chroma-dim)))}
    .chroma-ready .chroma-wash,.chroma-ready .chroma-color,.chroma-ready .chroma-card-glow{-webkit-mask-image:radial-gradient(circle var(--chroma-r) at calc(var(--chroma-x) - var(--chroma-ox)) calc(var(--chroma-y) - var(--chroma-oy)),var(--chroma-stops));mask-image:radial-gradient(circle var(--chroma-r) at calc(var(--chroma-x) - var(--chroma-ox)) calc(var(--chroma-y) - var(--chroma-oy)),var(--chroma-stops))}
    .chroma-ready .chroma-color{opacity:var(--chroma-power)}
    .chroma-ready .chroma-wash{opacity:calc(var(--chroma-glow) * var(--chroma-power) * .45)}
    .chroma-ready .chroma-card-glow{opacity:calc(var(--chroma-border) * var(--chroma-power))}
    .chroma-touch .chroma-mono{filter:none}
    .chroma-touch .chroma-color,.chroma-touch .chroma-wash,.chroma-touch .chroma-card-glow{opacity:0}
    .case-study-link-wrap:focus-visible .chroma-mono{filter:none}
    .case-study-link-wrap:focus-visible .chroma-color,.case-study-link-wrap:focus-visible .chroma-wash{opacity:0}
    .case-study-link-wrap:focus-visible .chroma-card-glow{-webkit-mask-image:none;mask-image:none;opacity:1}
  }
}
.case-study-link-wrap:focus-visible .chroma-card{outline:2px solid var(--chroma-accent);outline-offset:4px}

/* The pale lens, orbital testimonials, and the three manually controlled slides. */
.section-home-testimonial{position:relative;overflow:clip;color:#000}
.testimonial-content-layer{position:relative;z-index:2}
.container-medium{max-width:1120px}
.testimonial-component{position:relative;display:flex;align-items:center;justify-content:center;margin-top:128px}
.testimonial-circle-wrap{display:flex;align-items:center;justify-content:center;width:100%;height:800px}
.testimonial-container{position:relative;display:flex;align-items:center;justify-content:center;width:800px;height:800px;min-width:800px;min-height:800px;transform:scale(1.1)}
.testimonial-circle-01{position:relative;border:1px dashed #dddcdc;border-radius:100%;width:800px;height:800px;flex-shrink:0}
.testimonial-circle-03{position:absolute;border:1px dashed #dddcdc;border-radius:100%;width:560px;height:560px;min-width:560px;min-height:560px}
.image-circle,.inner-image-circle{position:absolute;z-index:10;display:flex;flex-direction:column;align-items:center;gap:12px;width:160px;height:160px}
.image-circle._01{top:-72px;right:320px}
.image-circle._02{top:320px;right:-80px}
.image-circle._03{top:720px;left:320px}
.image-circle._04{top:320px;left:-80px}
.inner-image-circle._01{top:32px;left:-16px}
.inner-image-circle._02{top:480px;left:192px}
.inner-image-circle._03{top:24px;right:-16px}
.message-bubble-wrap{position:relative;color:#fff;background:#000;border-radius:12px;font-size:12px;line-height:18px;padding:8px 12px;white-space:nowrap}
.message-bubble-wrap:after{content:"";position:absolute;left:calc(50% - 4px);bottom:-4px;width:8px;height:8px;background:#000;transform:rotate(45deg)}
.testimonial-avatar{height:56px;width:56px;border:2px solid #fff;border-radius:100%;object-fit:cover}
.testimonial-slider{position:absolute;width:100%;height:400px;z-index:12}
.testimonial-viewport{height:100%;overflow:hidden;border-radius:32px;touch-action:pan-y pinch-zoom}
.testimonial-track{display:flex;align-items:stretch;width:100%;height:100%;will-change:transform}
.testimonial-slide{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:0 0 100%;min-width:100%;height:100%}
.testimonial-content-wrap{padding:40px;border-radius:32px;background:#fff;display:flex;flex-direction:column;align-items:flex-start;min-width:0;color:#000}
.testimonial-text{font-size:20px;line-height:1.5;margin-top:32px;margin-bottom:32px;flex:1}
.client-content-wrap{display:flex;align-items:center;gap:16px;margin-top:auto}
.client-picture{height:64px;width:64px;border-radius:16px;object-fit:cover;flex-shrink:0}
.client-name{font-size:20px;line-height:1.2}
.client-role{font-size:14px;line-height:1.5;color:#808080;margin-top:4px}
.slider-controls{display:flex;gap:8px;height:64px;margin-top:8px}
.slider-arrow{display:flex;align-items:center;justify-content:center;height:64px;flex:1;background:#fff;border-radius:24px;color:#000;overflow:hidden;transition:transform .35s,box-shadow .35s}
.slider-arrow:hover{transform:scale(1.01);box-shadow:0 5px 10px #0000000d}
.slider-arrow .ui-icon{width:32px;height:32px}

/* Pricing and accordion share the quiet gray-on-black surface treatment. */
.section-home-pricing{position:relative;overflow:clip}
.plan-background{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.plan-bg-image{position:absolute;max-width:none;width:100%;height:100%;object-fit:cover;opacity:.4}
.pricing-content-wrapper{position:relative;z-index:2}
.pricing-container{max-width:1040px;margin:64px auto 0}
.pricing-component-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pricing-wrapper{display:flex;flex-direction:column;gap:16px;min-width:0}
.pricing-wrap{position:relative;padding:2px;background:#1f1f1f80;border-radius:32px;overflow:hidden;isolation:isolate}
.pricing-block{position:relative;z-index:2;background:#1f1f1f;border:1px solid #ffffff1a;border-radius:32px;padding:40px 40px 48px;display:flex;flex-direction:column;gap:40px}
.pricing-tag{display:flex;align-items:center;justify-content:space-between;gap:24px}
.plan-name{font-size:16px;line-height:1.5;text-transform:uppercase}
.popular-tag{font-size:12.8px;line-height:1.5;white-space:nowrap;padding:6px 16px 8px;border-radius:40px;border-top:1px solid #ffffff1a;color:#a7a7a7}
.price-text{font-size:64px;line-height:1.1;font-weight:400;letter-spacing:0}
.price-text>span{font-size:14px;line-height:1.5;letter-spacing:0}
.feature-label{font-size:14px;line-height:1.5;color:#a7a7a7}
.feature-content-wrap{display:flex;flex-direction:column;gap:10px}
.feature-item{display:flex;align-items:center;gap:15px;font-size:16px;line-height:1.5;color:#a7a7a7}
.feature-item>.ui-icon{height:20px;width:20px;color:#fff}
.feature-item strong{color:#fff;font-weight:400}
.pricing-gradient{position:absolute;top:0;left:0;width:25%;height:25%;background:#8f8f8f;filter:blur(10px);z-index:1}
.faq-component{max-width:1040px;margin-inline:auto}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:64px}
.faq-accordion{background:#1f1f1f;border-top:1px solid #ffffff26;border-radius:32px;padding:32px;overflow:hidden;align-self:start}
.faq-question{display:flex;align-items:center;justify-content:space-between;gap:32px;width:100%;padding:0;background:transparent;color:#fff;text-align:left}
.accordion-heading{font-size:24px;line-height:1.3;font-weight:400;position:relative}
.faq-plus{position:relative;height:40px;width:40px;flex-shrink:0;border-radius:100%;border-top:1px solid #ffffff26;background:#ffffff08;display:flex;align-items:center;justify-content:center}
.plus-horizontal,.plus-vertical{position:absolute;height:1px;width:12px;background:#fff}
.plus-vertical{rotate:90deg}
.faq-answer{height:0;overflow:hidden}
.faq-answer-inner{max-width:576px;color:#a7a7a7;padding-top:32px;padding-left:10px;font-size:16px;line-height:1.5;position:relative}

/* A second sticky orbit closes every principal page. */
.call-to-action{height:200vh;padding-bottom:64px;position:relative;overflow:clip}
.call-to-action-wrapper{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto auto;align-items:center;justify-content:center;gap:16px;height:100vh;position:sticky;top:0;overflow:clip;isolation:isolate}
/* The CTA ring occupies the third grid row. The full-stage absolute placement
   used by the opening hero would move this ring upward and clip its upper arc. */
.call-to-action-wrapper>.circle-container{position:relative;inset:auto;grid-area:3/1/4/4;align-self:center}
.call-to-action-content{position:relative;z-index:5;bottom:-32px;grid-area:2/1/4/4;place-self:center;display:flex;flex-direction:column;align-items:center;text-align:center}
.call-to-action-content>.section-kicker{margin-bottom:32px}
.call-to-action-content>.section-heading{margin-bottom:16px}
.call-to-action-content>p{width:100%;max-width:512px;font-size:16px;line-height:1.6;color:var(--muted);margin-bottom:48px}
.cta-opacity{position:absolute;bottom:0;left:0;width:100%;height:96px;background:linear-gradient(transparent,#000);z-index:5;pointer-events:none}

/* Footer navigation, scroll-to-top control, and the oversized moving wordmark. */
.footer{position:relative;overflow:clip}
.footer-padding{padding-top:128px;padding-bottom:48px}
.footer-top-content{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.footer-top-content .social-media-wrapper{margin-top:22px}
.footer-logo{width:auto;height:40px}
.footer-top-content>p{color:#a7a7a7;font-size:16px;line-height:1.6}
.footer-menu-wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-top:80px;margin-bottom:64px}
.footer-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:32px;margin-top:64px;width:100%}
.footer-content-block{display:flex;align-items:center;gap:32px}
.footer-text{font-size:16px;line-height:1.5;color:#a7a7a7}
.platform-mark{font-size:22px;font-weight:900;font-style:italic;line-height:1}
.template-mark{font-size:28px;line-height:1}
.back-to-top-button{display:flex;align-items:center;justify-content:center;width:80px;height:80px;background:transparent;border:1px solid #ffffff26;border-radius:100%;overflow:hidden;transition:border-color .35s}
.back-to-top-button:hover{border-color:#fff3}
.back-to-top-button .ui-icon{width:20px;height:20px}
.footer-utilities{justify-content:flex-end;gap:32px;font-size:16px;color:#a7a7a7}
.footer-utilities .text-link{opacity:.5}
.footer-utilities .text-link:hover{opacity:1}
.marquee-footer{position:relative;overflow:hidden;opacity:.1}
.marquee-text-component{display:flex;width:max-content}
.marquee-text-wrapper{flex:0 0 auto}
.marquee-text{font-size:224px;line-height:1;white-space:pre;font-weight:400}
.missing-page{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;text-align:center}
.missing-page>h1{font-size:160px;line-height:1}
.form-status,.page-form-feedback{font-size:14px;line-height:1.5;color:#a7a7a7;margin-top:16px}

@media(min-width:1280px){.marquee-text{font-size:256px}}
@media(min-width:1440px){
  .circle-wrapper,.inner-circle-wrapper{transform:scale(1.5)}
  .circle-item{width:80px}.circle-image-item{width:80px;height:88px}
  .inner-circle-item{width:64px}.inner-circle-image-item{width:64px;height:72px}
  .scroll-title{font-size:224px}.service-heading{font-size:40px}
  .icon-shape{width:192px}
  .testimonial-container{transform:scale(1.2)}.testimonial-component{margin-top:160px}
  .case-study-link-wrap{height:832px}.marquee-text{font-size:272px}
}
@media(min-width:1920px){.testimonial-component{margin-top:192px}.divider-wrap{height:160px}.marquee-text{font-size:288px}}
@media(max-width:991px){
  :root{--section:128px;--gutter:40px}
  .section-heading{font-size:64px}
  .circle-wrapper,.inner-circle-wrapper{transform:scale(1.1)}
  .intro-text{font-size:40px}.scroll-title{font-size:128px;letter-spacing:-6px;padding-right:48px}
  .circle-text{width:128px;height:128px}.intro-description{max-width:none}
  .intro-contact-wrap{flex-wrap:wrap}
  .section-home-service{padding-bottom:32px}.service-grid{margin-top:64px;grid-template-rows:repeat(8,auto)}
  .service-rating{grid-area:1/1/2/3}.service-card-0{grid-area:1/3/5/5}.service-card-1{grid-area:5/1/9/3}
  .service-review{grid-area:8/3/9/5}.service-card-2{grid-area:5/3/8/5}.service-card-3{grid-area:2/1/5/3}
  .service-block{padding:40px}.service-rating,.service-review{padding:24px}
  .icon-shape{width:128px;height:auto}
  .case-study-top-content{margin-top:64px}
  .case-study-link-wrap{height:640px}.case-study-content-wrap{width:400px;height:320px}
  .testimonial-component{margin-top:0}.testimonial-container{transform:scale(.8)}
  .testimonial-slider{height:352px}.testimonial-content-wrap{padding:32px}.testimonial-text{font-size:16px;margin-block:24px}.client-name{font-size:18px}
  .pricing-component-grid{grid-template-columns:1fr;gap:64px}.pricing-container{margin-top:64px}
  .pricing-block{min-height:0}.price-text{font-size:56px}
  .faq-grid{grid-template-columns:1fr}.faq-answer{padding-inline:8px}
  .call-to-action{padding-bottom:48px}
  .call-to-action-wrapper{align-items:start}
  .call-to-action-wrapper>.circle-container{align-self:start}
  .footer-padding{padding-top:96px}.footer-grid{gap:48px;grid-template-columns:1fr;justify-items:center;margin-top:48px}
  .footer-content-block{justify-content:center}.footer-menu-wrap{margin-top:64px;margin-bottom:48px}
  .footer-utilities{grid-row:2}.back-to-top-button{grid-row:3}.marquee-text{font-size:160px}
}
/* Wider phones in landscape keep the reference tablet composition, with the
   same safe touch controls. Fine-pointer desktop layouts do not match this arm. */
@media(max-width:767px), (max-width:1023px) and (max-height:500px) and (hover:none) and (pointer:coarse){
  .page-container{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
  .navbar{top:env(safe-area-inset-top,0px)}
  .nav-menu{height:100dvh}
  .nav-menu-container{padding:calc(64px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));overflow-y:auto;overscroll-behavior-y:contain}
  .nav-menu-content{flex-shrink:0;max-width:100%}
  .menu-button:before{content:"";position:absolute;inset:-4px}
  .call-to-action-content{max-width:100%;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .footer{padding-bottom:env(safe-area-inset-bottom,0px)}
}
@media(max-width:767px){
  :root{--section:80px;--gutter:20px}
  .section-heading{font-size:48px;line-height:1.1;letter-spacing:1.6px}
  .nav-block{width:192px}.nav-link{height:32px}.nav-text{font-size:32px}
  .menu-button-wrap{width:20px}.nav-menu-block{top:-2px}
  .header-component-grid{height:960px}.circle-wrapper,.inner-circle-wrapper{transform:scale(.8)}
  .title{font-size:36px}.header-description{max-width:288px}
  .header-description .desktop-break{display:none}
  .header-background{width:720px;height:720px}
  .scroll-title{font-size:80px;letter-spacing:-2px;padding-right:16px}
  .intro-text{font-size:32px}.intro-wrap{margin-bottom:48px}
  .intro-grid{grid-template-columns:1fr;gap:48px}.intro-description>p{text-align:center}
  .intro-contact-wrap{justify-content:center}.circle-text-wrap{justify-content:center}
  .circle-shape-wrapper,.circle-shape-container{height:60vh}
  .service-grid{margin-top:48px;gap:16px}
  .service-block,.service-rating,.service-review{padding:32px}.service-heading{font-size:28px}
  .service-content-grid{gap:16px}.icon-shape{width:104px;height:auto}
  .service-rating>p,.service-review>p{font-size:14px}
  .divider-wrap{height:128px}.case-study-top-content{margin-top:48px;margin-bottom:32px;font-size:14px}
  .case-study-component{padding:8px;border-radius:32px}.case-study-component-grid{gap:8px}
  .case-study-link-wrap{height:480px;border-radius:24px}.case-study-bg-image{background-attachment:scroll}
  .case-study-content-wrap{width:320px;height:256px;border-radius:24px}
  .case-study-content{gap:8px}.case-study-thumbnail-block{border-radius:16px}
  .testimonial-container{width:75vw;height:75vw;transform:scale(.75)}
  .testimonial-slider{height:400px;margin-bottom:-96px}.testimonial-content-wrap{padding:24px;border-radius:24px}
  .testimonial-viewport{border-radius:24px}.testimonial-text{font-size:16px;line-height:1.5}
  .client-picture{width:48px;height:48px;border-radius:12px}.client-content-wrap{gap:12px}.client-name{font-size:16px}.client-role{font-size:12px}
  .pricing-container{margin-top:56px}.price-text{font-size:48px}
  .faq-grid{margin-top:56px}
  /* The phone ring shares the copy's grid area, keeping its center 32px above
     the copy center. Its own scale fits the wider phone composition without
     changing the opening hero. Equal height/padding extensions keep the 640px
     content grid fixed while allowing the lower arc to fade before the footer. */
  .call-to-action{--cta-orbit-tail:144px;--cta-orbit-scale:.72;height:auto;min-height:664px;padding-bottom:24px}
  .call-to-action-wrapper{height:calc(640px + var(--cta-orbit-tail));min-height:640px;padding-bottom:var(--cta-orbit-tail);position:relative}
  .call-to-action-wrapper>.circle-container{grid-row:2/4;align-self:center}
  .call-to-action-wrapper>.circle-container>.circle-wrapper{transform:scale(var(--cta-orbit-scale))}
  /* Fade at the original 640px content edge; keep added tail space black.
     The mask covers the ring while the copy and button remain above it. */
  .call-to-action-wrapper>.cta-opacity{height:calc(96px + var(--cta-orbit-tail));background:linear-gradient(180deg,transparent 0px,#000 96px,#000 100%);z-index:4}
  .footer-padding{padding-top:64px}.footer-menu-wrap{justify-content:center;margin-top:80px;margin-bottom:64px;gap:32px}
  .footer-grid{margin-top:64px}
  .footer-content-block{flex-wrap:wrap}
  .marquee-text{font-size:96px}
}
@media(max-width:479px){
  :root{--section:64px;--gutter:20px}
  .section-heading{font-size:36px;line-height:1.1;letter-spacing:1.6px}
  .section-home-header{height:150vh}.header-component-grid{height:800px}
  .header-content{padding-inline:24px}.circle-wrapper,.inner-circle-wrapper{transform:scale(.6)}
  .registered-symbol{font-size:32px}
  .nav-menu-content{width:288px;height:352px}.nav-link{height:29.6px}.nav-text{font-size:29.6px}
  .scroll-title{font-size:64px;padding-right:12px}.intro-text{font-size:24px}
  .intro-wrap{margin-bottom:32px}.intro-grid{gap:32px}.intro-description>p{text-align:left;font-size:14px}
  .intro-contact-wrap{justify-content:flex-start;flex-wrap:wrap;gap:24px}
  .circle-text-wrap{justify-content:flex-end}.circle-text{height:112px;width:112px}
  .section-home-service{padding-bottom:0}.service-grid{grid-template-columns:1fr;grid-template-rows:auto;gap:16px}
  .service-grid>*{grid-area:auto}.service-rating{order:0}.service-card-0{order:2}.service-card-1{order:3}.service-review{order:5}.service-card-2{order:4}.service-card-3{order:1}
  .service-block{padding:32px}.service-rating,.service-review{padding:32px}.service-subtitle{font-size:12px}
  .service-art{justify-content:flex-end}.service-content-grid{grid-template-rows:auto auto auto auto;min-height:264px}
  .client-avatar-block{margin-bottom:16px}.service-rating>p,.service-review>p{font-size:14px}
  .client-avatar{width:48px;height:48px}
  .case-study-top-content{font-size:12px;gap:16px}.case-study-link-wrap{height:240px}
  .case-study-content-wrap{width:256px;max-width:calc(100% - 32px);height:192px;padding-top:14px;gap:8px}
  .case-study-content{padding-inline:0;gap:8px}.case-study-text{font-size:12px}
  .testimonial-container{transform:scale(.8)}.testimonial-circle-wrap{height:960px}
  .testimonial-slider{height:auto;margin-top:0;margin-bottom:-352px}
  .testimonial-track{align-items:stretch}.testimonial-slide{grid-template-columns:1fr;grid-template-rows:1fr 1fr;height:auto;align-content:stretch}
  .testimonial-viewport{height:auto}.testimonial-content-wrap{padding:32px;min-height:288px}
  .testimonial-text{font-size:16px;line-height:1.5;margin-block:24px}.client-picture{width:56px;height:56px}
  .testimonial-content-layer{padding-bottom:160px}
  .slider-arrow .ui-icon{width:24px;height:24px}
  .price-text{font-size:40px}.pricing-tag{gap:12px}.plan-name{font-size:14px}.popular-tag{padding:6px 12px 8px;font-size:11px}
  .pricing-block{padding:24px;gap:32px}
  .faq-question{gap:0}.accordion-heading{font-size:18px;font-weight:600;padding-inline:10px}.faq-accordion{padding:24px}.faq-plus{height:32px;width:32px}
  .call-to-action{--cta-orbit-tail:80px;--cta-orbit-scale:.6}
  .footer-logo{height:36px}
  .footer-top-content{gap:16px}.footer-top-content .social-media-wrapper{margin-top:24px}
  .footer-menu-wrap{gap:32px}
  .marquee-text{font-size:80px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .circle-block,.inner-circle-block,.circle-shape,.testimonial-track{will-change:auto}
}