/* ==========================================================================
   Marilyn Dela Cruz — portfolio styles
   --------------------------------------------------------------------------
   The blocks below are in the same order the page has always loaded them,
   because later rules intentionally override earlier ones. To change a part
   of the page, find its block in this list:

     1. Base styles: glass cards, page system, theme, header, hero, section titles, cards, buttons
     2. Design refresh: colours, navigation and panels
     3. Welcome intro (loading screen)
     4. Chat widget (Lyn's Assistant)
     5. Chat button: icon only, name slides out on hover
     6. Tailwind utility classes (pre-compiled, do not edit by hand)
     7. Hero layout
     8. "Back to home" link on sub-pages
     9. Tools: always-moving rows
    10. Tools: "View All" category tabs
    11. Cursor ring and sparkle effects
    12. Drifting background sparkles
    13. Contact form
    14. Work experience timeline
    15. Hero photo orb
    16. Background blobs (lighter on the device)
    17. Background stars
    18. Hero buttons
    19. Recommendations: card deck
    20. Skills
   ========================================================================== */


/* ==========================================================================
   1. Base styles: glass cards, page system, theme, header, hero, section titles, cards, buttons
   ========================================================================== */
    .tool-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        font-weight: 800;
        font-size: 14px;
        color: white;
        flex-shrink: 0;
    }
    .soft-shadow {
        box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08);
        backdrop-filter: blur(12px); /* Glassmorphism effect */
        -webkit-backdrop-filter: blur(12px);
    }
    .reveal {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
    }
    .reveal.active {
        opacity: 1;
        transform: translateY(0);
    }
    /* Page system: each nav item is its own "page" */
    .page-hidden { display: none !important; }
    body.mode-page .subpage {
        padding-top: 8rem !important;
        min-height: 75vh;
        border-top: 0 !important;
    }
    .delay-100 { transition-delay: 100ms; }
    .delay-200 { transition-delay: 200ms; }
    .delay-300 { transition-delay: 300ms; }

    /* ===== ELEGANT THEME ===== */
    :root { --accent:#b85c38; --accent2:#d98d6c; --blush:#fcd4c7; }
    html { scroll-behavior: smooth; }
    body { font-family: 'Jost', sans-serif; letter-spacing: .005em; }
    .font-poppins { font-size-adjust: 0.5; letter-spacing: -.005em; }
    ::selection { background: var(--accent); color: #fff; }

    /* background decoration (same colours, a little more charm) */
    #bgDeco::before { content:""; position:absolute; inset:0;
        background-image: radial-gradient(rgba(184,92,56,.14) 1px, transparent 1.5px); background-size: 26px 26px;
        -webkit-mask-image: radial-gradient(ellipse at 50% 45%, transparent 35%, #000 100%); mask-image: radial-gradient(ellipse at 50% 45%, transparent 35%, #000 100%); }
    #bgDeco::after { content:""; position:absolute; right:-220px; bottom:-220px; width:620px; height:620px; border-radius:50%;
        border:1px dashed rgba(184,92,56,.22); animation: spin 90s linear infinite; }
    .bg-star { position:absolute; color: var(--accent2); opacity:0; animation: twinkle 6s ease-in-out infinite; }
    @keyframes twinkle { 0%,100%{opacity:0; transform:scale(.4) rotate(0)} 50%{opacity:.55; transform:scale(1) rotate(45deg)} }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes pulseDot { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.45; transform:scale(.8)} }
            @keyframes drawLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* scroll progress */
    #scrollBar { position:fixed; top:0; left:0; height:3px; width:0; z-index:60;
        background: linear-gradient(90deg, var(--blush), var(--accent)); border-radius:0 3px 3px 0; }

    /* header + nav */
    header { box-shadow: 0 8px 30px -18px rgba(184,92,56,.35); }
    header > div > a:first-child { font-style: italic; }
    header nav:not(#mobileMenu) a { position: relative; }
    header nav:not(#mobileMenu) a::after { content:""; position:absolute; left:0; bottom:-7px; height:2px; width:100%;
        background: var(--accent); border-radius:2px; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
    /* Download Resume button in header nav */
    header nav:not(#mobileMenu) a:hover::after, header nav:not(#mobileMenu) a.text-accent::after { transform: scaleX(1); }

    /* hero: one orchestrated entrance */
    #home h1 { font-style: italic; font-weight: 700; }
    #home h1 span { display:inline-block; animation: pulseDot 3s ease-in-out infinite; }
    #home h2 { font-style: italic; font-weight: 600; }
    #home .animate-fade-in-up > * { opacity:0; animation: fadeInUp .9s cubic-bezier(.2,.7,.2,1) forwards; }
    #home .animate-fade-in-up > :nth-child(1) { animation-delay:.15s }
    #home .animate-fade-in-up > :nth-child(2) { animation-delay:.35s }
    #home .animate-fade-in-up > :nth-child(3) { animation-delay:.55s }
    #home .animate-fade-in-up > :nth-child(4) { animation-delay:.75s }
    #home .animate-fade-in-up > :nth-child(5) { animation-delay:.95s }
    #home .animate-fade-in-up > :nth-child(6) { animation-delay:1.15s }

    /* hero photo ornaments */
    .photo-wrap { position:relative; }
    .spark { position:absolute; color: var(--accent); pointer-events:none; animation: twinkle 4s ease-in-out infinite; }

    /* section titles: small flourish */
    section:not(#home) h2.font-poppins { font-weight: 700; letter-spacing: -.01em; }
    section:not(#home) h2.font-poppins::after { content:""; display:block; width:120px; height:14px; margin-top:.7rem;
        background: radial-gradient(circle, var(--accent) 0 3px, transparent 4px) 0 50%/14px 14px no-repeat,
                    linear-gradient(90deg, var(--accent), rgba(184,92,56,0)) 22px 50%/98px 1px no-repeat;
        transform-origin:left; animation: drawLine 1s ease .2s both; }
    #contact h2.font-poppins::after { margin-inline:auto; width:150px;
        background: linear-gradient(90deg, rgba(184,92,56,0), var(--accent)) 0 50%/58px 1px no-repeat,
                    radial-gradient(circle, var(--accent) 0 3px, transparent 4px) 50% 50%/14px 14px no-repeat,
                    linear-gradient(90deg, var(--accent), rgba(184,92,56,0)) 100% 50%/58px 1px no-repeat; transform-origin:center; }

    /* cards: cursor-following glow + accent line drawing across the top on hover */
    :root { --spot: rgba(184,92,56,.13); }
    html[data-theme="dark"] { --spot: rgba(224,160,127,.16); }
    .soft-shadow { position:relative; overflow:hidden; transition: box-shadow .45s ease, border-color .35s ease; }
    .soft-shadow::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition: opacity .4s ease;
        background: radial-gradient(280px circle at var(--mx,50%) var(--my,0%), var(--spot), transparent 72%); }
    .soft-shadow::after { content:""; position:absolute; left:0; right:0; top:0; height:2px; pointer-events:none;
        transform: scaleX(0); transform-origin:left; transition: transform .55s cubic-bezier(.2,.7,.2,1);
        background: linear-gradient(90deg, var(--accent), var(--accent2), rgba(217,141,108,0)); }
    @media (hover:hover) {
        html .soft-shadow:hover::before { opacity:1; }
        html .soft-shadow:hover::after { transform: scaleX(1); }
        html .soft-shadow:hover { box-shadow: 0 22px 44px -18px rgba(184,92,56,.4), 0 0 0 1px rgba(184,92,56,.22); }
    }
    .soft-shadow.rounded-2xl { border-radius: 1.5rem; }
    .soft-shadow.border-l-4 { border-left-color: var(--accent); }

    /* contact buttons: even 2x2 grid, equal width */

    /* facebook button */
    /* extra specificity so the phone/tablet ".soft-shadow" white background can't override it */

    /* buttons */
    a.bg-accent, button.bg-accent { background-image: linear-gradient(135deg, #cf7b55, #b85c38); }

    /* scroll reveal: gentle de-blur */
    .reveal { filter: blur(6px); }
    .reveal.active { filter: blur(0); }


    /* ===== SCROLL ANIMATIONS ===== */
    .reveal.from-left:not(.active)  { transform: translateX(-70px); }
    .reveal.from-right:not(.active) { transform: translateX(70px); }
    .reveal.from-zoom:not(.active)  { transform: translateY(40px) scale(.9); }
    header.scrolled { padding-top: .65rem; padding-bottom: .65rem; background: rgba(244,241,232,.92);
        box-shadow: 0 12px 34px -16px rgba(184,92,56,.5); }
    header.scrolled > div > a:first-child { transform: scale(.86); transform-origin: left center; }
    /* back-to-top: a quiet glass circle that only warms up to the accent colour on hover */
    #toTop { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 45; width: 38px; height: 38px; border-radius: 50%;
        border: 1px solid rgba(30,41,59,.14); cursor: pointer; color: #64748b; font-size: .8rem; display:flex; align-items:center; justify-content:center;
        background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 16px -10px rgba(30,41,59,.35);
        opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .35s ease, transform .35s ease, color .25s, border-color .25s, background .25s; }
    #toTop.show { opacity: .7; transform: none; pointer-events: auto; }
    #toTop.show:hover { opacity: 1; transform: translateY(-2px); color: var(--accent); border-color: rgba(184,92,56,.5); background: rgba(255,255,255,.92); }
    :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
    /* Devices with "reduce motion" on: keep the gentle fade-ins, drop only the looping / large movement */
    @media (prefers-reduced-motion: reduce) {
        .animate-blob, .spark, .bg-star, #bgDeco::after, #home h1 span, #toTop::before { animation: none !important; }
        .bg-star { opacity: .35; }
        .reveal { filter: none; }
        .reveal.from-left:not(.active), .reveal.from-right:not(.active), .reveal.from-zoom:not(.active) { transform: translateY(24px); }
    }

    /* ===== MOBILE FIT + PERFORMANCE FIXES ===== */
    html, body { max-width: 100%; overflow-x: hidden; }
    @supports (overflow: clip) { html, body { overflow-x: clip; } }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    /* the page's own ground colour, so the strip that shows while the phone's address bar slides away is never the browser's black */
    html { background:#f4f1e8; color-scheme:light; }
    html[data-theme="dark"] { background:#0f1520; }
    /* fixed backgrounds sized to the tallest viewport (address bar hidden), so they never come up short while it slides away */
    #bgDeco, .fx-drift { bottom:auto !important; height:100vh; height:100lvh; }
    img, svg { max-width: 100%; }
    h1, h2, h3, p { overflow-wrap: anywhere; }
    #home { min-height: 100vh; min-height: 100svh; overflow-x: hidden; }
    @supports (overflow: clip) { #home { overflow-x: clip; } }
    @media (max-width: 639px) {
        /* everything around the photo stays INSIDE the screen (nothing sticks out to the sides) */
        #contact button, #contact a { max-width: 100%; word-break: break-all; }
    }

    /* Phones & tablets: strip the heavy effects that cause lag */
    @media (max-width: 1023px) {
        /* no live blur (very expensive on mobile GPUs) */
        header, .soft-shadow, #contactModal {
            -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
        }
        header { background: rgba(244,241,232,.96) !important; }
        .soft-shadow { background-color: rgba(255,255,255,.82); }
        #contactModal { background: rgba(0,0,0,.55); }
        /* animated blurred blobs -> one static gradient background */
        #bgDeco > div.animate-blob { display: none !important; }
        #bgDeco {
            background-image:
                radial-gradient(circle at 0% 0%, rgba(252,212,199,.9), transparent 55%),
                radial-gradient(circle at 100% 28%, rgba(232,226,210,1), transparent 50%),
                radial-gradient(circle at 40% 100%, rgba(245,208,196,.85), transparent 55%);
        }
        #bgDeco::after, .bg-star { display: none !important; }
        /* scroll reveal: no blur filter, only cheap opacity/transform */
        .reveal { filter: none !important; transition-property: opacity, transform !important; }
        .reveal.from-left:not(.active), .reveal.from-right:not(.active), .reveal.from-zoom:not(.active) { transform: translateY(24px); }
        #scrollBar { transition: none; }
        /* stop endless animations */
        .spark, #home h1 span, #toTop::before { animation: none !important; }
        .spark { opacity: .5; }
        .soft-shadow::before { display: none; }
    }


/* ==========================================================================
   2. Design refresh: colours, navigation and panels
   ========================================================================== */
    :root { --ink:#1e293b; --on-ink:#f4f1e8; --panel:rgba(255,255,255,.72); --line:rgba(229,231,235,.95); --nav-bg:rgba(255,255,255,.82); --nav-bg2:rgba(255,255,255,.95); }
    html[data-theme="dark"] { color-scheme:dark; --ink:#f4f1e8; --on-ink:#1e293b; --panel:rgba(30,41,59,.72); --line:rgba(148,163,184,.25); --nav-bg:rgba(20,28,43,.82); --nav-bg2:rgba(20,28,43,.95); }

    /* ===== navbar: rounded bar with logo badge, uppercase links, theme toggle + Contact ===== */
    header.site-nav { top:.9rem; left:50%; translate:-50% 0; width:min(1180px, calc(100% - 1.5rem)); padding:.65rem 1rem;
        border:1px solid var(--line); border-radius:1rem; background:var(--nav-bg); }
    header.site-nav.scrolled { padding:.5rem 1rem; background:var(--nav-bg2); }
    header.site-nav .brand { display:flex; align-items:center; gap:.75rem; font-style:normal; }
    .brand-badge { width:2.4rem; height:2.4rem; display:grid; place-items:center; border-radius:.7rem; background:var(--ink); color:var(--on-ink);
        font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:700; font-size:1.7rem; line-height:1; padding:0; text-align:center; }
    .brand-name { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.85rem; font-weight:700; font-style:italic; letter-spacing:-.01em; line-height:1; text-transform:none; color:var(--ink); }
    .brand-name em { font-style:normal; color:var(--accent); }
    .site-links { display:none; align-items:center; gap:1.9rem; }
    header .site-links { font-family:'Jost',system-ui,sans-serif; font-size:.82rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1; gap:1.7rem; }
    .nav-right { display:flex; align-items:center; gap:.6rem; }
    .theme-btn { width:2.4rem; height:2.4rem; display:grid; place-items:center; border-radius:.65rem; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; transition:all .3s; }
    .theme-btn:hover { border-color:var(--accent); color:var(--accent); }
    .theme-btn .ico-moon { display:none; } html[data-theme="dark"] .theme-btn .ico-sun { display:none; } html[data-theme="dark"] .theme-btn .ico-moon { display:block; }
    .hire-btn { display:none; padding:.6rem 1.15rem; border:1.5px solid var(--ink); border-radius:.7rem; font-size:.8rem; font-weight:700; color:var(--ink); transition:all .3s; }
    #mobileMenu a { font-family:'Jost',system-ui,sans-serif; font-size:1rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
    .c-why { display:block; margin-top:.5rem; font-size:.75rem; opacity:.75; word-break:break-word; }
    .hire-btn:hover { background:var(--ink); color:var(--on-ink); }
    @media (min-width:1100px) { .site-links { display:flex; } .hire-btn { display:block; } .site-burger { display:none !important; } #mobileMenu { display:none !important; } }
    @media (max-width:1023px) { header.site-nav { background:var(--nav-bg2) !important; } }

    /* hero buttons */
    .btn-primary, .btn-secondary { display:inline-flex; align-items:center; gap:.75rem; padding:1rem 1.7rem; border-radius:.75rem; font-weight:600; font-size:.95rem; transition:transform .3s, box-shadow .3s; }
    .btn-primary { background:var(--ink); color:var(--on-ink); box-shadow:0 14px 26px -14px rgba(30,41,59,.6); }
    .btn-secondary { background:var(--panel); border:1px solid var(--line); color:var(--ink); }
    .btn-primary:hover, .btn-secondary:hover { transform:translateY(-2px); }
    .btn-secondary:hover { border-color:var(--accent); }

    /* ===== DARK MODE: same terracotta accent + fonts, navy surfaces, cream text ===== */
    html[data-theme="dark"] .bg-lightbg { background-color:#0f1520; }
    html[data-theme="dark"] .bg-lightbg\/70 { background-color:rgba(15,21,32,.7); }
    html[data-theme="dark"] .bg-lightcard { background-color:rgba(30,41,59,.7); }
    html[data-theme="dark"] .bg-\[\#fbf8f1\] { background-color:#172033; }
    html[data-theme="dark"] .text-textmain { color:#f4f1e8; }
    html[data-theme="dark"] .text-textmuted { color:#b4bdcc; }
    html[data-theme="dark"] .text-accent, html[data-theme="dark"] .hover\:text-accent:hover { color:#e0a07f; }
    html[data-theme="dark"] .hover\:text-textmain:hover { color:#fff; }
    html[data-theme="dark"] .border-cardborder { border-color:rgba(148,163,184,.2); }
    html[data-theme="dark"] .border-cardborder\/60 { border-color:rgba(148,163,184,.16); }
    html[data-theme="dark"] #bgDeco > div { mix-blend-mode:normal; opacity:.3; }
    html[data-theme="dark"] #bgDeco > div:nth-child(1) { background-color:#b85c38; }
    html[data-theme="dark"] #bgDeco > div:nth-child(2) { background-color:#475569; }
    html[data-theme="dark"] #bgDeco > div:nth-child(3) { background-color:#8a4328; }
    html[data-theme="dark"] #toTop { background: rgba(30,41,59,.6); border-color: rgba(148,163,184,.25); color: #cbd5e1; box-shadow: 0 6px 16px -10px rgba(0,0,0,.6); }
    html[data-theme="dark"] #toTop.show:hover { background: rgba(30,41,59,.9); color: #e8a183; border-color: rgba(217,141,108,.55); }
    @media (max-width:1023px) {
        html[data-theme="dark"] #bgDeco { background-image:radial-gradient(circle at 0% 0%, rgba(184,92,56,.28), transparent 55%), radial-gradient(circle at 100% 28%, rgba(71,85,105,.3), transparent 50%), radial-gradient(circle at 40% 100%, rgba(138,67,40,.25), transparent 55%); }
        html[data-theme="dark"] .soft-shadow { background-color:rgba(30,41,59,.82); }
        html[data-theme="dark"] #contactModal { background:rgba(0,0,0,.7); }
    }
    /* connect icon buttons */
        /* ===== contact: form + connect card, details card ===== */
    :root { --muted:#475569; --field:rgba(255,255,255,.65); }
    html[data-theme="dark"] { --muted:#b4bdcc; --field:rgba(15,21,32,.55); }
    .contact-wrap { max-width:68rem; margin:0 auto; display:grid; gap:1.5rem; grid-template-columns:minmax(0,1fr); }
    @media (min-width:900px) { .contact-wrap { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:start; } }
    .c-card { background:var(--panel); border:1px solid var(--line); border-radius:1.5rem; padding:2rem; box-shadow:0 24px 50px -32px rgba(184,92,56,.5); }
    @media (max-width:639px) { .c-card { padding:1.4rem; } .c-title { font-size:2rem !important; } }
    .c-title { font-family:'Cormorant Garamond',serif; font-weight:700; font-size:2.5rem; line-height:1.1; color:var(--ink); }
    .c-sub { margin-top:.6rem; color:var(--muted); font-size:.98rem; line-height:1.6; }
    .c-form { margin-top:1.5rem; display:grid; gap:.9rem; }
    .c-field { position:relative; display:block; }
    .c-field i { position:absolute; left:1rem; top:1.1rem; color:var(--muted); font-size:.95rem; pointer-events:none; }
    .c-field input, .c-field textarea { width:100%; padding:.95rem 1rem .95rem 2.8rem; border-radius:.9rem; border:1px solid var(--line); background:var(--field);
        color:var(--ink); font:inherit; font-size:.98rem; transition:border-color .25s, box-shadow .25s; }
    .c-field textarea { resize:vertical; min-height:9rem; }
    .c-field input::placeholder, .c-field textarea::placeholder { color:var(--muted); opacity:.85; }
    .c-field input:focus, .c-field textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(184,92,56,.22); }
    .c-field.invalid input, .c-field.invalid textarea { border-color:#dc2626; }
    .c-send { justify-content:center; width:100%; cursor:pointer; border:0; }
    .c-honey { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
    .c-send:disabled { opacity:.65; cursor:wait; }
    .c-alt { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem; }
    .c-alt a { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .95rem; border-radius:.7rem; border:1px solid var(--line); background:var(--field); color:var(--ink); font-weight:600; font-size:.88rem; transition:all .3s; }
    .c-alt a:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
    #contact .c-alt a { word-break:normal; }
    .c-status { min-height:1.3rem; font-size:.9rem; color:var(--accent); }
    .c-label { margin-top:.6rem; padding-top:1.4rem; border-top:1px solid var(--line); font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
    .c-socials { margin-top:.9rem; display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); }
    .c-list { margin-top:1.5rem; display:grid; gap:.75rem; }
    .social-card, .c-row { display:flex; align-items:center; gap:.9rem; padding:.9rem 1rem; border-radius:.9rem; border:1px solid var(--line); background:var(--field); color:var(--ink); transition:all .3s; }
    .c-row { padding:1.1rem 1rem; }
    .social-card:hover, a.c-row:hover { border-color:var(--accent); transform:translateY(-2px); }
    .social-card > svg, .social-card > i, .c-row > i { width:1.3rem; flex:none; text-align:center; font-size:1.1rem; }
    .c-row > i { color:var(--accent); }
    .social-card span, .c-row span { display:flex; flex-direction:column; min-width:0; flex:1; }
    .social-card b, .c-row b { font-weight:600; font-size:.98rem; overflow-wrap:anywhere; }
    .social-card small, .c-row small { color:var(--muted); font-size:.82rem; }
    .social-card em { font-style:normal; color:var(--muted); }
    #contact .social-card, #contact .c-row, #contact .c-send { word-break:normal; }


/* ==========================================================================
   3. Welcome intro (loading screen)
   ========================================================================== */
/* ===== WELCOME INTRO ===== */
#intro{--i-bg:#f4f1e8;--i-ink:#1e293b;--i-muted:#475569;--i-accent:#b85c38;--i-glow:rgba(252,212,199,.9);--i-line:rgba(71,85,105,.22);
  position:fixed;inset:0;z-index:9999;overflow:hidden;color:var(--i-ink);touch-action:none;overscroll-behavior:none;
  animation:introFailsafe .01s linear 17s forwards}
html[data-theme="dark"] #intro{--i-bg:#0f1520;--i-ink:#f4f1e8;--i-muted:#b4bdcc;--i-accent:#e0a07f;--i-glow:rgba(184,92,56,.30);--i-line:rgba(180,189,204,.26)}
@keyframes introFailsafe{to{visibility:hidden;pointer-events:none}}

/* page is held back (and scroll locked) until the curtain opens */
html.intro-on,html.intro-on body{overflow:hidden !important}
html.intro-on #home .animate-fade-in-up > *{animation:none !important;opacity:0}
html.intro-on .reveal,html.intro-on .reveal.active{opacity:0 !important;transform:translateY(24px) !important;transition:none !important}

/* curtain: two halves that split open */
#intro .intro-panel{position:absolute;left:0;right:0;height:50.4%;background:var(--i-bg);will-change:transform;
  transition:transform .95s cubic-bezier(.76,0,.24,1) .3s}
#intro .intro-top{top:0}
#intro .intro-bot{bottom:0}
#intro .intro-seam{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;transform:scaleX(0);opacity:0;
  background:linear-gradient(90deg,transparent,var(--i-accent) 30%,var(--i-accent) 70%,transparent)}
@keyframes introSeam{0%{transform:scaleX(0);opacity:1}35%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
#intro.p-exit .intro-top{transform:translateY(-101%)}
#intro.p-exit .intro-bot{transform:translateY(101%)}
#intro.p-exit .intro-seam{animation:introSeam 1s ease forwards}
#intro.p-exit .intro-content,#intro.p-exit .intro-foot,#intro.p-exit .intro-skip{opacity:0;pointer-events:none}

/* centre stage */
#intro .intro-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 1.5rem 3.5rem;transition:opacity .35s ease}
#intro .intro-glow{--g:min(130vw,640px);position:absolute;left:50%;top:46%;width:var(--g);height:var(--g);margin:calc(var(--g) / -2) 0 0 calc(var(--g) / -2);
  border-radius:50%;background:radial-gradient(circle,var(--i-glow) 0%,transparent 62%);opacity:0;transition:opacity 1.4s ease}
#intro.is-live .intro-glow{opacity:1;animation:introBreathe 5s ease-in-out infinite}
@keyframes introBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
#intro .intro-sparks{position:absolute;inset:0;opacity:0;transition:opacity .9s ease .3s;pointer-events:none}
#intro.is-live .intro-sparks{opacity:1}
#intro .sp{position:absolute;color:var(--i-accent);font-style:normal;line-height:1;opacity:0;animation:introTwinkle 3.6s ease-in-out infinite}
#intro .sp:nth-child(1){left:14%;top:24%;font-size:1.1rem}
#intro .sp:nth-child(2){left:83%;top:30%;font-size:1.5rem;animation-delay:.9s}
#intro .sp:nth-child(3){left:21%;top:70%;font-size:1.4rem;animation-delay:1.7s}
#intro .sp:nth-child(4){left:78%;top:64%;font-size:.95rem;animation-delay:2.4s}
@keyframes introTwinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:.6;transform:scale(1) rotate(45deg)}}

/* monogram + drawing ring (same badge as the navbar) */
#intro .intro-mark{position:relative;width:5.75rem;height:5.75rem;display:grid;place-items:center;opacity:0;transform:scale(.7);
  transition:opacity .6s ease,transform .85s cubic-bezier(.2,.9,.25,1.15)}
#intro.is-live .intro-mark{opacity:1;transform:none}
#intro .intro-mark span{width:3.5rem;height:3.5rem;border-radius:1rem;display:grid;place-items:center;background:var(--i-ink);color:var(--i-bg);
  font:italic 700 2.6rem/1 'Cormorant Garamond',Georgia,serif;padding-bottom:.12rem}
#intro .intro-mark svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
#intro .intro-mark circle{fill:none;stroke:var(--i-accent);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset 1.7s cubic-bezier(.4,0,.2,1) .15s}
#intro.is-live .intro-mark circle{stroke-dashoffset:0}

#intro .intro-stage{position:relative;width:100%;max-width:30rem;height:11rem;margin-top:1.1rem}
#intro .intro-greet,#intro .intro-welcome{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
#intro .intro-greet{transition:opacity .5s ease}
#intro.p-welcome .intro-greet{opacity:0}
#intro .g{position:absolute;white-space:nowrap;font-family:'Great Vibes',cursive;font-size:clamp(3rem,15vw,4.7rem);line-height:1.1;color:var(--i-accent);
  opacity:0;transform:translateY(16px);transition:opacity .42s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
#intro .g.show{opacity:1;transform:none}
#intro .g.out{opacity:0;transform:translateY(-16px)}

#intro .iw-script{font-family:'Great Vibes',cursive;font-size:clamp(1.9rem,8vw,2.7rem);line-height:1;color:var(--i-accent);
  opacity:0;transform:translateY(12px);transition:opacity .6s ease .1s,transform .7s cubic-bezier(.2,.7,.2,1) .1s}
#intro .iw-title{display:block;overflow:hidden;padding:.08em .22em .16em;white-space:nowrap;
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:700;font-size:clamp(3rem,14vw,5.4rem);line-height:1;color:var(--i-ink)}
#intro .iw-title>span{display:inline-block;transform:translateY(115%);transition:transform .95s cubic-bezier(.2,.8,.2,1) .25s}
#intro .iw-title em{font-style:normal;color:var(--i-accent)}
#intro .iw-rule{width:9rem;height:14px;margin:.45rem 0 .85rem;opacity:0;transform:scaleX(0);
  background:linear-gradient(90deg,transparent,var(--i-accent)) 0 50%/58px 1px no-repeat,
         radial-gradient(circle,var(--i-accent) 0 3px,transparent 4px) 50% 50%/14px 14px no-repeat,
         linear-gradient(90deg,var(--i-accent),transparent) 100% 50%/58px 1px no-repeat;
  transition:transform .8s ease .8s,opacity .3s ease .8s}
#intro .iw-sub{padding-left:.3em;font:600 .68rem/1 'Jost',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--i-muted);
  opacity:0;transform:translateY(8px);transition:opacity .7s ease 1s,transform .7s ease 1s}
#intro.p-welcome .iw-script,#intro.p-welcome .iw-sub{opacity:1;transform:none}
#intro.p-welcome .iw-title>span{transform:none}
#intro.p-welcome .iw-rule{opacity:1;transform:none}

/* progress line */
#intro .intro-foot{position:absolute;left:1.5rem;right:1.5rem;max-width:34rem;margin:0 auto;bottom:calc(1.7rem + env(safe-area-inset-bottom,0px));transition:opacity .35s ease}
#intro .if-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.75rem;
  font:600 .66rem/1 'Jost',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--i-muted)}
#intro .if-pct{font-variant-numeric:tabular-nums;letter-spacing:.12em;color:var(--i-ink)}
#intro .if-track{position:relative;height:2px;background:var(--i-line);overflow:hidden;border-radius:2px}
#intro .if-track i{position:absolute;inset:0;background:linear-gradient(90deg,var(--i-accent),#d98d6c);transform:scaleX(0);transform-origin:left center}

#intro .intro-skip{position:absolute;top:calc(1rem + env(safe-area-inset-top,0px));right:1.1rem;padding:.55rem 1rem;cursor:pointer;
  border:1px solid var(--i-line);border-radius:9999px;background:transparent;color:var(--i-muted);
  font:600 .64rem/1 'Jost',sans-serif;letter-spacing:.24em;text-transform:uppercase;transition:opacity .35s ease,color .25s,border-color .25s}
#intro .intro-skip:hover{color:var(--i-accent);border-color:var(--i-accent)}

/* reduced-motion users: same intro, but calm - fades only, no sliding / drawing / twinkling, no language cycling */
html.intro-reduced #intro .intro-mark{transform:none;transition:opacity .6s ease}
html.intro-reduced #intro .intro-mark circle{stroke-dashoffset:0;transition:none}
html.intro-reduced #intro .sp,html.intro-reduced #intro .intro-sparks{display:none}
html.intro-reduced #intro.is-live .intro-glow{animation:none}
html.intro-reduced #intro .iw-script,html.intro-reduced #intro .iw-sub{transform:none}
html.intro-reduced #intro .iw-title>span{transform:none;opacity:0;transition:opacity .9s ease .2s}
html.intro-reduced #intro.p-welcome .iw-title>span{opacity:1}
html.intro-reduced #intro .iw-rule{transform:none}
html.intro-reduced #intro .intro-panel{transition:opacity .7s ease .15s}
html.intro-reduced #intro.p-exit .intro-top,html.intro-reduced #intro.p-exit .intro-bot{transform:none;opacity:0}
html.intro-reduced #intro.p-exit .intro-seam{animation:none}
html.intro-reduced.intro-on .reveal,html.intro-reduced.intro-on .reveal.active{transform:none !important}


/* ==========================================================================
   4. Chat widget (Lyn's Assistant)
   ========================================================================== */
/* ===== CHAT WIDGET: clean white card, grey message area, black user bubbles, dark floating button ===== */
:root { --c-panel:#ffffff; --c-area:#f5f5f5; --c-line:#e5e7eb; --c-text:#111111; --c-sub:#6b7280; --c-bot:#ffffff; --c-me:#000000; --c-me-t:#ffffff; --c-fab:#2d3139; --c-fab-t:#ffffff; --c-ring:#000000; }
html[data-theme="dark"] { --c-panel:#172033; --c-area:#0f1520; --c-line:rgba(148,163,184,.22); --c-text:#f4f1e8; --c-sub:#b4bdcc; --c-bot:#1e293b; --c-me:#f4f1e8; --c-me-t:#111111; --c-fab:#f4f1e8; --c-fab-t:#1e293b; --c-ring:#f4f1e8; }

#toTop { bottom: calc(5.9rem + env(safe-area-inset-bottom, 0px)); }

#chatFab { position:fixed; right:1.25rem; bottom:calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index:44; display:inline-flex; align-items:center; gap:.7rem;
padding:.95rem 1.4rem; border:0; border-radius:.9rem; cursor:pointer; background:var(--c-fab); color:var(--c-fab-t); font:inherit; font-weight:600; font-size:1rem;
box-shadow:0 14px 30px -12px rgba(0,0,0,.45); transition:transform .25s ease, box-shadow .25s; }
#chatFab:hover { transform:translateY(-2px); box-shadow:0 18px 34px -12px rgba(0,0,0,.5); }
#chatFab i { font-size:1.35rem; }
#chatFab.has-new::after { content:""; position:absolute; top:-5px; right:-5px; width:.8rem; height:.8rem; border-radius:50%; background:#22c55e; border:2px solid var(--c-panel); animation:chatPulse 2.2s ease-in-out infinite; }
@keyframes chatPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.25); } }

#chatNudge { position:fixed; right:1.25rem; bottom:calc(5.3rem + env(safe-area-inset-bottom, 0px)); z-index:44; max-width:15rem; padding:.75rem 1rem; border-radius:1rem; border-bottom-right-radius:.3rem;
background:var(--c-panel); color:var(--c-text); font-size:.9rem; line-height:1.45; cursor:pointer; box-shadow:0 14px 34px -14px rgba(0,0,0,.35);
opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .35s, transform .35s, visibility 0s linear .35s; }
#chatNudge.show { opacity:1; visibility:visible; transform:none; transition-delay:0s; }

#chatPanel { position:fixed; right:1.25rem; bottom:calc(5.3rem + env(safe-area-inset-bottom, 0px)); z-index:47; width:min(23rem, calc(100vw - 2rem));
height:min(34rem, calc(100vh - 7.5rem)); height:min(34rem, calc(100dvh - 7.5rem)); display:flex; flex-direction:column; overflow:hidden;
background:var(--c-panel); border-radius:1.5rem; box-shadow:0 24px 60px -16px rgba(0,0,0,.35);
opacity:0; visibility:hidden; transform:translateY(14px) scale(.96); transform-origin:right bottom;
transition:opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s; }
#chatPanel.open { opacity:1; visibility:visible; transform:none; transition-delay:0s; }

.chat-head { display:flex; align-items:center; gap:.9rem; padding:1rem 1.25rem; background:var(--c-panel); border-bottom:1px solid var(--c-line); }
.chat-ava-wrap { position:relative; flex:none; width:3.1rem; height:3.1rem; }
.chat-ava { width:100%; height:100%; border-radius:50%; object-fit:cover; background:var(--c-area); display:block; }
.chat-ava-wrap::after { content:""; position:absolute; right:-1px; bottom:1px; width:.8rem; height:.8rem; border-radius:50%; background:#22c55e; border:2px solid var(--c-panel); }
.chat-who b { display:block; font-family:inherit; font-size:1.15rem; line-height:1.2; font-weight:700; color:var(--c-text); }
.chat-who small { display:block; margin-top:.15rem; font-size:.8rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--c-sub); }
.chat-x { margin-left:auto; width:2.4rem; height:2.4rem; display:grid; place-items:center; border:0; border-radius:.6rem; background:transparent; color:var(--c-text); font-size:1.4rem; cursor:pointer; transition:background .2s; }
.chat-x:hover { background:var(--c-area); }

.chat-body { flex:1; min-height:0; overflow-y:auto; padding:1.1rem 1.1rem 1.25rem; display:flex; flex-direction:column; gap:.9rem; background:var(--c-area); overscroll-behavior:contain; scroll-behavior:smooth; }
.chat-msg { max-width:86%; padding:.95rem 1.15rem; border-radius:1.15rem; font-size:1rem; line-height:1.5; overflow-wrap:anywhere; animation:chatIn .3s ease both; }
.chat-msg.bot { align-self:flex-start; background:var(--c-bot); color:var(--c-text); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.chat-msg.me { align-self:flex-end; background:var(--c-me); color:var(--c-me-t); border-top-right-radius:.3rem; }
.chat-msg p { margin:0; } .chat-msg p + p { margin-top:.5rem; }
.chat-msg ul { margin:.4rem 0 0; padding-left:1.1rem; list-style:disc; } .chat-msg li { margin:.15rem 0; }
.chat-msg b { font-weight:600; }
.chat-msg .chat-sub { color:var(--c-sub); font-size:.85rem; }
@keyframes chatIn { from { opacity:0; transform:translateY(8px); } }
.chat-acts { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.7rem; }
.chat-chip { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .85rem; border-radius:999px; border:1px solid var(--c-line); background:var(--c-area); color:var(--c-text); font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; transition:transform .2s; }
.chat-chip:hover { transform:translateY(-1px); }
.chat-chip.solid { background:var(--c-me); border-color:var(--c-me); color:var(--c-me-t); }
.chat-typing { align-self:flex-start; display:flex; gap:.3rem; padding:1rem 1.15rem; border-radius:1.15rem; background:var(--c-bot); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.chat-typing i { width:.45rem; height:.45rem; border-radius:50%; background:var(--c-sub); animation:chatDot 1.1s ease-in-out infinite; }
.chat-typing i:nth-child(2) { animation-delay:.15s; } .chat-typing i:nth-child(3) { animation-delay:.3s; }
@keyframes chatDot { 0%,60%,100% { transform:translateY(0); opacity:.5; } 30% { transform:translateY(-4px); opacity:1; } }

.chat-quick, .chat-note { display:none; }
.chat-form { display:flex; gap:.7rem; padding:1rem 1.25rem; background:var(--c-panel); border-top:1px solid var(--c-line); }
.chat-form input { flex:1; min-width:0; padding:.85rem 1rem; border-radius:.9rem; border:2px solid var(--c-ring); background:var(--c-area); color:var(--c-text); font:inherit; font-size:1rem; }
.chat-form input::placeholder { color:var(--c-sub); }
.chat-form input:focus { outline:none; box-shadow:0 0 0 3px rgba(0,0,0,.12); }
html[data-theme="dark"] .chat-form input:focus { box-shadow:0 0 0 3px rgba(244,241,232,.2); }
.chat-form button { width:3.4rem; flex:none; border:0; border-radius:.9rem; background:var(--c-me); color:var(--c-me-t); font-size:1.2rem; cursor:pointer; transition:transform .2s; }
.chat-form button:hover { transform:translateY(-1px); }

@media (max-width:639px) {
#chatFab { right:.9rem; bottom:calc(.9rem + env(safe-area-inset-bottom, 0px)); padding:.85rem 1.2rem; }
#toTop { bottom:calc(5.3rem + env(safe-area-inset-bottom, 0px)); }
#chatPanel { right:.75rem; left:.75rem; width:auto; bottom:calc(4.9rem + env(safe-area-inset-bottom, 0px)); height:min(34rem, calc(100vh - 6.5rem)); height:min(34rem, calc(100dvh - 6.5rem)); }
#chatNudge { right:.9rem; bottom:calc(4.8rem + env(safe-area-inset-bottom, 0px)); }
.chat-form input { font-size:1rem; }
}
html.intro-on #chatFab, html.intro-on #chatNudge { opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce) {
#chatFab.has-new::after, .chat-typing i { animation:none !important; }
#chatPanel, #chatNudge { transition:opacity .15s !important; transform:none !important; }
.chat-msg { animation:none; } .chat-body { scroll-behavior:auto; }
}


/* ==========================================================================
   5. Chat button: icon only, name slides out on hover
   ========================================================================== */
/* Lyn's Assistant: icon only; the name slides out to the left on hover or keyboard focus */
#chatFab{flex-direction:row-reverse;gap:0;justify-content:center;height:3.4rem;min-width:3.4rem;padding:0 .95rem;border-radius:999px;
  transition:transform .25s ease,box-shadow .25s ease,padding .35s cubic-bezier(.22,1,.36,1)}
#chatFab i{width:1.5rem;text-align:center;flex:none}
#chatFab>span{display:block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;padding-right:0;
  transition:max-width .4s cubic-bezier(.22,1,.36,1),opacity .25s ease,padding-right .4s cubic-bezier(.22,1,.36,1)}
#chatFab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#chatFab:focus-visible>span,#chatFab.peek>span{max-width:13rem;opacity:1;padding-right:.65rem}
#chatFab:focus-visible,#chatFab.peek{padding-left:1.25rem}
@media (hover:hover){
  #chatFab:hover>span{max-width:13rem;opacity:1;padding-right:.65rem}
  #chatFab:hover{padding-left:1.25rem}
}
@media (max-width:639px){
  #chatFab{height:3.1rem;min-width:3.1rem;padding:0 .8rem}
  #chatFab:focus-visible,#chatFab.peek{padding-left:1.1rem}
  #chatFab>span{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
  #chatFab,#chatFab>span{transition:opacity .15s ease,max-width 0s,padding 0s}
}

/* the three floating pieces share one centre line: assistant icon, back-to-top arrow (stacked right above it) and the nudge bubble (beside the arrow) */
:root{--fab-w:3.4rem;--fab-r:1.25rem}
@media (max-width:639px){:root{--fab-w:3.1rem;--fab-r:.9rem}}
#toTop{right:calc(var(--fab-r) + (var(--fab-w) - 38px) / 2);bottom:calc(var(--fab-r) + var(--fab-w) + .65rem + env(safe-area-inset-bottom, 0px))}
/* the "Have a question?" bubble sits in the assistant's own row: same centre line as the icon, just to its left */
#chatNudge,html:has(#toTop.show) #chatNudge{border-radius:1rem;right:calc(var(--fab-r) + var(--fab-w) + .75rem);bottom:calc(var(--fab-r) + var(--fab-w) / 2 + env(safe-area-inset-bottom, 0px));translate:0 50%;max-width:min(15rem,calc(100vw - var(--fab-r) - var(--fab-w) - 2.25rem))}
/* when the icon opens out into its label on hover, the bubble steps aside */
html:has(#chatFab:hover) #chatNudge,html:has(#chatFab.peek) #chatNudge{opacity:0;pointer-events:none}


/* ==========================================================================
   6. Tailwind utility classes (pre-compiled, do not edit by hand)
   ========================================================================== */
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Jost,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.bottom-\[-20\%\]{bottom:-20%}.left-\[-10\%\]{left:-10%}.left-\[20\%\]{left:20%}.right-5{right:1.25rem}.right-\[-10\%\]{right:-10%}.top-0{top:0}.top-4{top:1rem}.top-\[-10\%\]{top:-10%}.top-\[20\%\]{top:20%}.z-40{z-index:40}.z-50{z-index:50}.z-\[-1\]{z-index:-1}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-5{height:1.25rem}.h-8{height:2rem}.h-\[400px\]{height:400px}.h-\[500px\]{height:500px}.h-\[600px\]{height:600px}.h-full{height:100%}.min-h-\[1\.25rem\]{min-height:1.25rem}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-\[400px\]{width:400px}.w-\[500px\]{width:500px}.w-\[600px\]{width:600px}.w-full{width:100%}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.flex-shrink,.shrink{flex-shrink:1}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-95{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes blob{0%{transform:translate(0) scale(1)}33%{transform:translate(50px,-50px) scale(1.1)}66%{transform:translate(-40px,30px) scale(.9)}to{transform:translate(0) scale(1)}}.animate-blob{animation:blob 10s infinite alternate}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in-up{animation:fadeInUp 1s ease-out forwards}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.animate-float{animation:float 6s ease-in-out infinite}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-16{gap:4rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.scroll-smooth{scroll-behavior:smooth}.break-all{word-break:break-all}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-\[4px\]{border-width:4px}.border-b{border-bottom-width:1px}.border-l-4{border-left-width:4px}.border-t{border-top-width:1px}.border-\[\#0077b5\]{--tw-border-opacity:1;border-color:rgb(0 119 181/var(--tw-border-opacity,1))}.border-cardborder{border-color:rgba(229,231,235,.5)}.border-cardborder\/60{border-color:rgba(229,231,235,.6)}.border-textmuted\/30{border-color:rgba(71,85,105,.3)}.border-white\/60{border-color:hsla(0,0%,100%,.6)}.border-l-accent{--tw-border-opacity:1;border-left-color:rgb(184 92 56/var(--tw-border-opacity,1))}.border-l-textmuted{--tw-border-opacity:1;border-left-color:rgb(71 85 105/var(--tw-border-opacity,1))}.bg-\[\#0066CC\]{--tw-bg-opacity:1;background-color:rgb(0 102 204/var(--tw-bg-opacity,1))}.bg-\[\#0077b5\]{--tw-bg-opacity:1;background-color:rgb(0 119 181/var(--tw-bg-opacity,1))}.bg-\[\#00A1E0\]{--tw-bg-opacity:1;background-color:rgb(0 161 224/var(--tw-bg-opacity,1))}.bg-\[\#0F9D58\]{--tw-bg-opacity:1;background-color:rgb(15 157 88/var(--tw-bg-opacity,1))}.bg-\[\#107C41\]{--tw-bg-opacity:1;background-color:rgb(16 124 65/var(--tw-bg-opacity,1))}.bg-\[\#10A37F\]{--tw-bg-opacity:1;background-color:rgb(16 163 127/var(--tw-bg-opacity,1))}.bg-\[\#15C39A\]{--tw-bg-opacity:1;background-color:rgb(21 195 154/var(--tw-bg-opacity,1))}.bg-\[\#17494D\]{--tw-bg-opacity:1;background-color:rgb(23 73 77/var(--tw-bg-opacity,1))}.bg-\[\#185ABD\]{--tw-bg-opacity:1;background-color:rgb(24 90 189/var(--tw-bg-opacity,1))}.bg-\[\#4285F4\]{--tw-bg-opacity:1;background-color:rgb(66 133 244/var(--tw-bg-opacity,1))}.bg-\[\#4A154B\]{--tw-bg-opacity:1;background-color:rgb(74 21 75/var(--tw-bg-opacity,1))}.bg-\[\#6264A7\]{--tw-bg-opacity:1;background-color:rgb(98 100 167/var(--tw-bg-opacity,1))}.bg-\[\#8B5CF6\]{--tw-bg-opacity:1;background-color:rgb(139 92 246/var(--tw-bg-opacity,1))}.bg-\[\#D97706\]{--tw-bg-opacity:1;background-color:rgb(217 119 6/var(--tw-bg-opacity,1))}.bg-\[\#FF9900\]{--tw-bg-opacity:1;background-color:rgb(255 153 0/var(--tw-bg-opacity,1))}.bg-\[\#FFBA00\]{--tw-bg-opacity:1;background-color:rgb(255 186 0/var(--tw-bg-opacity,1))}.bg-\[\#e8e2d2\]{--tw-bg-opacity:1;background-color:rgb(232 226 210/var(--tw-bg-opacity,1))}.bg-\[\#f5d0c4\]{--tw-bg-opacity:1;background-color:rgb(245 208 196/var(--tw-bg-opacity,1))}.bg-\[\#fbf8f1\]{--tw-bg-opacity:1;background-color:rgb(251 248 241/var(--tw-bg-opacity,1))}.bg-\[\#fcd4c7\]{--tw-bg-opacity:1;background-color:rgb(252 212 199/var(--tw-bg-opacity,1))}.bg-accent{--tw-bg-opacity:1;background-color:rgb(184 92 56/var(--tw-bg-opacity,1))}.bg-black\/50{background-color:rgba(0,0,0,.5)}.bg-lightbg{--tw-bg-opacity:1;background-color:rgb(244 241 232/var(--tw-bg-opacity,1))}.bg-lightbg\/70{background-color:hsla(45,35%,93%,.7)}.bg-lightcard{background-color:hsla(0,0%,100%,.7)}.bg-slate-700{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.bg-white\/40{background-color:hsla(0,0%,100%,.4)}.bg-white\/60{background-color:hsla(0,0%,100%,.6)}.fill-current{fill:currentColor}.object-cover{-o-object-fit:cover;object-fit:cover}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-16{padding-bottom:4rem}.pb-2{padding-bottom:.5rem}.pt-28{padding-top:7rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.text-center{text-align:center}.font-poppins{font-family:Cormorant Garamond,Georgia,serif}.font-sans{font-family:Jost,sans-serif}.font-script{font-family:Great Vibes,cursive}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-\[15px\]{font-size:15px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-accent{--tw-text-opacity:1;color:rgb(184 92 56/var(--tw-text-opacity,1))}.text-textmain{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1))}.text-textmuted{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.mix-blend-multiply{mix-blend-mode:multiply}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-accent\/30{--tw-shadow-color:rgba(184,92,56,.3);--tw-shadow:var(--tw-shadow-colored)}.outline{outline-style:solid}.blur{--tw-blur:blur(8px)}.blur,.blur-\[100px\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-\[100px\]{--tw-blur:blur(100px)}.blur-\[120px\]{--tw-blur:blur(120px)}.blur-\[120px\],.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-md,.backdrop-blur-sm{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.delay-100{transition-delay:.1s}.delay-200{transition-delay:.2s}.delay-300{transition-delay:.3s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.selection\:bg-accent ::-moz-selection{--tw-bg-opacity:1;background-color:rgb(184 92 56/var(--tw-bg-opacity,1))}.selection\:bg-accent ::selection{--tw-bg-opacity:1;background-color:rgb(184 92 56/var(--tw-bg-opacity,1))}.selection\:text-white ::-moz-selection{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.selection\:text-white ::selection{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.selection\:bg-accent::-moz-selection{--tw-bg-opacity:1;background-color:rgb(184 92 56/var(--tw-bg-opacity,1))}.selection\:bg-accent::selection{--tw-bg-opacity:1;background-color:rgb(184 92 56/var(--tw-bg-opacity,1))}.selection\:text-white::-moz-selection{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.selection\:text-white::selection{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:-translate-x-2:hover{--tw-translate-x:-0.5rem}.hover\:-translate-x-2:hover,.hover\:-translate-y-0\.5:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem}.hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem}.hover\:-translate-y-1:hover,.hover\:-translate-y-2:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:-translate-y-2:hover{--tw-translate-y:-0.5rem}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:scale-105:hover,.hover\:scale-125:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-125:hover{--tw-scale-x:1.25;--tw-scale-y:1.25}.hover\:border-accent:hover{--tw-border-opacity:1;border-color:rgb(184 92 56/var(--tw-border-opacity,1))}.hover\:bg-\[\#005582\]:hover{--tw-bg-opacity:1;background-color:rgb(0 85 130/var(--tw-bg-opacity,1))}.hover\:bg-\[\#9a4c2e\]:hover{--tw-bg-opacity:1;background-color:rgb(154 76 46/var(--tw-bg-opacity,1))}.hover\:text-\[\#0077b5\]:hover{--tw-text-opacity:1;color:rgb(0 119 181/var(--tw-text-opacity,1))}.hover\:text-accent:hover{--tw-text-opacity:1;color:rgb(184 92 56/var(--tw-text-opacity,1))}.hover\:text-textmain:hover{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1))}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.hover\:shadow-lg:hover,.hover\:shadow-xl:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width:640px){.sm\:mt-0{margin-top:0}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-7xl{font-size:4.5rem;line-height:1}}@media (min-width:768px){.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:text-8xl{font-size:6rem;line-height:1}}@media (min-width:1024px){.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}


/* ==========================================================================
   7. Hero layout
   ========================================================================== */
.hero2{width:100%;max-width:1180px;margin:0 auto;padding:0 1rem}
.h2-head{display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem}
.h2-photo{width:170px;height:170px;flex:none;border-radius:50%;border:3px solid var(--line);background:var(--panel);overflow:hidden;display:flex;align-items:center;justify-content:center}
.h2-photo img{width:100%;height:100%;object-fit:cover}
.h2-id h1{margin:0 0 1.2rem;font-size:clamp(2rem,4.2vw,3rem);line-height:1.15;color:var(--ink)}
.h2-check{display:inline-block;width:.62em;height:.62em;margin-left:.26em;vertical-align:-.02em;color:#1d9bf0}
.h2-cta{display:flex;flex-wrap:wrap;gap:1rem}
.h2-social{display:flex;align-items:center;gap:1rem}
.h2-social a,.h2-social button{background:none;border:0;padding:0;cursor:pointer;line-height:1;font-size:1.2rem;color:var(--muted);transition:color .2s}
.h2-social a:hover,.h2-social button:hover{color:var(--accent)}
.hero2 h2{margin:0 0 1.4rem;font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.2;color:var(--ink)}
.hero2 h2 em{font-weight:500;color:var(--muted)}
.hero2 p{max-width:50rem;margin:0 0 2rem;font-size:1.06rem;line-height:2.05;color:var(--muted)}
.h2-chip{display:inline-flex;align-items:center;gap:.4rem;padding:0 .65rem;border:1px solid var(--line);border-radius:.5rem;background:var(--panel);font-size:.88rem;line-height:1.7;color:var(--ink);white-space:nowrap}
.h2-chip i{font-size:.8em;color:var(--accent)}
.tools-col{display:flex;flex-direction:column;gap:2.5rem}
    .tool-icon i{font-size:18px}
    .tool-icon svg{width:22px;height:22px;flex:none}
/* keep the chat nudge clear of the back-to-top button while that button is showing */
html:has(#toTop.show) #chatNudge{right:calc(1.25rem + 38px + 1rem);max-width:min(15rem,calc(100vw - 7.5rem))}
@media(max-width:639px){.h2-head{flex-direction:column;align-items:flex-start;gap:1rem}.h2-photo{width:128px;height:128px}}


/* ==========================================================================
   8. "Back to home" link on sub-pages
   ========================================================================== */
.back-home-wrap{display:none;max-width:80rem;margin:3.5rem auto 0;text-align:left}
.back-home-wrap.narrow{max-width:68rem}
body.mode-page .back-home-wrap{display:block}
.back-home{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.5rem;padding:.5rem 1.25rem;border:1.5px solid var(--accent);border-radius:999px;font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:transparent;-webkit-tap-highlight-color:transparent;transition:background .3s,color .3s,transform .3s,box-shadow .3s}
.back-home:hover,.back-home:active{background:var(--accent);color:#fff;transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(184,92,56,.55)}
.back-home span{display:inline-block;transition:transform .3s}
.back-home:hover span{transform:translateX(-5px)}
.back-home:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:639px){.back-home-wrap{padding-left:1.5rem;padding-right:1.5rem}}


/* ==========================================================================
   9. Tools: always-moving rows
   ========================================================================== */
.tm-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:2.5rem}
.tm-marquee{display:flex;flex-direction:column;gap:14px;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.tm-row{overflow:hidden;padding:6px 0}
.tm-track{display:flex;width:max-content;animation:tmScroll var(--dur,40s) linear infinite;will-change:transform}
.tm-row.rev .tm-track{animation-direction:reverse}
.tm-row:hover .tm-track{animation-play-state:paused}
.tm-set{display:flex;gap:12px;padding-right:12px;flex:none}
@keyframes tmScroll{to{transform:translateX(-50%)}}
.tm-chip{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem 1rem .5rem .55rem;border-radius:12px;font-size:.9rem;font-weight:500;white-space:nowrap;
  box-shadow:0 8px 20px -12px rgba(184,92,56,.45);transition:transform .25s,border-color .25s,box-shadow .25s;cursor:default}
.tm-chip:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 12px 24px -12px rgba(184,92,56,.6)}
.tm-ico{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;color:#fff;flex:none}
.tm-ico svg{width:16px;height:16px;flex:none}
/* View All: an outlined pill (stacked-tiles icon, label, tool count, chevron) that fills terracotta on hover and while open */
.tm-btn{display:inline-flex;align-items:center;gap:.65rem;padding:.5rem .55rem .5rem .9rem;border:1.5px solid var(--accent);border-radius:999px;background:transparent;cursor:pointer;
  font:inherit;font-size:.9rem;font-weight:600;letter-spacing:.02em;color:var(--accent);-webkit-tap-highlight-color:transparent;
  transition:background .3s,color .3s,box-shadow .3s,transform .3s}
.tm-btn:hover,.tm-btn[aria-expanded="true"]{background:var(--accent);color:#fff;box-shadow:0 10px 22px -12px rgba(184,92,56,.65)}
.tm-btn:active{transform:scale(.96)}
.tm-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* three little tiles that fan out on hover and spread into a row when the list is open */
.tm-stack{position:relative;width:1.1rem;height:1.1rem;flex:none}
.tm-stack i{position:absolute;left:.15rem;top:.15rem;width:.8rem;height:.8rem;border:1.5px solid currentColor;border-radius:.22rem;background:#f4f1e8;
  transition:transform .45s cubic-bezier(.3,1.5,.5,1),background .3s}
.tm-stack i:nth-child(1){transform:translate(-3px,3px)}
.tm-stack i:nth-child(2){transform:translate(0,0)}
.tm-stack i:nth-child(3){transform:translate(3px,-3px)}
.tm-btn:hover .tm-stack i,.tm-btn[aria-expanded="true"] .tm-stack i{background:var(--accent)}
.tm-btn:hover .tm-stack i:nth-child(1){transform:translate(-5px,4px) rotate(-12deg)}
.tm-btn:hover .tm-stack i:nth-child(3){transform:translate(5px,-4px) rotate(12deg)}
.tm-btn[aria-expanded="true"] .tm-stack i:nth-child(1){transform:translate(-6px,0) scale(.7)}
.tm-btn[aria-expanded="true"] .tm-stack i:nth-child(2){transform:scale(.7)}
.tm-btn[aria-expanded="true"] .tm-stack i:nth-child(3){transform:translate(6px,0) scale(.7)}
.tm-count{min-width:1.6rem;height:1.6rem;padding:0 .45rem;display:inline-grid;place-items:center;border-radius:999px;font-size:.74rem;font-weight:700;
  color:var(--accent);background:rgba(184,92,56,.12);transition:background .3s,color .3s,opacity .3s,width .3s}
.tm-btn:hover .tm-count{color:#fff;background:rgba(255,255,255,.22)}
.tm-btn[aria-expanded="true"] .tm-count{display:none}
.tm-chev{width:1.6rem;height:1.6rem;flex:none;display:grid;place-items:center;border-radius:50%;background:rgba(184,92,56,.12);transition:background .3s}
.tm-chev::before{content:"";width:.42rem;height:.42rem;margin-left:-.12rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);
  transition:transform .4s cubic-bezier(.3,1.4,.5,1),margin .4s}
.tm-btn:hover .tm-chev,.tm-btn[aria-expanded="true"] .tm-chev{background:rgba(255,255,255,.22)}
.tm-btn:hover .tm-chev::before{transform:translateX(2px) rotate(-45deg)}
.tm-btn[aria-expanded="true"] .tm-chev::before{margin:.2rem 0 0;transform:rotate(-135deg)}
.tm-btn.pop{animation:tmPop .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes tmPop{40%{transform:scale(.94)}}
html[data-theme="dark"] .tm-btn{border-color:var(--accent2);color:var(--accent2)}
html[data-theme="dark"] .tm-stack i{background:#0f1520}
html[data-theme="dark"] .tm-btn:hover,html[data-theme="dark"] .tm-btn[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
@media (prefers-reduced-motion:reduce){.tm-stack i,.tm-chev::before{transition:none}.tm-btn.pop{animation:none}}
/* View All: marquee folds away, the full categorised list unfolds */
.tm-fold{display:grid;grid-template-rows:1fr;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1),opacity .35s,margin .55s}
.tm-fold-inner{min-height:0;overflow:hidden}
.tm-fold.folded{grid-template-rows:0fr;opacity:0}
.tm-all{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1),opacity .45s .1s,visibility 0s .55s}
.tm-all.open{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1),opacity .45s .1s,visibility 0s}
.tm-all-inner{min-height:0;overflow:hidden;padding:0 1rem;margin:0 -1rem}
.tm-all.open .tm-all-inner{padding:.25rem 1rem 1rem}


/* ==========================================================================
   10. Tools: "View All" category tabs
   ========================================================================== */
/* ===== View All: category sidebar on the left, one category's tools on the right ===== */
/* every panel sits in the same cell, so the area is always as tall as the longest category and nothing below moves when switching */
#toolsAll.tt-on .tm-all-inner>.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
#toolsAll.tt-on .tools-col{display:contents}
#toolsAll.tt-on .tt-panel{grid-area:1/1}
#toolsAll.tt-on .tt-panel.tt-off{visibility:hidden;opacity:0;pointer-events:none}
#toolsAll.tt-on .tt-panel>.space-y-4{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.9rem}
#toolsAll.tt-on .tt-panel>.space-y-4>*{margin-top:0!important}
.tt-panel.tt-in>.space-y-4>*{animation:ttIn .5s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * .06s) backwards}
@keyframes ttIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* the category name becomes the panel's heading */
#toolsAll.tt-on .tt-panel>h3{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 1.2rem;padding:0 0 .8rem;border-bottom:1px solid var(--line);
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;font-size:1.9rem;line-height:1.1;letter-spacing:0;text-transform:none;color:var(--ink)}
#toolsAll.tt-on .tt-panel>h3 i{display:none}
#toolsAll.tt-on .tt-panel>h3::after{content:attr(data-count);flex:none;font-family:'Jost',system-ui,sans-serif;font-style:normal;font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.tt-panel.tt-in>h3{animation:ttIn .45s cubic-bezier(.2,.8,.2,1) backwards}

/* sidebar */
.tt-bar{position:relative;display:flex;flex-direction:column;gap:.2rem;padding:.6rem;border:1px solid var(--line);border-radius:1.2rem;background:var(--panel)}
.tt-bar::before{content:"Browse by category";display:block;padding:.55rem .75rem .7rem;font-size:.68rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.tt-glide{position:absolute;left:0;top:0;z-index:0;border-radius:.8rem;background:rgba(184,92,56,.1);box-shadow:inset 3px 0 0 var(--accent);pointer-events:none;
  transition:transform .45s cubic-bezier(.3,1.2,.4,1),width .45s cubic-bezier(.3,1.2,.4,1),height .35s,top .45s cubic-bezier(.3,1.2,.4,1)}
.tt-tab{position:relative;z-index:1;display:flex;align-items:center;gap:.8rem;width:100%;padding:.6rem .75rem;border:0;border-radius:.8rem;background:none;cursor:pointer;text-align:left;
  font:inherit;font-size:.88rem;font-weight:500;line-height:1.3;color:var(--muted);transition:color .3s,background .3s;-webkit-tap-highlight-color:transparent}
.tt-tab:hover{color:var(--ink);background:rgba(148,163,184,.08)}
.tt-tab[aria-selected="true"]{color:var(--ink);font-weight:600;background:none}
.tt-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tt-tab>i{flex:none;width:2.1rem;height:2.1rem;display:grid;place-items:center;border-radius:.65rem;font-size:.85rem;color:var(--accent);background:rgba(184,92,56,.1);
  transition:background .3s,color .3s,transform .4s cubic-bezier(.2,1.4,.4,1)}
.tt-tab:hover>i{transform:rotate(-8deg)}
.tt-tab[aria-selected="true"]>i{background:var(--accent);color:#fff;box-shadow:0 8px 16px -8px rgba(184,92,56,.8)}
.tt-tab>span{flex:1;min-width:0}
.tt-tab>b{flex:none;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:1.15rem;font-weight:600;color:var(--muted);opacity:.7;transition:color .3s,opacity .3s}
.tt-tab[aria-selected="true"]>b{color:var(--accent);opacity:1}
@media(min-width:768px){
  #toolsAll.tt-on .tm-all-inner{display:grid;grid-template-columns:15.5rem minmax(0,1fr);column-gap:2rem;align-items:start}
}
@media(min-width:1024px){
  #toolsAll.tt-on .tm-all-inner{grid-template-columns:18rem minmax(0,1fr);column-gap:2.6rem}
}
/* phones: a slim icon rail on the left; the chosen category's name and tools show on the right */
@media(max-width:767px){
  /* rail and tools share one row, so the rail always runs the full height of the list */
  #toolsAll.tt-on .tm-all-inner{display:grid;grid-template-columns:3.3rem minmax(0,1fr);column-gap:.9rem;align-items:stretch}
  .tt-bar{justify-content:space-evenly;gap:.3rem;padding:.4rem .35rem;border-radius:1.1rem}
  .tt-bar::before{display:none}
  .tt-glide{display:none}
  .tt-tab{justify-content:center;gap:0;padding:.25rem;border-radius:.75rem}
  .tt-tab:hover{background:none}
  .tt-tab>span,.tt-tab>b{display:none}
  .tt-tab>i{width:2.35rem;height:2.35rem;font-size:.9rem;border-radius:.75rem;color:var(--muted);background:transparent;border:1.5px solid transparent;
transition:color .3s,background .3s,border-color .3s,transform .4s cubic-bezier(.2,1.4,.4,1)}
  .tt-tab:hover>i{transform:none}
  .tt-tab[aria-selected="true"]>i{color:var(--accent);background:rgba(184,92,56,.14);border-color:var(--accent);box-shadow:0 0 0 4px rgba(184,92,56,.1);transform:scale(1.06)}
  #toolsAll.tt-on .tt-panel>h3{flex-wrap:wrap;gap:.2rem .8rem;margin-bottom:.8rem;padding-bottom:.55rem;font-size:1.4rem}
  #toolsAll.tt-on .tt-panel>.space-y-4{grid-template-columns:1fr;gap:.5rem}
  /* compact tool rows so the list and the rail come out about the same height */
  #toolsAll.tt-on .tt-panel>.space-y-4>*{gap:.7rem;padding:.5rem .65rem;border-radius:.85rem}
  #toolsAll.tt-on .tt-panel .tool-icon{width:2.3rem;height:2.3rem;min-width:2.3rem;border-radius:.6rem}
  #toolsAll.tt-on .tt-panel .tool-icon+div{min-width:0}
  #toolsAll.tt-on .tt-panel .tool-icon+div>div:first-child{font-size:.84rem;line-height:1.25}
  #toolsAll.tt-on .tt-panel .tool-icon+div>div+div{font-size:.7rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(prefers-reduced-motion:reduce){.tt-glide{transition:none}.tt-panel.tt-in>.space-y-4>*,.tt-panel.tt-in>h3{animation:none}}


/* ==========================================================================
   11. Cursor ring and sparkle effects
   ========================================================================== */
.btn-primary,.btn-secondary,.hire-btn,.back-home{translate:var(--mgx,0) var(--mgy,0);transition-property:transform,box-shadow,background,color,border-color,translate}
.animate-blob{translate:var(--px,0) var(--py,0);transition:translate .9s cubic-bezier(.2,.7,.2,1)}

/* hero: living gradient ring around the photo, floating chips, ambient glow */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.h2-photo{border:4px solid transparent !important;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,conic-gradient(from var(--ang),#b85c38,#fcd4c7,#d98d6c,#e8e2d2,#b85c38) border-box !important;
  animation:fxSpin 6s linear infinite;box-shadow:0 0 0 6px rgba(184,92,56,.10),0 14px 40px -12px rgba(184,92,56,.55)}
@keyframes fxSpin{to{--ang:360deg}}
.h2-photo img{border-radius:50%}
.h2-chip{animation:fxBob 4.2s ease-in-out infinite}
.h2-chip:nth-of-type(2n){animation-delay:-1.4s}.h2-chip:nth-of-type(3n){animation-delay:-2.6s}
@keyframes fxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.h2-id h1{background:linear-gradient(100deg,currentColor 40%,var(--accent) 50%,currentColor 60%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fxShine 5s ease-in-out infinite}
.h2-check{-webkit-text-fill-color:initial}
@keyframes fxShine{0%,55%{background-position:120% 0}100%{background-position:-20% 0}}


/* ==========================================================================
   12. Drifting background sparkles
   ========================================================================== */
.fx-drift{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fx-drift i{position:absolute;font-style:normal;line-height:1;color:var(--accent2);opacity:.3;
  animation:fxHover var(--t,12s) ease-in-out var(--w,0s) infinite,fxGlow var(--g,4s) ease-in-out var(--w,0s) infinite}
@keyframes fxHover{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(var(--sx,14px),calc(var(--sy,12px) * -1)) rotate(12deg)}
  50%{transform:translate(calc(var(--sx,14px) * -.6),var(--sy,12px)) rotate(-8deg)}75%{transform:translate(calc(var(--sx,14px) * .5),calc(var(--sy,12px) * .6)) rotate(6deg)}}
@keyframes fxGlow{0%,100%{opacity:.22;scale:.8;text-shadow:0 0 0 rgba(217,141,108,0)}
  50%{opacity:.95;scale:1.25;text-shadow:0 0 6px rgba(240,183,157,.95),0 0 16px rgba(217,141,108,.75),0 0 30px rgba(184,92,56,.45)}}
h2.text-3xl .text-accent{background:linear-gradient(100deg,var(--accent) 35%,#f0b79d 50%,var(--accent) 65%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fxShine 6s ease-in-out infinite}
.btn-primary:hover,.btn-secondary:hover,.hire-btn:hover{background-image:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);
  background-size:250% 100%;animation:fxSweep .9s ease}
@keyframes fxSweep{from{background-position:150% 0}to{background-position:-50% 0}}
.soft-shadow{animation:fxEdge 7s ease-in-out infinite}
@keyframes fxEdge{0%,100%{box-shadow:0 0 0 0 rgba(184,92,56,0)}50%{box-shadow:0 10px 30px -14px rgba(184,92,56,.28)}}


/* ==========================================================================
   13. Contact form
   ========================================================================== */
.c-send{translate:none !important;transition:background .25s,color .25s,box-shadow .25s}
.c-send:hover:not(:disabled){transform:none !important;animation:none !important;background-image:none !important;background:var(--accent);color:#fff;box-shadow:0 10px 22px -12px rgba(184,92,56,.65)}
.hire-btn{translate:none !important;transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.hire-btn:hover{transform:none !important;animation:none !important;background-image:none !important;background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 10px 22px -12px rgba(184,92,56,.65)}
.cf-pop{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:1.25rem;background:rgba(15,23,42,.45);backdrop-filter:blur(3px);opacity:0;transition:opacity .22s}
.cf-pop.in{opacity:1}.cf-pop.out{opacity:0}
.cf-card{width:100%;max-width:25rem;padding:1.8rem 1.6rem 1.4rem;border-radius:1.2rem;text-align:center;background:#fff;color:#1e293b;border:1px solid rgba(229,231,235,.95);
  box-shadow:0 30px 70px -20px rgba(15,23,42,.55);transform:translateY(14px) scale(.92);transition:transform .3s cubic-bezier(.2,1.3,.4,1)}
html[data-theme="dark"] .cf-card{background:#1e293b;color:#f4f1e8;border-color:rgba(148,163,184,.25)}
.cf-pop.in .cf-card{transform:none}
.cf-ico{width:3.4rem;height:3.4rem;margin:0 auto .9rem;display:grid;place-items:center;border-radius:50%;font-size:1.6rem;font-weight:700;line-height:1;color:#fff;background:var(--accent);box-shadow:0 0 0 6px rgba(184,92,56,.15)}
.cf-card.success .cf-ico{background:#22a06b;box-shadow:0 0 0 6px rgba(34,160,107,.18)}
.cf-pop.in .cf-ico{animation:cfPop .5s cubic-bezier(.2,1.4,.4,1) .1s both}
@keyframes cfPop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.cf-card h3{font-family:inherit;font-weight:700;font-size:1.2rem;margin:0 0 .4rem}
.cf-msg{font-size:.93rem;line-height:1.55;opacity:.85}
.cf-msg .c-alt{justify-content:center}
.cf-msg .c-why{display:block;margin-top:.7rem;font-size:.75rem;opacity:.7}
.cf-ok{margin-top:1.2rem;padding:.65rem 2.2rem;border:0;border-radius:.7rem;font-weight:600;cursor:pointer;background:var(--ink);color:var(--on-ink);transition:background .25s,color .25s}
.cf-ok:hover{background:var(--accent);color:#fff}


/* ==========================================================================
   14. Work experience timeline
   ========================================================================== */
.jt-head{text-align:center;margin-bottom:3.2rem}
.jt-head h2{display:inline-block;margin:0 0 .9rem !important}
.jt-eye{display:block;margin-bottom:.8rem;font-size:.74rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--accent)}
.jt-sub{max-width:34rem;margin:0 auto;color:var(--muted);line-height:1.6}
/* ===== Work Experience: a "career at a glance" bar on top, then each role as an editorial block (years on the left, accounts as cards) ===== */
.cr-wrap{max-width:66rem;margin:0 auto}

/* career bar */
.cb{margin:0 0 3.4rem;padding:1.3rem 1.4rem 1rem;border:1px solid var(--line);border-radius:1.25rem;background:var(--panel)}
.cb-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:.3rem 1rem;margin-bottom:.9rem}
.cb-head span{font-size:.72rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--accent)}
.cb-hint{font-size:.78rem;color:var(--muted)}
.cb-bar{display:flex;gap:3px;height:1.15rem}
.cb-seg{flex:var(--g,1) 1 0;min-width:6px;height:100%;padding:0;border:0;border-radius:4px;cursor:pointer;background:var(--c);transform-origin:left center;
  transition:transform .35s cubic-bezier(.2,1.3,.4,1),box-shadow .3s;-webkit-tap-highlight-color:transparent}
.cb-seg:first-child{border-radius:999px 4px 4px 999px}
.cb-seg:last-child{border-radius:4px 999px 999px 4px}
.cb-seg:hover,.cb-seg.hl{transform:scaleY(1.45);box-shadow:0 6px 14px -6px var(--c)}
.cb-seg:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cb-seg.now{background:repeating-linear-gradient(-45deg,var(--c) 0 6px,color-mix(in srgb,var(--c) 80%,#fff) 6px 12px)}
.cb-ticks{position:relative;height:1.4rem;margin-top:.45rem}
.cb-ticks span{position:absolute;top:0;transform:translateX(-50%);font-size:.68rem;font-weight:600;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.cb-ticks span::before{content:"";position:absolute;left:50%;top:-.4rem;width:1px;height:.3rem;background:var(--line)}
.cb-ticks span:first-child{transform:none}.cb-ticks span:first-child::before{left:0}
.cb-ticks span:last-child{transform:translateX(-100%)}.cb-ticks span:last-child::before{left:auto;right:0}

/* role blocks */
.cr{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:2.6rem;padding:2.6rem 0;border-top:1px solid var(--line)}
.cr:last-child{padding-bottom:0}
.cr-side{align-self:start;display:flex;flex-direction:column;gap:.5rem}
.cr-big{display:flex;flex-direction:column;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;line-height:.92}
.cr-big b{font-size:3.6rem;font-weight:700;color:var(--ink)}
.cr-big b:last-child{color:var(--accent)}
.cr-big i{margin:.15rem 0 .1rem .2rem;font-size:1.1rem;font-weight:600;color:var(--muted)}
.cr-when{margin-top:.6rem;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cr-yrs{align-self:flex-start;padding:.25rem .7rem;border-radius:999px;font-size:.74rem;font-weight:600;color:var(--accent);background:rgba(184,92,56,.1)}
.cr-body h3{margin:0;line-height:1.2}

/* account cards: the current one is featured across the full width */
.cr-acc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.5rem 0 0;padding:0;list-style:none}
.cr-acc--one{grid-template-columns:minmax(0,1fr)}
.cr-card{position:relative;overflow:hidden;padding:1.25rem 1.3rem 1.2rem;border:1px solid var(--line);border-radius:1.1rem;background:var(--panel);
  transition:border-color .3s,transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.cr-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--c)}
.cr-card:hover,.cr-card.hl{border-color:var(--c);transform:translateY(-3px);box-shadow:0 18px 34px -24px var(--c)}
.cr-card.flash{animation:crFlash 1.4s ease}
@keyframes crFlash{0%,100%{box-shadow:0 0 0 0 rgba(184,92,56,0)}25%{box-shadow:0 0 0 4px rgba(184,92,56,.35)}}
.cr-card.now{grid-column:1/-1;background:linear-gradient(135deg,rgba(184,92,56,.12),transparent 60%),var(--panel)}
.cr-card.now::after{content:"Current";position:absolute;top:1rem;right:1rem;padding:.2rem .65rem;border-radius:999px;font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--accent)}
.cr-card strong{display:block;padding-right:5rem;font-size:1rem;font-weight:600;line-height:1.35;color:var(--ink)}
.cr-card:not(.now) strong{padding-right:0}
.cr-card>em{display:inline-block;margin-top:.45rem;font-size:.68rem;font-style:normal;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cr-card>span{display:block;margin-top:.6rem;font-size:.9rem;line-height:1.6;color:var(--muted)}
.cr-card.now strong{font-size:1.15rem}
.cr-duties{margin:0;padding:0;list-style:none;display:grid;gap:1rem}
.cr-duties li{position:relative;padding-left:1.4rem}
.cr-duties li::before{content:"";position:absolute;left:0;top:.45rem;width:.55rem;height:.55rem;border-radius:2px;background:var(--c,var(--accent));transform:rotate(45deg)}
.cr-duties span{display:block;margin-top:.25rem;font-size:.9rem;line-height:1.6;color:var(--muted)}

/* scroll-in: bar segments grow one after another, cards rise in (JS only, so nothing is ever stuck hidden) */
.cr-js .cb-seg{transform:scaleX(0)}
.cr-js .cb.in .cb-seg{transform:none;transition:transform .55s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * .09s),box-shadow .3s}
.cr-js .cb.in .cb-seg:hover,.cr-js .cb.in .cb-seg.hl{transform:scaleY(1.45);transition-delay:0s}
.cr-js .cr .cr-side,.cr-js .cr .cr-card{opacity:0;transform:translateY(22px)}
.cr-js .cr.in .cr-side{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.cr-js .cr.in .cr-card{opacity:1;transform:none;transition:opacity .55s ease calc(.15s + var(--i,0) * .08s),transform .65s cubic-bezier(.2,.8,.2,1) calc(.15s + var(--i,0) * .08s),border-color .3s,box-shadow .4s}
.cr-js .cr.in .cr-card:hover,.cr-js .cr.in .cr-card.hl{transform:translateY(-3px);transition-delay:0s}

@media(max-width:859px){
  .cr{grid-template-columns:minmax(0,1fr);gap:1.2rem;padding:2rem 0}
  .cr-side{position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.4rem .8rem}
  .cr-big{flex-direction:row;align-items:baseline;gap:.4rem}
  .cr-big b{font-size:2.4rem}
  .cr-big i{margin:0;font-size:1rem}
  .cr-when{margin:0;flex-basis:100%;order:3}
}
@media(max-width:639px){
  .cb{padding:1.1rem 1rem .9rem}
  .cr-acc{grid-template-columns:minmax(0,1fr)}
  .cr-card.now::after{top:.9rem;right:.9rem}
}
@media(hover:hover){.cb-hint{font-size:0}.cb-hint::after{content:"Hover or click a segment";font-size:.78rem}}
@media(prefers-reduced-motion:reduce){
  .cr-js .cb-seg{transform:none}
  .cr-js .cr .cr-side,.cr-js .cr .cr-card{transform:none}
}


/* ==========================================================================
   15. Hero photo orb
   ========================================================================== */
.h2-wrap{position:relative;flex:none;animation:orbBob 6s ease-in-out infinite;perspective:600px}
@keyframes orbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.h2-wrap .h2-photo{transition:transform .25s ease-out,box-shadow .4s;transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) scale(var(--sc,1))}
.h2-wrap:hover .h2-photo{--sc:1.03;box-shadow:0 0 0 6px rgba(184,92,56,.12),0 16px 40px -14px rgba(184,92,56,.55)}
.orb{position:absolute;inset:-14px;pointer-events:none;border-radius:50%}
.orb::before,.orb::after{content:"";position:absolute;inset:12px;border-radius:50%;border:1.5px solid var(--accent);opacity:0;animation:orbPulse 3.6s ease-out infinite}
.orb::after{animation-delay:1.8s}
@keyframes orbPulse{0%{transform:scale(.92);opacity:.55}100%{transform:scale(1.2);opacity:0}}
.orb-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(184,92,56,.35);animation:orbSpin 22s linear infinite}
.orb-ring.r2{inset:7px;border-style:dotted;border-color:rgba(217,141,108,.45);animation-duration:15s;animation-direction:reverse}
@keyframes orbSpin{to{transform:rotate(360deg)}}
.orb-ring i{position:absolute;left:50%;top:0;margin:-8px 0 0 -8px;width:16px;height:16px;font-style:normal;font-size:15px;line-height:16px;text-align:center;color:var(--accent);
  text-shadow:0 0 8px rgba(240,183,157,.95),0 0 16px rgba(217,141,108,.7);animation:orbTw 2.8s ease-in-out infinite}
.orb-ring i:nth-child(2){top:auto;bottom:0;margin:0 0 -8px -8px;font-size:11px;color:var(--accent2);animation-delay:-1s}
.orb-ring i:nth-child(3){left:0;top:50%;margin:-6px 0 0 -6px;font-size:9px;animation-delay:-1.8s}
.orb-ring.r2 i{font-size:10px;color:var(--accent2)}
@keyframes orbTw{0%,100%{opacity:.5;scale:.8}50%{opacity:1;scale:1.3}}
@media(max-width:639px){.orb{inset:-10px}}


/* ==========================================================================
   16. Background blobs (lighter on the device)
   ========================================================================== */
/* background blobs: much smaller, slower drift; no blend mode / backdrop blur re-computation per frame */
@keyframes blobCalm { to { transform: translate(22px,-18px) scale(1.04); } }
#bgDeco > div.animate-blob { animation-name: blobCalm !important; animation-duration: 34s !important; animation-timing-function: ease-in-out !important;
animation-direction: alternate !important; mix-blend-mode: normal !important; }
html[data-theme="dark"] #bgDeco > div.animate-blob { opacity: .22; }
#bgDeco::after { opacity: .6; animation-duration: 140s; }
.bg-star:nth-of-type(n+7) { display: none; }
/* drifting sparkles: fade + gentle float only (no animated text-shadow) */
.fx-drift i { opacity: .2; }
@keyframes fxGlow { 0%,100% { opacity: .12; scale: .85; } 50% { opacity: .5; scale: 1.1; } }
/* cards: no pulsing box-shadow and no glass blur over a moving background */
.soft-shadow { animation: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* profile photo: static gradient ring + a very gentle breathing */
.h2-photo { animation: none !important; --ang: 35deg; }
@keyframes photoBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.018); } }
.h2-chip { animation-duration: 7s; }
@keyframes fxBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { #bgDeco > div.animate-blob { animation: none !important; } }
/* ===== profile photo: gentle but visible ===== */
.h2-wrap { animation-name: orbBobCalm; animation-duration: 7s; }
@keyframes orbBobCalm { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* one soft ring that slowly expands and fades */
.orb::before { animation-duration: 5.5s; }
.orb::after { display: none; }
@keyframes orbPulse { 0% { transform: scale(.95); opacity: .38; } 100% { transform: scale(1.14); opacity: 0; } }
/* orbit rings: slow, clearly turning */
.orb-ring { animation-duration: 38s; }
.orb-ring.r2 { animation-duration: 28s; }
/* sparkles: all kept, softer glow, gentle twinkle */
.orb-ring i { text-shadow: 0 0 6px rgba(240,183,157,.7); animation-duration: 4.2s; }
@keyframes orbTw { 0%,100% { opacity: .45; scale: .88; } 50% { opacity: .95; scale: 1.18; } }


/* ==========================================================================
   17. Background stars
   ========================================================================== */
/* background stars: few, still, soft twinkle only */
.fx-drift i{position:absolute;font-style:normal;line-height:1;color:var(--accent2);opacity:.1;
  text-shadow:0 0 5px rgba(240,183,157,.55);
  animation:starTw var(--g,6s) ease-in-out var(--w,0s) infinite}
@keyframes starTw{0%,100%{opacity:.1;scale:.92}50%{opacity:.5;scale:1.04}}
html[data-theme="dark"] .fx-drift i{color:#f6e3d4;text-shadow:0 0 5px rgba(255,236,220,.5)}
.bg-star{display:none !important}
@media (prefers-reduced-motion:reduce){.fx-drift i{animation:none;opacity:.35}}


/* ==========================================================================
   18. Hero buttons
   ========================================================================== */
/* hero buttons (Explore Work / Download CV): same hover effect as the Contact and Send Message buttons */
.btn-primary,.btn-secondary{translate:none !important;transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.btn-primary:hover,.btn-secondary:hover{transform:none !important;animation:none !important;background-image:none !important;background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 10px 22px -12px rgba(184,92,56,.65)}


/* ==========================================================================
   19. Recommendations: card deck
   ========================================================================== */
/* ===== Management Recommendations: a fanned hand of cards that shuffles like a real deck ===== */
:root{--pc-face:#fffaf1;--pc-edge:rgba(30,41,59,.2);--pc-ink:#1e293b}
html[data-theme="dark"]{--pc-face:#1a2540;--pc-edge:rgba(244,241,232,.26);--pc-ink:#f4f1e8}
.deck-ui{display:none}
.deck-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#recDeck.deck-on{display:block!important;gap:0!important;padding:1rem 0 2.6rem;touch-action:pan-y}
.pr-scene{position:relative;width:min(100% - 1.5rem,31rem);min-height:25rem;margin:0 auto;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y}
.pr-scene.grabbing{cursor:grabbing}
.pr-scene:focus-visible{outline:2px solid var(--accent);outline-offset:10px;border-radius:1.4rem}
.pr-stage{position:absolute;inset:0}

/* a face of the prism */
#recDeck.deck-on .pr-stage>.pc{
  position:absolute!important;left:0;right:0;top:0;bottom:0;margin:0!important;
  display:flex!important;flex-direction:column;justify-content:space-between;overflow:hidden;
  padding:3rem 2.4rem 2.6rem!important;border-radius:1.4rem!important;
  border:1px solid var(--pc-edge)!important;color:var(--pc-ink);
  background:radial-gradient(120% 70% at 100% 0%,rgba(184,92,56,.16),transparent 60%),var(--pc-face)!important;
  outline:1px solid var(--pc-edge);outline-offset:-.6rem;
  box-shadow:0 30px 50px -28px rgba(0,0,0,.55)!important;
  transform-origin:50% 100%;will-change:transform;
  filter:none!important;transition:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
#recDeck.deck-on .pr-stage>.pc::before,#recDeck.deck-on .pr-stage>.pc::after{display:none!important}
/* big quote mark watermark */
#recDeck.deck-on .pr-stage>.pc>h3{position:relative;z-index:1;margin:0 0 1rem;font-family:'Cormorant Garamond',Georgia,serif;font-size:2rem;line-height:1.1;font-weight:600;font-style:italic}
#recDeck.deck-on .pr-stage>.pc>p{position:relative;z-index:1;margin:0 0 1.3rem;font-size:1rem;line-height:1.7}
#recDeck.deck-on .pr-stage>.pc>div{position:relative;z-index:1;border-top:1px dashed var(--pc-edge)!important;padding-top:.9rem}

/* cards: hidden until the shuffle starts, then fade in as the pile is cut */
#recDeck.deck-on .pr-scene .pr-stage>.pc{opacity:0!important;transition:opacity .3s ease!important}
#recDeck.deck-on .pr-scene.shown .pr-stage>.pc{opacity:1!important}
/* a glint crosses whichever card has just landed on top */
.pr-sheen{position:absolute;top:-10%;bottom:-10%;left:0;width:38%;z-index:3;opacity:0;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:translateX(-160%) skewX(-16deg)}
#recDeck.deck-on .pr-stage>.pc.is-front .pr-sheen{animation:prSweep 1.1s ease .25s 1 both}
@keyframes prSweep{from{opacity:1;transform:translateX(-160%) skewX(-16deg)}to{opacity:1;transform:translateX(420%) skewX(-16deg)}}

/* the text settles in a beat after its face lands in front */
#recDeck.deck-on .pr-stage>.pc>h3,
#recDeck.deck-on .pr-stage>.pc>p,
#recDeck.deck-on .pr-stage>.pc>div{opacity:.35;transform:translateY(12px);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.9,.25,1)}
#recDeck.deck-on .pr-stage>.pc.is-front>h3{opacity:1;transform:none;transition-delay:.12s}
#recDeck.deck-on .pr-stage>.pc.is-front>p{opacity:1;transform:none;transition-delay:.24s}
#recDeck.deck-on .pr-stage>.pc.is-front>div{opacity:1;transform:none;transition-delay:.36s}

/* controls */
#recDeckUi.deck-on{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem .9rem}
.deck-btn{width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer;transition:background .25s,color .25s,transform .25s}
.deck-btn:hover{background:var(--accent);color:#fff}
.deck-btn:active{transform:scale(.92)}
.deck-btn:focus-visible,.deck-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.deck-dots{display:flex;align-items:center}
.deck-dot{width:1.7rem;height:2.75rem;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer}
.deck-dot::before{content:"";width:.5rem;height:.5rem;border-radius:999px;background:rgba(184,92,56,.32);transition:width .35s cubic-bezier(.22,1.15,.36,1),background .3s}
.deck-dot[aria-current="true"]::before{width:1.4rem;background:var(--accent)}
.deck-hint{flex-basis:100%;margin:.2rem 0 0;text-align:center;font-size:.85rem;color:var(--muted);transition:opacity .6s ease}
#recDeckUi.used .deck-hint{opacity:0}

@media (max-width:767px){
  #recDeck.deck-on{padding:.6rem 0 2.2rem}
  /* the tilted back cards stick out on the left, so the whole fan (not just the front card) is what gets centred */
  .pr-scene{width:calc(100% - 3rem);left:calc((100% - 3rem) * .095);min-height:0}
  #recDeck.deck-on .pr-stage>.pc{padding:1.7rem 1.25rem 1.4rem!important;border-radius:1.1rem!important;outline-offset:-.45rem}
  #recDeck.deck-on .pr-stage>.pc>h3{font-size:1.4rem;line-height:1.12;margin-bottom:.7rem}
  #recDeck.deck-on .pr-stage>.pc>p{font-size:.84rem;line-height:1.5;margin-bottom:.9rem}
  #recDeck.deck-on .pr-stage>.pc>div{padding-top:.65rem}
  #recDeck.deck-on .pr-stage>.pc>div>div:first-child{font-size:.95rem}
  #recDeck.deck-on .pr-stage>.pc>div>div+div{font-size:.72rem}
}
@media (max-width:767px) and (max-height:700px){
  #recDeck.deck-on .pr-stage>.pc{padding:1.4rem 1.1rem 1.2rem!important}
  #recDeck.deck-on .pr-stage>.pc>h3{font-size:1.25rem}
  #recDeck.deck-on .pr-stage>.pc>p{font-size:.79rem;line-height:1.45}
}

@media (prefers-reduced-motion:reduce){
  #recDeck.deck-on .pr-stage>.pc>h3,#recDeck.deck-on .pr-stage>.pc>p,#recDeck.deck-on .pr-stage>.pc>div{transform:none;transition:opacity .3s}
  .pr-sheen{display:none}
  #recDeck.deck-on .pr-scene .pr-stage>.pc{transition:opacity .2s!important}
}
/* ---- left-hand list ---- */
.rec-list{display:none}
.rec-eyebrow{display:flex;align-items:center;gap:.7rem;margin:0 0 .9rem;font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.rec-list-lead{margin:0 0 1.5rem;max-width:27rem;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.6rem;font-style:italic;line-height:1.35;color:var(--ink)}
.rec-list-lead::before{content:"\201C";display:block;height:2.2rem;font-size:4.4rem;font-style:normal;line-height:.9;color:var(--accent);opacity:.85}
.rec-list button{position:relative;display:flex;align-items:center;gap:1rem;text-align:left;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:1rem;background:var(--panel);cursor:pointer;color:var(--muted);transition:transform .3s cubic-bezier(.22,1.15,.36,1),border-color .25s,box-shadow .3s,color .25s}
.rec-list button:hover{transform:translateX(6px);color:var(--ink);border-color:var(--accent)}
.rec-list button[aria-current="true"]{color:var(--ink);border-color:var(--accent);box-shadow:0 14px 30px -16px rgba(184,92,56,.55),inset 3px 0 0 var(--accent)}
.rec-list button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rl-av{flex:none;width:2.9rem;height:2.9rem;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2,#d98d6c));color:#fff;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.5rem;font-weight:700;line-height:1;opacity:.6;transition:opacity .3s}
.rec-list button:hover .rl-av,.rec-list button[aria-current="true"] .rl-av{opacity:1}
.rec-list button[aria-current="true"] .rl-av{box-shadow:0 0 0 3px var(--panel),0 0 0 4.5px var(--accent)}
.rl-t{flex:1;min-width:0}
.rl-t b{display:block;font-size:1.05rem;font-weight:600}
.rl-t small{display:block;margin-top:.2rem;font-size:.85rem;line-height:1.4}
.rl-go{flex:none;color:var(--accent);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.rec-list button:hover .rl-go,.rec-list button[aria-current="true"] .rl-go{opacity:1;transform:none}
@media (min-width:1024px){
  #recWrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:4.5rem;align-items:center}
  #recWrap>h2{grid-column:1/-1;margin-bottom:1.5rem}
  #recWrap>.rec-list{display:flex;flex-direction:column;gap:.7rem;grid-column:1;grid-row:2/4;align-self:start;padding-top:.4rem}
  #recWrap>#recDeck{grid-column:2;grid-row:2}
  #recWrap>#recDeckUi{grid-column:2;grid-row:3}
}
#recommendations .reveal{filter:none!important}

/* ---- light deck for phones/tablets: fixed positions, CSS transitions only (GPU-friendly transform + opacity) ---- */
#recDeck.deck-on .pr-scene.pr-lite .pr-stage>.pc{transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s ease!important;
  transform:translateY(42px) scale(.94);opacity:0!important;z-index:0;box-shadow:0 18px 30px -22px rgba(0,0,0,.5)!important}
/* entrance on scroll-in: the pile rises and fans open back-to-front, then the front card's text settles in */
#recDeck.deck-on .pr-scene.pr-lite.entering .pr-stage>.pc{transition:transform .95s cubic-bezier(.2,.9,.25,1) var(--ed,0s),opacity .6s ease var(--ed,0s)!important}
#recDeck.deck-on .pr-scene.pr-lite.entering .pr-stage>.pc[data-pos="1"]{--ed:.12s}
#recDeck.deck-on .pr-scene.pr-lite.entering .pr-stage>.pc[data-pos="0"]{--ed:.24s}
#recDeck.deck-on .pr-scene.pr-lite:not(.shown) .pr-stage>.pc.is-front>h3,
#recDeck.deck-on .pr-scene.pr-lite:not(.shown) .pr-stage>.pc.is-front>p,
#recDeck.deck-on .pr-scene.pr-lite:not(.shown) .pr-stage>.pc.is-front>div{opacity:0;transform:translateY(12px)}
#recDeck.deck-on .pr-scene.pr-lite.entering .pr-stage>.pc.is-front>h3{transition-delay:.6s}
#recDeck.deck-on .pr-scene.pr-lite.entering .pr-stage>.pc.is-front>p{transition-delay:.72s}
#recDeck.deck-on .pr-scene.pr-lite.entering .pr-stage>.pc.is-front>div{transition-delay:.84s}
#recDeck.deck-on .pr-scene.pr-lite.shown .pr-stage>.pc[data-pos="0"]{transform:none;opacity:1!important;z-index:3}
#recDeck.deck-on .pr-scene.pr-lite.shown .pr-stage>.pc[data-pos="1"]{transform:rotate(-4deg) scale(.96);opacity:1!important;z-index:2}
#recDeck.deck-on .pr-scene.pr-lite.shown .pr-stage>.pc[data-pos="2"]{transform:rotate(-8deg) scale(.92);opacity:1!important;z-index:1}
#recDeck.deck-on .pr-scene.pr-lite.shown .pr-stage>.pc[data-pos="out-r"]{transform:translateX(115%) rotate(14deg);opacity:0!important;z-index:4}
#recDeck.deck-on .pr-scene.pr-lite.shown .pr-stage>.pc[data-pos="out-l"]{transform:translateX(-115%) rotate(-14deg);opacity:0!important;z-index:4}
#recDeck.deck-on .pr-scene.pr-lite.shown .pr-stage>.pc[data-pos="under"]{transform:translateX(-60%) rotate(-10deg) scale(.94);opacity:1!important;z-index:0}
#recDeck.deck-on .pr-scene.pr-lite .pr-stage>.pc.pr-drag{transition:none!important}
.pr-lite .pr-sheen{display:none}


/* ==========================================================================
   20. Skills
   ========================================================================== */
/* ===== Skills: Core Expertise as an editorial index + Key Strengths as three arches ===== */
#skills .sk-eye{display:block;margin-bottom:.7rem;font-size:.74rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
#skills .reveal{filter:none!important}

/* --- Core Expertise: numbered rows; a dark band sweeps across on hover --- */
.ex-list{border-bottom:1px solid var(--line)}
.ex-row{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.2rem;padding:1.35rem 1.1rem;overflow:hidden;isolation:isolate;border-top:1px solid var(--line)}
.ex-row::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(184,92,56,.14),rgba(184,92,56,.03) 75%,transparent);
  box-shadow:inset 3px 0 0 var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.7,0,.2,1)}
.ex-row:hover::before{transform:scaleX(1)}
.ex-n{min-width:3rem;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;font-size:2.7rem;line-height:1;color:var(--accent);transition:transform .5s cubic-bezier(.2,1.4,.4,1)}
.ex-body{min-width:0;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ex-row h3{margin:0;font-size:1.15rem;line-height:1.3;color:var(--ink);transition:color .35s .1s}
.ex-sub{margin:.3rem 0 0;font-size:.86rem;line-height:1.5;color:var(--muted);transition:color .35s .1s}
.ex-sub b{margin:0 .45rem;font-weight:700;color:var(--accent)}
.ex-ico{width:2.8rem;height:2.8rem;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);color:var(--accent);
  transition:background .4s,border-color .4s,color .4s,transform .5s cubic-bezier(.2,1.4,.4,1)}
.ex-row:hover .ex-n{transform:translateX(6px) scale(1.08)}
.ex-row:hover .ex-body{transform:translateX(8px)}
.ex-row:hover h3{color:var(--accent)}
.ex-row:hover .ex-ico{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(-12deg) scale(1.08)}
.sk-js .ex-list:not(.in) .ex-row{opacity:0}
.ex-list.in .ex-row{animation:exIn .75s cubic-bezier(.2,.8,.2,1) calc(var(--d,0) * .11s) backwards}
@keyframes exIn{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
@media(max-width:639px){.ex-row{gap:.9rem;padding:1.15rem .6rem}.ex-n{min-width:2.3rem;font-size:2.2rem}.ex-ico{width:2.4rem;height:2.4rem;font-size:.85rem}}

/* --- Key Strengths: arch-topped panels that fill with terracotta from the bottom --- */
.st-arches{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.st-arches{grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;align-items:start}.st-arch:nth-child(odd){margin-top:2.2rem}}
.st-arch{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:21rem;padding:2.8rem .85rem 1.5rem;
  border-radius:999px 999px 1.3rem 1.3rem;border:1px solid var(--line);background:var(--panel);outline:1px solid var(--line);outline-offset:-.55rem;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s,outline-color .4s}
.st-arch::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--accent2),var(--accent) 55%,#9c4628);transform:translateY(101%);transition:transform .65s cubic-bezier(.7,0,.2,1)}
.st-arch::after{content:"✦";position:absolute;top:1.15rem;left:50%;translate:-50% 0;font-size:.8rem;line-height:1;color:var(--accent2);opacity:.7;transition:color .4s,scale .5s}
.st-arch:hover{transform:translateY(-8px);box-shadow:0 30px 50px -28px rgba(184,92,56,.75);outline-color:rgba(255,255,255,.4)}
.st-arch:hover::before{transform:none}
.st-arch:hover::after{color:#fff;scale:1.6;opacity:1}
.st-ico{width:3.4rem;height:3.4rem;display:grid;place-items:center;margin:.4rem 0 1.3rem;border-radius:50%;font-size:1.15rem;color:var(--accent);background:rgba(184,92,56,.1);transition:background .4s,color .4s}
.st-arch{container-type:inline-size}
/* title scales with the arch width so long words ("Communication") never get split */
.st-arch h3{margin:0 0 .75rem;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;font-size:1.4rem;font-size:clamp(1.15rem,12.5cqi,1.75rem);line-height:1.05;
  overflow-wrap:normal;word-break:normal;hyphens:manual;color:var(--ink);transition:color .35s .1s}
.st-arch p{margin:0;font-size:.86rem;line-height:1.6;color:var(--muted);transition:color .35s .1s}
.st-roman{display:flex;align-items:center;gap:.6rem;margin-top:auto;padding-top:1.3rem;font-family:'Cormorant Garamond',Georgia,serif;font-size:1rem;font-weight:600;letter-spacing:.2em;color:var(--accent);transition:color .35s .1s}
.st-roman::before,.st-roman::after{content:"";width:1.3rem;height:1px;background:currentColor;opacity:.5}
.st-arch:hover .st-ico{background:rgba(255,255,255,.2);color:#fff}
.st-arch:hover h3,.st-arch:hover p,.st-arch:hover .st-roman{color:#fff}
.sk-js .st-arches:not(.in) .st-arch{opacity:0}
.st-arches.in .st-arch{animation:stIn .9s cubic-bezier(.2,1,.3,1) calc(var(--d,0) * .14s) backwards}
@keyframes stIn{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
/* phones: compact side-by-side cards; the arch shape lives on in the small icon badge */
@media(max-width:639px){
  .st-arches{gap:.8rem}
  .st-arch{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;align-items:start;text-align:left;min-height:0;
padding:1.2rem 1.1rem 1.25rem 1rem;border-radius:1.2rem;outline-offset:-.4rem}
  .st-arch::after{display:none}
  .st-arch:hover{transform:translateY(-3px)}
  .st-ico{grid-row:1/3;width:3.1rem;height:3.9rem;margin:0;border-radius:999px 999px .7rem .7rem;font-size:1.05rem}
  .st-arch h3{grid-column:2;margin:.15rem 0 .35rem;padding-right:2.2rem;font-size:1.5rem}
  .st-arch p{grid-column:2;font-size:.86rem;line-height:1.55}
  .st-roman{position:absolute;top:1rem;right:1.1rem;margin:0;padding:0;font-size:.85rem;letter-spacing:.1em}
  .st-roman::before,.st-roman::after{display:none}
}

/* typing speed: a small stat pill under the arches */
.st-stat{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem .6rem;width:fit-content;max-width:100%;margin:1.6rem auto 0;padding:.6rem 1.1rem;
  border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:.85rem;color:var(--muted)}
.st-stat i{color:var(--accent)}
.st-stat b{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:1.2rem;font-weight:700;line-height:1;color:var(--ink)}
.st-stat em{font-style:normal;color:var(--accent)}

/* education: two compact cards under the About card */
.edu{margin-top:2.6rem}
.edu .jt-eye{margin-bottom:1rem}
.edu-grid{display:grid;grid-template-columns:1fr;gap:1rem;text-align:left}
@media(min-width:768px){.edu-grid{grid-template-columns:1fr 1fr}}
.edu-card{display:flex;align-items:flex-start;gap:1rem;padding:1.3rem 1.4rem;border:1px solid var(--line);border-radius:1.25rem;background:var(--panel);transition:border-color .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.edu-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.edu-ico{flex:none;width:2.8rem;height:2.8rem;display:grid;place-items:center;border-radius:.8rem;color:var(--accent);background:rgba(184,92,56,.1)}
.edu-date{display:block;margin-bottom:.3rem;font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.edu-title{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;font-size:1.45rem;line-height:1.15;color:var(--ink)}
.edu-school{margin:.35rem 0 0;font-size:.88rem;line-height:1.5;color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  .ex-list.in .ex-row,.st-arches.in .st-arch{animation:none}
}