/* Tailwind v4 site stylesheet. Single source of truth for design + custom CSS.
 *
 * At draft time, this is read inline into a <style type="text/tailwindcss"> block.
 * At publish time, the Tailwind CLI compiles this file (plus templates) into
 * dist/styles.css. Every directive works here: @theme, @layer, @utility,
 * @apply, @keyframes, plus plain CSS. Do NOT write <style> blocks in PHP
 * templates for theme CSS — put it here so it lands in the compiled bundle.
 *
 * functions.php also parses the @theme block at runtime to register the
 * palette + font sizes with Gutenberg via add_theme_support().
 *
 * Conventions:
 *   1. @theme: tokens only (--color-*, --font-*, --text-*, --radius-*). No
 *      selectors, no @apply. Tokens auto-generate matching utilities.
 *   2. Plain CSS: outside @theme, inside @layer. Prefer utility classes in
 *      templates first; only write CSS here when utilities cannot express it.
 *      @layer base { h1 { font-size: var(--text-2xl); } }
 *      @layer components { .card { padding: --spacing(6); } }
 *   3. New reusable utilities: prefer @utility over @apply.
 *      @utility content-auto { content-visibility: auto; }
 *   4. Custom web fonts: load via <link> in template-parts/head.php, then
 *      reference here via --font-*.
 *
 * Token naming (Tailwind v4):
 *   --color-{slug}        → bg-{slug}, text-{slug}, border-{slug}
 *   --color-{slug}-{NN}   → numeric shades (skipped in the Gutenberg palette)
 *   --font-{slug}         → font-{slug}
 *   --text-{slug}         → text-{slug}
 *   --radius-{slug}       → rounded-{slug}
 */

@theme {
	--color-primary: #2563eb;
	--color-primary-50:  #eff6ff;
	--color-primary-100: #dbeafe;
	--color-primary-500: #3b82f6;
	--color-primary-600: #2563eb;
	--color-primary-700: #1d4ed8;
	--color-primary-900: #1e3a8a;

	--color-secondary: #475569;
	--color-secondary-50:  #f8fafc;
	--color-secondary-100: #f1f5f9;
	--color-secondary-200: #e2e8f0;
	--color-secondary-300: #cbd5e1;
	--color-secondary-500: #64748b;
	--color-secondary-600: #475569;
	--color-secondary-700: #334155;
	--color-secondary-900: #0f172a;

	--color-neutral: #171717;
	--color-background: #ffffff;

	--font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-serif: Georgia, "Times New Roman", serif;
	--font-mono:  ui-monospace, "SF Mono", Menlo, monospace;

	--text-sm:   0.875rem;
	--text-base: 1rem;
	--text-lg:   1.125rem;
	--text-xl:   1.25rem;
	--text-2xl:  1.5rem;
	--text-3xl:  1.875rem;
	--text-4xl:  2.25rem;
	--text-5xl:  3rem;
}

/* Element-level defaults. Reach for utility classes in templates first; put
 * a rule here only when the same styling needs to apply across every instance
 * of an element (e.g. body font features). Keep this layer small. */
@layer base {
	/* body { font-feature-settings: "ss01", "ss02"; } */
}


/* Cinematic homepage: original code-drawn creative direction. */
.rc-home{--rc-blue:#2563eb;--rc-mint:#b7f1e4;--rc-ink:#102a43;background:#fff;color:var(--rc-ink);overflow:clip}
.rc-home a{text-decoration:none}.rc-home h1,.rc-home h2,.rc-home h3{font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.065em}.rc-home em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.065em}.rc-home .rc-kicker{font-size:10px;font-weight:700;letter-spacing:1.6px;line-height:1.8}
.rc-story{height:245vh;min-height:1500px;background:#f3faf7}.rc-stage{height:calc(100svh - 100px);min-height:620px;position:sticky;top:100px;overflow:hidden;isolation:isolate;--progress:0;background:radial-gradient(ellipse at 75% 45%,#d6efe8 0%,#eff8f4 45%,#f7faf7 75%)}
.rc-grid{position:absolute;inset:0;background-image:linear-gradient(#102a4308 1px,transparent 1px),linear-gradient(90deg,#102a4308 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(90deg,transparent,#000);z-index:-1}
.rc-topline,.rc-bottomline{position:absolute;left:4.5%;right:4.5%;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.4px;font-weight:600}.rc-topline{top:28px}.rc-topline i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#0d9488;margin-right:9px;box-shadow:0 0 0 4px #0d948812}.rc-bottomline{bottom:25px;gap:25px}.rc-bottomline b{margin-left:14px;font-size:16px}.rc-progress{height:2px;flex:1;background:#102a4315;max-width:270px}.rc-progress i{display:block;width:100%;height:100%;background:#2563eb;transform:scaleX(var(--progress));transform-origin:left}
.rc-copy{position:absolute;left:4.5%;top:17%;z-index:5;transition:opacity .45s,transform .7s}.rc-copy h1{font-size:clamp(70px,8.7vw,140px)!important;line-height:.97;margin:25px 0;max-width:700px}.rc-copy h1 em{color:#1d4ed8}.rc-intro{font-size:17px;line-height:1.7;color:#486581}.rc-button{background:#2563eb;color:#fff!important;border-radius:100px;padding:16px 23px;display:inline-flex;gap:25px;align-items:center;font-size:13px;font-weight:600;box-shadow:0 8px 20px #2563eb18;transition:background .2s,transform .2s}.rc-button span{font-size:22px;line-height:1}.rc-button:hover{background:#1d4ed8;transform:translateY(-3px)}
.rc-scene{position:absolute;width:650px;height:560px;left:68%;top:51%;transform:translate(-50%,-50%) scale(calc(1 + var(--progress)*.1));perspective:1100px;transition:left .8s,top .8s;pointer-events:none}
.rc-halo{position:absolute;border:1px solid #0d948833!important;border-radius:50%;width:510px;height:510px;left:70px;top:30px;transform:rotateX(62deg) rotateZ(calc(-25deg + var(--progress)*160deg))}.rc-halo-two{width:610px;height:610px;left:20px;top:-20px;transform:rotateX(62deg) rotateZ(calc(30deg + var(--progress)*-100deg));border-style:dashed!important}.rc-orbit-label{position:absolute;bottom:35px;left:160px;font-size:9px;letter-spacing:3px;color:#0f766e;transform:rotate(-12deg)}
.rc-monogram{position:absolute;left:210px;top:135px;width:230px;height:270px;transform:rotate(-12deg) rotateY(calc(-22deg + var(--progress)*42deg));filter:drop-shadow(22px 32px 22px #102a4330);transition:top .7s}
.rc-monogram>span:first-child{display:block;font:900 280px/.9 'Plus Jakarta Sans',sans-serif;letter-spacing:-35px;color:#2563eb;text-shadow:1px 1px #1d4ed8,2px 2px #1d4ed8,3px 3px #1d4ed8,4px 4px #1d4ed8,5px 5px #1d4ed8,6px 6px #1d4ed8,7px 7px #1d4ed8,8px 8px #1d4ed8,9px 9px #1d4ed8,10px 10px #1d4ed8,11px 11px #1d4ed8,12px 12px #1d4ed8}
.rc-spark{position:absolute;right:-18px;top:-25px;font-size:85px;line-height:1;color:#ff6b5e;transform:rotate(calc(var(--progress)*180deg))}
.rc-float{position:absolute;border:1px solid #ffffffd0!important;box-shadow:0 22px 45px #102a4320;border-radius:14px;overflow:hidden;transition:transform .8s,left .8s,top .8s;backface-visibility:hidden}.rc-window{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;font-size:7px;letter-spacing:1px;border-bottom:1px solid #102a4310!important}.rc-window b{font-size:5px;color:#8299a4}.rc-window i{width:5px;height:5px;background:#b7f1e4;border-radius:50%}.rc-social{width:205px;background:#fff;left:15px;top:55px;transform:rotate(-10deg) rotateY(10deg)}.rc-social-art{height:165px;background:#b7f1e4;padding:23px 20px;position:relative}.rc-social-art>span{font-size:30px;font-weight:800;line-height:1.05;letter-spacing:-1.5px;position:relative;z-index:1}.rc-social-art em{color:#0f766e}.rc-social-art i{position:absolute;right:-6px;bottom:-24px;font-size:125px;line-height:1;color:#0d94882a;font-style:normal}.rc-social-foot{display:flex;justify-content:space-between;padding:10px 12px;font-size:6px;align-items:center}.rc-social-foot span:first-child{font-size:13px}
.rc-search{background:#fff;width:230px;left:390px;top:20px;padding:20px;transform:rotate(9deg) rotateY(-12deg)}.rc-mini-label{display:block;font-size:7px;font-weight:700;letter-spacing:1.4px}.rc-searchbar{display:flex;gap:8px;align-items:center;margin:12px 0 16px;padding:8px;background:#f1f6f7;border-radius:30px;font-size:7px}.rc-searchbar>span{font-size:17px}.rc-search>b{font-size:25px;letter-spacing:-1px;line-height:1.1;display:block}.rc-search-link{display:block;font-size:6px;letter-spacing:1px;margin-top:18px;color:#0f766e}
.rc-ads{background:#102a43;color:#fff;width:215px;left:400px;top:305px;transform:rotate(9deg) rotateY(-10deg)}.rc-ads>b{display:block;font-size:24px;line-height:1.1;padding:15px 18px 0;letter-spacing:-1px}.rc-bars{height:70px;display:flex;align-items:flex-end;gap:9px;padding:12px 18px 0}.rc-bars i{background:#b7f1e4;flex:1;border-radius:3px 3px 0 0;height:25%}.rc-bars i:nth-child(2){height:45%;background:#74cfc0}.rc-bars i:nth-child(3){height:38%}.rc-bars i:nth-child(4){height:65%;background:#74cfc0}.rc-bars i:nth-child(5){height:52%}.rc-bars i:nth-child(6){height:84%;background:#74cfc0}.rc-bars i:nth-child(7){height:100%;background:#ff6b5e}.rc-ads>.rc-mini-label{padding:14px 18px}
.rc-code{background:#ff8b7f;width:195px;padding:20px;left:30px;top:345px;transform:rotate(-7deg) rotateY(12deg)}.rc-code>span{font:9px monospace}.rc-code strong{display:block;font-size:25px;line-height:1.05;letter-spacing:-1px;margin:15px 0}.rc-code small{font-size:6px;letter-spacing:1px}
.rc-scene-caption{position:absolute;left:5%;bottom:20%;max-width:520px;opacity:0;transform:translateY(20px);transition:opacity .5s,transform .7s;pointer-events:none}.rc-scene-caption h2{font-size:clamp(46px,5.6vw,86px)!important;line-height:1.03;margin:20px 0}.rc-scene-caption h2 em{color:#1d4ed8}.rc-scene-caption p{font-size:16px;color:#486581;max-width:340px}.rc-chapter{font-size:10px;letter-spacing:2px;color:#0f766e;font-weight:700}
.rc-stage[data-phase="1"] .rc-copy,.rc-stage[data-phase="2"] .rc-copy{opacity:0;transform:translateY(-35px);pointer-events:none}.rc-stage[data-phase="1"] .rc-scene-caption,.rc-stage[data-phase="2"] .rc-scene-caption{opacity:1;transform:none}.rc-stage[data-phase="1"] .rc-social{transform:translate(70px,30px) rotate(-3deg)}.rc-stage[data-phase="1"] .rc-search{transform:translate(-15px,70px) rotate(3deg)}.rc-stage[data-phase="1"] .rc-code{transform:translate(55px,-25px) rotate(-3deg)}.rc-stage[data-phase="1"] .rc-ads{transform:translate(-15px,-5px) rotate(3deg)}
.rc-stage[data-phase="2"] .rc-social{transform:translate(90px,-20px) rotate(-6deg)}.rc-stage[data-phase="2"] .rc-search{transform:translate(-30px,15px) rotate(6deg)}.rc-stage[data-phase="2"] .rc-code{transform:translate(75px,-35px) rotate(-4deg)}.rc-stage[data-phase="2"] .rc-ads{transform:translate(-30px,-15px) rotate(5deg)}
.rc-ticker{background:#102a43;color:#b7f1e4;overflow:hidden;padding:20px 0;font-size:25px;font-weight:700;letter-spacing:-1px}.rc-ticker>div{width:max-content;animation:rc-marquee 35s linear infinite}.rc-ticker span{color:#ff8b7f;margin:0 35px}.rc-section{padding:100px max(28px,calc((100vw - 1240px)/2))}.rc-section-top{display:flex;justify-content:space-between;border-top:1px solid #d9e6ec!important;padding-top:20px;margin-bottom:40px;font-size:9px;letter-spacing:1.5px}.rc-section h2{font-size:clamp(36px,4.7vw,68px)!important;line-height:1.08;margin:0}.rc-service-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;margin-bottom:45px}.rc-service-intro>p{max-width:310px;font-size:15px;color:#486581;margin-bottom:0}.rc-service-intro em{color:#0f766e}.rc-service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.rc-service{padding:25px 24px;border-radius:20px;color:#102a43!important;display:flex;flex-direction:column;min-height:390px;transition:transform .25s,box-shadow .25s}.rc-service:hover{transform:translateY(-8px);box-shadow:0 20px 30px #102a4312}.rc-mint{background:#d9f5eb}.rc-coral{background:#ffded6}.rc-blue{background:#e5ecff}.rc-navy{background:#102a43;color:white!important}.rc-card-top{display:flex;justify-content:space-between;font-size:10px;align-items:center}.rc-card-top>span:last-child{font-size:22px}.rc-service-mark{font-size:68px;line-height:1;margin:30px 0 25px}.rc-service h3{font-size:24px!important;line-height:1.15;margin:0 0 16px;letter-spacing:-1px}.rc-service p{font-size:13px;line-height:1.8;opacity:.8}.rc-service small{font-size:8px;letter-spacing:.8px;margin-top:auto;padding-top:20px}.rc-navy h3{color:white}.rc-navy .rc-service-mark{color:#b7f1e4}
.rc-approach{display:grid;grid-template-columns:1fr 1fr;gap:100px;background:#f0f9f6}.rc-approach .rc-kicker{color:#0f766e;margin-bottom:25px}.rc-approach-copy{max-width:350px;color:#486581;font-size:15px;margin:25px 0}.rc-text-link{font-size:13px;font-weight:600;color:#1d4ed8;display:inline-block;border-bottom:1px solid #1d4ed8!important;padding-bottom:5px}.rc-process-list>div{display:flex;gap:22px;padding:28px 0;border-top:1px solid #bcd6ce!important}.rc-process-list>div>span{font-size:10px;color:#0f766e}.rc-process-list h3{font-size:23px!important;letter-spacing:-1px;margin:0 0 12px}.rc-process-list p{font-size:14px;line-height:1.8;color:#486581;margin:0}.rc-process-list b{font-size:20px;font-weight:400}
.rc-founders{text-align:center}.rc-founder-heading>p:last-child{color:#486581;font-size:15px;margin-top:25px}.rc-founder-row{display:grid;grid-template-columns:1fr 1fr;gap:35px;max-width:820px;margin:50px auto 30px;text-align:left}.rc-founder-row article{padding:35px;background:#f7faf9;border:1px solid #e1ebe7!important;border-radius:22px}.rc-avatar{width:95px;height:95px;background:#b7f1e4;position:relative;display:grid;place-items:center;border-radius:50%;font-size:48px;font-weight:800;margin-bottom:30px}.rc-avatar>span{position:absolute;right:-8px;bottom:0;width:34px;height:34px;display:grid;place-items:center;background:#ff8b7f;font-size:22px;border-radius:50%}.rc-avatar-blue{background:#dbe5ff}.rc-founder-row h3{font-size:29px!important;margin:0 0 7px;letter-spacing:-1px}.rc-founder-row article>span{font-size:12px;color:#0f766e}.rc-founder-row article>p:last-child{font-size:14px;line-height:1.8;color:#486581;margin:22px 0 0}
.rc-final{background:#b7f1e4}.rc-final h2{font-size:clamp(56px,8vw,115px)!important;line-height:1;position:relative;margin:30px 0 45px}.rc-final h2>span{position:absolute;right:0;top:0;color:#0f766e;font-size:1.7em;line-height:1}.rc-final>div{display:flex;align-items:center;justify-content:space-between;gap:30px}.rc-final p{font-size:15px;margin-bottom:0}.rc-final .rc-kicker{font-size:10px}
@keyframes rc-marquee{to{transform:translateX(-50%)}}
@media(min-width:1550px){.rc-scene{transform:translate(-50%,-50%) scale(1.2)}}
@media(max-width:1100px){.rc-scene{left:72%;transform:translate(-50%,-50%) scale(.78)}.rc-copy h1{font-size:85px!important}.rc-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rc-service{min-height:350px}.rc-approach{gap:50px}}
@media(max-width:800px){.rc-story{height:220vh;min-height:1400px}.rc-stage{top:80px;height:calc(100svh - 80px);min-height:690px}.rc-topline{top:20px;font-size:7px}.rc-topline>span:last-child{display:none}.rc-copy{top:10%;left:6%}.rc-copy h1{font-size:clamp(55px,10vw,78px)!important;margin:16px 0}.rc-copy h1 br{display:none}.rc-intro{font-size:14px}.rc-intro br{display:none}.rc-copy .rc-kicker{font-size:8px}.rc-copy .rc-button{padding:12px 20px;font-size:12px}.rc-scene{left:50%;top:67%;transform:translate(-50%,-50%) scale(.66)}.rc-scene-caption{left:6%;top:11%;bottom:auto;max-width:90%}.rc-scene-caption h2{font-size:46px!important;margin:12px 0}.rc-scene-caption p{font-size:14px;max-width:300px}.rc-bottomline{bottom:15px;font-size:7px;gap:14px}.rc-section{padding:65px 24px}.rc-service-intro{display:block}.rc-service-intro>p{margin-top:25px;max-width:100%}.rc-approach{grid-template-columns:1fr;gap:35px}.rc-founder-row{gap:18px}.rc-founder-row article{padding:25px}.rc-final h2>span{font-size:1.1em}.rc-section-top>span{display:none}}
@media(max-width:480px){.rc-stage{min-height:690px}.rc-scene{transform:translate(-50%,-50%) scale(.53);top:67%}.rc-copy h1{font-size:55px!important}.rc-copy{top:11%}.rc-copy .rc-intro{max-width:285px}.rc-progress{max-width:70px}.rc-service-grid,.rc-founder-row{grid-template-columns:1fr}.rc-service{min-height:310px}.rc-service-mark{margin:20px 0}.rc-final>div{align-items:flex-start;flex-direction:column}.rc-final h2{font-size:54px!important}.rc-final h2>span{right:-8px;font-size:1em}.rc-ticker{font-size:20px}.rc-scene-caption h2{font-size:42px!important}.rc-section h2{font-size:37px!important}.rc-final h2{font-size:54px!important}}
@media(prefers-reduced-motion:reduce){.rc-story{height:auto;min-height:0}.rc-stage{position:relative;top:0}.rc-ticker>div{animation:none}.rc-home *{transition:none!important}.rc-service:hover{transform:none}}

/* Reusable component classes. Use for compound patterns that recur and need
 * a name (e.g. .card, .hero-heading, .divider). Reference tokens via var();
 * @apply works but is finicky — prefer var() + utility classes in templates. */
@layer components {
	/* .hero-heading em { font-style: italic; color: var(--color-primary); } */
}
