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

/* =============================================================================
1. 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. */
/* =============================================================================
2. CSS CUSTOM PROPERTIES
============================================================================= */
:root{ --bg:#f7f6f3;--surface:#ffffff;--border:#e4e2dc;--border-dark:#d4d0c8;--border-strong:#8c8880;--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, 150, 78, 0.08);--red:#b91c1c; --gradient-brand:linear-gradient(135deg, #7c3aed 0%, #00964e 100%); --font-mono:'NairaSign', 'JetBrains Mono', 'Courier New', Courier, monospace;--font-body:'NairaSign', -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}
/* =============================================================================
3. 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%;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-x:clip;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}
/* =============================================================================
4. 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}
/* =============================================================================
5. 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:32px;font-size:clamp(32px, 8vw, 96px);letter-spacing:-0.04em;letter-spacing:clamp(-0.04em, -0.5vw, -0.02em)}h2{font-size:24px;font-size:clamp(24px, 4vw, 40px);font-weight:700;letter-spacing:-0.03em}h3{font-size:20px;font-size:clamp(20px, 2.5vw, 28px);font-weight:700;letter-spacing:-0.02em}p{color:var(--text-mid);font-size:16px;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)}
/* =============================================================================
6. LAYOUT
============================================================================= */
.container{width:100%;max-width:var(--wide-width);margin-inline:auto;padding-inline:16px;padding-inline:clamp(16px, 5vw, 80px)}.container--content{max-width:var(--content-width)}.section{padding-block:48px;padding-block:clamp(48px, 8vw, 128px)}.divider{width:100%;height:1px;background:var(--border)}
/* =============================================================================
7. 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:disabled{opacity:.6;cursor:not-allowed}.btn--primary:hover{background:var(--purple);border-color:var(--purple);color:#ffffff}.btn--primary .btn-arrow{display:inline-block;transition:transform var(--t-fast)}@media (hover:hover) and (pointer:fine){.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)}
/* =============================================================================
8. 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}
/* =============================================================================
9. 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)}@media (hover:hover) and (pointer:fine){.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}
/* =============================================================================
10. HEADER
============================================================================= */
.site-header{position:-webkit-sticky;position:sticky;top:0;z-index:var(--z-header);height:var(--header-height);overflow-anchor:none;background:rgba(247,246,243,0.97);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:16px;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)}@media (hover:hover) and (pointer:fine){.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;color:var(--purple)}.nav-mobile-link--external span{color:var(--purple)} .nav-cta{padding:10px 20px;font-size:13px}.nav-cta--mobile{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;padding:10px 16px;min-height:44px}@media (min-width:1024px){.nav-cta--mobile{display:none}}@media (max-width:400px){.nav-cta--mobile{padding-inline:12px}}
/* =============================================================================
11. 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)}
/* =============================================================================
12. MOBILE NAV OVERLAY
============================================================================= */
.nav-overlay{position:fixed;top:0;left:0;right:0;bottom:0;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:#f7f6f3;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(--purple);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 #f7f6f3;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:20px;font-size:clamp(20px, 5vw, 28px);font-weight:700;letter-spacing:-0.02em;color:#f7f6f3;text-decoration:none;padding-block:var(--space-3);border-bottom:1px solid rgba(247, 246, 243, 0.08);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(--purple);transform:translateX(var(--space-2))}}.nav-mobile-link--external{display:inline-flex;align-items:center;gap:var(--space-1)}.nav-mobile-list li:last-child .nav-mobile-link{border-bottom:0}.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}
/* =============================================================================
13. FOOTER
============================================================================= */
.site-footer{background:var(--text);color:var(--bg)} .footer-cta{padding-block:64px;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:16px;padding-inline:clamp(16px, 5vw, 80px)}.footer-cta-headline{font-family:var(--font-mono);font-size:28px;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:48px;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:16px;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.18em;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;padding-block:10px}@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)}
/* =============================================================================
14. SCROLLBAR
============================================================================= */
html{scrollbar-width:none}
::-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}
/* =============================================================================
15. SELECTION
============================================================================= */
::selection{background:var(--purple);color:#ffffff}
/* =============================================================================
16. 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}}
/* =============================================================================
17. 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;top:-4px;left:-4px;right:-4px;bottom:-4px;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}}
/* =============================================================================
18. 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.12em;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:12px 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;min-height:44px;min-width:44px}@media (hover:hover) and (pointer:fine){.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:12px 10px;min-width:44px;justify-content:center}} .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:#0f6fd6;border-color:#0f6fd6}.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:#15803d;border-color:#15803d}
/* =============================================================================
19. HERO SECTION
============================================================================= */
.hero{min-height:calc(100vh - var(--header-height));min-height:calc(100svh - 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:64px;padding-block:clamp(64px, 10vw, 128px);position:relative;overflow:visible}.hero-inner{max-width:var(--wide-width);margin-inline:auto;padding-inline:16px;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:40px;font-size:clamp(40px, 10vw, 96px);font-weight:800;line-height:1.0;letter-spacing:-0.04em;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:14px;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}}
/* =============================================================================
20. 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.12em;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}
/* =============================================================================
21. SELECTED WORK GRID
============================================================================= */
.work-section{padding-block:64px;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:11px;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:24px;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}@media (hover:hover) and (pointer:fine){.work-card:hover{border-color:transparent;box-shadow:var(--shadow-lg)}}.work-card__image-wrap{min-height:180px;aspect-ratio:16 / 9;overflow:hidden;background:var(--border)}.work-card:first-child .work-card__image-wrap{min-height:180px;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)}@media (hover:hover) and (pointer:fine){.work-card:hover .work-card__image{transform:scale(1.04)}} .work-card__overlay{position:absolute;top:0;left:0;right:0;bottom:0;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)}@media (hover:hover) and (pointer:fine){.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)}@media (hover:hover) and (pointer:fine){.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:14px}body:not(.tag) .tag{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:0.12em;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:16px;font-size:clamp(16px, 1.8vw, 20px);font-weight:700;letter-spacing:-0.02em;color:var(--text);margin-bottom:6px}@media (hover:hover) and (pointer:fine){.work-card:hover .work-card__name{color:var(--purple)}}.work-card__desc{font-size:16px;color:var(--text-dim);line-height:1.6}
/* =============================================================================
22. SERVICES SECTION
============================================================================= */
.services-section{padding-block:64px;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{padding-left: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:18px;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}@media (hover:hover) and (pointer:fine){.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:none;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:599px){.service-trigger{grid-template-columns:40px 1fr auto;gap:var(--space-3)}.service-content{padding-left:calc(40px + var(--space-3))}}
/* =============================================================================
23. STATS BAR
============================================================================= */
.stats-section{padding-block:48px;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:16px;padding-inline:clamp(16px, 5vw, 80px)}@media (max-width:767px){.stats-grid{grid-template-columns:repeat(2, 1fr)}}.stat{text-align:center;padding:24px;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:36px;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.18em;text-transform:uppercase;color:var(--text-mid);margin-top:var(--space-2);display:block}
/* =============================================================================
24. ABOUT SNIPPET
============================================================================= */
.about-section{padding-block:64px;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:120px;width:clamp(120px, 20vw, 200px);height:auto;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);height:auto;margin:0 0 var(--space-4) var(--space-5)}}
/* =============================================================================
25. BLOG PREVIEW
============================================================================= */
.blog-preview-section{padding-block:64px;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)}@media (hover:hover) and (pointer:fine){.post-card:hover{border-color:var(--border-dark);box-shadow:var(--shadow-md);transform:translateY(-4px)}}.post-card__image-wrap{min-height:180px;aspect-ratio:16 / 9;overflow:hidden;background:var(--border)}.post-card__image{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow)}@media (hover:hover) and (pointer:fine){.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.12em;text-transform:uppercase;color:var(--purple);margin-bottom:var(--space-2)}.post-card__title{font-family:var(--font-mono);font-size:15px;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}@media (hover:hover) and (pointer:fine){.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)}
/* =============================================================================
26. FINAL CTA SECTION
============================================================================= */
.final-cta-section{background:var(--text);padding-block:80px;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:16px;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:32px;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}
/* =============================================================================
27. PAGES — shared + individual page styles
============================================================================= */

/* ── Shared page hero header ── */
.page-hero{padding-block:48px;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:32px;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:16px;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:48px;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:18px;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:16px;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:24px;padding-top:clamp(24px, 3vw, 48px)}.about-skills{background:var(--surface);border-top:1px solid var(--border);padding-top:24px;padding-top:clamp(24px, 3vw, 48px)}.about-beyond{background:var(--bg);border-top:1px solid var(--border);padding-top:24px;padding-top:clamp(24px, 3vw, 48px)}.about-cta{padding-block:64px;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:24px;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)}
/* =============================================================================
28. SERVICES PAGE
============================================================================= */
.page-hero-sub{font-size:14px;font-size:clamp(14px, 3.8vw, 17px);color:var(--text-dim);max-width:56ch;line-height:1.7;margin-top:var(--space-4)} .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.12em;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:22px;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:16px;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:48px;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:15px;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:14px;font-size:clamp(14px, 1.4vw, 16px);font-weight:700;color:var(--purple);white-space:nowrap;-webkit-font-smoothing:antialiased}@media (max-width:767px){.consulting-item{flex-direction:column;align-items:flex-start;gap:var(--space-2);padding-block:var(--space-4)}.consulting-item-desc{margin-top:0}.consulting-item-price{margin-top:var(--space-1)}}
/* ── 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.12em;text-transform:uppercase;color:var(--text-dim)}.international-price{font-family:var(--font-mono);font-size:14px;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:64px;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:24px;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)}
/* =============================================================================
29. 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{min-height:180px;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:64px;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:24px;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)}
/* =============================================================================
30. 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:18px;font-size:clamp(18px, 2vw, 22px);color:var(--text-dim);font-weight:700} .package-price-range{display:none}
/* =============================================================================
31. CASE STUDY PAGE
============================================================================= */
.case-hero{padding-block:48px;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:28px;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:48px;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:20px;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:16px;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:40px;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:32px;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)}@media (hover:hover) and (pointer:fine){.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 — v1.8.16 premium card navigation (thumbnails, hover lift) */
.case-nav{background:var(--bg);border-top:1px solid var(--border);padding-block:var(--space-6) var(--space-7)}
.case-nav-eyebrow{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-nav-inner{display:flex;flex-direction:column;gap:var(--space-3)}
/* shared link styles — card feel with thumbnails */
.case-nav-link{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);min-width:0;overflow:hidden;min-height:64px}
@media (hover:hover) and (pointer:fine){.case-nav-link:hover{border-color:var(--purple);box-shadow:0 4px 20px rgba(124,58,237,0.08);transform:translateY(-2px)}}
.case-nav-link:active{transform:translateY(0)}
.case-nav-thumb{width:88px;height:56px;flex-shrink:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg);border:1px solid var(--border);min-width:88px}
.case-nav-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.case-nav-thumb-fallback{display:block;width:100%;height:100%;background:linear-gradient(135deg, rgba(124,58,237,0.25), rgba(0,150,78,0.25))}
/* prev: arrow left of text, thumb right of text? No — thumb left, text, arrow far right */
.case-nav-link--prev{flex-direction:row;justify-content:flex-start}
.case-nav-link--prev .case-nav-thumb{order:0}
.case-nav-link--prev .case-nav-link-text{order:1}
.case-nav-link--prev .case-nav-arrow{order:2;margin-left:auto}
/* next: arrow left, text, thumb right */
.case-nav-link--next{flex-direction:row;justify-content:flex-end}
.case-nav-link--next .case-nav-arrow{order:0}
.case-nav-link--next .case-nav-link-text{order:1}
.case-nav-link--next .case-nav-thumb{order:2}
.case-nav-link-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto;overflow:hidden}
.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:100%;width:100%}
.case-nav-arrow{font-size:18px;color:var(--text-dim);flex-shrink:0;min-width:18px;transition:transform var(--t-fast),color var(--t-fast)}
.case-nav-link:hover .case-nav-dir,.case-nav-link:hover .case-nav-title,.case-nav-link:hover .case-nav-arrow{color:var(--purple)}
@media (hover:hover) and (pointer:fine){.case-nav-link--prev:hover .case-nav-arrow{transform:translateX(-3px)}}
@media (hover:hover) and (pointer:fine){.case-nav-link--next:hover .case-nav-arrow{transform:translateX(3px)}}
/* center all-projects — pill style */
.case-nav-all{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--text);text-decoration:none;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border:1px solid var(--border);border-radius:var(--radius-full);background:var(--surface);transition:all var(--t-fast);margin-block:var(--space-2)}
.case-nav-all:hover{color:#fff;background:var(--text);border-color:var(--text)}
.case-nav-all-icon{font-size:14px;opacity:0.7}
/* desktop: single row, three equal slots */
@media (min-width:768px){
  .case-nav-inner{flex-direction:row;align-items:stretch;gap:var(--space-4)}
  .case-nav-link,.case-nav-all{margin:0}
  .case-nav-link{flex:1;padding:var(--space-4)}
  .case-nav-placeholder{flex:1;display:block;pointer-events:none}
  .case-nav-title{max-width:200px}
  .case-nav-all{align-self:center}
}
@media (min-width:1024px){.case-nav-title{max-width:280px}}
 .case-cta-section{padding-block:64px;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:24px;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}
/* =============================================================================
32. HIRE ME PAGE
============================================================================= */
.hire-hero{padding-block:72px;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:40px;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:15px;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);padding-block:12px}.hire-scroll-hint:hover{color:var(--purple)}.hire-process-section{padding-block:24px;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:11px;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:16px;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:64px;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:24px;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.12em;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-strong);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-input:focus-visible{outline:2px solid var(--purple);outline-offset:2px}.form-input:-webkit-autofill, .form-input:-webkit-autofill:hover, .form-input:-webkit-autofill:focus{box-shadow:0 0 0 1000px var(--surface) inset;-webkit-text-fill-color:var(--text);caret-color:var(--text);transition:background-color 9999s ease-out}.form-input:-moz-autofill{box-shadow:0 0 0 1000px var(--surface) inset;-webkit-text-fill-color:var(--text)}.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-noscript-note{font-size:15px;color:var(--text-dim);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4)}
.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:24px;padding-top:clamp(24px, 3vw, 48px);padding-bottom:24px;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:15px;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-trigger:hover .faq-icon{color:var(--purple)}.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}
/* =============================================================================
33. CONTACT PAGE
============================================================================= */
.contact-layout{display:grid;grid-template-columns:1fr;min-height:calc(100vh - var(--header-height));min-height:calc(100svh - var(--header-height))}@media (min-width:1024px){.contact-layout{grid-template-columns:1fr 1fr}}.contact-info{padding:48px;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:40px;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.18em;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.18em;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);display:inline-block;padding-block:10px}@media (hover:hover) and (pointer:fine){.contact-social-link:hover{color:#f7f6f3;transform:translateX(var(--space-2))}}.contact-form-wrap{padding:48px;padding:clamp(48px, 8vw, 96px) clamp(24px, 5vw, 80px);background:var(--bg)}
/* =============================================================================
34. PROCESS PAGE
============================================================================= */
.process-section{background:var(--bg)}.process-step{display:grid;grid-template-columns:1fr;gap:var(--space-5);padding-block:48px;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:22px;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.12em;color:var(--purple);text-transform:uppercase}.process-step-body{display:flex;flex-direction:column;gap:var(--space-4)}.process-step-desc{font-size:15px;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:64px;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:24px;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}
/* =============================================================================
35. USES PAGE
============================================================================= */
.uses-section{background:var(--bg)}.uses-group{padding-block:40px;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}
/* =============================================================================
36. 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:40px;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:15px;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)}
/* =============================================================================
37. 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:15px;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:64px;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:24px;font-size:clamp(24px, 3.5vw, 40px);font-weight:700;letter-spacing:-0.03em;color:var(--text);-webkit-font-smoothing:antialiased}
/* =============================================================================
38. 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}
/* =============================================================================
39. THANK YOU PAGE
============================================================================= */
.page-thank-you{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - var(--header-height));min-height:calc(100svh - var(--header-height));background:var(--bg);padding:var(--space-8) 24px;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:36px;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:15px;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)}
/* =============================================================================
40. SINGLE POST
============================================================================= */
.post-header{padding-block:48px;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:28px;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:48px;padding-block:clamp(48px, 6vw, 80px);background:var(--bg)} .prose{font-size:16px;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:10px 16px;border-radius:var(--radius-full);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}.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--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:16px;padding-inline:clamp(16px, 5vw, 80px)}@media (max-width:639px){.post-nav-inner{grid-template-columns:1fr;gap:var(--space-3)}.post-nav-link--next{text-align:left;align-items:flex-start}}.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.12em;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)}
/* =============================================================================
41. 404 PAGE
============================================================================= */
.page-404{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - var(--header-height));min-height:calc(100svh - var(--header-height));background:var(--bg);padding:var(--space-7) 24px;padding:var(--space-7) 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:13px;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:72px;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:15px;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.18em;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)}
/* =============================================================================
42. ARCHIVE + SEARCH CSS
Covers: category.php, tag.php, search.php
============================================================================= */

/* ── Shared archive header ── */
.archive-header-desc{font-size:15px;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:13px 15px;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:15px;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)}@media (hover:hover) and (pointer:fine){.author-bio-site:hover{opacity:0.75}}
/* ── Search form on search page ── */
.search-results-heading{font-size:28px;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:16px;color:var(--text);background:transparent;border:none;padding:14px 18px;outline:none;min-width:0}.search-form-input:focus-visible{outline:2px solid var(--purple);outline-offset:2px}.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:16px;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}
/* =============================================================================
43. 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:#15803d}.hire-form-contact-link--wa:hover{color:#166534}
/* ── 6. CONTACT PAGE — retired v1.8.70.1: this section's only rule (.contact-whatsapp-link)
   was never emitted by any template (WhatsApp CTA lives in .hire-hero-whatsapp and
   .hire-form-contact-link--wa, sections 4–5 above); purged as dead CSS in the
   conflict audit, banner kept to preserve TOC numbering. */
/* ── 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.
─────────────────────────────────────────────────────────────────────────── */
/* =============================================================================
44. 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:64px;padding-block:clamp(64px, 10vw, 112px) clamp(56px, 7vw, 88px);position:relative;overflow:visible} .services-hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;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:flex;flex-direction:column;gap:var(--space-4);max-width:720px}
.services-hero-label{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:rgba(247,246,243,0.55);margin-bottom:0;display:flex;align-items:center;gap:8px}
.services-hero-label::before{content:'//';color:rgba(247,246,243,0.3);font-size:0.9em}.services-hero-title{font-family:var(--font-mono);font-size:40px;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:15px;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;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}.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:28px;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:0px;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.
─────────────────────────────────────────────────────────────────────────── */
/* =============================================================================
45. 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.
─────────────────────────────────────────────────────────────────────────── */
.services-hero-proofs{grid-template-columns:1fr 1fr;margin-top:32px;margin-top:clamp(32px,4vw,48px)}
@media (min-width:768px){.services-hero-proofs{grid-template-columns:repeat(4,1fr)}}
@media (max-width:767px){.services-hero-proof{padding:var(--space-4)}.services-hero-proof-num{font-size:24px;font-size:clamp(24px, 7vw, 36px)}}
/* =============================================================================
46. 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.12em;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{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:auto;max-width:none;border-radius:0}@media (max-width:639px){.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)}}
/* =============================================================================
47. LEGAL PAGES — Privacy Policy & Terms
Scoped to .legal-hero, .legal-section, .legal-layout, .legal-body, .legal-toc
============================================================================= */

/* ── Hero overrides ── */
.legal-hero{padding-bottom:24px;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.12em;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:40px;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:-webkit-sticky;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.18em;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:13px 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:13px 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:16px;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:16px;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:15px;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:15px;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}
/* =============================================================================
48. 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}
/* =============================================================================
49. 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}
/* =============================================================================
50. 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}
/* =============================================================================
51. 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}
/* =============================================================================
52. 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}


/* =============================================================================
53. CROSS-BROWSER FALLBACKS (v1.7.8)
============================================================================= */
/* Flex gap fallback for Safari 14.0 / Chrome <84 — margins only where gap
   is unsupported; modern engines ignore the whole block. */
@supports not (gap: 1px) {
  .nav-list > * + *, .section-header > * + *, .footer-legal > * + *, .form-actions > * + *{margin-left:var(--space-4)}
  .hero-actions > * + *{margin-left:var(--space-3)}
  .post-meta > * + *, .post-tags > * + *{margin-left:var(--space-2)}
  .work-card__tags > * + *{margin-left:var(--space-1)}
}
/* Reduced-motion: kill smooth scrolling (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}
/* =============================================================================
54. DESIGN SYSTEM v1.8 — Signature layer (all tiers)
Brand identity preserved: light warm palette, JetBrains Mono, purple/green
gradient, code-comment language, availability dot, WCAG AA + 100 PSI floors.
============================================================================= */

/* ── v1.8 TOKENS ────────────────────────────────────────────────────────── */
:root{
--noise: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");
--grid-dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='%230d0d0d' fill-opacity='0.07'/%3E%3C/svg%3E");
--glow-purple:radial-gradient(700px 500px at 12% 18%, rgba(124,58,237,0.10) 0%, transparent 65%);
--glow-green:radial-gradient(600px 450px at 88% 82%, rgba(0,150,78,0.08) 0%, transparent 65%);
--t-spring:cubic-bezier(0.34,1.56,0.64,1);
--t-smooth:cubic-bezier(0.22,1,0.36,1);
--header-h-shrunk:56px;
}

/* ── LOGO DOT — original brand purple (King reverted the gradient pulse) ── */

/* ── HEADER v1.8 ───────────────────────────────────────────────────────── */
.site-header{transition:height 120ms ease, box-shadow var(--t-base), background var(--t-base)}
.site-header.is-scrolled{height:var(--header-h-shrunk);background:rgba(247,246,243,0.96);box-shadow:0 1px 0 var(--border), 0 8px 24px rgba(0,0,0,0.05)}
.site-header.is-scrolled .nav-cta{padding:8px 18px;font-size:12px}
.site-header.is-scrolled .header-inner{height:100%}

/* Nav index numbers — the dev language (v1.8.1: baseline-aligned + centered) */
.nav-link{display:inline-flex;align-items:center}
.nav-index{display:inline-block;font-size:9px;font-weight:700;letter-spacing:0.08em;color:var(--purple);opacity:0.55;margin-right:8px;transition:opacity var(--t-fast);line-height:1}
.nav-link.is-active .nav-index{opacity:1}
@media (hover:hover) and (pointer:fine){.nav-link:hover .nav-index{opacity:1}}
.nav-actions{display:flex;align-items:center;gap:var(--space-3)}

.nav-cta{transition:padding 120ms ease, font-size 120ms ease}

/* ⌘K palette */
.palette-trigger{display:none;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text-dim);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;cursor:pointer;transition:border-color var(--t-fast), color var(--t-fast)}
.palette-trigger:hover{color:var(--purple);border-color:var(--purple)}
.palette-trigger kbd{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);border:1px solid var(--border-dark);border-bottom-width:2px;border-radius:4px;padding:1px 5px}
@media (min-width:768px){.palette-trigger{display:inline-flex}}
.palette{position:fixed;inset:0;z-index:var(--z-tooltip);display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;background:rgba(13,13,13,0.5);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--t-base), visibility var(--t-base)}
.palette.is-open{opacity:1;visibility:visible;pointer-events:auto}
.palette-dialog{width:100%;max-width:560px;background:var(--surface);border:1px solid var(--border-dark);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;transform:translateY(-8px) scale(0.99);transition:transform var(--t-base)}
.palette.is-open .palette-dialog{transform:translateY(0) scale(1)}
.palette-input-wrap{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border)}
.palette-prompt{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--purple)}
.palette-input{flex:1;font-family:var(--font-mono);font-size:16px;color:var(--text);background:none;border:none;outline:none;min-width:0}.palette-input:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.palette-input::placeholder{color:var(--text-dim)}
.palette-hint{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);border:1px solid var(--border);border-radius:4px;padding:2px 6px}
.palette-results{list-style:none;max-height:min(420px,60vh);overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:4px;-webkit-overflow-scrolling:touch}
.palette-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;transition:background var(--t-fast)}
.palette-item:hover,.palette-item.is-active{background:var(--purple-light)}
.palette-item-label{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--text)}
.palette-item-group{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim)}
.palette-empty{padding:20px;text-align:center;font-family:var(--font-mono);font-size:13px;color:var(--text-dim)}
.palette-item[hidden]{display:none}

/* Mobile drawer premium */
.nav-mobile-list{position:relative}
.nav-mobile-link{display:flex;align-items:center;gap:16px}
.nav-mobile-index{font-size:11px;font-weight:700;color:var(--purple);opacity:0.7}
.nav-mobile-socials{display:flex;gap:var(--space-2);padding-top:var(--space-3);border-top:1px solid rgba(247,246,243,0.1)}
.nav-mobile-social{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-sm);color:#f7f6f3;transition:background var(--t-fast), color var(--t-fast)}
.nav-mobile-social:hover{color:var(--purple);background:rgba(247,246,243,0.08)}

/* ── FOOTER v1.8 ───────────────────────────────────────────────────────── */
.footer-cta{background-image:var(--noise);padding-bottom:96px;padding-bottom:clamp(96px,14vw,176px)}
.footer-cta::after{content:attr(data-watermark);position:absolute;bottom:-0.05em;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:72px;font-size:clamp(72px,14vw,190px);font-weight:800;letter-spacing:-0.05em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(247,246,243,0.07);white-space:nowrap;pointer-events:none;user-select:none}
.footer-cta-inner{z-index:1}
.footer-cta-headline em{background-size:200% auto;animation:shimmer 7s linear infinite}
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
.footer-socials{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-6)}
.footer-cta-inner{gap:var(--space-6)}
.footer-social{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-sm);border:1px solid rgba(247,246,243,0.12);color:rgba(247,246,243,0.6);transition:all var(--t-fast);background:rgba(247,246,243,0.02)}
@media (hover:hover) and (pointer:fine){.footer-social:hover{transform:translateY(-2px)}}
.footer-social:active{transform:translateY(0)}
.footer-social[data-brand="x"]:hover{color:#000;border-color:#fff;background:#fff}
.footer-social[data-brand="github"]:hover{color:#fff;border-color:#fff;background:#333}
.footer-social[data-brand="linkedin"]:hover{color:#fff;border-color:#0a66c2;background:#0a66c2}
.footer-social[data-brand="mail"]:hover{color:#fff;border-color:var(--purple);background:var(--purple)}
.footer-social[data-brand="tech"]:hover{color:#fff;border-color:var(--green);background:var(--green)}
.footer-social[data-brand="finance"]:hover{color:#fff;border-color:var(--purple);background:var(--purple)}
.footer-bottom .footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);padding-block:var(--space-4)}

/* ── HERO v1.8 — terminal frame, meta row, scroll hint, craft ───────────── */
.hero{background-image:var(--noise)}
.hero::before{content:'';position:absolute;inset:0;background-image:var(--grid-dots);background-size:28px 28px;opacity:0.55;pointer-events:none}
.hero::after{content:'';position:absolute;inset:0;background:var(--glow-purple),var(--glow-green);pointer-events:none}
.hero-inner{position:relative;z-index:1;gap:32px;gap:clamp(32px,4vw,48px)}
.hero-eyebrow{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.hero-title em{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}
.hero-cursor{display:inline-block;width:0.6ch;height:1em;background:var(--purple);margin-left:6px;vertical-align:-0.12em;animation:blink 1.1s step-end infinite}
@media (prefers-reduced-motion:reduce){.hero-cursor{animation:none}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* Terminal frame — the signature */
.hero-terminal{background:var(--text);border:1px solid rgba(247,246,243,0.1);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;max-width:520px;text-align:left}
.hero-terminal-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:rgba(247,246,243,0.04);border-bottom:1px solid rgba(247,246,243,0.08)}
.hero-terminal-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.hero-terminal-dot--purple{background:var(--purple)}
.hero-terminal-dot--green{background:var(--green)}
.hero-terminal-dot--dim{background:rgba(247,246,243,0.25)}
.hero-terminal-title{flex:1;font-family:var(--font-mono);font-size:11px;color:rgba(247,246,243,0.45);text-align:center;letter-spacing:0.04em}
.hero-terminal-body{display:flex;align-items:baseline;gap:12px;padding:16px 20px;font-family:var(--font-mono)}
.hero-terminal-prompt{font-size:14px;font-weight:700;color:var(--green);flex-shrink:0}
.hero-comment{border:none;background:none;padding:0;max-width:none;font-size:14px;color:rgba(247,246,243,0.7)}
.hero-comment-syntax{color:var(--purple);opacity:0.8}
.hero-comment-text{color:rgba(247,246,243,0.75)}

/* Meta row — Anambra, NG · UTC+1 · live clock */
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-5);font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:0.03em;color:var(--text-dim)}
.hero-meta-item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.hero-meta-item::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--purple);opacity:0.6;flex-shrink:0}
.hero-meta-item--live::before{background:var(--green);animation:pulse 2s ease-in-out infinite}

/* Scroll hint */
.hero-scroll-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:inline-flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-dim);text-decoration:none;transition:color var(--t-fast)}
.hero-scroll-hint:hover{color:var(--purple)}
.hero-scroll-line{width:1px;height:36px;background:var(--border-dark);position:relative;overflow:hidden}
.hero-scroll-line::after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:var(--purple);animation:scrollDrop 2s var(--t-smooth) infinite}
@keyframes scrollDrop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.hero-scroll-line::after{animation:none}}
@media (max-height:640px){.hero-scroll-hint{display:none}}

/* Staggered hero entrance (cascade on load) */
.hero-inner > *{opacity:0;transform:translateY(24px);animation:heroIn 700ms var(--t-smooth) forwards}
.hero-inner > *:nth-child(1){animation-delay:0ms}
.hero-inner > *:nth-child(2){animation-delay:90ms}
.hero-inner > *:nth-child(3){animation-delay:180ms}
.hero-inner > *:nth-child(4){animation-delay:270ms}
.hero-inner > *:nth-child(5){animation-delay:360ms}
@keyframes heroIn{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.hero-inner > *{opacity:1;transform:none;animation:none}}

/* ── WORK CARDS v1.8 — browser frames, index, metrics ──────────────────── */
.work-card{border-radius:var(--radius-lg)}
.work-card__frame{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--t-base)}
.work-card__frame-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--bg);border-bottom:1px solid var(--border)}
.work-card__frame-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.work-card__frame-dot--purple{background:var(--purple);opacity:0.85}
.work-card__frame-dot--green{background:var(--green);opacity:0.85}
.work-card__frame-dot--dim{background:var(--border-dark)}
.work-card__frame-url{flex:1;font-family:var(--font-mono);font-size:10px;color:var(--text-dim);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0.02em}
.work-card__image-wrap{border-radius:0}
.work-card:hover .work-card__frame{border-color:transparent}
.work-card:hover .work-card__frame-url{color:var(--purple)}
.work-card__index{display:inline-flex;align-items:center;flex-shrink:0;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.1em;color:var(--purple);background:var(--surface);border:1px solid rgba(124,58,237,0.35);border-radius:var(--radius-full);padding:3px 9px;margin-left:auto;transition:all var(--t-fast)}
@media (hover:hover) and (pointer:fine){.work-card:hover .work-card__cta span{transform:translateX(4px)}}
.work-card__metrics{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.work-card__metric{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--purple);background:var(--purple-light);border-radius:var(--radius-full);padding:6px 12px}
.work-card__metric--green{color:var(--green);background:var(--green-light)}
.work-card__cta{display:inline-flex;align-items:center;gap:8px}
.work-card__cta span{transition:transform var(--t-fast)}


/* Cursor-follow preview chip */
.work-cursor{position:fixed;z-index:var(--z-tooltip);pointer-events:none;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:0.04em;color:#fff;background:var(--purple);border-radius:var(--radius-full);padding:8px 16px;opacity:0;transform:translate(12px,12px) scale(0.9);transition:opacity 150ms ease, transform 150ms ease;box-shadow:var(--shadow-md);white-space:nowrap}
.work-cursor.is-visible{opacity:1;transform:translate(12px,12px) scale(1)}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.work-cursor{display:none}}

/* Corner ticks — blueprint motif */
.work-card::before,.work-card::after,.package-card::before,.package-card::after,.testimonial-card::before,.testimonial-card::after{content:'+';position:absolute;z-index:2;font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--border-dark);line-height:1;pointer-events:none;transition:color var(--t-fast)}
.work-card::before{top:auto;right:12px;bottom:12px}
.work-card::after{bottom:12px;left:12px}
.package-card::before{top:14px;right:14px}
.package-card::after{bottom:14px;left:14px}
.testimonial-card::before{top:14px;right:14px}
.testimonial-card::after{bottom:14px;left:14px}
.work-card:hover::before,.work-card:hover::after,.package-card:hover::before,.package-card:hover::after,.testimonial-card:hover::before,.testimonial-card:hover::after{color:var(--purple)}

/* ── SERVICES v1.8 ──────────────────────────────────────────────────────── */
.service-trigger{grid-template-columns:56px 1fr auto;gap:var(--space-5);transition:transform var(--t-base), padding-left var(--t-base)}
.service-num{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;transition:all var(--t-base)}
.service-item:hover .service-num,.service-item.is-open .service-num{background:var(--gradient-brand);border-color:transparent;color:#fff;box-shadow:0 4px 16px rgba(124,58,237,0.25)}
.service-icon{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;font-size:14px;transition:transform var(--t-base), background var(--t-base), color var(--t-base), border-color var(--t-base)}
.service-item.is-open .service-icon{background:var(--purple-light);border-color:var(--purple);transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){.service-item:hover .service-icon{background:var(--purple-light);border-color:var(--purple);transform:rotate(45deg)}}@media (min-width:1024px){.service-item .service-icon{background:var(--purple-light);border-color:var(--purple);transform:rotate(45deg)}}
.service-content{border-left:2px solid var(--border);padding-left:calc(56px + var(--space-5));padding-top:var(--space-2)}
.service-item.is-open .service-content{border-left-color:var(--purple)}
@media (max-width:1023px){.service-content{padding-left:calc(56px + var(--space-4))}}

/* ── STATS v1.8 ────────────────────────────────────────────────────────── */
.stats-section{background-image:var(--noise);background-color:#f0ede8;position:relative}
.stats-section::before{content:'';position:absolute;inset:0;background:var(--glow-purple);pointer-events:none}
.stats-grid{position:relative}
.stat{transition:transform var(--t-base)}
@media (hover:hover) and (pointer:fine){.stat:hover{transform:translateY(-4px)}}
.stat-suffix{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.stat-number{position:relative;display:inline-block}

/* ── ABOUT v1.8 ────────────────────────────────────────────────────────── */
.about-photo-frame{position:relative;width:fit-content}
.about-photo-frame::before{content:'';position:absolute;inset:10px -10px -10px 10px;background:var(--gradient-brand);border-radius:var(--radius-lg);opacity:0.35;z-index:0}
.about-photo{position:relative;z-index:1}
@media (max-width:767px){
  .about-photo-frame{float:right;width:min(130px,40vw);margin:0 0 var(--space-4) var(--space-5)}
  .about-photo-frame::before{inset:6px -6px -6px 6px}
  .about-photo{float:none;width:100%;margin:0}
}

/* ── BLOG CARDS v1.8 ───────────────────────────────────────────────────── */
.post-card__category{display:inline-flex;align-items:center;gap:6px;background:var(--purple-light);border-radius:var(--radius-full);padding:4px 12px;font-size:10px}
.post-card__readtime{display:inline-flex;align-items:center;gap:5px}
.post-card__arrow{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-top:12px;border-radius:50%;border:1px solid var(--border);color:var(--text-dim);transition:all var(--t-base);flex-shrink:0}
@media (hover:hover) and (pointer:fine){.post-card:hover .post-card__arrow{background:var(--purple);border-color:var(--purple);color:#fff;transform:translateX(3px)}}
.post-card__body .post-card__meta{display:flex;align-items:center;justify-content:space-between}

/* ── MARQUEE v1.8 — two-tone ───────────────────────────────────────────── */
.marquee-item:nth-child(4n+1){background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.marquee-section{position:relative}
.marquee-section::after{content:'';position:absolute;inset:0;background-image:var(--noise);pointer-events:none}

/* ── PAGE HERO v1.8 — craft + breadcrumb ───────────────────────────────── */
.page-hero{position:relative;background-image:var(--noise)}
.page-hero::before{content:'';position:absolute;inset:0;background-image:var(--grid-dots);background-size:28px 28px;opacity:0.4;pointer-events:none}
.page-hero::after{content:'';position:absolute;inset:0;background:var(--glow-purple);pointer-events:none}
.page-hero .container{position:relative;z-index:1}
.page-hero-crumb{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text-dim);margin-bottom:var(--space-4);display:flex;align-items:center;gap:8px}
.page-hero-crumb::before{content:'~/';color:var(--purple)}
.page-hero-crumb span{color:var(--purple)}
.page-hero-crumb a{color:var(--purple);text-decoration:none;transition:color var(--t-fast)}
.page-hero-crumb a:hover{color:var(--text)}
.page-hero-label{display:flex;align-items:center;gap:8px;margin-bottom:var(--space-4)}
.page-hero-label::before{content:'//';color:var(--text-dim);opacity:0.5;font-size:0.9em}

/* ── CASE STUDY v1.8 ───────────────────────────────────────────────────── */
.case-hero{position:relative;background-image:var(--noise)}
.case-hero::before{content:'';position:absolute;inset:0;background:var(--glow-purple);pointer-events:none}
.case-hero .container{position:relative;z-index:1}
.case-section--result{background-image:var(--noise)}
.case-results-grid{display:grid;grid-template-columns:1fr;gap:1px;background:rgba(247,246,243,0.08);border:1px solid rgba(247,246,243,0.08);border-radius:var(--radius-lg);overflow:hidden;margin-top:var(--space-5)}
@media (min-width:768px){.case-results-grid{grid-template-columns:repeat(3,1fr)}}
.case-result{background:rgba(247,246,243,0.02);padding:var(--space-5);display:flex;flex-direction:column;gap:6px}
.case-result-number{font-family:var(--font-mono);font-size:32px;font-size:clamp(32px,4vw,48px);font-weight:800;letter-spacing:-0.04em;line-height:1;color:#f7f6f3}
.case-result-number span{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.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.5)}

/* ── HIRE ME v1.8 ──────────────────────────────────────────────────────── */
.hire-hero{background-image:var(--noise)}
.hire-form-trust{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border);font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text-dim)}
.hire-form-trust span{display:inline-flex;align-items:center;gap:8px}
.hire-form-trust span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);flex-shrink:0}

/* ── CONTACT v1.8 ──────────────────────────────────────────────────────── */
.contact-info{background-image:var(--noise);position:relative}
.contact-info::before{content:'';position:absolute;inset:0;background:var(--glow-purple);pointer-events:none}
.contact-info > *{position:relative;z-index:1}

/* ── 404 v1.8 — terminal ───────────────────────────────────────────────── */
.page-404{background-image:var(--noise)}
.fourofour-comment{background:var(--text);color:rgba(247,246,243,0.75);border:none;border-left:none;border-radius:var(--radius-md);padding:14px 18px;max-width:100%;position:relative;display:flex;align-items:center;gap:24px}
.fourofour-comment::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--red);flex-shrink:0;box-shadow:12px 0 0 -2px rgba(247,246,243,0.25),24px 0 0 -2px var(--green)}
.fourofour-comment-syntax{color:var(--purple);opacity:0.8}
.fourofour-comment-text{color:rgba(247,246,243,0.75)}
.fourofour-title{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ── THANK YOU v1.8 ────────────────────────────────────────────────────── */
.page-thank-you{background-image:var(--noise)}
.thankyou-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--gradient-brand);color:#fff;font-size:30px;box-shadow:0 8px 24px rgba(124,58,237,0.3)}

/* ── SECTION TEXT REVEAL v1.8 ──────────────────────────────────────────── */
body.js-animate [data-animate].reveal-lines{opacity:0;transform:translateY(28px);clip-path:inset(0 0 100% 0);transition:opacity 600ms var(--t-smooth), transform 600ms var(--t-smooth), clip-path 700ms var(--t-smooth)}
body.js-animate [data-animate].reveal-lines.in-view{opacity:1;transform:translateY(0);clip-path:inset(0 0 0% 0)}

/* Magnetic buttons */
.btn--primary,.btn--cta,.hire-hero-cta{transition:background var(--t-base), transform 150ms ease-out, box-shadow var(--t-base), border-color var(--t-base)}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.btn--primary,.btn--cta,.hire-hero-cta{transform:none !important}}

/* ── RESPONSIVE TOUCHUPS v1.8 ──────────────────────────────────────────── */
@media (max-width:767px){
  .footer-cta::after{font-size:56px;font-size:clamp(56px,20vw,120px);bottom:-0.08em}
  .hero-meta{font-size:11px}
  
  .service-num{width:40px;height:40px}
  .service-trigger{grid-template-columns:48px 1fr auto}
  .service-content{padding-left:calc(48px + var(--space-4))}
  .palette{padding-top:10vh}
}


/* ── COOKIE CONSENT v1.8.4 — premium glass banner ─────────────────────── */
.cookie-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:var(--z-cookie);max-width:560px;margin-inline:auto;background:rgba(255,255,255,0.88);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(124,58,237,0.18);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg), 0 0 0 1px rgba(0,150,78,0.06), 0 0 40px rgba(124,58,237,0.10);padding:var(--space-5);opacity:0;visibility:hidden;transform:translateY(24px) scale(0.98);pointer-events:none;transition:opacity var(--t-base), transform var(--t-base), visibility var(--t-base)}
.cookie-consent.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto}
.cookie-consent-top{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-3)}
.cookie-consent-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--gradient-brand);color:#fff;font-size:16px;flex-shrink:0}
.cookie-consent-title{font-family:var(--font-mono);font-size:15px;font-weight:800;letter-spacing:-0.01em;color:var(--text)}
.cookie-consent-text{font-size:14px;line-height:1.7;color:var(--text-mid);margin-bottom:var(--space-4);max-width:48ch}
.cookie-consent-text a{color:var(--purple);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.cookie-consent-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cookie-consent-actions .btn{padding:12px 20px;font-size:13px}
.cookie-consent-essential{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text-dim);text-decoration:underline;text-underline-offset:3px;padding:10px;border-radius:var(--radius-sm);transition:color var(--t-fast)}
.cookie-consent-essential:hover{color:var(--purple)}
@media (max-width:480px){
  .cookie-consent{left:12px;right:12px;bottom:12px;padding:var(--space-4)}
  .cookie-consent-actions .btn{flex:1;justify-content:center}
  .cookie-consent-actions{flex-direction:column;align-items:stretch}
  .cookie-consent-essential{text-align:center}
}
@media (prefers-reduced-motion:reduce){.cookie-consent{transition:none}}


/* ── v1.8.6 — dark-hero crumb variants + flex-hero spacing compression ────
   Root cause: .contact-info / .hire-hero-inner are flex columns with big
   gaps; the crumb's own margin-bottom (space-4) stacked on the gap made
   crumb→title ~72px. Zero the margins inside flex heroes, tighten gaps,
   and give the dark heroes proper crumb colors + the // label prefix. */
.page-hero-crumb-sep{color:var(--border-dark) !important;opacity:0.7}

/* Dark-hero crumb variants (services / hire-me / contact) */
.services-hero .page-hero-crumb,
.hire-hero .page-hero-crumb,
.contact-info .page-hero-crumb{color:rgba(247,246,243,0.4)}
.services-hero .page-hero-crumb::before,
.hire-hero .page-hero-crumb::before,
.contact-info .page-hero-crumb::before{color:var(--purple)}
.services-hero .page-hero-crumb span,
.hire-hero .page-hero-crumb span,
.contact-info .page-hero-crumb span{color:rgba(247,246,243,0.65)}
.services-hero .page-hero-crumb a,
.hire-hero .page-hero-crumb a,
.contact-info .page-hero-crumb a{color:rgba(247,246,243,0.65)}
.services-hero .page-hero-crumb a:hover,
.hire-hero .page-hero-crumb a:hover,
.contact-info .page-hero-crumb a:hover{color:#f7f6f3}
.services-hero .page-hero-crumb-sep,
.hire-hero .page-hero-crumb-sep,
.contact-info .page-hero-crumb-sep{color:rgba(247,246,243,0.2) !important}

/* // prefix on the services label (was display:block, no prefix) */
.services-hero-label{display:flex;align-items:center;gap:8px}
.services-hero-label::before{content:'//';color:rgba(247,246,243,0.3);font-size:0.9em}

/* CONTACT — flex column gap space-6 (48px) + crumb/label margins = 72px+ gaps.
   Zero margins, tighten to space-5 (32px) — the hero cluster breathes once. */
.contact-info{gap:var(--space-5)}
.contact-info .page-hero-crumb,
.contact-info .page-hero-label{margin-bottom:0}
.contact-info .page-hero-label::before{color:rgba(247,246,243,0.3)}

/* HIRE-ME — flex column gap space-5 (32px) + crumb margin = 56px. */
.hire-hero-inner{gap:var(--space-4)}
.hire-hero-inner .page-hero-crumb{margin-bottom:0}

/* SERVICES — block flow (no gap doubling) but tighten crumb→label air */
.services-hero-text .page-hero-crumb{margin-bottom:var(--space-3)}


/* ── v1.8.9 — PERFECT HERO RHYTHM (King: "make sure the spacing is perfect
   and not excessive") ────────────────────────────────────────────────────
   Uniform flex gaps made every element equidistant (flat, airy). Real design
   rhythm: the eyebrow cluster (crumb → label → title) HUGS together tight,
   then air graduates below (availability → details → socials / sub → actions).
   Zero the container gap, drive spacing per-element with margins. */

/* CONTACT — dark panel */
.contact-info{gap:0}
.contact-info .page-hero-crumb{margin-bottom:var(--space-2)}     /* 8px  crumb→label  */
.contact-info .page-hero-label{margin-bottom:var(--space-3)}     /* 16px label→title  */
.contact-info .contact-title{margin-bottom:var(--space-4)}       /* 24px title→avail   */
.contact-info .availability{margin-bottom:var(--space-5)}        /* 32px avail→details */
.contact-info .contact-details{margin-bottom:var(--space-5)}     /* 32px details→social*/

/* HIRE-ME — dark hero */
.hire-hero-inner{gap:0}
.hire-hero-inner .page-hero-crumb{margin-bottom:var(--space-3)}        /* 16px crumb→avail   */
.hire-hero-inner .hire-hero-availability{margin-bottom:var(--space-3)} /* 16px avail→title   */
.hire-hero-inner .hire-hero-title{margin-bottom:var(--space-3)}        /* 16px title→sub     */
.hire-hero-inner .hire-hero-sub{margin-bottom:var(--space-5)}          /* 32px sub→actions   */
.hire-hero-inner .hire-hero-actions{margin-bottom:var(--space-5)}      /* 32px actions→proofs*/

/* SERVICES — dark hero */
.services-hero-inner{gap:0}
.services-hero-inner .page-hero-crumb{margin-bottom:var(--space-2)}   /* 8px  crumb→label  */
.services-hero-inner .services-hero-label{margin-bottom:var(--space-3)}/* 16px label→title  */
.services-hero-inner .services-hero-title{margin-bottom:var(--space-3)}/* 16px title→sub     */
.services-hero-inner .services-hero-sub{margin-bottom:var(--space-5)}  /* 32px sub→actions   */

/* 404 — graduated rhythm: comment hugs the giant 404, air grows below */
.fourofour-inner{gap:0}
.fourofour-comment{margin-bottom:var(--space-3)}   /* 16px comment→404   */
.fourofour-title{margin-bottom:var(--space-5)}     /* 32px 404→sub       */
.fourofour-sub{margin-bottom:var(--space-6)}       /* 48px sub→links     */
.fourofour-links{margin-bottom:var(--space-5)}     /* 32px links→actions */
.fourofour-actions{margin-top:0}


/* ── v1.8.10 — SIMPLE 24px RHYTHM (King: "fix it to small, look at what the
   work and about page is doing with their spacing for that hero thing") ────
   Work/about heroes use ONE uniform 24px beat: crumb → label → title. My
   v1.8.9 graduated 8/16/24/32 was over-designed. Revert the dark heroes to
   the same single 24px (space-4) rhythm — gap handles it, zero margins. */

.contact-info{gap:var(--space-4)}
.contact-info .page-hero-crumb,
.contact-info .page-hero-label,
.contact-info .contact-title,
.contact-info .availability,
.contact-info .contact-details{margin-bottom:0}

.hire-hero-inner{gap:var(--space-4)}
.hire-hero-inner .page-hero-crumb,
.hire-hero-inner .page-hero-label,
.hire-hero-inner .hire-hero-title,
.hire-hero-inner .hire-hero-availability,
.hire-hero-inner .hire-hero-sub,
.hire-hero-inner .hire-hero-actions{margin-bottom:0}

.services-hero-inner{gap:var(--space-4)}
.services-hero-inner .page-hero-crumb,
.services-hero-inner .services-hero-label,
.services-hero-inner .services-hero-title,
.services-hero-inner .services-hero-sub,
.services-hero-inner .services-hero-actions{margin-bottom:0}

/* Hire-me label — same dim + // prefix as contact/services */
.hire-hero .page-hero-label{color:rgba(247,246,243,0.55);display:flex;align-items:center;gap:8px}
.hire-hero .page-hero-label::before{content:'//';color:rgba(247,246,243,0.3);font-size:0.9em}

/* v1.8.10 continued — tighten hire-me label→title gap (King: "space between
   the hire me label and the title is far compared to others"). The hire-me
   title is 3 lines with pre-line, so the same 24px gap reads visually
   wider than the 1-line contact title. Tighten to 16px. */
/* Hire-me entire hero at 16px rhythm — the 3-line title makes 24px
   gaps look far; 16px everywhere is tight and intentional. */
.hire-hero-inner{gap:var(--space-4)} /* v1.8.16: site-wide 24px consistency with contact/services */

/* v1.8.17 — truncation bulletproofing: shrink the thumbnail on narrow screens
   so long titles always get room and ellipsis engages (never bleeds out). */
@media (max-width:480px){
  .case-nav-thumb{width:64px;height:44px;min-width:64px}
  .case-nav-link{gap:var(--space-2);padding:var(--space-3) var(--space-3)}
  .case-nav-title{font-size:14px}
}


/* ═══ TOUCH FEEDBACK — :active states for coarse pointers (responsive audit v1.8.62) ═══ */
@media (hover:none),(pointer:coarse){.nav-mobile-link:active,.post-tag:active,.fourofour-link:active,.thankyou-link:active,.contact-social-link:active,.case-nav-link:active,.footer-nav-list a:active,.legal-toc-list a:active{color:var(--purple);transform:translateX(var(--space-2))}.btn:active,.share-btn:active,.post-tag:active{opacity:0.7}}
.cookie-consent-essential{min-height:44px;padding-inline:12px}
.hire-form-contact-link{min-height:44px;display:inline-flex;align-items:center}
.palette-trigger{min-height:44px}
@media (max-width:1023px){.nav-link{padding-block:10px}}

/* ═══════ print styles (v1.9.17 — exhaustive audit polish: case studies as clean PDF proposals) ═══════ */
@media print{.site-header,.site-footer,.cookie-consent,.palette,.palette-trigger,.nav-toggle,.nav-mobile,.hero-actions,.hero-scroll-hint,.marquee-section,.post-share,.hire-form,.contact-form-wrap,.search-form-block{display:none!important}body{background:#fff;color:#000;font-size:12pt}main{padding:0}a{color:#000;text-decoration:underline}a[href^="http"]:after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}img{max-width:100%;height:auto}h1{font-size:20pt}h2{font-size:16pt}section{page-break-inside:avoid}}