/* =====================================================================
   white.css  —  Flat all-white theme override (light mode)
   Whitens every page / section / footer background and removes the
   grain, grid, orb, glow and texture overlays. Leaves primary buttons,
   icons, colored work-cards, gradient CTAs and accent colors intact.
   Loaded last in <head>; uses !important to win over inline section CSS.
   ===================================================================== */

/* 1. Page shell + body -------------------------------------------------- */
html[tp-theme="tp-theme-light"],
html[tp-theme="tp-theme-light"] body,
html[tp-theme="tp-theme-light"] .tp-page-wrapper,
html[tp-theme="tp-theme-light"] .theme-bg,
html[tp-theme="tp-theme-light"] .theme-bg-2,
html[tp-theme="tp-theme-light"] #smooth-wrapper,
html[tp-theme="tp-theme-light"] #smooth-content,
html[tp-theme="tp-theme-light"] main{
   background:#ffffff !important;
   background-color:#ffffff !important;
   background-image:none !important;
}

/* 2. Every section, footer and known section wrapper ------------------- */
html[tp-theme="tp-theme-light"] section,
html[tp-theme="tp-theme-light"] footer,
html[tp-theme="tp-theme-light"] .tp-hero-area,
html[tp-theme="tp-theme-light"] .tp-about-area,
html[tp-theme="tp-theme-light"] .tp-brand-area,
html[tp-theme="tp-theme-light"] .tp-marquee-area,
html[tp-theme="tp-theme-light"] .tp-services-area,
html[tp-theme="tp-theme-light"] .tp-skill-area,
html[tp-theme="tp-theme-light"] #about,
html[tp-theme="tp-theme-light"] #services,
html[tp-theme="tp-theme-light"] #ai-exploration,
html[tp-theme="tp-theme-light"] #portfolio.pc-area,
html[tp-theme="tp-theme-light"] #certifications.cc-area,
html[tp-theme="tp-theme-light"] #contact.sf{
   background:#ffffff !important;
   background-color:#ffffff !important;
   background-image:none !important;
}

/* keep footer/section CSS-variable backgrounds white too */
html[tp-theme="tp-theme-light"] #contact.sf,
html[tp-theme="tp-theme-light"] .sf{ --sf-bg:#ffffff !important; }
html[tp-theme="tp-theme-light"] #certifications.cc-area{ --cc-bg:#ffffff !important; }

/* 3. Remove decorative background overlays (grain / grid / orbs / glow) - */
html[tp-theme="tp-theme-light"] .pc-noise,
html[tp-theme="tp-theme-light"] .pc-glow,
html[tp-theme="tp-theme-light"] .pc-spot,
html[tp-theme="tp-theme-light"] .cc-noise,
html[tp-theme="tp-theme-light"] .cc-glow,
html[tp-theme="tp-theme-light"] .dai-bg,
html[tp-theme="tp-theme-light"] .dai-bg .noise,
html[tp-theme="tp-theme-light"] .dai-bg .grid,
html[tp-theme="tp-theme-light"] .dai-bg .orb,
html[tp-theme="tp-theme-light"] .sf-bg,
html[tp-theme="tp-theme-light"] .tp-services-bg-text-animation .tp-portfolio-bg-text{
   display:none !important;
}

/* pseudo-element textures */
html[tp-theme="tp-theme-light"] #contact.sf::after,
html[tp-theme="tp-theme-light"] .tp-hero-area::before,
html[tp-theme="tp-theme-light"] .tp-hero-area::after{
   background:none !important;
   background-image:none !important;
}

/* 4. Neutralise any inline data-background texture on the shell --------- */
html[tp-theme="tp-theme-light"] [data-background]{
   background-image:none !important;
}

/* =====================================================================
   Blue is the primary. Anywhere a blue fill appears, its text + icons
   must be WHITE (never black). Applies in both light & dark themes.
   ===================================================================== */

/* Header resume button — blue fill, white icon */
.tp-header-cv-btn{ background-color:#436FF5 !important; color:#ffffff !important; }
.tp-header-cv-btn svg{ color:#ffffff !important; stroke:#ffffff !important; }

/* Skills tab switch — active tab sits on the blue marker => white text;
   inactive tabs are dark on the white background (were white = invisible) */
html[tp-theme="tp-theme-light"] .tp-skill-tab .nav-tabs .nav-link{ color:#586079 !important; }
html[tp-theme="tp-theme-light"] .tp-skill-tab .nav-tabs .nav-link.active{ color:#ffffff !important; }
.tp-skill-tab .nav-tabs .nav-link.active{ color:#ffffff !important; }
.tp-skill-tab #lineMarker{ background:#436FF5 !important; }

/* Certification cards — on hover the card fills blue => white text + seal */
#certifications.cc-area .cc-card:hover .cc-name,
#certifications.cc-area .cc-card:hover .cc-org,
#certifications.cc-area .cc-card:hover .cc-seal{ color:#ffffff !important; }

/* Footer social pill hover — blue fill => white text/icon */
.sf-social:hover{ color:#ffffff !important; }
.sf-social:hover svg{ color:#ffffff !important; }

/* Work-card "View project" button — blue text on white ink chip stays,
   but the colored left panel keeps its white text (already white). */

/* =====================================================================
   Remove drop-shadows / box-shadows from ICONS.
   ===================================================================== */
.skm-ic svg,
.skm-ic img{ filter:none !important; }
.dai-card .ic{ box-shadow:none !important; }
.tp-hero-social a,
.tp-hero-social a svg{ box-shadow:none !important; filter:none !important; }
.cc-seal,
.cc-seal svg{ filter:none !important; box-shadow:none !important; }

/* =====================================================================
   Brand scrolling-logos strip (after the banner) on the white landing.
   Logos ship as WHITE svgs -> recolor dark so they read on white.
   ===================================================================== */
html[tp-theme="tp-theme-light"] .tp-brand-area .tp-brand-inner{
   background:#ffffff !important;
   border:1px solid rgba(20,32,68,.10) !important;
   box-shadow:0 20px 50px -32px rgba(20,32,68,.16) !important;
   -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
html[tp-theme="tp-theme-light"] .tp-brand-area .tp-brand-item img{
   filter:brightness(0) !important; opacity:.5 !important; transition:opacity .3s ease;
}
html[tp-theme="tp-theme-light"] .tp-brand-area .tp-brand-item:hover img{ opacity:.85 !important; }

/* =====================================================================
   AI Lab (.al-) & AI Exploration (.aix) — remove harsh BLACK shadows.
   Icons lose their drop-shadow; cards/panels get a soft blue-grey shadow.
   ===================================================================== */
.aix .tile.card .ic.i3d svg,
.aix .ic svg,
.al-i3d svg,
.al-plug .thumb3d img,
.aix .flow-rail .step .s3d,
.aix .flow-rail .step.on .s3d{ filter:none !important; }

.aix .tile,
.aix .note,
.aix .take .col,
.aix .flow-rail .step,
.aix .flow-rail .step.on,
.aix .pane-toolbar .modebar,
.al-modal-panel,
.al-plug .thumb3d,
.al-scan{
   box-shadow:0 18px 40px -26px rgba(20,32,68,.18) !important;
}

/* =====================================================================
   UNIFIED BUTTON — same as the landing primary: blue fill, white text/icon.
   Applied to every CTA/button across all pages.
   ===================================================================== */
.tp-brand-cta,
.dai-cta,
.pc-all a,
.iw-cta,
.hero-cta,
.al-cta,
.aix-cta,
.tp-btn-white-xl,
.tp-btn-grey-xl,
.tp-btn-border-md,
.tp-btn-blue,
.tp-btn-black-lg,
a.tp-btn,
button.tp-btn{
   background:#436FF5 !important;
   background-image:none !important;
   color:#ffffff !important;
   border:1px solid #436FF5 !important;
   box-shadow:0 14px 30px -14px rgba(3,50,191,.55) !important;
}
.tp-brand-cta svg, .dai-cta svg, .pc-all a svg, .iw-cta svg, .hero-cta svg,
.al-cta svg, .aix-cta svg, .tp-btn-white-xl svg, .tp-btn-grey-xl svg,
.tp-btn-border-md svg, .tp-btn-blue svg, .tp-btn-black-lg svg,
a.tp-btn svg, button.tp-btn svg,
.tp-brand-cta span, .dai-cta span, .pc-all a span, .iw-cta span, .hero-cta span,
.tp-btn-white-xl span, .tp-btn-grey-xl span, .tp-btn-border-md span, .tp-btn-blue span{
   color:#ffffff !important; fill:#ffffff !important; stroke:#ffffff !important;
}
.tp-brand-cta:hover,
.dai-cta:hover,
.pc-all a:hover,
.iw-cta:hover,
.hero-cta:hover,
.al-cta:hover,
.aix-cta:hover,
.tp-btn-white-xl:hover,
.tp-btn-grey-xl:hover,
.tp-btn-border-md:hover,
.tp-btn-blue:hover,
.tp-btn-black-lg:hover,
a.tp-btn:hover,
button.tp-btn:hover{
   background:#1749DE !important;
   color:#ffffff !important;
   border-color:#1749DE !important;
}

/* =====================================================================
   AI Lab / AI Exploration — page-specific buttons + remove BLUE icon glow
   ===================================================================== */
/* Primary button (AI Lab) + active mode toggle (AI Exploration) => landing style */
.al-btn,
.modebtn.on,
.aix .modebtn.on{
   background:#436FF5 !important;
   background-image:none !important;
   color:#ffffff !important;
   border:1px solid #436FF5 !important;
   box-shadow:0 14px 30px -14px rgba(3,50,191,.55) !important;
}
.al-btn svg, .al-btn span,
.modebtn.on svg, .modebtn.on span,
.aix .modebtn.on svg, .aix .modebtn.on span{
   color:#ffffff !important; fill:#ffffff !important; stroke:#ffffff !important;
}
.al-btn:hover,
.modebtn.on:hover,
.aix .modebtn.on:hover{
   background:#1749DE !important; color:#ffffff !important; border-color:#1749DE !important;
}
/* Secondary (ghost) button — white with blue outline, fills blue on hover */
.al-btn.ghost{
   background:#ffffff !important; background-image:none !important;
   color:#436FF5 !important; border:1px solid #436FF5 !important; box-shadow:none !important;
}
.al-btn.ghost svg{ color:#436FF5 !important; fill:#436FF5 !important; stroke:#436FF5 !important; }
.al-btn.ghost:hover{ background:#436FF5 !important; color:#ffffff !important; }
.al-btn.ghost:hover svg{ color:#ffffff !important; fill:#ffffff !important; stroke:#ffffff !important; }

/* Remove the BLUE glow shadow from icon tiles on both AI pages */
.al-float-obj,
.al-i3d,
.aix .ic,
.aix .ic.i3d,
.aix .tile.card .ic.i3d{
   box-shadow:0 10px 24px -16px rgba(20,32,68,.14) !important;
   filter:none !important;
}
/* the blue radial HALO behind each card icon lives on ::before — kill it */
.al-i3d::before,
.al-i3d::after,
.aix .ic.i3d::before,
.aix .ic.i3d::after,
.aix .tile.card .ic.i3d::before,
.aix .tile.card .ic.i3d::after,
.aix .ic::before{
   display:none !important;
   background:none !important;
   box-shadow:none !important;
}
/* icon svgs keep no drop-shadow */
.al-i3d svg,
.aix .ic.i3d svg,
.aix .tile.card .ic.i3d svg{ filter:none !important; }

/* =====================================================================
   Footer dock (mac-dock) — keep its default look. ONLY the hovered icon
   (its background turns blue) gets a white icon/text. Nothing else changed.
   ===================================================================== */
.mac-dock__item:hover{ color:#ffffff !important; }
.mac-dock__item:hover svg{ color:#ffffff !important; stroke:#ffffff !important; }



/* ===== handwritten script eyebrows (Portfolio-style) ===== */
.tp-section-subtitle{
   position:static !important;
   transform:none !important;
   display:block !important;
   margin-bottom:8px !important;
   background:none !important;
   -webkit-text-fill-color:#436FF5 !important;
   text-fill-color:#436FF5 !important;
}
.tp-section-subtitle, .ak-ft-eyebrow, .bk-eyebrow, .cs-eyebrow, .iw-eyebrow, .al-eyebrow,
.pj-hero-kick, .pjcs-kick, .ax-page .kick, .aix .sec-head .eyebrow{
   font-family:'Caveat','Kaushan Script',cursive !important;
   font-size:clamp(22px,2.1vw,28px) !important;
   font-weight:700 !important;
   letter-spacing:.01em !important;
   text-transform:none !important;
   color:#436FF5 !important;
}


/* ===== back-to-top : dark button ===== */
.back-to-top-btn{
   background:#141A2E !important;
   color:#fff !important;
   box-shadow:0 14px 30px -12px rgba(10,16,33,.55) !important;
}
.back-to-top-btn:hover{background:#2A3550 !important; color:#fff !important;}
.back-to-top-btn svg{color:#fff !important; stroke:#fff !important;}


/* ===== big/bold titles : soft black #1a1a1a instead of full black ===== */
.bk-title, .bk-logo, .tp-section-title, .ak-ft-title,
.pjcs-title, .pjcs-name, .pj-hero-title,
.iw-h1, .cw-name, .al-h2{
   color:#1a1a1a !important;
}
html[tp-theme="tp-theme-light"] .cs-study{ --cs-ink:#1a1a1a; }
html[tp-theme="tp-theme-light"] .bk-sub b, html[tp-theme="tp-theme-light"] .bk-id b{ color:#1a1a1a; }


/* native smooth anchor scrolling */
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}


/* ===== animated titles : always visible (smoother removed) ===== */
.tp_text_anim, .tp_title_anim, .tp_text_anim *, .tp_title_anim *{
   opacity:1 !important; visibility:visible !important;
   transform:none !important; clip-path:none !important;
}


/* ===== Source Sans 3 as the site typeface (script eyebrows + icons + mono keep their fonts) ===== */
:root{
   --tp-ff-body:'Source Sans 3', -apple-system, sans-serif;
   --tp-ff-p:'Source Sans 3', -apple-system, sans-serif;
   --tp-ff-heading:'Source Sans 3', -apple-system, sans-serif;
   --tp-ff-dmsans:'Source Sans 3', -apple-system, sans-serif;
   --tp-ff-didone:'Source Sans 3', -apple-system, sans-serif;
   --tp-ff-didoneright:'Source Sans 3', -apple-system, sans-serif;
   --tp-ff-garamond:'Source Sans 3', -apple-system, sans-serif;
   --tp-ff-kufam:'Source Sans 3', -apple-system, sans-serif;
}
body{font-family:'Source Sans 3', -apple-system, sans-serif;}
.cs-serif{font-family:'Source Sans 3', -apple-system, sans-serif;}
.yc-badge, .ak-dock a span{font-family:'Source Sans 3', -apple-system, sans-serif !important;}


/* ===== mild dotted pattern — landing banner only ===== */
html[tp-theme="tp-theme-light"] .tp-hero-area::before{
   background-image:radial-gradient(circle, rgba(20,32,68,.13) 1.1px, transparent 1.3px) !important;
   background-size:24px 24px !important;
}

/* ===== case-study breadcrumb: keep the back button pinned on top ===== */
.cs-crumb{position:fixed !important; top:96px !important;
   transition:top .45s cubic-bezier(.2,.8,.2,1);}
html.ak-scrolled .cs-crumb{top:16px !important;}
@media (max-width:640px){
   .cs-crumb{top:84px !important;}
   html.ak-scrolled .cs-crumb{top:14px !important;}
}

/* ===== dark header variant — for dark case-study banners ===== */
.ak-hd-dark .ak-hd-logo, .ak-hd-dark .ak-hd-logo:hover{color:#141a2e;}
.ak-hd-dark .ak-hd-logo--img img{filter:brightness(0) invert(1);}
/* --- AK logo: inline svg + hover type/drag animation (~3s, fast first blink) --- */
.ak-hd-logo--img svg.ak-lg{height:40px;width:auto;display:block}
@media (max-width:860px){.ak-hd-logo--img svg.ak-lg{height:32px}}
.ak-hd-dark .ak-hd-logo--img svg.ak-lg{filter:brightness(0) invert(1)}
.ak-lg .lg-caret{opacity:0}
.ak-hd-logo--img:hover .lg-caret{animation:akLgCaret 1.8s linear both}
.ak-hd-logo--img:hover .lg-a{animation:akLgPop .01s linear .5s both}
.ak-hd-logo--img:hover .lg-k{animation:akLgPop .01s linear 1.1s both}
.ak-hd-logo--img:hover .lg-frame{animation:akLgDrag .8s ease-out 1.6s both}
.ak-hd-logo--img:hover .lg-htl{animation:akLgPop .01s linear 1.6s both}
.ak-hd-logo--img:hover .lg-htr,.ak-hd-logo--img:hover .lg-hbl,.ak-hd-logo--img:hover .lg-hbr{animation:akLgPop .01s linear 2.4s both}
@keyframes akLgPop{from{opacity:0}to{opacity:1}}
@keyframes akLgDrag{from{width:0;height:0}to{width:165px;height:118px}}
@keyframes akLgCaret{
0%{opacity:1;transform:translateX(0)}8%{opacity:1;transform:translateX(0)}
9%{opacity:0;transform:translateX(0)}16%{opacity:0;transform:translateX(0)}
17%{opacity:1;transform:translateX(0)}27%{opacity:1;transform:translateX(0)}
28%{opacity:1;transform:translateX(85px)}38%{opacity:1;transform:translateX(85px)}
39%{opacity:0;transform:translateX(85px)}47%{opacity:0;transform:translateX(85px)}
48%{opacity:1;transform:translateX(85px)}60%{opacity:1;transform:translateX(85px)}
61%{opacity:1;transform:translateX(140px)}75%{opacity:1;transform:translateX(140px)}
76%{opacity:0;transform:translateX(140px)}83%{opacity:0;transform:translateX(140px)}
84%{opacity:1;transform:translateX(140px)}94%{opacity:1;transform:translateX(140px)}
100%{opacity:0;transform:translateX(140px)}}
@media (prefers-reduced-motion:reduce){.ak-hd-logo--img:hover .lg-caret,.ak-hd-logo--img:hover .lg-a,.ak-hd-logo--img:hover .lg-k,.ak-hd-logo--img:hover .lg-frame,.ak-hd-logo--img:hover .lg-htl,.ak-hd-logo--img:hover .lg-htr,.ak-hd-logo--img:hover .lg-hbl,.ak-hd-logo--img:hover .lg-hbr{animation:none}}
.ak-hd-dark .ak-hd-nav a{color:rgba(255,255,255,.82);}
.ak-hd-dark .ak-hd-nav a:hover{background:rgba(255,255,255,.13); color:#fff;}
.ak-hd-dark .ak-hd-nav a.on{color:#fff;}
.ak-hd-dark .ak-hd-face{border-color:rgba(255,255,255,.65);}

/* mobile/tablet: breathing room so the spec-logo clearspace guides aren't flush with the viewport */
@media (max-width:1024px){
   .ak-hd .ak-hd-in{padding-top:20px;}
}
@media (max-width:860px){
   .ak-hd .ak-hd-in{padding:20px 14px 8px 26px;}
}