/*
Theme Name:  gwillchijioke
Theme URI:   https://gwillchijioke.com
Author:      Gwill Chijioke
Author URI:  https://gwillchijioke.com
Description: Custom WordPress theme for gwillchijioke.com — standalone, no parent dependency.
Version:      1.7.5
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gwillchijioke
Tags:        custom, portfolio, performance
*/

/*
* TABLE OF CONTENTS
* ─────────────────────────────────────────────────────────────────────────────
*  FONTS ................ Self-hosted JetBrains Mono (woff2)
*
*  GLOBAL
*   1. CSS CUSTOM PROPERTIES ... Design tokens — colours, spacing, z-index
*   2. RESET ................... Normalise browser defaults
*   3. ACCESSIBILITY ........... Skip link, sr-only, focus rings
*   4. TYPOGRAPHY .............. Headings, body, code, small
*   5. LAYOUT .................. Container, section, divider
*   6. BUTTONS ................. .btn variants — primary, secondary, ghost, cta
*   7. LINK UNDERLINE ANIMATION  Hover underline slide-in
*   8. LOGO .................... .site-logo, .footer-logo
*   9. HEADER .................. Sticky header, desktop nav
*  10. HAMBURGER BUTTON ........ Mobile nav toggle
*  11. MOBILE NAV OVERLAY ...... Slide-in drawer, focus trap
*  12. FOOTER .................. Footer layout, links, social
*  13. SCROLLBAR ............... Custom webkit scrollbar
*  14. SELECTION ............... ::selection highlight colour
*  15. SCROLL FADE ANIMATION ... data-animate / IntersectionObserver
*  16. AVAILABILITY INDICATOR .. Status dot + pulse ring
*  17. SHARE BUTTONS ........... Post share bar
*
*  HOMEPAGE SECTIONS
*  18. HERO SECTION ............ Main homepage hero
*  19. MARQUEE STRIP ........... Scrolling tech-stack ticker
*  20. SELECTED WORK GRID ...... Work cards grid
*  21. SERVICES SECTION ........ Accordion services list
*  22. STATS BAR ............... Numbers / social proof
*  23. ABOUT SNIPPET ........... Homepage about preview
*  24. BLOG PREVIEW ............ Post cards grid
*  25. FINAL CTA SECTION ....... Bottom call-to-action
*
*  PAGES
*  SHARED PAGE STYLES .......... .page-hero, shared layout
*  SERVICES PAGE ............... /services/
*  WORK / PORTFOLIO PAGE ....... /work/
*  SERVICES PAGE — packages .... Packages grid additions
*  CASE STUDY PAGE ............. /work/[slug]/
*  HIRE ME PAGE ................ /hire-me/
*  CONTACT PAGE ................ /contact/
*  PROCESS PAGE ................ /process/
*  USES PAGE ................... /uses/
*  NOW PAGE .................... /now/
*  TESTIMONIALS PAGE ........... /testimonials/
*  FAQ PAGE .................... /faq/
*  THANK YOU PAGE .............. /thank-you/
*  SINGLE POST ................. single.php
*  404 PAGE .................... 404.php
*  ARCHIVE + SEARCH ............ category.php, search.php
*
*  FIXES & CONTENT
*  MISC PAGE FIXES ............. Now page, hire-me hero, service-name hover
*  SERVICES PAGE STYLES ........ Additional services overrides
*  LAYOUT FIXES ................ Nav z-index, hero overflow
*  PROSE CONTENT ............... ul, ol, table, img, figure in post content
*  LEGAL PAGES ................. Privacy policy, terms
*  TABLE BORDER STYLES ......... Cell border reset + horizontal separators
*  ARCHIVE DESCRIPTION LINKS ... .archive-header-desc a
*  TABLE SCROLL + SCROLLBAR .... min-width on children, custom scrollbar
*  TABLE GUTENBERG BLOCK ....... wp-block-table, bold/text inheritance
*  PRE / CODE COLOR ............ Force child elements to inherit light colour
* ─────────────────────────────────────────────────────────────────────────────
*/

/* =============================================================================
FONTS — Self-hosted JetBrains Mono (woff2)
Files live at: assets/fonts/
============================================================================= */
/* ─── SELF-HOSTED FONTS ────────────────────────────────────────────────────
   @font-face rules are NOT here — they are generated in PHP (inc/enqueue.php,
   gwill_font_face_inline) with ABSOLUTE theme-URI URLs so LiteSpeed CSS
   combine can never break the font path. Inline <style> output is never
   part of the combined CSS file.

   300 + 400: used in real UI (FAQ icons, international price alt) → swap,
              not optional: optional lets the browser discard them on slow
              connections (Courier fallback that never swaps in).
   700 + 800: headings + hero h1, preloaded in <head> → swap + metric
              overrides so fallback Courier New matches JetBrains Mono
              metrics, eliminating visible layout shift on first load. */
/* =============================================================================
1. CSS CUSTOM PROPERTIES
============================================================================= */
:root{ --bg:#f7f6f3;--surface:#ffffff;--border:#e4e2dc;--border-dark:#d4d0c8;--text:#0d0d0d;--text-mid:#3a3a3a;--text-dim:#6e6e6e; --purple:#7c3aed;--purple-light:rgba(124, 58, 237, 0.08);--purple-glow:rgba(124, 58, 237, 0.15);--green:#00964e;--green-light:rgba(0, 201, 110, 0.08);--red:#b91c1c; --gradient-brand:linear-gradient(135deg, #7c3aed 0%, #00964e 100%); --font-mono:'JetBrains Mono', 'Courier New', Courier, monospace;--font-body:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; --space-1:4px;--space-2:8px;--space-3:16px;--space-4:24px;--space-5:32px;--space-6:48px;--space-7:64px;--space-8:96px;--space-9:128px; --content-width:900px;--wide-width:1200px;--header-height:64px; --radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:20px;--radius-full:9999px; --shadow-sm:0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.06);--shadow-md:0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06);--shadow-lg:0 8px 32px rgba(0, 0, 0, 0.10), 0 16px 48px rgba(0, 0, 0, 0.08); --t-fast:150ms ease;--t-base:200ms ease;--t-slow:400ms ease; --z-card:1;--z-drop:100;--z-header:200;--z-search:300;--z-cookie:400;--z-nav:500;--z-tooltip:600}
/* =============================================================================
2. RESET
============================================================================= */
*, *::before, *::after{box-sizing:border-box;margin:0;padding:0;min-width:0}html{scroll-behavior:smooth;scroll-padding-top:var(--header-height);-webkit-text-size-adjust:100%}body{background-color:var(--bg);color:var(--text);font-family:var(--font-body);font-size:18px;line-height:1.8;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;overflow-y:scroll;overflow-wrap:break-word; }body.nav-open{overflow:hidden}img, video, svg{display:block;max-width:100%}ul, ol{list-style:none}a{color:inherit;text-decoration:none}button{cursor:pointer;background:none;border:none;font:inherit;color:inherit;-webkit-appearance:none;appearance:none;user-select:none;-webkit-user-select:none} a, button, input, select, textarea, label, [role="button"]{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);touch-action:manipulation}input, textarea, select{font:inherit;color:inherit}
/* =============================================================================
3. ACCESSIBILITY
============================================================================= */
.skip-link{position:absolute;top:-100%;left:var(--space-3);z-index:var(--z-tooltip);padding:var(--space-2) var(--space-3);background:var(--text);color:var(--bg);font-family:var(--font-mono);font-size:14px;font-weight:700;border-radius:var(--radius-sm);transition:top var(--t-fast)}.skip-link:focus{top:var(--space-2)} :focus-visible{outline:2px solid var(--purple);outline-offset:4px;border-radius:var(--radius-sm)}:focus:not(:focus-visible){outline:none}
/* =============================================================================
4. TYPOGRAPHY
============================================================================= */
h1, h2, h3{font-family:var(--font-mono);font-weight:800;line-height:1.1;letter-spacing:-0.04em;color:var(--text);-webkit-font-smoothing:antialiased}h1{font-size:clamp(32px, 8vw, 96px);letter-spacing:clamp(-0.04em, -0.5vw, -0.02em)}h2{font-size:clamp(24px, 4vw, 40px);font-weight:700;letter-spacing:-0.03em}h3{font-size:clamp(20px, 2.5vw, 28px);font-weight:700;letter-spacing:-0.02em}p{color:var(--text-mid);font-size:clamp(16px, 1.8vw, 18px);line-height:1.8}small, .caption{font-size:14px;color:var(--text-dim);font-family:var(--font-mono)}strong{font-weight:700;color:var(--text)}em{font-style:italic}code{font-family:var(--font-mono);font-size:0.9em;background:var(--purple-light);color:var(--purple);padding:2px 6px;border-radius:var(--radius-sm)}
/* =============================================================================
5. LAYOUT
============================================================================= */
.container{width:100%;max-width:var(--wide-width);margin-inline:auto;padding-inline:clamp(16px, 5vw, 80px)}.container--content{max-width:var(--content-width)}.section{padding-block:clamp(48px, 8vw, 128px)}.divider{width:100%;height:1px;background:var(--border)}
/* =============================================================================
6. BUTTONS
============================================================================= */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:14px;font-weight:700;letter-spacing:0.04em;white-space:nowrap;padding:14px 28px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background var(--t-base), transform var(--t-fast), box-shadow var(--t-base);-webkit-font-smoothing:antialiased}.btn:active{transform:translateY(1px)} .btn--primary{background:var(--text);color:var(--bg);border-color:var(--text)}.btn--primary:hover{background:var(--purple);border-color:var(--purple);color:#ffffff}.btn--primary .btn-arrow{display:inline-block;transition:transform var(--t-fast)}.btn--primary:hover .btn-arrow{transform:translateX(4px)} .btn--secondary{background:transparent;color:var(--text);border-color:var(--border-dark)}.btn--secondary:hover{background:var(--text);color:var(--bg);border-color:var(--text)} .btn--ghost{background:transparent;color:var(--purple);border-color:transparent;padding-inline:0}.btn--ghost:hover{color:var(--text)} .btn--cta{background:var(--text);color:#ffffff;border-color:var(--text);font-size:16px;padding:16px 36px}.btn--cta:hover{background:var(--purple);border-color:var(--purple)}
/* =============================================================================
7. LINK UNDERLINE ANIMATION
============================================================================= */
.link-animated{text-decoration:none;background-image:linear-gradient(currentColor, currentColor);background-size:0% 1.5px;background-repeat:no-repeat;background-position:left bottom;transition:background-size var(--t-base)}.link-animated:hover{background-size:100% 1.5px}
/* =============================================================================
8. LOGO
============================================================================= */
.site-logo, .footer-logo{display:inline-flex;align-items:baseline;font-family:var(--font-mono);font-weight:700;font-size:18px;letter-spacing:-0.04em;color:var(--text);text-decoration:none;position:relative;white-space:nowrap;-webkit-font-smoothing:antialiased} .site-logo::after, .footer-logo::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--gradient-brand);border-radius:2px;opacity:0;transition:opacity var(--t-base)}.site-logo:hover::after, .footer-logo:hover::after{opacity:0.7}.logo-name{color:var(--text)}.footer-links-section .logo-name{color:var(--surface)}.logo-dot{color:var(--purple);font-weight:800;margin-left:1px}
/* =============================================================================
9. HEADER
============================================================================= */
.site-header{position:sticky;top:0;z-index:var(--z-header);height:var(--header-height);background:rgba(247, 246, 243, 0.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.header-inner{display:flex;align-items:center;justify-content:space-between;height:100%;max-width:var(--wide-width);margin-inline:auto;padding-inline:clamp(16px, 5vw, 80px)} .nav-desktop{display:none;align-items:center;gap:var(--space-5)}@media (min-width:1024px){.nav-desktop{display:flex}}.nav-list{display:flex;align-items:center;gap:var(--space-4);list-style:none}.nav-link{position:relative;font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:0.02em;color:var(--text-dim);text-decoration:none;padding:var(--space-2) 0;-webkit-font-smoothing:antialiased}.nav-link::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--purple);border-radius:1px;transform:scaleX(0);transition:transform var(--t-fast);transform-origin:left}.nav-link:hover{color:var(--text)}.nav-link:hover::after{transform:scaleX(0.5)}.nav-link.is-active{color:var(--text)}.nav-link.is-active::after{transform:scaleX(1)}.nav-link--external{display:inline-flex;align-items:center;gap:3px}.nav-external-icon{font-size:11px;opacity:0.6} .nav-cta{padding:10px 20px;font-size:13px}
/* =============================================================================
10. HAMBURGER BUTTON
============================================================================= */
.nav-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:var(--space-2);border-radius:var(--radius-sm);transition:background var(--t-fast);-webkit-appearance:none;appearance:none;outline:none} @media (hover:hover) and (pointer:fine){.nav-toggle:hover{background:var(--purple-light)}}.nav-toggle:active, .nav-toggle:focus{background:none;outline:none;box-shadow:none}.nav-toggle:focus-visible{outline:2px solid var(--purple);outline-offset:4px}@media (min-width:1024px){.nav-toggle{display:none}}.hamburger-line{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform var(--t-base), opacity var(--t-fast);transform-origin:center} .nav-toggle.is-open .hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-toggle.is-open .hamburger-line:nth-child(2){opacity:0;transform:scaleX(0)}.nav-toggle.is-open .hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* =============================================================================
11. MOBILE NAV OVERLAY
============================================================================= */
.nav-overlay{position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);background:rgba(13, 13, 13, 0.6);opacity:0;pointer-events:none;transition:opacity var(--t-base)}.nav-overlay.is-visible{opacity:1;pointer-events:auto} .nav-mobile{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-nav);width:min(320px, 85vw);background:var(--text);padding:var(--space-7) var(--space-5) var(--space-6);display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--t-slow);overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--purple) transparent}.nav-mobile[aria-hidden="false"]{transform:translateX(0)}.nav-mobile-close{position:absolute;top:var(--space-4);right:var(--space-4);width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:24px;color:rgba(247, 246, 243, 0.5);background:none;border:none;cursor:pointer;border-radius:var(--radius-sm);transition:background var(--t-fast);-webkit-appearance:none;appearance:none;outline:none}@media (hover:hover) and (pointer:fine){.nav-mobile-close:hover{color:var(--bg);background:rgba(247, 246, 243, 0.08)}}.nav-mobile-close:active, .nav-mobile-close:focus{background:none;outline:none;box-shadow:none}.nav-mobile-close:focus-visible{outline:2px solid var(--bg);outline-offset:4px}.nav-mobile-list{list-style:none;display:flex;flex-direction:column;gap:0;margin-top:auto;margin-bottom:auto}.nav-mobile-link{display:block;font-family:var(--font-mono);font-size:clamp(20px, 5vw, 28px);font-weight:700;letter-spacing:-0.02em;color:rgba(247, 246, 243, 0.5);text-decoration:none;padding-block:var(--space-3);border-bottom:1px solid rgba(247, 246, 243, 0.06);transition:transform var(--t-fast);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent; }@media (hover:hover) and (pointer:fine){.nav-mobile-link:hover{color:var(--bg);transform:translateX(var(--space-2))}}.nav-mobile-link--external{display:inline-flex;align-items:center;gap:var(--space-1)}.nav-mobile-cta{width:100%;justify-content:center;margin-top:var(--space-5);padding:16px;background:var(--purple);border-color:var(--purple);color:#ffffff;font-size:15px;-webkit-tap-highlight-color:transparent}.nav-mobile-cta:hover{background:#6d28d9;border-color:#6d28d9}
/* =============================================================================
12. FOOTER
============================================================================= */
.site-footer{background:var(--text);color:var(--bg)} .footer-cta{padding-block:clamp(64px, 10vw, 128px);border-bottom:1px solid rgba(247, 246, 243, 0.08);position:relative;overflow:hidden} .footer-cta::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:600px;height:300px;background:radial-gradient(ellipse at center, rgba(124, 58, 237, 0.15) 0%, transparent 70%);pointer-events:none}.footer-cta-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-5);position:relative;max-width:var(--wide-width);margin-inline:auto;padding-inline:clamp(16px, 5vw, 80px)}.footer-cta-headline{font-family:var(--font-mono);font-size:clamp(28px, 5vw, 64px);font-weight:800;color:#f7f6f3;letter-spacing:-0.04em;line-height:1.1}.footer-cta-headline em{font-style:normal;background:var(--gradient-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.footer-cta-email{font-size:15px;color:rgba(247, 246, 243, 0.55);font-family:var(--font-mono)}.footer-cta-email a{color:rgba(247, 246, 243, 0.7);text-decoration:none}.footer-cta-email a:hover{color:#f7f6f3} .footer-links-section{padding-block:clamp(48px, 6vw, 80px);border-bottom:1px solid rgba(247, 246, 243, 0.08)}.footer-inner{max-width:var(--wide-width);margin-inline:auto;padding-inline:clamp(16px, 5vw, 80px)}.footer-links-section .footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-7);align-items:start}@media (max-width:767px){.footer-links-section .footer-inner{grid-template-columns:1fr;gap:var(--space-6)}}.footer-brand .footer-logo{font-size:20px}.footer-tagline{margin-top:var(--space-3);font-size:13px;color:rgba(247, 246, 243, 0.55);font-family:var(--font-mono);line-height:1.7}.footer-nav-label{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:rgba(247, 246, 243, 0.55);margin-bottom:var(--space-3)}.footer-nav-list{display:flex;flex-direction:column;gap:var(--space-2);list-style:none}.footer-nav-list a{font-family:var(--font-mono);font-size:14px;color:rgba(247, 246, 243, 0.5);text-decoration:none;transition:transform var(--t-fast);display:inline-block}@media (hover:hover) and (pointer:fine){.footer-nav-list a:hover{color:#f7f6f3;transform:translateX(4px)}} .footer-bottom{padding-top:var(--space-2);padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom, 0px))}.footer-bottom .footer-inner{display:flex; justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);margin-top:20px}.footer-copy{font-family:var(--font-mono);font-size:13px;color:rgba(247, 246, 243, 0.55)}.footer-legal{display:flex;gap:var(--space-4)}.footer-legal a{font-family:var(--font-mono);font-size:13px;color:rgba(247, 246, 243, 0.55);text-decoration:none}.footer-legal a:hover{color:rgba(247, 246, 243, 0.7)}
/* =============================================================================
13. SCROLLBAR
============================================================================= */
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--purple);border-radius:3px;opacity:0.7}::-webkit-scrollbar-thumb:hover{background:var(--purple);opacity:1}
/* =============================================================================
14. SELECTION
============================================================================= */
::selection{background:var(--purple);color:#ffffff}
/* =============================================================================
15. SCROLL FADE ANIMATION
Gated behind body.js-animate (added by initScrollFade in main.js) so
elements remain fully visible before JS runs — no blank page on first load.
============================================================================= */
@media (prefers-reduced-motion:no-preference){body.js-animate [data-animate]{opacity:0;transform:translateY(24px);transition:opacity 500ms ease, transform 500ms ease}body.js-animate [data-animate].in-view{opacity:1;transform:translateY(0)}body.js-animate [data-animate]:nth-child(2){transition-delay:80ms}body.js-animate [data-animate]:nth-child(3){transition-delay:160ms}body.js-animate [data-animate]:nth-child(4){transition-delay:240ms}body.js-animate [data-animate]:nth-child(5){transition-delay:320ms}}
/* =============================================================================
16. AVAILABILITY INDICATOR
============================================================================= */
.availability{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text-dim)} .availability__dot{--dot-color:var(--green);width:8px;height:8px;border-radius:50%;background:var(--dot-color);position:relative;flex-shrink:0} .availability__dot--limited,.availability--limited .availability__dot{--dot-color:#f59e0b} .availability__dot--busy,.availability--busy .availability__dot{--dot-color:#ef4444} .availability__dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:var(--dot-color);opacity:0.35;animation:pulse 2s ease-in-out infinite} .availability__dot--busy::after,.availability--busy .availability__dot::after{display:none} @media (prefers-reduced-motion:reduce){.availability__dot::after{animation:none}}@keyframes pulse{0%, 100%{transform:scale(1);opacity:0.6}50%{transform:scale(1.6);opacity:0}}
/* =============================================================================
17. SHARE BUTTONS
X/Twitter, LinkedIn, Pinterest, Threads, Facebook, WhatsApp, Copy Link
Collapsible — hidden buttons revealed with "More" toggle
============================================================================= */
#share-buttons, .share-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);padding-block:var(--space-4);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.share-label{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin-right:var(--space-1)}.share-btn{display:inline-flex;align-items:center;gap:var(--space-1);padding:8px 14px;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text-mid);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);text-decoration:none;cursor:pointer;transition:background var(--t-fast), transform var(--t-fast);-webkit-font-smoothing:antialiased}.share-btn:hover{color:var(--text);border-color:var(--border-dark);background:var(--bg);transform:translateY(-1px)}.share-btn:active{transform:translateY(0)}.share-icon{flex-shrink:0} @media (max-width:480px){.share-btn-label{display:none}.share-btn{padding:8px 10px}} .share-btn--hidden{display:none} .share-btn--copy.is-copied{color:var(--green);border-color:var(--green);background:var(--green-light)} .share-btn--expand{background:var(--purple-light);border-color:transparent;color:var(--purple)}.share-btn--expand:hover{background:var(--purple);color:#ffffff;border-color:var(--purple)}.share-btn--expand.is-expanded{background:var(--purple);color:#ffffff;border-color:var(--purple)} .share-btn[href*="twitter.com"]:hover, .share-btn[href*="x.com"]:hover{color:#000000;border-color:#000000}.share-btn[href*="linkedin"]:hover{color:#0a66c2;border-color:#0a66c2}.share-btn[href*="facebook"]:hover{color:#1877f2;border-color:#1877f2}.share-btn[href*="pinterest"]:hover{color:#e60023;border-color:#e60023}.share-btn[href*="threads"]:hover{color:#000000;border-color:#000000}.share-btn[href*="whatsapp"]:hover{color:#25d366;border-color:#25d366}
/* =============================================================================
18. HERO SECTION
============================================================================= */
.hero{min-height:calc(100vh - var(--header-height));display:flex;align-items:center;background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");padding-block:clamp(64px, 10vw, 128px);position:relative;overflow:visible}.hero-inner{max-width:var(--wide-width);margin-inline:auto;padding-inline:clamp(16px, 5vw, 80px);display:flex;flex-direction:column;gap:var(--space-5)}.hero-eyebrow{display:flex;align-items:center;gap:var(--space-3)}.hero-title{font-family:var(--font-mono);font-size:clamp(40px, 10vw, 96px);font-weight:800;line-height:1.0;letter-spacing:clamp(-0.04em, -0.8vw, -0.02em);color:var(--text);max-width:14ch;-webkit-font-smoothing:antialiased}.hero-title em{font-style:normal;display:block}.hero-comment{font-family:var(--font-mono);font-size:clamp(14px, 1.8vw, 17px);color:var(--text-dim);background:rgba(0, 0, 0, 0.03);border:1px solid var(--border);border-left:3px solid var(--purple);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);display:inline-block;max-width:440px;line-height:1.6}.hero-comment-syntax{color:var(--purple);opacity:0.6}.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}@media (max-width:480px){.hero-actions{flex-direction:column;align-items:flex-start}.hero-actions .btn{width:100%;justify-content:center}}
/* =============================================================================
19. MARQUEE STRIP
============================================================================= */
.marquee-section{background:var(--text);padding-block:14px;overflow:hidden;border-block:1px solid rgba(255,255,255,0.04)}.marquee-track{display:flex;gap:var(--space-7);width:max-content;animation:marquee 35s linear infinite}.marquee-section:hover .marquee-track{animation-play-state:paused}@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}.marquee-item{font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:0.04em;color:rgba(247,246,243,0.55);white-space:nowrap;text-transform:uppercase}.marquee-sep{color:var(--purple);font-size:18px;line-height:1;opacity:0.7}
/* =============================================================================
20. SELECTED WORK GRID
============================================================================= */
.work-section{padding-block:clamp(64px, 8vw, 128px);background:var(--bg)}.section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:var(--space-6);gap:var(--space-4);flex-wrap:wrap}.section-title{font-family:var(--font-mono);font-size:clamp(11px, 1.2vw, 13px);font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-dim);margin-bottom:var(--space-2)}.section-headline{font-family:var(--font-mono);font-size:clamp(24px, 3.5vw, 40px);font-weight:700;letter-spacing:-0.03em;color:var(--text)}.section-headline em{font-style:normal;color:var(--purple)}.section-link{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--text-dim);text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-1);white-space:nowrap;flex-shrink:0}.section-link:hover{color:var(--purple)} .work-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}@media (min-width:768px){.work-grid{grid-template-columns:1fr 1fr}.work-card:first-child{grid-column:1 / -1}} .work-card{position:relative;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:box-shadow var(--t-base), transform var(--t-base);text-decoration:none;display:block}.work-card:hover{border-color:transparent;box-shadow:var(--shadow-lg)}.work-card__image-wrap{aspect-ratio:16 / 9;overflow:hidden;background:var(--border)}.work-card:first-child .work-card__image-wrap{aspect-ratio:21 / 9}@media (max-width:767px){.work-card:first-child .work-card__image-wrap{aspect-ratio:16 / 9}}.work-card__image{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow)}.work-card:hover .work-card__image{transform:scale(1.04)} .work-card__overlay{position:absolute;inset:0;background:linear-gradient(to bottom, transparent 40%, rgba(13,13,13,0.75) 100%);opacity:0;transition:opacity var(--t-base);display:flex;align-items:flex-end;padding:var(--space-5)}.work-card:hover .work-card__overlay{opacity:1}.work-card__cta{font-family:var(--font-mono);font-size:14px;font-weight:700;color:#ffffff;display:flex;align-items:center;gap:var(--space-2);transform:translateY(8px);transition:transform var(--t-base)}.work-card:hover .work-card__cta{transform:translateY(0)}.work-card__body{padding:var(--space-4) var(--space-5) var(--space-5)}.work-card__tags{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-bottom:var(--space-2)}body:not(.tag) .tag{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;padding:3px 10px;border-radius:var(--radius-sm);background:var(--purple-light);color:var(--purple);border:1px solid rgba(124, 58, 237, 0.15)}.work-card__name{font-family:var(--font-mono);font-size:clamp(16px, 1.8vw, 20px);font-weight:700;letter-spacing:-0.02em;color:var(--text);margin-bottom:var(--space-1)}.work-card:hover .work-card__name{color:var(--purple)}.work-card__desc{font-size:15px;color:var(--text-dim);line-height:1.6}
/* =============================================================================
21. SERVICES SECTION
============================================================================= */
.services-section{padding-block:clamp(64px, 8vw, 128px) clamp(24px, 3vw, 48px);background:var(--surface);border-top:1px solid var(--border)}.services-list{margin-top:0;overflow:clip}.service-item{border-bottom:1px solid var(--border)}.service-item:first-child{border-top:1px solid var(--border)}.service-item:last-child{border-bottom:none}.service-trigger{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:var(--space-4);width:100%;padding-block:var(--space-5);text-align:left;background:none;border:none;cursor:pointer;transition:transform var(--t-base)}@media (min-width:1024px){.service-item:hover .service-trigger, .service-item.is-open .service-trigger{transform:translateX(var(--space-3))}}.service-num{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:0.08em;color:var(--text-dim)}.service-item:hover .service-num, .service-item.is-open .service-num{color:var(--purple)}.service-name{font-family:var(--font-mono);font-size:clamp(18px, 2.5vw, 28px);font-weight:700;letter-spacing:-0.02em;color:var(--text);-webkit-font-smoothing:antialiased}.service-name:hover{color:var(--text)}.service-icon{font-size:20px;color:var(--text-dim);transition:transform var(--t-base);flex-shrink:0}.service-item:hover .service-icon{color:var(--purple);transform:translate(3px, -3px)} .service-content{padding-top:var(--space-3);padding-bottom:var(--space-5);padding-left:calc(56px + var(--space-4));max-width:600px}.service-desc{font-size:16px;color:var(--text-mid);line-height:1.8;margin-top:0;margin-bottom:var(--space-3);max-width:52ch} @media (max-width:1023px){.service-content{overflow:hidden;max-height:0;padding-top:0;padding-bottom:0;transition:max-height 350ms ease, padding 200ms ease}.service-item.is-open .service-content{max-height:800px;padding-top:var(--space-3);padding-bottom:var(--space-4)}}@media (min-width:1024px){.service-content{max-height:none;overflow:visible;padding-top:var(--space-3);padding-bottom:var(--space-5)}}@media (max-width:600px){.service-trigger{grid-template-columns:40px 1fr auto;gap:var(--space-3)}.service-content{padding-left:calc(40px + var(--space-3))}}
/* =============================================================================
22. STATS BAR
============================================================================= */
.stats-section{padding-block:clamp(48px, 6vw, 80px);background:#f0ede8;border-block:1px solid var(--border)}.stats-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:0;max-width:var(--wide-width);margin-inline:auto;padding-inline:clamp(16px, 5vw, 80px)}@media (max-width:767px){.stats-grid{grid-template-columns:repeat(2, 1fr)}}.stat{text-align:center;padding:clamp(24px, 4vw, 40px) var(--space-4);position:relative}.stat:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:var(--border-dark)}@media (max-width:767px){.stat:nth-child(2)::after, .stat:nth-child(4)::after{display:none}.stat:nth-child(1), .stat:nth-child(2){border-bottom:1px solid var(--border-dark)}}.stat-number{font-family:var(--font-mono);font-size:clamp(36px, 5vw, 56px);font-weight:800;letter-spacing:-0.04em;line-height:1;color:var(--text);display:block;-webkit-font-smoothing:antialiased}.stat-suffix{font-size:0.6em;letter-spacing:-0.02em}.stat-label{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-dim);margin-top:var(--space-2);display:block}
/* =============================================================================
23. ABOUT SNIPPET
============================================================================= */
.about-section{padding-block:clamp(64px, 8vw, 128px);background:var(--bg)}.about-inner{display:grid;grid-template-columns:1fr;gap:var(--space-6);align-items:center}@media (min-width:768px){.about-inner{grid-template-columns:1fr auto;grid-template-areas:"heading photo" "text photo";column-gap:var(--space-6);row-gap:var(--space-4);align-items:center}.about-heading{grid-area:heading;max-width:560px}.about-text{grid-area:text}.about-photo{grid-area:photo}}.about-inner::after{content:"";display:block;clear:both}.about-heading{margin-bottom:0}.about-text{max-width:560px}.about-text p{margin-bottom:var(--space-4)}.about-text p:last-of-type{margin-bottom:var(--space-5)}.about-photo{width:clamp(120px, 20vw, 200px);aspect-ratio:1;border-radius:var(--radius-lg);object-fit:cover;border:1px solid var(--border);box-shadow:var(--shadow-md);flex-shrink:0}@media (max-width:767px){.about-inner{display:block}.about-heading{margin-bottom:var(--space-4)}.about-photo{float:right;width:min(130px, 40vw);margin:0 0 var(--space-4) var(--space-5)}}
/* =============================================================================
24. BLOG PREVIEW
============================================================================= */
.blog-preview-section{padding-block:clamp(64px, 8vw, 128px);background:var(--surface);border-top:1px solid var(--border)}.blog-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin-top:var(--space-6)}@media (min-width:768px){.blog-grid{grid-template-columns:repeat(3, 1fr)}} .post-card{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;text-decoration:none;transition:box-shadow var(--t-base), transform var(--t-base)}.post-card:hover{border-color:var(--border-dark);box-shadow:var(--shadow-md);transform:translateY(-4px)}.post-card__image-wrap{aspect-ratio:16 / 9;overflow:hidden;background:var(--border)}.post-card__image{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow)}.post-card:hover .post-card__image{transform:scale(1.04)}.post-card__body{padding:var(--space-4);display:flex;flex-direction:column;flex:1}.post-card__category{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--purple);margin-bottom:var(--space-2)}.post-card__title{font-family:var(--font-mono);font-size:clamp(15px, 1.4vw, 17px);font-weight:700;letter-spacing:-0.01em;line-height:1.4;color:var(--text);margin-bottom:var(--space-3);flex:1}.post-card:hover .post-card__title{color:var(--purple)}.post-card__meta{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);display:flex;align-items:center;gap:var(--space-2);margin-top:auto}.post-card__meta-sep{color:var(--border-dark)}
/* =============================================================================
25. FINAL CTA SECTION
============================================================================= */
.final-cta-section{background:var(--text);padding-block:clamp(80px, 12vw, 160px);position:relative;overflow:hidden} .final-cta-section::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:700px;height:400px;background:radial-gradient( ellipse at center, rgba(124, 58, 237, 0.18) 0%, transparent 70% );pointer-events:none}.final-cta-inner{position:relative;max-width:var(--wide-width);margin-inline:auto;padding-inline:clamp(16px, 5vw, 80px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-5)}.final-cta-headline{font-family:var(--font-mono);font-size:clamp(32px, 6vw, 72px);font-weight:800;color:#f7f6f3;letter-spacing:-0.04em;line-height:1.1;max-width:16ch}.final-cta-headline em{font-style:normal;background:var(--gradient-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.final-cta-sub{font-family:var(--font-mono);font-size:14px;color:rgba(247,246,243,0.55)}.final-cta-sub a{color:rgba(247,246,243,0.65);text-decoration:none}.final-cta-sub a:hover{color:#f7f6f3}
/* =============================================================================
PAGES — shared + individual page styles
============================================================================= */

/* ── Shared page hero header ── */
.page-hero{padding-block:clamp(48px, 8vw, 96px) clamp(32px, 4vw, 48px);border-bottom:1px solid var(--border);background:var(--bg)}.page-hero-label{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--purple);margin-bottom:var(--space-3)}.page-hero-title{font-family:var(--font-mono);font-size:clamp(32px, 6vw, 72px);font-weight:800;letter-spacing:-0.04em;line-height:1.05;color:var(--text);-webkit-font-smoothing:antialiased}
/* ── Inline text link ── */
.inline-link{color:var(--purple);text-decoration:none;background-image:linear-gradient(var(--purple), var(--purple));background-size:0% 1.5px;background-repeat:no-repeat;background-position:left bottom;transition:background-size var(--t-base);font-weight:600}.inline-link:hover{background-size:100% 1.5px}
/* ── Page content prose ── */
.page-content{font-size:clamp(16px, 1.8vw, 18px);line-height:1.85;color:var(--text-mid)}.page-content h2{margin-top:var(--space-7);margin-bottom:var(--space-4)}.page-content h3{margin-top:var(--space-6);margin-bottom:var(--space-3)}.page-content p{margin-bottom:var(--space-4)}
/* ── ABOUT PAGE ── */
.about-hook{padding-block:clamp(48px, 6vw, 80px);background:var(--text);overflow:hidden;position:relative}.about-hook::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:600px;height:300px;background:radial-gradient(ellipse, rgba(124, 58, 237, 0.15) 0%, transparent 70%);pointer-events:none}.about-hook-text{font-family:var(--font-mono);font-size:clamp(18px, 2.8vw, 28px);font-weight:700;line-height:1.5;letter-spacing:-0.02em;color:#f7f6f3;position:relative;-webkit-font-smoothing:antialiased}.about-section-label{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-dim);margin-bottom:var(--space-5);padding-bottom:var(--space-3);border-bottom:1px solid var(--border)}.about-prose{display:flex;flex-direction:column;gap:var(--space-4)}.about-prose p{font-size:clamp(16px, 1.8vw, 18px);line-height:1.85;color:var(--text-mid);max-width:68ch}.about-story{background:var(--bg);padding-top:clamp(24px, 3vw, 48px)}.about-skills{background:var(--surface);border-top:1px solid var(--border);padding-top:clamp(24px, 3vw, 48px)}.about-beyond{background:var(--bg);border-top:1px solid var(--border);padding-top:clamp(24px, 3vw, 48px)}.about-cta{padding-block:clamp(64px, 8vw, 96px);background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.about-cta-inner{display:flex;flex-direction:column;gap:var(--space-4)}.about-cta-headline{font-family:var(--font-mono);font-size:clamp(24px, 3.5vw, 40px);font-weight:700;letter-spacing:-0.03em;color:var(--text);-webkit-font-smoothing:antialiased}.about-cta-sub{font-size:16px;color:var(--text-dim);max-width:52ch;line-height:1.7}.about-cta-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}
/* =============================================================================
SERVICES PAGE
============================================================================= */
.page-hero-sub{font-size:clamp(14px, 3.8vw, 17px);color:var(--text-dim);max-width:56ch;line-height:1.7;margin-top:var(--space-4)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .service-includes{list-style:none;display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-5)}.service-includes li{font-size:15px;color:var(--text-mid);padding-left:var(--space-4);position:relative;line-height:1.6}.service-includes li::before{content:'\2192';position:absolute;left:0;color:var(--purple);font-family:var(--font-mono);font-size:13px}
/* ── Packages grid ── */
.packages-section{background:var(--surface);border-top:1px solid var(--border)}.packages-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin-top:var(--space-6)}@media (min-width:768px){.packages-grid{grid-template-columns:repeat(3, 1fr);align-items:start}}.package-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);background:var(--bg);display:flex;flex-direction:column;gap:var(--space-4);position:relative;transition:box-shadow var(--t-base)}.package-card:hover{border-color:var(--border-dark);box-shadow:var(--shadow-md)}.package-card--featured{border-color:var(--purple);background:var(--surface)}.package-card--featured:hover{border-color:var(--purple);box-shadow:0 8px 32px rgba(124, 58, 237, 0.12)}.package-featured-label{position:absolute;top:-13px;left:var(--space-4);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#ffffff;background:var(--purple);padding:3px 12px;border-radius:var(--radius-full)}.package-card-header{display:flex;flex-direction:column;gap:var(--space-2);padding-bottom:var(--space-4);border-bottom:1px solid var(--border)}.package-name{font-family:var(--font-mono);font-size:20px;font-weight:800;letter-spacing:-0.02em;color:var(--text);-webkit-font-smoothing:antialiased}.package-best-for{font-size:13px;color:var(--text-dim);line-height:1.5}.package-price{display:flex;align-items:baseline;gap:var(--space-1);margin-top:var(--space-2)}.package-price-from{font-family:var(--font-mono);font-size:12px;color:var(--text-dim)}.package-price-amount{font-family:var(--font-mono);font-size:clamp(22px, 2.5vw, 28px);font-weight:800;letter-spacing:-0.03em;color:var(--text);-webkit-font-smoothing:antialiased}.package-card--featured .package-price-amount{color:var(--purple)}.package-price-range{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);letter-spacing:0.02em}.package-includes{list-style:none;display:flex;flex-direction:column;gap:var(--space-2);flex:1}.package-includes li{font-size:14px;color:var(--text-mid);padding-left:var(--space-4);position:relative;line-height:1.5}.package-includes li::before{content:'\2713';position:absolute;left:0;color:var(--green);font-family:var(--font-mono);font-size:13px;font-weight:700}.package-cta{width:100%;justify-content:center}.packages-note{margin-top:var(--space-5);font-size:14px;color:var(--text-dim);font-family:var(--font-mono);line-height:1.7;max-width:68ch}
/* ── Maintenance plans ── */
.maintenance-section{background:var(--bg);border-top:1px solid var(--border)}.maintenance-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin-top:var(--space-6)}@media (min-width:768px){.maintenance-grid{grid-template-columns:repeat(3, 1fr);align-items:start}}.maintenance-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);background:var(--surface);transition:box-shadow var(--t-base)}.maintenance-card:hover{border-color:var(--border-dark);box-shadow:var(--shadow-sm)}.maintenance-card--featured{border-color:var(--purple)}.maintenance-name{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--text);margin-bottom:var(--space-3);-webkit-font-smoothing:antialiased}.maintenance-price{font-family:var(--font-mono);font-size:clamp(16px, 1.8vw, 20px);font-weight:800;color:var(--text);letter-spacing:-0.02em;padding-bottom:var(--space-4);border-bottom:1px solid var(--border);margin-bottom:var(--space-4);-webkit-font-smoothing:antialiased}.maintenance-card--featured .maintenance-price{color:var(--purple)}.maintenance-period{font-size:0.7em;font-weight:400;color:var(--text-dim);letter-spacing:0}.maintenance-includes{list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}.maintenance-includes li{font-size:14px;color:var(--text-mid);padding-left:var(--space-4);position:relative;line-height:1.5}.maintenance-includes li::before{content:'✓';position:absolute;left:0;color:var(--green);font-family:var(--font-mono);font-size:13px;font-weight:700}
/* ── Consulting rates ── */
.consulting-section{background:var(--surface);border-top:1px solid var(--border);padding-top:clamp(48px, 5vw, 96px);padding-bottom:0}.consulting-list{display:flex;flex-direction:column;margin-top:var(--space-6);border-top:1px solid var(--border)}.consulting-item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-5);border-bottom:1px solid var(--border);flex-wrap:wrap}.consulting-item:last-child{border-bottom:none}.consulting-item-name{font-family:var(--font-mono);font-size:clamp(15px, 1.6vw, 18px);font-weight:700;letter-spacing:-0.01em;color:var(--text);-webkit-font-smoothing:antialiased}.consulting-item-desc{font-size:13px;color:var(--text-dim);margin-top:var(--space-1)}.consulting-item-price{font-family:var(--font-mono);font-size:clamp(14px, 1.4vw, 16px);font-weight:700;color:var(--purple);white-space:nowrap;-webkit-font-smoothing:antialiased}
/* ── International pricing ── */
.international-section{background:var(--bg);border-top:1px solid var(--border)}.international-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-top:var(--space-6)}@media (min-width:768px){.international-grid{grid-template-columns:repeat(4, 1fr)}}.international-item{background:var(--surface);padding:var(--space-5) var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}.international-name{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim)}.international-price{font-family:var(--font-mono);font-size:clamp(14px, 1.4vw, 17px);font-weight:800;color:var(--text);letter-spacing:-0.02em;-webkit-font-smoothing:antialiased}.international-price-alt{font-family:var(--font-mono);font-size:13px;font-weight:400;color:var(--text-dim);letter-spacing:0.02em}
/* ── Services page CTA ── */
.services-cta-section{padding-block:clamp(64px, 8vw, 96px);background:var(--surface);border-top:1px solid var(--border)}.services-cta-inner{display:flex;flex-direction:column;gap:var(--space-4)}.services-cta-headline{font-family:var(--font-mono);font-size:clamp(24px, 3.5vw, 40px);font-weight:700;letter-spacing:-0.03em;color:var(--text);-webkit-font-smoothing:antialiased}.services-cta-sub{font-size:16px;color:var(--text-dim);max-width:52ch;line-height:1.7}.services-cta-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}
/* =============================================================================
WORK / PORTFOLIO PAGE
============================================================================= */
.work-archive-section{background:var(--bg)} .work-archive-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}@media (min-width:768px){.work-archive-grid{grid-template-columns:1fr 1fr} .work-archive-grid .work-card:first-child, .work-archive-grid .work-card:nth-child(3n+1):not(:first-child){grid-column:1 / -1} .work-archive-grid .work-card:first-child .work-card__image-wrap, .work-archive-grid .work-card:nth-child(3n+1):not(:first-child) .work-card__image-wrap{aspect-ratio:21 / 9}}@media (max-width:767px){ .work-archive-grid .work-card:first-child .work-card__image-wrap{aspect-ratio:16 / 9}} .work-card__placeholder{width:100%;height:100%;background:linear-gradient(135deg, var(--border) 0%, var(--bg) 100%);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;color:var(--text-dim);letter-spacing:0.1em}.work-archive-grid .work-card__placeholder::after{content:'Screenshot coming soon'}.work-empty{font-family:var(--font-mono);font-size:15px;color:var(--text-dim);padding-block:var(--space-8);text-align:center} .work-cta-section{padding-block:clamp(64px, 8vw, 96px);background:var(--surface);border-top:1px solid var(--border)}.work-cta-inner{display:flex;flex-direction:column;gap:var(--space-4)}.work-cta-headline{font-family:var(--font-mono);font-size:clamp(24px, 3.5vw, 40px);font-weight:700;letter-spacing:-0.03em;color:var(--text);-webkit-font-smoothing:antialiased}.work-cta-sub{font-size:16px;color:var(--text-dim);max-width:52ch;line-height:1.7}.work-cta-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}
/* =============================================================================
SERVICES PAGE — packages grid additions
============================================================================= */
.packages-grid--4{grid-template-columns:1fr}@media (min-width:640px){.packages-grid--4{grid-template-columns:repeat(2, 1fr)}}@media (min-width:1024px){.packages-grid--4{grid-template-columns:repeat(4, 1fr);align-items:stretch}} .package-price-from{display:none} .package-card--custom{border-style:dashed;background:var(--bg)}.package-card--custom:hover{border-style:solid;border-color:var(--text)} .package-price-amount--custom{font-size:clamp(18px, 2vw, 22px);color:var(--text-dim);font-weight:700} .package-price-range{display:none}
/* =============================================================================
CASE STUDY PAGE
============================================================================= */
.case-hero{padding-block:clamp(48px, 8vw, 96px) clamp(32px, 4vw, 48px);border-bottom:1px solid var(--border);background:var(--bg)}.case-hero-title{font-family:var(--font-mono);font-size:clamp(28px, 8vw, 80px);font-weight:800;letter-spacing:-0.03em;line-height:1.1;color:var(--text);margin-block:var(--space-4);-webkit-font-smoothing:antialiased;overflow-wrap:break-word;word-break:break-word}.case-hero-meta{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-5)}.case-hero-tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}.case-hero-details{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5)}.case-detail{font-family:var(--font-mono);font-size:13px;color:var(--text-mid);display:flex;flex-direction:column;gap:2px}.case-detail-label{font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim)}.case-live-link{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--purple);text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-1)}.case-live-link:hover{color:var(--text)} .case-section{padding-block:clamp(48px, 6vw, 80px)}.case-section--problem{background:var(--bg);border-top:1px solid var(--border)}.case-section--solution{background:var(--surface);border-top:1px solid var(--border)}.case-section--result{background:var(--text);border-top:1px solid var(--border)}.case-section-header{display:flex;align-items:baseline;gap:var(--space-4);margin-bottom:var(--space-5);padding-bottom:var(--space-4);border-bottom:1px solid var(--border)}.case-section--result .case-section-header{border-bottom-color:rgba(247,246,243,0.1)}.case-section-num{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:0.1em;color:var(--text-dim);min-width:28px}.case-section--result .case-section-num{color:rgba(247,246,243,0.55)}.case-section-title{font-family:var(--font-mono);font-size:clamp(20px, 2.5vw, 28px);font-weight:700;letter-spacing:-0.02em;color:var(--text);-webkit-font-smoothing:antialiased}.case-section--result .case-section-title{color:#f7f6f3} .case-prose p{font-size:clamp(16px, 1.8vw, 18px);line-height:1.85;color:var(--text-mid);max-width:68ch;margin-bottom:var(--space-4)}.case-prose p:last-child{margin-bottom:0} .case-results{display:grid;grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));gap:var(--space-5);margin-top:var(--space-5)}.case-result-item{display:flex;flex-direction:column;gap:var(--space-2)}.case-result-number{font-family:var(--font-mono);font-size:clamp(40px, 6vw, 64px);font-weight:800;letter-spacing:-0.04em;color:#f7f6f3;line-height:1;-webkit-font-smoothing:antialiased}.case-result-suffix{font-size:0.55em;letter-spacing:-0.02em}.case-result-label{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(247,246,243,0.55)} .case-screenshots-section{background:var(--text);padding-block:clamp(32px, 4vw, 64px)}.case-screenshots{display:grid;grid-template-columns:1fr;gap:var(--space-4)}@media (min-width:768px){.case-screenshots{grid-template-columns:1fr 1fr}.case-screenshot--hero{grid-column:1 / -1}}.case-screenshot{margin:0;border-radius:var(--radius-md);overflow:hidden;border:1px solid rgba(247,246,243,0.08)}.case-screenshot-img{width:100%;height:auto;display:block;transition:transform var(--t-slow)}.case-screenshot:hover .case-screenshot-img{transform:scale(1.02)} .case-stack-section{background:var(--surface);border-top:1px solid var(--border)}.case-stack-label{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-dim);margin-bottom:var(--space-4)}.case-stack{display:flex;flex-wrap:wrap;gap:var(--space-2)}.case-stack-item{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text-mid);background:var(--bg);border:1px solid var(--border);padding:6px 14px;border-radius:var(--radius-sm);letter-spacing:0.02em} /* case-nav — mobile-first, three-slot layout */
.case-nav{background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.case-nav-inner{display:flex;flex-direction:column;align-items:stretch}
/* placeholder keeps desktop flex slots balanced when one side is absent */
.case-nav-placeholder{display:none}
/* shared link styles */
.case-nav-link{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;padding-block:var(--space-5);border-bottom:1px solid var(--border)}
/* prev: arrow left, text right of it — natural row order */
.case-nav-link--prev{flex-direction:row;justify-content:flex-start}
/* next: text left, arrow right — natural row order, whole block pushed right */
/* FIX: row-reverse was reversed — it put the arrow on the wrong side and left-aligned the block */
.case-nav-link--next{flex-direction:row;justify-content:flex-end}
/* text group */
.case-nav-link-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.case-nav-link--next .case-nav-link-text{align-items:flex-end;text-align:right}
.case-nav-dir{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim)}
.case-nav-title{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--text);letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(220px,60vw)}
/* arrow */
.case-nav-arrow{font-size:18px;color:var(--text-dim);flex-shrink:0;transition:transform var(--t-fast),color var(--t-fast)}
/* hover */
.case-nav-link:hover .case-nav-dir,.case-nav-link:hover .case-nav-title,.case-nav-link:hover .case-nav-arrow{color:var(--purple)}
.case-nav-link--prev:hover .case-nav-arrow{transform:translateX(-3px)}
.case-nav-link--next:hover .case-nav-arrow{transform:translateX(3px)}
/* center all-projects link */
/* FIX: border-bottom removed — when no next-project exists, placeholder is display:none
   and this border floated orphaned at the bottom of the nav block */
.case-nav-all{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-dim);text-decoration:none;text-align:center;padding-block:var(--space-4);display:block}
.case-nav-all:hover{color:var(--purple)}
/* Borders: prev always has one below; all-projects gets one when a next-link follows it */
.case-nav-link--prev{border-bottom:1px solid var(--border)}
.case-nav-all:has(+.case-nav-link--next){border-bottom:1px solid var(--border)}
.case-nav-link--next{border-bottom:none}
/* desktop: single row, three equal slots */
@media (min-width:768px){
  .case-nav-inner{flex-direction:row;align-items:stretch;min-height:80px}
  .case-nav-link,.case-nav-all,.case-nav-placeholder{flex:1;border-bottom:none;padding-block:0}
  /* FIX: padding-inline:0 removed — text was flush against the divider borders */
  .case-nav-link{align-items:center;padding-inline:var(--space-4)}
  .case-nav-placeholder{display:block;pointer-events:none}
  .case-nav-link--prev{border-right:1px solid var(--border)}
  .case-nav-link--next{border-left:1px solid var(--border)}
  .case-nav-all{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;min-width:140px;padding-inline:var(--space-5)}
  .case-nav-title{max-width:200px}
}
@media (min-width:1024px){.case-nav-title{max-width:280px}} .case-cta-section{padding-block:clamp(64px, 8vw, 96px);background:var(--surface)}.case-cta-inner{display:flex;flex-direction:column;gap:var(--space-4)}.case-cta-headline{font-family:var(--font-mono);font-size:clamp(24px, 3.5vw, 40px);font-weight:700;letter-spacing:-0.03em;color:var(--text);-webkit-font-smoothing:antialiased}.case-cta-sub{font-size:16px;color:var(--text-dim);max-width:52ch;line-height:1.7}
/* =============================================================================
HIRE ME PAGE
============================================================================= */
.hire-hero{padding-block:clamp(72px, 10vw, 120px) clamp(64px, 8vw, 96px);background:var(--text);border-bottom:none;position:relative;overflow:visible}.hire-hero-inner{display:flex;flex-direction:column;gap:var(--space-5);max-width:720px}.hire-hero-title{font-family:var(--font-mono);font-size:clamp(40px, 8vw, 88px);font-weight:800;letter-spacing:-0.04em;line-height:1.0;color:#f7f6f3;margin-block:0;max-width:none;white-space:pre-line;-webkit-font-smoothing:antialiased}.hire-hero-sub{font-size:clamp(15px, 1.8vw, 17px);color:rgba(247, 246, 243, 0.55);line-height:1.75;max-width:48ch;margin-bottom:0}.hire-services-label{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-dim);margin-bottom:var(--space-3)}.hire-services{list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}.hire-services li{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--text-mid);padding-left:var(--space-4);position:relative}.hire-services li::before{content:'\2192';position:absolute;left:0;color:var(--purple)}.hire-scroll-hint{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text-dim);text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-2)}.hire-scroll-hint:hover{color:var(--purple)}.hire-process-section{padding-block:clamp(24px, 3vw, 48px);background:var(--surface);border-bottom:1px solid var(--border)}.hire-section-title{font-family:var(--font-mono);font-size:clamp(11px, 1.2vw, 13px);font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-dim);margin-bottom:0;padding-bottom:var(--space-3);border-bottom:1px solid var(--border)}.hire-steps{display:flex;flex-direction:column;gap:0}.hire-step{display:grid;grid-template-columns:48px 1fr;gap:var(--space-4);padding-block:var(--space-5);border-bottom:1px solid var(--border);align-items:start}.hire-step:last-child{border-bottom:none}.hire-step-num{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:0.08em;color:var(--text-dim);padding-top:4px}.hire-step-name{font-family:var(--font-mono);font-size:clamp(16px, 1.8vw, 20px);font-weight:700;letter-spacing:-0.01em;color:var(--text);margin-bottom:var(--space-2);-webkit-font-smoothing:antialiased}.hire-step-desc{font-size:15px;color:var(--text-mid);line-height:1.7;max-width:52ch}.hire-form-section{padding-block:clamp(64px, 8vw, 96px);background:var(--bg)}.hire-form-inner{max-width:680px;margin-inline:auto}.hire-form-header{margin-bottom:var(--space-6)}.hire-form-title{font-family:var(--font-mono);font-size:clamp(24px, 3.5vw, 40px);font-weight:700;letter-spacing:-0.03em;color:var(--text);margin-bottom:var(--space-3);-webkit-font-smoothing:antialiased}.hire-form-sub{font-size:15px;color:var(--text-dim)}.hire-form{display:flex;flex-direction:column;gap:var(--space-4)}.form-row{display:grid;grid-template-columns:1fr;gap:var(--space-4)}@media (min-width:600px){.form-row--2{grid-template-columns:1fr 1fr}}.form-group{display:flex;flex-direction:column;gap:var(--space-2)}.form-label{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:0.06em;color:var(--text-mid);text-transform:uppercase}.form-required{color:var(--purple);margin-left:2px}.form-input{font-family:var(--font-body);font-size:16px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;width:100%;transition:box-shadow var(--t-fast);outline:none;-webkit-appearance:none;appearance:none}.form-input::placeholder{color:var(--text-dim)}.form-input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(124, 58, 237, 0.1)}.form-select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:44px}.form-textarea{resize:vertical;min-height:140px;font-family:var(--font-body);line-height:1.7}.form-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-2)}.form-note{font-family:var(--font-mono);font-size:12px;color:var(--text-dim)}.form-message--error{font-family:var(--font-mono);font-size:13px;color:var(--red);padding:var(--space-3) var(--space-4);background:rgba(220, 38, 38, 0.05);border:1px solid rgba(220, 38, 38, 0.2);border-radius:var(--radius-sm)}.form-success{padding:var(--space-7) var(--space-5);text-align:center;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}.form-success-icon{display:block;font-size:32px;color:var(--green);margin-bottom:var(--space-3)}.form-success-title{font-family:var(--font-mono);font-size:24px;font-weight:700;letter-spacing:-0.02em;color:var(--text);margin-bottom:var(--space-3);-webkit-font-smoothing:antialiased}.form-success-sub{font-size:16px;color:var(--text-dim);line-height:1.7}.hire-faq-section{background:var(--surface);border-top:1px solid var(--border);padding-top:clamp(24px, 3vw, 48px);padding-bottom:clamp(24px, 3vw, 48px)}.hire-faq-section .faq-item:first-child{border-top:none}.faq-list{display:flex;flex-direction:column;margin-top:0}.faq-item{border-bottom:1px solid var(--border)}.faq-item:first-child{border-top:none}.faq-item:last-child{border-bottom:none}.faq-trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);width:100%;padding-block:var(--space-4);text-align:left;background:transparent;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)} .faq-trigger:hover, .faq-trigger:focus, .faq-trigger:active, .faq-trigger:focus-visible, .faq-item.is-open .faq-trigger{background:transparent;color:inherit}.faq-item, .faq-item:hover, .faq-item.is-open{background:transparent} .faq-trigger:focus-visible .faq-question{text-decoration:underline;text-decoration-color:var(--purple);text-underline-offset:3px}.faq-question{font-family:var(--font-mono);font-size:clamp(15px, 1.6vw, 17px);font-weight:700;letter-spacing:-0.01em;color:var(--text);-webkit-font-smoothing:antialiased}.faq-item.is-open .faq-question{color:var(--purple)}.faq-icon{font-family:var(--font-mono);font-size:20px;font-weight:300;color:var(--text-dim);flex-shrink:0;transition:transform var(--t-base);line-height:1}.faq-item.is-open .faq-icon{transform:rotate(45deg);color:var(--purple)}.faq-content{overflow:hidden;max-height:0;transition:max-height 350ms ease}.faq-answer{font-size:15px;color:var(--text-mid);line-height:1.8;padding-bottom:var(--space-4);padding-right:var(--space-3);max-width:60ch}
/* =============================================================================
CONTACT PAGE
============================================================================= */
.contact-layout{display:grid;grid-template-columns:1fr;min-height:calc(100vh - var(--header-height))}@media (min-width:1024px){.contact-layout{grid-template-columns:1fr 1fr}}.contact-info{padding:clamp(48px, 8vw, 96px) clamp(24px, 5vw, 80px);background:var(--text);display:flex;flex-direction:column;gap:var(--space-6)}.contact-info .page-hero-label{color:rgba(247,246,243,0.55)}.contact-title{font-family:var(--font-mono);font-size:clamp(40px, 7vw, 80px);font-weight:800;letter-spacing:-0.04em;line-height:1.0;color:#f7f6f3;-webkit-font-smoothing:antialiased}.contact-info .availability{color:rgba(247,246,243,0.5)}.contact-details{display:flex;flex-direction:column;gap:var(--space-4);padding-top:var(--space-2)}.contact-detail-link, .contact-detail-item{display:flex;flex-direction:column;gap:4px;text-decoration:none}.contact-detail-label{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:rgba(247,246,243,0.55)}.contact-detail-value{font-family:var(--font-mono);font-size:15px;font-weight:600;color:rgba(247,246,243,0.7)}.contact-detail-link:hover .contact-detail-value{color:#f7f6f3}.contact-socials-label{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:rgba(247,246,243,0.55);margin-bottom:var(--space-3)}.contact-social-links{display:flex;flex-direction:column;gap:var(--space-2)}.contact-social-link{font-family:var(--font-mono);font-size:14px;font-weight:600;color:rgba(247,246,243,0.5);text-decoration:none;transition:transform var(--t-fast)}@media (hover:hover) and (pointer:fine){.contact-social-link:hover{color:#f7f6f3;transform:translateX(var(--space-2))}}.contact-form-wrap{padding:clamp(48px, 8vw, 96px) clamp(24px, 5vw, 80px);background:var(--bg)}
/* =============================================================================
PROCESS PAGE
============================================================================= */
.process-section{background:var(--bg)}.process-step{display:grid;grid-template-columns:1fr;gap:var(--space-5);padding-block:clamp(48px, 6vw, 64px);border-bottom:1px solid var(--border)}.process-step:first-child{border-top:1px solid var(--border)}@media (min-width:768px){.process-step{grid-template-columns:280px 1fr;gap:var(--space-7)}}.process-step-header{display:flex;align-items:flex-start;gap:var(--space-4)}.process-step-num{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:0.1em;color:var(--text-dim);padding-top:6px;min-width:28px}.process-step-meta{display:flex;flex-direction:column;gap:var(--space-2)}.process-step-name{font-family:var(--font-mono);font-size:clamp(22px, 3vw, 32px);font-weight:800;letter-spacing:-0.03em;color:var(--text);-webkit-font-smoothing:antialiased}.process-step-time{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:0.06em;color:var(--purple);text-transform:uppercase}.process-step-body{display:flex;flex-direction:column;gap:var(--space-4)}.process-step-desc{font-size:clamp(15px, 1.6vw, 17px);color:var(--text-mid);line-height:1.85;max-width:60ch}.process-step-items{list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}.process-step-items li{font-size:14px;color:var(--text-mid);padding-left:var(--space-4);position:relative;line-height:1.6}.process-step-items li::before{content:'\2192';position:absolute;left:0;color:var(--purple);font-family:var(--font-mono);font-size:13px}.process-cta-section{padding-block:clamp(64px, 8vw, 96px);background:var(--surface);border-top:1px solid var(--border)}.process-cta-inner{display:flex;flex-direction:column;gap:var(--space-4)}.process-cta-headline{font-family:var(--font-mono);font-size:clamp(24px, 3.5vw, 40px);font-weight:700;letter-spacing:-0.03em;color:var(--text);-webkit-font-smoothing:antialiased}.process-cta-sub{font-size:16px;color:var(--text-dim);max-width:52ch;line-height:1.7}
/* =============================================================================
USES PAGE
============================================================================= */
.uses-section{background:var(--bg)}.uses-group{padding-block:clamp(40px, 5vw, 56px);border-bottom:1px solid var(--border)}.uses-group:first-child{border-top:1px solid var(--border)}.uses-group-title{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-dim);margin-bottom:var(--space-5);padding-bottom:var(--space-3);border-bottom:1px solid var(--border)}.uses-list{display:flex;flex-direction:column;gap:0}.uses-item{display:grid;grid-template-columns:1fr;gap:var(--space-1);padding-block:var(--space-4);border-bottom:1px solid rgba(0,0,0,0.04)}@media (min-width:640px){.uses-item{grid-template-columns:240px 1fr;gap:var(--space-5);align-items:baseline}}.uses-item:last-child{border-bottom:none}.uses-item-name{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--text);letter-spacing:-0.01em;-webkit-font-smoothing:antialiased}.uses-item-desc{font-size:14px;color:var(--text-dim);line-height:1.6}
/* =============================================================================
NOW PAGE
============================================================================= */
.now-updated{font-family:var(--font-mono);font-size:13px;color:var(--text-dim);margin-top:var(--space-4)}.now-section{background:var(--bg)}.now-block{padding-block:clamp(40px, 5vw, 56px);border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr;gap:var(--space-4)}@media (min-width:640px){.now-block{grid-template-columns:180px 1fr;gap:var(--space-7);align-items:start}}.now-block:first-child{border-top:1px solid var(--border)}.now-block-title{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-dim);padding-top:4px}.now-block-content{display:flex;flex-direction:column;gap:var(--space-3)}.now-block-content p{font-size:clamp(15px, 1.6vw, 17px);color:var(--text-mid);line-height:1.85;max-width:62ch}.now-progress{display:flex;flex-direction:column;gap:var(--space-3);max-width:400px}.now-progress-bar{height:6px;background:var(--border);border-radius:var(--radius-full);overflow:hidden}.now-progress-fill{height:100%;background:var(--gradient-brand);border-radius:var(--radius-full);transition:width 1s ease}.now-progress-label{font-family:var(--font-mono);font-size:13px;color:var(--text-dim)}.now-progress-num{color:var(--purple);font-weight:700}.now-footer-note{padding-top:var(--space-6);font-family:var(--font-mono);font-size:12px;color:var(--text-dim)}
/* =============================================================================
TESTIMONIALS PAGE
============================================================================= */
.testimonials-section{background:var(--bg)}.testimonials-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}@media (min-width:768px){.testimonials-grid{grid-template-columns:repeat(2, 1fr)}}@media (min-width:1024px){.testimonials-grid{grid-template-columns:repeat(3, 1fr)}}.testimonial-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-5);margin:0;transition:box-shadow var(--t-base)}.testimonial-card:hover{border-color:var(--border-dark);box-shadow:var(--shadow-md)}.testimonial-quote-icon{font-family:Georgia, serif;font-size:48px;line-height:1;color:var(--purple);opacity:0.3}.testimonial-quote{font-size:clamp(15px, 1.6vw, 17px);color:var(--text-mid);line-height:1.8;flex:1;font-style:italic}.testimonial-footer{display:flex;align-items:center;gap:var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--border)}.testimonial-avatar{width:40px;height:40px;border-radius:50%;background:var(--purple-light);border:1px solid rgba(124,58,237,0.2);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--purple);flex-shrink:0}.testimonial-meta{display:flex;flex-direction:column;gap:2px}.testimonial-name{font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--text);font-style:normal;-webkit-font-smoothing:antialiased}.testimonial-role{font-size:12px;color:var(--text-dim)}.testimonials-cta-section{padding-block:clamp(64px, 8vw, 96px);background:var(--surface);border-top:1px solid var(--border)}.testimonials-cta-inner{display:flex;flex-direction:column;gap:var(--space-5)}.testimonials-cta-headline{font-family:var(--font-mono);font-size:clamp(24px, 3.5vw, 40px);font-weight:700;letter-spacing:-0.03em;color:var(--text);-webkit-font-smoothing:antialiased}
/* =============================================================================
FAQ PAGE
============================================================================= */
.faq-page-section{background:var(--bg)}.faq-cta{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;margin-top:var(--space-7);padding-top:var(--space-6);border-top:1px solid var(--border)}.faq-cta-text{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--text);-webkit-font-smoothing:antialiased}
/* =============================================================================
THANK YOU PAGE
============================================================================= */
.page-thank-you{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - var(--header-height));background:var(--bg);padding:var(--space-8) clamp(24px, 5vw, 80px)}.thankyou-inner{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);max-width:520px;width:100%}.thankyou-icon{font-size:40px;color:var(--green);font-family:var(--font-mono);font-weight:700;line-height:1}.thankyou-title{font-family:var(--font-mono);font-size:clamp(36px, 7vw, 72px);font-weight:800;letter-spacing:-0.04em;line-height:1.0;color:var(--text);-webkit-font-smoothing:antialiased}.thankyou-sub{font-size:clamp(15px, 1.6vw, 17px);color:var(--text-mid);line-height:1.7}.thankyou-links{display:flex;flex-direction:column;gap:0;width:100%;margin-top:var(--space-3);border-top:1px solid var(--border)}.thankyou-link{display:flex;align-items:center;justify-content:space-between;padding-block:var(--space-4);border-bottom:1px solid var(--border);text-decoration:none;transition:transform var(--t-fast)}@media (hover:hover) and (pointer:fine){.thankyou-link:hover{transform:translateX(var(--space-2))}}.thankyou-link-label{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--text);letter-spacing:-0.01em;-webkit-font-smoothing:antialiased}.thankyou-link:hover .thankyou-link-label{color:var(--purple)}.thankyou-link-arrow{font-family:var(--font-mono);font-size:18px;color:var(--text-dim)}.thankyou-link:hover .thankyou-link-arrow{color:var(--purple)}
/* =============================================================================
SINGLE POST
============================================================================= */
.post-header{padding-block:clamp(48px, 8vw, 80px) clamp(32px, 4vw, 48px);border-bottom:1px solid var(--border);background:var(--bg)}.post-category{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--purple);text-decoration:none;display:inline-block;margin-bottom:var(--space-4)}.post-category:hover{color:var(--text)}.post-title{font-family:var(--font-mono);font-size:clamp(28px, 5vw, 56px);font-weight:800;letter-spacing:-0.04em;line-height:1.1;color:var(--text);margin-bottom:var(--space-4);-webkit-font-smoothing:antialiased}.post-meta{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:13px;color:var(--text-dim)}.post-meta-sep{color:var(--border-dark)}.post-featured-image{background:var(--border);border-bottom:1px solid var(--border)}.post-featured-image img{width:100%;height:auto;max-height:560px;object-fit:cover;display:block}.post-content-wrap{padding-block:clamp(48px, 6vw, 80px);background:var(--bg)} .prose{font-size:clamp(16px, 1.8vw, 18px);line-height:1.85;color:var(--text-mid)}.prose h2{margin-top:var(--space-7);margin-bottom:var(--space-4);color:var(--text)}.prose h3{margin-top:var(--space-6);margin-bottom:var(--space-3);color:var(--text)}.prose p{margin-bottom:var(--space-4);max-width:68ch}.prose ul, .prose ol{padding-left:var(--space-5);margin-bottom:var(--space-4)}.prose li{margin-bottom:var(--space-2);line-height:1.75}.prose a{color:var(--purple);text-decoration:underline;text-underline-offset:3px}.prose blockquote{border-left:3px solid var(--purple);padding:var(--space-3) var(--space-5);margin:var(--space-5) 0;background:var(--purple-light);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic}.prose pre{background:var(--text);color:#f7f6f3;padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);overflow-x:auto;font-family:var(--font-mono);font-size:14px;line-height:1.7;margin-block:var(--space-5)}.prose code{font-family:var(--font-mono);font-size:0.88em;background:var(--purple-light);color:var(--purple);padding:2px 6px;border-radius:var(--radius-sm)}.prose pre code{background:none;color:inherit;padding:0}.prose img{border-radius:var(--radius-md);margin-block:var(--space-5)}.prose hr{border:none;border-top:1px solid var(--border);margin-block:var(--space-6)} .post-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--border)}.post-tag{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:0.06em;color:var(--text-dim);background:var(--surface);border:1px solid var(--border);padding:4px 12px;border-radius:var(--radius-full);text-decoration:none}.post-tag:hover{color:var(--purple);border-color:var(--purple)} .post-share{margin-top:var(--space-5)} .post-author-section{padding-block:var(--space-6);background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.post-author{display:flex;align-items:flex-start;gap:var(--space-4)}.post-author-avatar{width:56px;height:56px;border-radius:50%;background:var(--text);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:18px;font-weight:800;color:var(--bg);flex-shrink:0;-webkit-font-smoothing:antialiased;overflow:hidden}.post-author-avatar__img{width:56px;height:56px;border-radius:50%;object-fit:cover;display:block}.post-author-avatar:has(img){background:transparent;font-size:0}.post-author-name{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--text);margin-bottom:var(--space-2);-webkit-font-smoothing:antialiased}.post-author-bio{font-size:14px;color:var(--text-mid);line-height:1.7;max-width:52ch} .post-nav{background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding-block:var(--space-5)}.post-nav-inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);max-width:var(--wide-width);margin-inline:auto;padding-inline:clamp(16px, 5vw, 80px)}.post-nav-link{display:flex;flex-direction:column;gap:var(--space-1);text-decoration:none}.post-nav-link--next{text-align:right;align-items:flex-end}.post-nav-link--empty{pointer-events:none}.post-nav-dir{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim)}.post-nav-title{font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--text);letter-spacing:-0.01em}.post-nav-link:hover .post-nav-dir, .post-nav-link:hover .post-nav-title{color:var(--purple)}
/* =============================================================================
404 PAGE
============================================================================= */
.page-404{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - var(--header-height));background:var(--bg);padding:var(--space-8) clamp(24px, 5vw, 80px)}.fourofour-inner{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5);max-width:520px;width:100%}.fourofour-comment{font-family:var(--font-mono);font-size:clamp(13px, 1.4vw, 15px);color:var(--text-dim);background:rgba(0, 0, 0, 0.03);border:1px solid var(--border);border-left:3px solid var(--purple);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);display:inline-flex;align-items:center;gap:var(--space-2)}.fourofour-comment-syntax{color:var(--purple);opacity:0.5}.fourofour-comment-text{color:var(--text-dim)}.fourofour-title{font-family:var(--font-mono);font-size:clamp(72px, 18vw, 160px);font-weight:800;letter-spacing:-0.06em;line-height:1;color:var(--text);-webkit-font-smoothing:antialiased}.fourofour-sub{font-size:clamp(15px, 1.6vw, 17px);color:var(--text-mid);line-height:1.7;max-width:42ch}.fourofour-links-label{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-dim);margin-bottom:var(--space-3)}.fourofour-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-1)}.fourofour-link{font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--text-mid);text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-2);padding-block:var(--space-1);transition:transform var(--t-fast)}@media (hover:hover) and (pointer:fine){.fourofour-link:hover{color:var(--purple);transform:translateX(var(--space-2))}}.fourofour-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}
/* =============================================================================
ARCHIVE + SEARCH CSS
Covers: category.php, tag.php, search.php
============================================================================= */

/* ── Shared archive header ── */
.archive-breadcrumb{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);margin-bottom:var(--space-4);display:flex;flex-wrap:wrap;align-items:center;gap:6px}.archive-breadcrumb-link{color:var(--text-dim);text-decoration:none}.archive-breadcrumb-link:hover{color:var(--purple)}.archive-header-desc{font-size:clamp(15px, 1.6vw, 17px);color:var(--text-mid);line-height:1.75;max-width:56ch;margin-top:var(--space-3)}.archive-count{font-family:var(--font-mono);font-size:13px;color:var(--text-dim);margin-top:var(--space-2)}
/* ── Archive posts grid ── */
.archive-section{background:var(--bg)}.archive-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}@media (min-width:640px){.archive-grid{grid-template-columns:repeat(2, 1fr)}}@media (min-width:1024px){.archive-grid{grid-template-columns:repeat(3, 1fr)}}
/* ── Pagination ── */
.archive-pagination{margin-top:var(--space-7);display:flex;justify-content:center}.archive-pagination .page-numbers{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}.archive-pagination .page-numbers li a, .archive-pagination .page-numbers li span{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text-dim);text-decoration:none;padding:8px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);display:block;transition:background var(--t-fast)}.archive-pagination .page-numbers li a:hover{color:var(--purple);border-color:var(--purple);background:var(--purple-light)}.archive-pagination .page-numbers li span.current{color:var(--purple);border-color:var(--purple);background:var(--purple-light)}
/* ── Empty state ── */
.archive-empty{display:flex;flex-direction:column;gap:var(--space-5);padding-block:var(--space-7);max-width:480px}.archive-empty-msg{font-size:clamp(15px, 1.6vw, 17px);color:var(--text-mid)} .author-bio-box{display:flex;align-items:flex-start;gap:var(--space-5);margin-top:var(--space-5)}@media (max-width:639px){.author-bio-box{flex-direction:column;gap:var(--space-4)}}.author-bio-avatar{flex-shrink:0}.author-bio-avatar__img{width:80px;height:80px;border-radius:50%;object-fit:cover;display:block}.author-bio-avatar--fallback{width:80px;height:80px;border-radius:50%;background:var(--text);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:26px;font-weight:800;color:var(--bg);flex-shrink:0;-webkit-font-smoothing:antialiased}.author-bio-content{flex:1;min-width:0}.author-bio-meta{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-3);flex-wrap:wrap}.author-bio-site{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--purple);text-decoration:none;transition:opacity var(--t-fast)}.author-bio-site:hover{opacity:0.75}
/* ── Search form on search page ── */
.search-results-heading{font-size:clamp(28px, 5vw, 48px) !important}.search-form-block{margin-top:var(--space-5);max-width:520px}.search-form-inner{display:flex;align-items:stretch;border:1px solid var(--border-dark);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface);transition:box-shadow var(--t-fast)}.search-form-inner:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px rgba(124, 58, 237, 0.08)}.search-form-input{flex:1;font-family:var(--font-mono);font-size:15px;color:var(--text);background:transparent;border:none;padding:14px 18px;outline:none;min-width:0}.search-form-input::placeholder{color:var(--text-dim)}.search-form-btn{display:flex;align-items:center;justify-content:center;width:52px;background:var(--text);border:none;color:var(--bg);cursor:pointer;flex-shrink:0;transition:background var(--t-fast)}.search-form-btn:hover{background:var(--purple)}
/* ── No results state ── */
.search-no-results{display:flex;flex-direction:column;gap:var(--space-4);padding-block:var(--space-6)}.search-no-results-msg{font-size:clamp(16px, 1.8vw, 18px);color:var(--text-mid);font-style:italic}.search-suggestions{list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}.search-suggestions li{font-family:var(--font-mono);font-size:14px;color:var(--text-dim);padding-left:var(--space-4);position:relative}.search-suggestions li::before{content:'\2192';position:absolute;left:0;color:var(--purple)}
/* ── Screen reader only ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}
/* =============================================================================
MISC PAGE FIXES
Now page double line, Hire Me hero redesign, service-name hover
============================================================================= */

/* ── SERVICE NAME HOVER FIX ────────────────────────────────────────────────
Fixed in the base .service-name rule (hover keeps var(--text), never
var(--surface)). No override needed.
─────────────────────────────────────────────────────────────────────────── */
/* ── 3. NOW PAGE — REMOVE DOUBLE LINE ───────────────────────────────────────
page-hero has border-bottom AND now-block:first-child has border-top.
These sit right next to each other = double line gap. Remove the hero
bottom border on the Now page and control spacing from the section.
─────────────────────────────────────────────────────────────────────────── */
.page-now .page-hero, .page-hero--no-bottom-border{border-bottom:none !important}.page-now .now-section{padding-top:0} .now-block:first-child{border-top:1px solid var(--border)} .now-block--last{border-bottom:none}
/* ── 4. HIRE ME HERO — DARK FULL-IMPACT REDESIGN ───────────────────────────
Replaces the flat light hero with a dark dramatic section.
─────────────────────────────────────────────────────────────────────────── */
.hire-hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient( ellipse 80% 60% at 20% 50%, rgba(124, 58, 237, 0.12) 0%, transparent 70% );pointer-events:none;clip-path:inset(0)}.hire-hero .container{position:relative;z-index:1} .hire-hero-availability{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:0.08em;color:rgba(247, 246, 243, 0.5)}.hire-hero-avail-label{color:rgba(247, 246, 243, 0.5)} .hire-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-2)}.hire-hero-cta{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:15px;font-weight:700;letter-spacing:-0.01em;color:#0d0d0d;background:#f7f6f3;border:none;padding:14px 28px;border-radius:var(--radius-sm);text-decoration:none;transition:background var(--t-fast);-webkit-font-smoothing:antialiased}.hire-hero-cta:hover{background:var(--purple);color:#ffffff}.hire-hero-whatsapp{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:14px;font-weight:700;color:#25D366;border:1px solid rgba(37, 211, 102, 0.3);background:rgba(37, 211, 102, 0.06);padding:13px 22px;border-radius:var(--radius-sm);text-decoration:none;transition:background var(--t-fast);-webkit-font-smoothing:antialiased}.hire-hero-whatsapp:hover{background:rgba(37, 211, 102, 0.12);border-color:rgba(37, 211, 102, 0.5)} .hire-hero-proofs{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin-top:var(--space-2)}.hire-hero-proofs li{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:0.06em;color:rgba(247, 246, 243, 0.55);padding-left:var(--space-3);position:relative}.hire-hero-proofs li::before{content:'\2713';position:absolute;left:0;color:var(--green);opacity:0.75}
/* ── 5. HIRE FORM HEADER — email + WhatsApp contact links ───────────────────*/
.hire-form-contacts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin-top:var(--space-2)}.hire-form-contact-link{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text-dim);text-decoration:none}.hire-form-contact-link:hover{color:var(--purple)}.hire-form-contact-link--wa{color:#16a34a}.hire-form-contact-link--wa:hover{color:#15803d}
/* ── 6. CONTACT PAGE — WhatsApp option in info panel ───────────────────────*/
.contact-whatsapp-link{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:15px;font-weight:700;color:#25D366;text-decoration:none;-webkit-font-smoothing:antialiased}.contact-whatsapp-link:hover{color:#1fad57}
/* ── 7. SERVICE ACCORDION CSS FIX ──────────────────────────────────────────
Consolidated into the base .service-content rules (section 21) — mobile
collapses via .service-item.is-open (added by main.js), desktop always open.
No overrides needed.
─────────────────────────────────────────────────────────────────────────── */
/* =============================================================================
SERVICES PAGE STYLES
Fixes: broken service-content CSS, service-name hover, double line,
new dark hero, services-overview top border only
============================================================================= */

/* ── SERVICE-NAME HOVER — colour shift comes from icon and num, not text ──────*/
/* ── 3. FIX mobile accordion broken padding ─────────────────────────────────
Consolidated in base .service-content (section 21) — .is-open drives the
expand on mobile, desktop is always open. Dead .is-accordion selectors
removed (no JS ever added that class).
─────────────────────────────────────────────────────────────────────────── */
/* ── 4. SERVICES HERO — dark, high-impact ───────────────────────────────────
Replaces the flat page-hero. No border-bottom so there is no double-line
gap when services-list starts. The services-list top border is the
single clean divider between hero and content.
─────────────────────────────────────────────────────────────────────────── */
.services-hero{background:var(--text); padding-block:clamp(64px, 10vw, 112px) clamp(56px, 7vw, 88px);position:relative;overflow:visible} .services-hero::before{content:'';position:absolute;inset:0;background:radial-gradient( ellipse 70% 80% at 90% 50%, rgba(124, 58, 237, 0.10) 0%, transparent 70% );pointer-events:none;clip-path:inset(0)}.services-hero .container{position:relative;z-index:1}.services-hero-inner{display:grid;grid-template-columns:1fr;gap:clamp(40px, 6vw, 64px)}@media (min-width:900px){.services-hero-inner{grid-template-columns:1fr 1fr;align-items:center}} .services-hero-label{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--purple);margin-bottom:var(--space-3);display:block}.services-hero-title{font-family:var(--font-mono);font-size:clamp(40px, 7vw, 80px);font-weight:800;letter-spacing:-0.04em;line-height:1.0;color:#f7f6f3;margin-bottom:var(--space-4);-webkit-font-smoothing:antialiased}.services-hero-sub{font-size:clamp(15px, 1.6vw, 17px);color:rgba(247, 246, 243, 0.5);line-height:1.75;max-width:44ch;margin-bottom:var(--space-5)}.services-hero-actions{display:flex}.services-hero-cta{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:15px;font-weight:700;color:#0d0d0d;background:#f7f6f3;border:none;padding:14px 28px;border-radius:var(--radius-sm);text-decoration:none;transition:background var(--t-fast);-webkit-font-smoothing:antialiased}.services-hero-cta:hover{background:var(--purple);color:#ffffff} .services-hero-proofs{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255, 255, 255, 0.06);border:1px solid rgba(255, 255, 255, 0.06);border-radius:var(--radius-md);overflow:hidden}.services-hero-proof{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-5);background:rgba(255, 255, 255, 0.02);transition:background var(--t-fast)}.services-hero-proof:hover{background:rgba(124, 58, 237, 0.08)}.services-hero-proof-num{font-family:var(--font-mono);font-size:clamp(28px, 4vw, 40px);font-weight:800;letter-spacing:-0.04em;color:#f7f6f3;line-height:1;-webkit-font-smoothing:antialiased}.services-hero-proof-label{font-family:var(--font-mono);font-size:12px;color:rgba(247, 246, 243, 0.55);line-height:1.4}
/* ── 5. SERVICES OVERVIEW — no double border ────────────────────────────────
Hero has no border-bottom. services-overview has no padding-top section gap.
The service-list itself controls its own top border via service-item:first-child.
─────────────────────────────────────────────────────────────────────────── */
.services-overview{padding-block:0; }.services-overview > .container{padding-block:clamp(0px, 0vw, 0px)}
/* ── 6. SERVICES LIST — mobile collapsed by default, desktop always open ────
Handled by the base .service-content media queries in section 21.
─────────────────────────────────────────────────────────────────────────── */
/* =============================================================================
LAYOUT FIXES — nav z-index, hero overflow, services hero mobile
============================================================================= */

/* ── NAV Z-INDEX FIX ────────────────────────────────────────────────────────
overflow:visible + clip-path:inset(0) on ::before are now in the BASE
.hero/.services-hero/.hire-hero rules — the old overflow:hidden created a
stacking context that trapped the fixed nav. No override needed.
─────────────────────────────────────────────────────────────────────────── */
/* ── 3. SERVICES HERO PROOF STRIP — center on mobile ───────────────────────
On mobile the proof strip was left-aligned and looked odd.
Center it and reduce padding so the 2×2 grid fills the width properly.
─────────────────────────────────────────────────────────────────────────── */
@media (max-width:899px){.services-hero-proofs{max-width:480px;margin-inline:auto;width:100%}.services-hero-proof{padding:var(--space-4)}.services-hero-proof-num{font-size:clamp(24px, 7vw, 36px)}}
/* =============================================================================
PROSE CONTENT — ul, ol, table, img, figure
Applies inside .prose, .entry-content, .page-content, single.php, page.php
============================================================================= */
.prose, .entry-content, .page-content{
/* ── Lists ── */
ul, ol{margin-block:var(--space-4);padding-left:1.5em;line-height:1.85}ul{list-style:disc}ol{list-style:decimal}ul ul{list-style:circle;margin-block:var(--space-2)}ol ol{list-style:lower-alpha;margin-block:var(--space-2)}li{margin-bottom:0.45em;color:var(--text);font-size:inherit}li::marker{color:var(--purple);font-weight:700}
/* ── Tables ── */
.entry-content table, .prose table, .single-post__body table, article table, table{width:100%;border-collapse:collapse;font-size:15px;margin-block:var(--space-5);box-shadow:0 0 0 1px var(--border);border-radius:var(--radius-md);display:block;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}thead{background:var(--text);color:var(--bg)}thead th{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:14px 18px;text-align:left;white-space:nowrap} td, th{border:none}tbody td{padding:13px 18px;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.65;color:var(--text)}tbody tr:last-child td{border-bottom:none}tbody tr:nth-child(even) td{background:rgba(0,0,0,0.018)}tbody tr:hover td{background:rgba(124,58,237,0.028);transition:background 120ms ease}
/* ── Images ── */
img{max-width:100%;height:auto;display:block;border-radius:var(--radius-sm)}figure{margin-block:var(--space-5);margin-inline:0}figure img{width:100%;border-radius:var(--radius-md);border:1px solid var(--border)}figcaption{font-size:13px;color:var(--text-dim);font-style:italic;margin-top:var(--space-2);text-align:center;line-height:1.6} .alignleft{float:left;margin-right:var(--space-4);margin-bottom:var(--space-3);max-width:50%}.alignright{float:right;margin-left:var(--space-4);margin-bottom:var(--space-3);max-width:50%}.aligncenter{margin-inline:auto;text-align:center}.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);border-radius:0}@media (max-width:640px){.alignleft, .alignright{float:none;max-width:100%;margin-inline:0}}
/* ── Blockquote ── */
blockquote{border-left:3px solid var(--purple);margin-inline:0;margin-block:var(--space-5);padding:var(--space-3) var(--space-4);background:rgba(124,58,237,0.04);border-radius:0 var(--radius-sm) var(--radius-sm) 0}blockquote p{margin:0;font-style:italic;color:var(--text-mid)}
/* ── Horizontal rule ── */
hr{border:none;border-top:1px solid var(--border);margin-block:var(--space-6)}}
/* =============================================================================
LEGAL PAGES — Privacy Policy & Terms
Scoped to .legal-hero, .legal-section, .legal-layout, .legal-body, .legal-toc
============================================================================= */

/* ── Hero overrides ── */
.legal-hero{padding-bottom:clamp(24px, 3vw, 40px);border-bottom:1px solid var(--border)}.legal-hero-inner{max-width:860px}.legal-updated{display:inline-flex;align-items:center;margin-top:var(--space-4);font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-full);padding:5px 14px}
/* ── Section wrapper ── */
.legal-section{padding-block:clamp(40px, 6vw, 72px);background:var(--bg)}
/* ── Two-column layout: TOC + body ── */
.legal-layout{display:grid;grid-template-columns:1fr;gap:var(--space-7);max-width:860px;margin-inline:auto}@media (min-width:900px){.legal-layout{grid-template-columns:196px 1fr;gap:var(--space-7);align-items:start}}
/* ── TOC sidebar ── */
.legal-toc{position:sticky;top:calc(var(--header-height) + var(--space-5))}.legal-toc-label{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-dim);margin-bottom:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--border)}.legal-toc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;counter-reset:toc-counter}.legal-toc-list li{counter-increment:toc-counter}.legal-toc-list li::marker{content:none}.legal-toc-list a{display:flex;align-items:baseline;gap:8px;font-size:13px;line-height:1.5;color:var(--text-dim);text-decoration:none;padding:5px 8px;border-radius:var(--radius-sm);transition:background var(--t-fast)}.legal-toc-list a::before{content:counter(toc-counter, decimal-leading-zero);font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--border-dark);flex-shrink:0}.legal-toc-list a:hover{color:var(--purple);background:var(--purple-light)}.legal-toc-list a:hover::before{color:var(--purple)} .legal-toc-list a.is-active{color:var(--purple);background:var(--purple-light);font-weight:600}.legal-toc-list a.is-active::before{color:var(--purple)} @media (max-width:899px){.legal-toc{position:static;border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);background:var(--surface)}.legal-toc-list{flex-direction:row;flex-wrap:wrap;gap:var(--space-2)}.legal-toc-list a{font-size:12px;padding:4px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-full);gap:5px}.legal-toc-list a::before{display:none}.legal-toc-list a.is-active{border-color:var(--purple)}}
/* ── Legal content body ── */
.legal-body{min-width:0; }.legal-intro{font-size:clamp(16px, 1.8vw, 18px);color:var(--text-mid);line-height:1.85;max-width:64ch;margin-bottom:var(--space-6);padding-bottom:var(--space-6);border-bottom:1px solid var(--border)}
/* ── Individual section blocks ── */
.legal-block{padding-block:var(--space-6);border-bottom:1px solid var(--border);scroll-margin-top:calc(var(--header-height) + var(--space-5))}.legal-block--last{border-bottom:none;padding-bottom:0} .legal-body .legal-block h2{font-family:var(--font-mono);font-size:clamp(16px, 2vw, 20px);font-weight:700;letter-spacing:-0.02em;color:var(--text);margin-top:0;margin-bottom:var(--space-4);display:flex;align-items:center;gap:var(--space-3)} .legal-body .legal-block h2::before{content:'';display:block;width:6px;height:6px;border-radius:50%;background:var(--purple);flex-shrink:0}.legal-body p{font-size:clamp(15px, 1.6vw, 17px);color:var(--text-mid);line-height:1.85;max-width:64ch;margin-bottom:var(--space-3)}.legal-body p:last-child{margin-bottom:0}.legal-body ul{margin-block:var(--space-3);padding-left:var(--space-4)}.legal-body li{font-size:clamp(15px, 1.6vw, 17px);color:var(--text-mid);line-height:1.85;margin-bottom:var(--space-2)}
/* ── Callout block (used for the "no cookies" notice) ── */
.legal-callout{margin-block:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--purple-light);border-left:3px solid var(--purple);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:15px;color:var(--text);line-height:1.7}
/* =============================================================================
TABLE BORDER STYLES
CSS nesting (td inside .prose {}) has inconsistent Android browser support.
Explicit non-nested selectors with !important guarantee the reset fires.
============================================================================= */
table td, table th, .prose td, .prose th, .entry-content td, .entry-content th, .page-content td, .page-content th, .post-content td, .post-content th, .single-post td, .single-post th{border:none !important} table tbody td, .prose tbody td, .entry-content tbody td, .page-content tbody td, .post-content tbody td{border-bottom:1px solid var(--border) !important}table tbody tr:last-child td, .prose tbody tr:last-child td, .entry-content tbody tr:last-child td, .post-content tbody tr:last-child td{border-bottom:none !important}
/* =============================================================================
ARCHIVE DESCRIPTION LINKS
wp_kses_post() now renders links correctly.
Give them the same visual treatment as inline links in post content.
============================================================================= */
.archive-header-desc a{color:var(--purple);text-decoration:underline;text-decoration-color:rgba(124, 58, 237, 0.35);text-underline-offset:3px}.archive-header-desc a:hover{color:var(--purple);text-decoration-color:var(--purple)}.archive-header-desc a:visited{color:var(--purple);opacity:0.75}
/* =============================================================================
TABLE SCROLL + SCROLLBAR STYLING
Without min-width, display:block tables squeeze columns until text breaks
character by character. min-width forces horizontal scroll instead.
============================================================================= */
table > thead, table > tbody, table > tfoot{min-width:480px} table td, table th, .prose td, .prose th, .entry-content td, .entry-content th, .post-content td, .post-content th{word-break:normal !important;overflow-wrap:normal !important;white-space:normal;min-width:100px} table::-webkit-scrollbar{height:4px}table::-webkit-scrollbar-track{background:transparent}table::-webkit-scrollbar-thumb{background:var(--purple);border-radius:2px}table::-webkit-scrollbar-thumb:hover{background:var(--purple-dark, var(--purple));opacity:0.8} table{scrollbar-width:thin;scrollbar-color:var(--purple) transparent}
/* =============================================================================
TABLE GUTENBERG BLOCK + TEXT INHERITANCE
============================================================================= */
.wp-block-table{overflow:visible !important;overflow-x:visible !important;margin:0 !important} .wp-block-table table{margin-block:var(--space-5) !important} thead th strong, thead th b, thead th em, thead th a, thead td strong, thead td b, thead td em, thead td a, tfoot th strong, tfoot th b, tfoot td strong, tfoot td b{color:inherit !important;font-weight:inherit} thead *{color:inherit} pre strong, pre b, pre code strong, pre code b{color:inherit !important;font-weight:700}
/* =============================================================================
PRE / CODE COLOR INHERITANCE
Browsers apply UA black to children regardless of parent color.
============================================================================= */
pre, .prose pre, .entry-content pre, .post-content pre{color:#f7f6f3 !important}pre *, .prose pre *, .entry-content pre *, .post-content pre *{color:inherit !important} code, .prose code, .entry-content code{color:var(--purple) !important}code *, .prose code *{color:inherit !important} pre code, .prose pre code, .entry-content pre code{color:inherit !important;background:none !important}