{"id":153,"date":"2026-07-29T14:38:47","date_gmt":"2026-07-29T14:38:47","guid":{"rendered":"https:\/\/demowebdesign.live\/Philip\/?page_id=153"},"modified":"2026-07-29T21:51:28","modified_gmt":"2026-07-29T21:51:28","slug":"about","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/Philip\/index.php\/about\/","title":{"rendered":"ABOUT"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"153\" class=\"elementor elementor-153\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3a597ea e-con-full e-flex e-con e-parent\" data-id=\"3a597ea\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-da8353c elementor-widget elementor-widget-html\" data-id=\"da8353c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Jost:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n  :root{\r\n    --esj-ink:         #0a0c11;\r\n    --esj-navy:         #12161f;\r\n    --esj-charcoal:     #15181f;\r\n    --esj-panel:        #1a1e27;\r\n    --esj-gold:         #c9a24d;\r\n    --esj-gold-soft:    #e8cd8a;\r\n    --esj-gold-deep:    #7d611f;\r\n    --esj-cream:        #f5f0e6;\r\n    --esj-cream-dim:    rgba(245,240,230,0.66);\r\n    --esj-cream-faint:  rgba(245,240,230,0.38);\r\n    --esj-hairline:     rgba(201,162,77,0.24);\r\n    --esj-hairline-soft:rgba(201,162,77,0.12);\r\n\r\n    --font-display: 'Playfair Display', serif;\r\n    --font-serif:   'Cormorant Garamond', serif;\r\n    --font-sans:    'Jost', sans-serif;\r\n  }\r\n\r\n  *{ margin:0; padding:0; box-sizing:border-box; }\r\n\r\n  body{\r\n    background: var(--esj-ink);\r\n    color: var(--esj-cream);\r\n    font-family: var(--font-sans);\r\n    -webkit-font-smoothing: antialiased;\r\n    overflow-x: hidden;\r\n  }\r\n  a{ color:inherit; text-decoration:none; }\r\n  img{ display:block; max-width:100%; }\r\n\r\n  .esj-wrap{ max-width: 1360px; margin: 0 auto; }\r\n\r\n  .esj-eyebrow{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:12px;\r\n    font-family: var(--font-sans);\r\n    font-size: 11.5px;\r\n    letter-spacing: 4px;\r\n    text-transform: uppercase;\r\n    color: var(--esj-gold-soft);\r\n    font-weight: 500;\r\n  }\r\n  .esj-eyebrow::before{ content:\"\"; width:26px; height:1px; background:var(--esj-gold); display:inline-block; }\r\n\r\n  \/* ============================================================\r\n     shared: corner-bracket \"citation frame\" \u2014 signature motif\r\n     ============================================================ *\/\r\n  .esj-bracket-frame{ position:relative; }\r\n  .esj-bracket-frame::before,\r\n  .esj-bracket-frame::after,\r\n  .esj-bracket-frame .esj-bk-tr,\r\n  .esj-bracket-frame .esj-bk-bl{\r\n    content:\"\";\r\n    position:absolute;\r\n    width: 34px; height: 34px;\r\n    border: 1.5px solid var(--esj-gold);\r\n    z-index: 4;\r\n    transition: width .5s ease, height .5s ease, opacity .5s ease;\r\n  }\r\n  .esj-bracket-frame::before{ top:-12px; left:-12px; border-right:none; border-bottom:none; }\r\n  .esj-bracket-frame::after{ bottom:-12px; right:-12px; border-left:none; border-top:none; }\r\n  .esj-bracket-frame .esj-bk-tr{ top:-12px; right:-12px; border-left:none; border-bottom:none; }\r\n  .esj-bracket-frame .esj-bk-bl{ bottom:-12px; left:-12px; border-right:none; border-top:none; }\r\n  .esj-bracket-frame:hover::before,\r\n  .esj-bracket-frame:hover::after,\r\n  .esj-bracket-frame:hover .esj-bk-tr,\r\n  .esj-bracket-frame:hover .esj-bk-bl{ width:42px; height:42px; }\r\n\r\n  \/* film grain overlay, reused across sections *\/\r\n  .esj-grain{\r\n    position:absolute; inset:0;\r\n    z-index:1;\r\n    opacity:0.05;\r\n    pointer-events:none;\r\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n  }\r\n\r\n  \/* ============================================================\r\n     SECTION 1 \u2014 ABOUT HERO  (centered, bg image + overlay)\r\n     ============================================================ *\/\r\n  .esj-hero{\r\n    position: relative;\r\n    padding-top: 120px;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content: center;\r\n    overflow:hidden;\r\n    background: \r\n      linear-gradient(180deg, rgba(10,12,17,0.88) 0%, rgba(10,12,17,0.72) 50%, rgba(10,12,17,0.92) 100%),\r\n      url('https:\/\/demowebdesign.live\/Philip\/wp-content\/uploads\/2026\/07\/wmremove-transformed-2.png') center\/cover no-repeat;\r\n  }\r\n  .esj-hero::before{\r\n    \/* ambient gold glow, upper right *\/\r\n    content:\"\";\r\n    position:absolute;\r\n    top:-20%; right:-10%;\r\n    width:60%; height:80%;\r\n    background: radial-gradient(circle, rgba(201,162,77,0.16), transparent 65%);\r\n    z-index:1;\r\n  }\r\n  .esj-hero-grid{\r\n    position:relative;\r\n    z-index:2;\r\n    width:100%;\r\n    max-width: 1360px;\r\n    margin: 0 auto;\r\n    padding: 130px 6vw 90px;\r\n    display:flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    text-align: center;\r\n  }\r\n\r\n  .esj-hero-copy{ \r\n    animation: esjFadeUp 1s ease 0.15s both; \r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    text-align: center;\r\n    max-width: 800px;\r\n  }\r\n  .esj-hero-copy .esj-eyebrow{ margin-bottom: 22px; }\r\n\r\n  .esj-hero-copy h1{\r\n    font-family: var(--font-display);\r\n    font-weight: 700;\r\n    font-size: clamp(2.7rem, 4.6vw, 4.4rem);\r\n    line-height: 1.08;\r\n    letter-spacing: -0.5px;\r\n    color: var(--esj-cream);\r\n    margin-bottom: 26px;\r\n    text-shadow: 0 2px 20px rgba(0,0,0,0.5);\r\n  }\r\n  .esj-hero-copy h1 em{ font-style:italic; font-weight:500; color: var(--esj-gold-soft); }\r\n\r\n  .esj-hero-copy .esj-subtitle{\r\n    font-family: var(--font-serif);\r\n    font-style: italic;\r\n    font-size: clamp(1.15rem, 1.6vw, 1.4rem);\r\n    color: var(--esj-cream-dim);\r\n    line-height: 1.55;\r\n    max-width: 520px;\r\n    padding-left: 22px;\r\n    border-left: 2px solid var(--esj-gold);\r\n    margin-bottom: 26px;\r\n    text-align: left;\r\n  }\r\n\r\n  .esj-hero-copy .esj-body{\r\n    font-weight: 300;\r\n    font-size: 0.98rem;\r\n    line-height: 1.9;\r\n    color: var(--esj-cream-dim);\r\n    max-width: 600px;\r\n    margin-bottom: 40px;\r\n    text-shadow: 0 1px 10px rgba(0,0,0,0.4);\r\n  }\r\n\r\n  .esj-hero-actions{ \r\n    display:flex; \r\n    align-items:center; \r\n    justify-content: center;\r\n    gap:34px; \r\n    flex-wrap:wrap; \r\n    margin-bottom:56px; \r\n  }\r\n\r\n  .esj-cta{\r\n    position: relative;\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:10px;\r\n    padding: 16px 38px;\r\n    font-size: 12px;\r\n    letter-spacing: 3px;\r\n    text-decoration: none !important;\r\n    text-transform: uppercase;\r\n    color: var(--esj-ink);\r\n    background: linear-gradient(120deg, var(--esj-gold-soft), var(--esj-gold));\r\n    font-weight: 600;\r\n    overflow:hidden;\r\n    isolation:isolate;\r\n    transition: letter-spacing .4s ease, transform .4s ease, box-shadow .4s ease;\r\n    cursor:pointer;\r\n  }\r\n  .esj-cta::before{\r\n    content:\"\"; position:absolute; inset:0;\r\n    background: var(--esj-cream);\r\n    transform: translateX(-101%);\r\n    transition: transform .45s ease;\r\n    z-index:-1;\r\n  }\r\n  .esj-cta:hover{ letter-spacing:4px; transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(201,162,77,0.55); }\r\n  .esj-cta:hover::before{ transform: translateX(0); }\r\n\r\n  .esj-cta-ghost{\r\n    position:relative;\r\n    font-size: 12px;\r\n    letter-spacing: 2.5px;\r\n    text-transform: uppercase;\r\n    color: var(--esj-cream-dim);\r\n    padding-bottom: 4px;\r\n    transition: color .35s ease;\r\n    text-decoration: none !important;\r\n  }\r\n  .esj-cta-ghost::after{\r\n    content:\"\"; position:absolute; left:0; bottom:0; width:100%; height:1px;\r\n    background: var(--esj-gold);\r\n    transform: scaleX(0.25); transform-origin:left;\r\n    transition: transform .4s ease;\r\n  }\r\n  .esj-cta-ghost:hover{ color: var(--esj-gold-soft); }\r\n  .esj-cta-ghost:hover::after{ transform: scaleX(1); }\r\n\r\n  .esj-stat-row{\r\n    display:flex;\r\n    justify-content: center;\r\n    gap: 46px;\r\n    padding-top: 34px;\r\n    border-top: 1px solid var(--esj-hairline-soft);\r\n    max-width: 560px;\r\n    width: 100%;\r\n  }\r\n  .esj-stat-row .esj-stat b{\r\n    display:block;\r\n    font-family: var(--font-display);\r\n    font-size: 1.9rem;\r\n    font-weight:700;\r\n    color: var(--esj-gold-soft);\r\n    line-height: 1;\r\n    margin-bottom: 6px;\r\n  }\r\n  .esj-stat-row .esj-stat span{\r\n    font-size: 10.5px;\r\n    letter-spacing: 1.6px;\r\n    text-transform: uppercase;\r\n    color: var(--esj-cream-faint);\r\n  }\r\n\r\n  .esj-scroll-indicator{\r\n    position:absolute;\r\n    bottom: 30px; left:50%;\r\n    transform: translateX(-50%);\r\n    z-index:3;\r\n    display:flex;\r\n    align-items:center;\r\n    gap:14px;\r\n    color: var(--esj-gold-soft);\r\n    font-size: 10px;\r\n    letter-spacing: 3px;\r\n    text-transform: uppercase;\r\n    animation: esjFadeIn 1.4s ease 1.1s both;\r\n  }\r\n  .esj-scroll-indicator .esj-mouse{ width:20px; height:32px; border:1px solid var(--esj-gold-dim, var(--esj-hairline)); border-radius:12px; position:relative; }\r\n  .esj-scroll-indicator .esj-mouse::after{\r\n    content:\"\"; position:absolute; top:6px; left:50%; width:3px; height:6px;\r\n    background: var(--esj-gold); border-radius:2px; transform:translateX(-50%);\r\n    animation: esjScrollDot 1.8s ease infinite;\r\n  }\r\n  @keyframes esjScrollDot{ 0%{opacity:1;top:6px;} 70%{opacity:0;top:16px;} 100%{opacity:0;top:6px;} }\r\n\r\n  .esj-particle{\r\n    position:absolute; border-radius:50%;\r\n    background: radial-gradient(circle, var(--esj-gold-soft), transparent 70%);\r\n    opacity:0.5; z-index:1; animation: esjFloat linear infinite; pointer-events:none;\r\n  }\r\n  @keyframes esjFloat{\r\n    0%{ transform: translateY(0); opacity:0; }\r\n    10%{ opacity:0.55; } 90%{ opacity:0.25; }\r\n    100%{ transform: translateY(-90vh); opacity:0; }\r\n  }\r\n  @keyframes esjFadeUp{ from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:translateY(0);} }\r\n  @keyframes esjFadeIn{ from{opacity:0;} to{opacity:1;} }\r\n\r\n  @media (max-width: 980px){\r\n    .esj-hero-grid{ padding-top:110px; }\r\n    .esj-scroll-indicator{ display:none; }\r\n  }\r\n\r\n  \/* ============================================================\r\n     SECTION 2 \u2014 INTRODUCTION  (asymmetric, credentials, stats)\r\n     ============================================================ *\/\r\n  .esj-intro{\r\n    position:relative;\r\n    background: #161616 !important;\r\n    padding: 150px 6vw 150px;\r\n    overflow:hidden;\r\n  }\r\n  .esj-intro-grid{\r\n    position:relative; z-index:2;\r\n    max-width:1360px; margin:0 auto;\r\n    display:grid;\r\n    grid-template-columns: 0.62fr 1.38fr;\r\n    gap: 90px;\r\n  }\r\n\r\n  .esj-intro-side{ position:sticky; top:120px; align-self:start; }\r\n  .esj-intro-side .esj-eyebrow{ margin-bottom:26px; }\r\n\r\n  .esj-intro-thumb{ position:relative; width: 100%; max-width:280px; margin-bottom: 40px; }\r\n  .esj-intro-thumb img{\r\n    width:100%; aspect-ratio: 4\/5; object-fit:cover;\r\n    filter: grayscale(0.2) contrast(1.05);\r\n  }\r\n  .esj-intro-thumb .esj-thumb-tag{\r\n    position:absolute; bottom:-16px; right:-16px;\r\n    background: var(--esj-gold);\r\n    color: var(--esj-ink);\r\n    font-family: var(--font-sans);\r\n    font-size:10px; letter-spacing:1.5px; text-transform:uppercase; font-weight:600;\r\n    padding: 10px 16px;\r\n  }\r\n\r\n  .esj-credentials{ display:flex; flex-direction:column; gap:14px; }\r\n  .esj-credentials .esj-cred{\r\n    display:flex; align-items:center; gap:12px;\r\n    font-size:12.5px; letter-spacing:1px; color: var(--esj-cream-dim);\r\n    padding-bottom:12px;\r\n    border-bottom: 1px solid var(--esj-hairline-soft);\r\n    transition: color .35s ease, border-color .35s ease, padding-left .35s ease;\r\n  }\r\n  .esj-credentials .esj-cred::before{ content:\"\"; width:6px; height:6px; background:var(--esj-gold); flex-shrink:0; transform:rotate(45deg); }\r\n  .esj-credentials .esj-cred:hover{ color: var(--esj-gold-soft); border-color: var(--esj-hairline); padding-left:6px; }\r\n\r\n  .esj-intro-main h2{\r\n    font-family: var(--font-display);\r\n    font-weight:700;\r\n    font-size: clamp(2.3rem, 3.4vw, 3.3rem);\r\n    line-height:1.2;\r\n    color: var(--esj-cream);\r\n    max-width: 780px;\r\n    margin-bottom: 44px;\r\n  }\r\n  .esj-intro-main h2 em{ color:var(--esj-gold-soft); font-style:italic; font-weight:500; }\r\n\r\n  .esj-intro-body{\r\n    display:grid;\r\n    grid-template-columns: 1.2fr 1fr;\r\n    gap: 60px;\r\n    align-items:start;\r\n  }\r\n\r\n  .esj-intro-text{\r\n    font-weight:300; font-size:1.02rem; line-height:2; color:var(--esj-cream-dim);\r\n    display:flex; flex-direction:column; gap:26px;\r\n  }\r\n  .esj-intro-text p:first-child::first-letter{\r\n    font-family: var(--font-display); font-size:3.4rem; color:var(--esj-gold-soft);\r\n    float:left; line-height:0.75; padding-right:10px; padding-top:8px;\r\n  }\r\n\r\n  .esj-stat-strip{\r\n    display:grid; grid-template-columns: repeat(3,1fr);\r\n    gap: 8px; margin-top: 6px;\r\n  }\r\n  .esj-stat-strip .esj-stat-block{\r\n    padding: 22px 18px;\r\n    border: 1px solid var(--esj-hairline-soft);\r\n    text-align:center;\r\n    transition: border-color .4s ease, transform .4s ease, background .4s ease;\r\n  }\r\n  .esj-stat-strip .esj-stat-block:hover{ border-color: var(--esj-hairline); transform: translateY(-6px); background: rgba(201,162,77,0.045); }\r\n  .esj-stat-strip .esj-stat-block b{\r\n    display:block; font-family:var(--font-display); font-size:1.7rem; color:var(--esj-gold-soft); margin-bottom:6px;\r\n  }\r\n  .esj-stat-strip .esj-stat-block span{ font-size:9.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--esj-cream-faint); }\r\n\r\n  .esj-quote-card{\r\n    position:relative;\r\n    padding: 44px 40px 38px;\r\n    background: rgba(245,240,230,0.035);\r\n    border: 1px solid var(--esj-hairline);\r\n    overflow:hidden;\r\n    transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, background .5s ease;\r\n  }\r\n  .esj-quote-card::before{\r\n    content:\"\\201C\";\r\n    position:absolute; top:-30px; right:6px;\r\n    font-family: var(--font-display);\r\n    font-size: 9rem;\r\n    color: var(--esj-gold);\r\n    opacity:0.08;\r\n    line-height:1;\r\n    z-index:0;\r\n  }\r\n  .esj-quote-card:hover{\r\n    transform: translateY(-10px);\r\n    background: rgba(245,240,230,0.06);\r\n    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);\r\n  }\r\n  .esj-quote-card p{\r\n    position:relative; z-index:1;\r\n    font-family: var(--font-serif); font-style:italic;\r\n    font-size:1.35rem; line-height:1.55; color:var(--esj-cream);\r\n    margin-bottom: 20px;\r\n  }\r\n  .esj-quote-card span{\r\n    position:relative; z-index:1;\r\n    font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--esj-gold-soft);\r\n  }\r\n\r\n  @media (max-width: 1080px){\r\n    .esj-intro-grid{ grid-template-columns:1fr; gap:50px; }\r\n    .esj-intro-side{ position:static; display:flex; align-items:center; gap:40px; }\r\n    .esj-intro-thumb{ margin-bottom:0; }\r\n    .esj-intro-body{ grid-template-columns:1fr; }\r\n  }\r\n  @media (max-width:640px){\r\n    .esj-intro-side{ flex-direction:column; align-items:flex-start; }\r\n    .esj-stat-strip{ grid-template-columns:1fr 1fr; }\r\n  }\r\n\r\n  \/* ============================================================\r\n     SECTION 3 \u2014 CHILDHOOD  (image collage + connected timeline)\r\n     ============================================================ *\/\r\n    .esj-childhood{\r\n    position:relative;\r\n    background: \r\n      linear-gradient(180deg, rgba(10,12,17,0.92) 0%, rgba(10,12,17,0.78) 50%, rgba(10,12,17,0.92) 100%),\r\n      url('https:\/\/images.unsplash.com\/photo-1470252649378-9c29740c9fa8?q=80&w=2000&auto=format&fit=crop') center\/cover no-repeat fixed;\r\n    padding: 150px 6vw 160px;\r\n    overflow:hidden;\r\n  }\r\n  .esj-childhood::before{\r\n    content:\"\"; position:absolute; top:-10%; left:-10%; width:50%; height:60%;\r\n    background: radial-gradient(circle, rgba(201,162,77,0.12), transparent 65%);\r\n    z-index:0;\r\n  }\r\n\r\n  .esj-childhood-grid{\r\n    position:relative; z-index:2;\r\n    max-width:1360px; margin:0 auto;\r\n    display:grid;\r\n    grid-template-columns: 0.9fr 1.1fr;\r\n    gap: 80px;\r\n    align-items:start;\r\n  }\r\n\r\n  \/* collage column *\/\r\n  .esj-collage{ position:relative; height: 620px; }\r\n  .esj-collage-a, .esj-collage-b{\r\n    position:absolute;\r\n    overflow:hidden;\r\n  }\r\n  .esj-collage-a{ top:0; left:0; width:72%; height:64%; z-index:2; }\r\n  .esj-collage-b{ bottom:0; right:0; width:60%; height:52%; z-index:3; border: 6px solid var(--esj-ink); }\r\n  .esj-collage img{ width:100%; height:100%; object-fit:cover; filter: grayscale(0.25) contrast(1.05) brightness(0.92); transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .6s ease; }\r\n  .esj-collage-a:hover img, .esj-collage-b:hover img{ transform: scale(1.05); filter: grayscale(0) contrast(1.1) brightness(1); }\r\n  .esj-collage-caption{\r\n    position:absolute; bottom: 18px; left: -18px;\r\n    background: var(--esj-gold);\r\n    color: var(--esj-ink);\r\n    padding: 10px 18px;\r\n    font-size:10px; letter-spacing:1.6px; text-transform:uppercase; font-weight:600;\r\n    z-index:4;\r\n  }\r\n\r\n  \/* right column: header + timeline *\/\r\n  .esj-childhood-head{ margin-bottom: 50px; }\r\n  .esj-childhood-head .esj-eyebrow{ margin-bottom:20px; }\r\n  .esj-childhood-head h2{\r\n    font-family: var(--font-display); font-weight:700;\r\n    font-size: clamp(2.2rem, 3.6vw, 3.1rem);\r\n    color: var(--esj-cream);\r\n    margin-bottom: 20px;\r\n    text-shadow: 0 2px 12px rgba(0,0,0,0.5);\r\n  }\r\n  .esj-childhood-head h2 em{ color:var(--esj-gold-soft); font-style:italic; font-weight:500; }\r\n  .esj-childhood-head p{\r\n    font-family: var(--font-serif); font-size:1.15rem; line-height:1.7; color:var(--esj-cream-dim); max-width:560px;\r\n    text-shadow: 0 1px 8px rgba(0,0,0,0.4);\r\n  }\r\n\r\n  .esj-timeline{ position:relative; padding-left: 46px; }\r\n  .esj-timeline::before{\r\n    content:\"\"; position:absolute; top:8px; bottom:8px; left:9px; width:1px;\r\n    background: linear-gradient(180deg, var(--esj-gold), var(--esj-hairline-soft));\r\n  }\r\n\r\n  .esj-tl-item{\r\n    position:relative;\r\n    padding-bottom: 46px;\r\n  }\r\n  .esj-tl-item:last-child{ padding-bottom:0; }\r\n  .esj-tl-item::before{\r\n    content:\"\"; position:absolute; left:-46px; top:4px;\r\n    width:19px; height:19px; border-radius:50%;\r\n    border: 1.5px solid var(--esj-gold);\r\n    background: var(--esj-ink);\r\n    z-index:2;\r\n    transition: background .4s ease, transform .4s ease;\r\n  }\r\n  .esj-tl-item:hover::before{ background: var(--esj-gold); transform: scale(1.15); }\r\n\r\n  .esj-tl-item .esj-tl-index{\r\n    font-family: var(--font-display); font-size:0.8rem; letter-spacing:2px; color:var(--esj-gold); opacity:0.7; display:block; margin-bottom:8px;\r\n  }\r\n  .esj-tl-item h3{\r\n    font-family: var(--font-display); font-weight:600; font-size:1.4rem; color:var(--esj-cream); margin-bottom:10px;\r\n    transition: color .35s ease, transform .35s ease;\r\n    text-shadow: 0 1px 6px rgba(0,0,0,0.4);\r\n  }\r\n  .esj-tl-item p{\r\n    font-weight:300; font-size:0.94rem; line-height:1.8; color:var(--esj-cream-dim); max-width:480px;\r\n    text-shadow: 0 1px 6px rgba(0,0,0,0.4);\r\n  }\r\n  .esj-tl-item:hover h3{ color: var(--esj-gold-soft); transform: translateX(6px); }\r\n\r\n  @media (max-width: 1080px){\r\n    .esj-childhood-grid{ grid-template-columns:1fr; gap:60px; }\r\n    .esj-collage{ height: 420px; }\r\n  }\r\n  @media (max-width:560px){\r\n    .esj-timeline{ padding-left:36px; }\r\n    .esj-tl-item::before{ left:-36px; }\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce){\r\n    *{ animation:none !important; transition:none !important; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <!-- ============================================================\r\n       SECTION 1 \u2014 ABOUT HERO (centered, bg image + overlay)\r\n       ============================================================ -->\r\n  <section class=\"esj-hero\" id=\"esj-about-hero\">\r\n    <div class=\"esj-grain\"><\/div>\r\n\r\n    <div class=\"esj-hero-grid\">\r\n      <div class=\"esj-hero-copy\">\r\n        <span class=\"esj-eyebrow\">The Man Behind the Memoir<\/span>\r\n        <h1>The Story <em>Behind<\/em> the Pages<\/h1>\r\n        <!--<p class=\"esj-subtitle\">More than a memoir, this is the story of a life devoted to faith, family, medicine, military service, leadership, education and giving back.<\/p>-->\r\n        <p class=\"esj-body\">For over seven decades, Dr. Philip N. Eskew Jr. has documented the experiences that shaped his life. What began as a young teenager's diary eventually became a remarkable memoir preserving the lessons, relationships, challenges and blessings that defined an extraordinary journey.<\/p>\r\n\r\n        <div class=\"esj-hero-actions\">\r\n          <a href=\"#esj-introduction\" class=\"esj-cta\">Explore My Journey<\/a>\r\n          <a href=\"#esj-childhood\" class=\"esj-cta-ghost\">Read the First Chapter<\/a>\r\n        <\/div>\r\n\r\n        <!--<div class=\"esj-stat-row\">-->\r\n        <!--  <div class=\"esj-stat\"><b>70+<\/b><span>Years Documented<\/span><\/div>-->\r\n        <!--  <div class=\"esj-stat\"><b>1<\/b><span>Extraordinary Life<\/span><\/div>-->\r\n        <!--  <div class=\"esj-stat\"><b>3<\/b><span>Generations Touched<\/span><\/div>-->\r\n        <!--<\/div>-->\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"esj-scroll-indicator\"><span class=\"esj-mouse\"><\/span> Scroll<\/div>\r\n\r\n    <span class=\"esj-particle\" style=\"width:5px;height:5px; left:8%; top:20%; animation-duration:15s;\"><\/span>\r\n    <span class=\"esj-particle\" style=\"width:4px;height:4px; left:20%; top:60%; animation-duration:18s; animation-delay:2s;\"><\/span>\r\n    <span class=\"esj-particle\" style=\"width:6px;height:6px; left:46%; top:75%; animation-duration:16s; animation-delay:4s;\"><\/span>\r\n    <span class=\"esj-particle\" style=\"width:3px;height:3px; left:70%; top:15%; animation-duration:20s; animation-delay:1s;\"><\/span>\r\n    <span class=\"esj-particle\" style=\"width:5px;height:5px; left:90%; top:50%; animation-duration:17s; animation-delay:3s;\"><\/span>\r\n  <\/section>\r\n\r\n  <!-- ============================================================\r\n       SECTION 2 \u2014 INTRODUCTION\r\n       ============================================================ -->\r\n  <section class=\"esj-intro\" id=\"esj-introduction\">\r\n    <div class=\"esj-grain\"><\/div>\r\n    <div class=\"esj-intro-grid\">\r\n\r\n      <div class=\"esj-intro-side\">\r\n        <div class=\"esj-intro-thumb esj-bracket-frame\">\r\n          <span class=\"esj-bk-tr\"><\/span><span class=\"esj-bk-bl\"><\/span>\r\n          <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/Philip\/wp-content\/uploads\/2026\/07\/front-cover-Phill-scaled.jpg\" alt=\"Dr. Eskew\">\r\n          <span class=\"esj-thumb-tag\">Est. Sullivan, IN<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"esj-credentials\">\r\n          <span class=\"esj-cred\">Physician, M.D.<\/span>\r\n          <span class=\"esj-cred\">Brigadier General<\/span>\r\n          <span class=\"esj-cred\">Author &amp; Speaker<\/span>\r\n          <span class=\"esj-cred\">Community Leader<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"esj-intro-main\">\r\n        <span class=\"esj-eyebrow\">About the Author<\/span>\r\n        <h2 style=\"margin-top:22px;\">Meet Dr. Philip N. <em>Eskew<\/em> Jr., M.D.<\/h2>\r\n\r\n        <div class=\"esj-intro-body\">\r\n          <div class=\"esj-intro-text\">\r\n            <p>Raised in Sullivan, Indiana, Dr. Philip Eskew learned early that success was measured not only by personal achievement but by one's willingness to serve others. Guided by parents who valued education, humility and generosity, he pursued medicine while embracing opportunities to lead, teach and inspire throughout his life.<\/p>\r\n            <p>His memoir reflects not only professional accomplishments but also the everyday moments, friendships, family experiences and personal reflections that shaped the man behind the title.<\/p>\r\n\r\n            <div class=\"esj-stat-strip\">\r\n              <div class=\"esj-stat-block\"><b>60+<\/b><span>Pages of Entries<\/span><\/div>\r\n              <div class=\"esj-stat-block\"><b>5<\/b><span>Decades of Service<\/span><\/div>\r\n              <div class=\"esj-stat-block\"><b>2<\/b><span>Careers, One Purpose<\/span><\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"esj-quote-card\">\r\n            <p>My parents taught me that life's greatest privilege is giving back for all that has been given to us.<\/p>\r\n            <span>\u2014 Dr. Philip N. Eskew Jr., M.D.<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ============================================================\r\n       SECTION 3 \u2014 CHILDHOOD\r\n       ============================================================ -->\r\n  <section class=\"esj-childhood\" id=\"esj-childhood\">\r\n    <div class=\"esj-childhood-grid\">\r\n\r\n      <div class=\"esj-collage\">\r\n        <div class=\"esj-collage-a\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1500382017468-9049fed747ef?q=80&w=1200&auto=format&fit=crop\" alt=\"Indiana countryside sunrise\">\r\n        <\/div>\r\n        <div class=\"esj-collage-b\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1580582932707-520aed937b7b?q=80&w=1000&auto=format&fit=crop\" alt=\"Old schoolhouse\">\r\n        <\/div>\r\n        <span class=\"esj-collage-caption\">Chapter One \u2014 1948<\/span>\r\n      <\/div>\r\n\r\n      <div>\r\n        <div class=\"esj-childhood-head\">\r\n          <span class=\"esj-eyebrow\">Chapter One<\/span>\r\n          <h2>Where It All <em>Began<\/em><\/h2>\r\n          <p>Growing up in Sullivan, Indiana, Dr. Eskew discovered the importance of discipline, education and perseverance through family, school and athletics \u2014 the foundation for a lifetime of leadership, service and gratitude.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"esj-timeline\">\r\n          <div class=\"esj-tl-item\">\r\n            <span class=\"esj-tl-index\">I.<\/span>\r\n            <h3>Growing Up<\/h3>\r\n            <p>Life on the Indiana countryside shaped a boy's early sense of humility, family, and hard work \u2014 values that would carry him far beyond Sullivan.<\/p>\r\n          <\/div>\r\n          <div class=\"esj-tl-item\">\r\n            <span class=\"esj-tl-index\">II.<\/span>\r\n            <h3>School<\/h3>\r\n            <p>A quiet classroom discipline and a hunger for learning revealed the earliest signs of a mind bound for medicine and leadership.<\/p>\r\n          <\/div>\r\n          <div class=\"esj-tl-item\">\r\n            <span class=\"esj-tl-index\">III.<\/span>\r\n            <h3>Athletics<\/h3>\r\n            <p>On the field, he learned the lessons that no textbook could teach \u2014 resilience, teamwork, and the discipline of showing up every day.<\/p>\r\n          <\/div>\r\n          <div class=\"esj-tl-item\">\r\n            <span class=\"esj-tl-index\">IV.<\/span>\r\n            <h3>Community<\/h3>\r\n            <p>A small-town upbringing instilled a lifelong belief that true success is measured by how much you give back to those around you.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6f7f1df e-con-full e-flex e-con e-parent\" data-id=\"6f7f1df\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-638c99a elementor-widget elementor-widget-html\" data-id=\"638c99a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     SECTION 4 \u2014 CORE VALUES (Compass Rose Layout)\r\n     ============================================================ -->\r\n<section class=\"esj-values\" id=\"esj-values\">\r\n  <div class=\"esj-values-texture\"><\/div>\r\n  <div class=\"esj-values-inner\">\r\n    <div class=\"esj-values-head\">\r\n      <span class=\"esj-eyebrow\">Foundational Principles<\/span>\r\n      <h2>Values That Shaped <em>My Life<\/em><\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"esj-compass\">\r\n      <div class=\"esj-compass-axis esj-compass-axis--v\"><\/div>\r\n      <div class=\"esj-compass-axis esj-compass-axis--h\"><\/div>\r\n\r\n      <div class=\"esj-compass-dial\">\r\n        <div class=\"esj-compass-ring\"><\/div>\r\n        <div class=\"esj-compass-needle\"><\/div>\r\n        <span class=\"esj-compass-motto\">One compass,<br>four true bearings<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"esj-compass-point esj-compass-point--n\">\r\n        <span class=\"esj-compass-dir\">N<\/span>\r\n        <h3>Faith<\/h3>\r\n        <p>A quiet trust in something greater than oneself provided the compass for every decision, every hardship, and every moment of gratitude throughout the journey.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"esj-compass-point esj-compass-point--e\">\r\n        <span class=\"esj-compass-dir\">E<\/span>\r\n        <h3>Integrity<\/h3>\r\n        <p>Doing what is right, especially when no one is watching, became the unshakable foundation upon which a life of medicine, leadership and service was built.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"esj-compass-point esj-compass-point--s\">\r\n        <span class=\"esj-compass-dir\">S<\/span>\r\n        <h3>Service<\/h3>\r\n        <p>True fulfillment was never found in personal gain, but in the steady, often unseen work of lifting others up through healing, mentorship and sacrifice.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"esj-compass-point esj-compass-point--w\">\r\n        <span class=\"esj-compass-dir\">W<\/span>\r\n        <h3>Gratitude<\/h3>\r\n        <p>Recognizing the blessings of family, community and opportunity transformed ordinary days into a lifelong practice of humility and purposeful giving.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     SECTION 5 \u2014 MEDICINE & MILITARY (Ribbon Rack Layout)\r\n     ============================================================ -->\r\n<section class=\"esj-service\" id=\"esj-service\">\r\n  <div class=\"esj-service-bg\"><\/div>\r\n  <div class=\"esj-service-inner\">\r\n\r\n    <div class=\"esj-service-head\">\r\n      <span class=\"esj-eyebrow\">Two Uniforms, One Calling<\/span>\r\n      <h2>A Life of <em>Service<\/em><\/h2>\r\n      <p>Throughout his career, Dr. Eskew dedicated himself to healing others while embracing the discipline and leadership principles developed through military service. Together these experiences strengthened his lifelong commitment to integrity, compassion and public service.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"esj-ribbon-rack\">\r\n      <div class=\"esj-ribbon-thread\"><\/div>\r\n\r\n      <div class=\"esj-ribbon-item\">\r\n        <span class=\"esj-ribbon-clasp\"><\/span>\r\n        <div class=\"esj-ribbon-icon\">&#x2715;<\/div>\r\n        <h3>Medicine<\/h3>\r\n        <p>Decades of clinical practice rooted in compassion, precision and an unwavering commitment to the patient above all else.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"esj-ribbon-item\">\r\n        <span class=\"esj-ribbon-clasp\"><\/span>\r\n        <div class=\"esj-ribbon-icon\">&#x2726;<\/div>\r\n        <h3>Military<\/h3>\r\n        <p>Rising to Brigadier General through discipline, strategic leadership and a deep sense of duty to country and community.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"esj-ribbon-item\">\r\n        <span class=\"esj-ribbon-clasp\"><\/span>\r\n        <div class=\"esj-ribbon-icon\">&#x272A;<\/div>\r\n        <h3>Leadership<\/h3>\r\n        <p>Guiding organizations, troops and medical teams with the belief that leadership is a responsibility to serve those who follow.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"esj-ribbon-item\">\r\n        <span class=\"esj-ribbon-clasp\"><\/span>\r\n        <div class=\"esj-ribbon-icon\">&#x270E;<\/div>\r\n        <h3>Teaching<\/h3>\r\n        <p>Mentoring the next generation of physicians and officers, leaving knowledge as the most enduring form of service.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     SECTION 6 \u2014 PHILOSOPHY (Dark, Editorial Quote)\r\n     ============================================================ -->\r\n<section class=\"esj-philosophy\" id=\"esj-philosophy\">\r\n  <div class=\"esj-philosophy-grid\">\r\n    <blockquote>\r\n      <span class=\"esj-philosophy-quote-mark\">&ldquo;<\/span>\r\n      <h2>A Philosophy of <em>Giving Back<\/em><\/h2>\r\n      <p>Throughout the memoir one message remains constant: every opportunity carries the responsibility to serve others. Whether practicing medicine, mentoring students, leading organizations or supporting the community, Dr. Eskew believes that life's greatest achievements are measured by the lives we help improve.<\/p>\r\n    <\/blockquote>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n \/* ============================================================\r\n   SECTION 4 \u2014 CORE VALUES (Compass Rose)\r\n   ============================================================ *\/\r\n.esj-values{\r\n  position: relative;\r\n  background: #161616 !important;\r\n  padding: 160px 6vw 140px;\r\n  overflow: hidden;\r\n}\r\n\r\n.esj-values-texture{\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 1;\r\n  pointer-events: none;\r\n  opacity: 0.35;\r\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='500' height='500' viewBox='0 0 500 500'%3E%3Cpath d='M20,60 Q80,40 140,65 T260,55 T380,70 T480,50' fill='none' stroke='%23c9a24d' stroke-width='0.6' opacity='0.15'\/%3E%3Cpath d='M40,140 Q100,120 180,145 T320,135 T460,150' fill='none' stroke='%23c9a24d' stroke-width='0.5' opacity='0.12'\/%3E%3Cpath d='M10,220 Q90,200 170,225 T310,215 T450,230' fill='none' stroke='%23c9a24d' stroke-width='0.6' opacity='0.14'\/%3E%3Cpath d='M30,300 Q110,280 190,305 T330,295 T470,310' fill='none' stroke='%23c9a24d' stroke-width='0.5' opacity='0.10'\/%3E%3Cpath d='M50,380 Q130,360 210,385 T350,375 T490,390' fill='none' stroke='%23c9a24d' stroke-width='0.6' opacity='0.13'\/%3E%3Cpath d='M60,460 Q140,440 220,465 T360,455' fill='none' stroke='%23c9a24d' stroke-width='0.5' opacity='0.11'\/%3E%3C\/svg%3E\");\r\n}\r\n\r\n.esj-values-inner{\r\n  position: relative;\r\n  z-index: 2;\r\n  max-width: 1200px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.esj-values-head{\r\n  text-align: center;\r\n  margin-bottom: 130px;\r\n}\r\n\r\n.esj-values-head .esj-eyebrow{\r\n  margin-bottom: 24px;\r\n  justify-content: center;\r\n}\r\n\r\n.esj-values-head h2{\r\n  font-family: var(--font-display);\r\n  font-weight: 700;\r\n  font-size: clamp(2.4rem, 4vw, 3.6rem);\r\n  color: var(--esj-cream);\r\n  line-height: 1.15;\r\n}\r\n\r\n.esj-values-head h2 em{\r\n  color: var(--esj-gold-soft);\r\n  font-style: italic;\r\n  font-weight: 500;\r\n}\r\n\r\n\/* The compass field: two crossed axes, a dial, four bearings *\/\r\n.esj-compass{\r\n  position: relative;\r\n  width: min(980px, 94vw);\r\n  height: 640px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.esj-compass-axis{\r\n  position: absolute;\r\n  z-index: 0;\r\n  opacity: 0.35;\r\n}\r\n\r\n.esj-compass-axis--v{\r\n  left: 50%;\r\n  top: 0;\r\n  bottom: 0;\r\n  width: 1px;\r\n  transform: translateX(-50%);\r\n  background: linear-gradient(180deg, transparent, var(--esj-gold) 22%, var(--esj-gold) 78%, transparent);\r\n}\r\n\r\n.esj-compass-axis--h{\r\n  top: 50%;\r\n  left: 0;\r\n  right: 0;\r\n  height: 1px;\r\n  transform: translateY(-50%);\r\n  background: linear-gradient(90deg, transparent, var(--esj-gold) 22%, var(--esj-gold) 78%, transparent);\r\n}\r\n\r\n\/* Dial *\/\r\n.esj-compass-dial{\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  width: 230px;\r\n  height: 230px;\r\n  border-radius: 50%;\r\n  z-index: 2;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: radial-gradient(circle, rgba(22,22,22,0.97) 55%, rgba(22,22,22,0.7) 100%);\r\n}\r\n\r\n.esj-compass-ring{\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: 50%;\r\n  border: 1px solid var(--esj-gold);\r\n  opacity: 0.55;\r\n}\r\n\r\n.esj-compass-ring::before{\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 14px;\r\n  border-radius: 50%;\r\n  background: repeating-conic-gradient(var(--esj-gold) 0deg 1deg, transparent 1deg 9deg);\r\n  opacity: 0.3;\r\n  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));\r\n          mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));\r\n  animation: esjRingRotate 70s linear infinite;\r\n}\r\n\r\n@keyframes esjRingRotate{\r\n  from{ transform: rotate(0deg); }\r\n  to{ transform: rotate(360deg); }\r\n}\r\n\r\n.esj-compass-needle{\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  width: 2px;\r\n  height: 80px;\r\n  transform-origin: 50% 100%;\r\n  transform: translate(-50%, -100%) rotate(-4deg);\r\n  background: linear-gradient(180deg, var(--esj-gold) 0%, transparent 100%);\r\n  animation: esjNeedleSway 7s ease-in-out infinite;\r\n  z-index: 3;\r\n  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);\r\n}\r\n\r\n.esj-compass-needle::before{\r\n  content: \"\";\r\n  position: absolute;\r\n  top: -6px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  border-left: 5px solid transparent;\r\n  border-right: 5px solid transparent;\r\n  border-bottom: 11px solid var(--esj-gold);\r\n}\r\n\r\n@keyframes esjNeedleSway{\r\n  0%, 100%{ transform: translate(-50%, -100%) rotate(-4deg); }\r\n  50%{ transform: translate(-50%, -100%) rotate(4deg); }\r\n}\r\n\r\n\/* Hover a bearing, the needle turns to face it *\/\r\n.esj-compass:has(.esj-compass-point--n:hover) .esj-compass-needle{ animation: none; transform: translate(-50%, -100%) rotate(0deg); }\r\n.esj-compass:has(.esj-compass-point--e:hover) .esj-compass-needle{ animation: none; transform: translate(-50%, -100%) rotate(90deg); }\r\n.esj-compass:has(.esj-compass-point--s:hover) .esj-compass-needle{ animation: none; transform: translate(-50%, -100%) rotate(180deg); }\r\n.esj-compass:has(.esj-compass-point--w:hover) .esj-compass-needle{ animation: none; transform: translate(-50%, -100%) rotate(270deg); }\r\n\r\n.esj-compass-motto{\r\n  position: relative;\r\n  z-index: 3;\r\n  font-family: var(--font-serif);\r\n  font-style: italic;\r\n  font-size: 0.82rem;\r\n  line-height: 1.5;\r\n  color: var(--esj-cream-dim);\r\n  text-align: center;\r\n  max-width: 130px;\r\n  opacity: 0.8;\r\n}\r\n\r\n\/* Bearings *\/\r\n.esj-compass-point{\r\n  position: absolute;\r\n  max-width: 300px;\r\n  z-index: 2;\r\n  transition: all 0.5s ease;\r\n}\r\n\r\n.esj-compass-point--n{ top: 0; left: 50%; transform: translateX(-50%); text-align: center; }\r\n.esj-compass-point--s{ bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; }\r\n.esj-compass-point--e{ top: 50%; right: 0; transform: translateY(-50%); text-align: left; }\r\n.esj-compass-point--w{ top: 50%; left: 0; transform: translateY(-50%); text-align: right; }\r\n\r\n.esj-compass-point--n:hover{ transform: translateX(-50%) translateY(-6px); }\r\n.esj-compass-point--s:hover{ transform: translateX(-50%) translateY(6px); }\r\n.esj-compass-point--e:hover{ transform: translateY(-50%) translateX(6px); }\r\n.esj-compass-point--w:hover{ transform: translateY(-50%) translateX(-6px); }\r\n\r\n.esj-compass-dir{\r\n  font-family: var(--font-display);\r\n  font-size: 0.72rem;\r\n  letter-spacing: 3.5px;\r\n  text-transform: uppercase;\r\n  color: var(--esj-gold);\r\n  opacity: 0.6;\r\n  display: block;\r\n  margin-bottom: 14px;\r\n  transition: opacity 0.4s ease;\r\n}\r\n\r\n.esj-compass-point:hover .esj-compass-dir{ opacity: 1; }\r\n\r\n.esj-compass-point h3{\r\n  font-family: var(--font-display);\r\n  font-size: clamp(1.5rem, 2vw, 1.9rem);\r\n  font-weight: 600;\r\n  color: var(--esj-gold-soft);\r\n  margin-bottom: 14px;\r\n  transition: color 0.4s ease;\r\n}\r\n\r\n.esj-compass-point:hover h3{ color: var(--esj-gold); }\r\n\r\n.esj-compass-point p{\r\n  font-family: var(--font-serif);\r\n  font-size: 1rem;\r\n  line-height: 1.75;\r\n  color: var(--esj-cream-dim);\r\n}\r\n\r\n\/* ======================================================\r\n   RESPONSIVE\r\n   Compass UI shrinks on tablet.\r\n   On mobile: hide dial\/axes\/needle, keep content stacked.\r\n====================================================== *\/\r\n\r\n@media (max-width: 1024px){\r\n  .esj-values{ padding: 130px 6vw 110px; }\r\n  .esj-values-head{ margin-bottom: 100px; }\r\n  .esj-compass{ height: 560px; }\r\n  .esj-compass-dial{ width: 200px; height: 200px; }\r\n  .esj-compass-needle{ height: 68px; }\r\n  .esj-compass-point{ max-width: 250px; }\r\n  .esj-compass-motto{ font-size: 0.78rem; max-width: 115px; }\r\n}\r\n\r\n@media (max-width: 860px){\r\n  .esj-compass-dial{ width: 170px; height: 170px; }\r\n  .esj-compass-needle{ height: 56px; }\r\n  .esj-compass-point{ max-width: 200px; }\r\n  .esj-compass-point--e,\r\n  .esj-compass-point--w{ max-width: 190px; }\r\n  .esj-compass-point h3{ font-size: 1.4rem; margin-bottom: 10px; }\r\n  .esj-compass-point p{ font-size: 0.92rem; line-height: 1.65; }\r\n  .esj-compass-dir{ font-size: 0.66rem; letter-spacing: 3px; margin-bottom: 10px; }\r\n  .esj-compass-motto{ font-size: 0.72rem; max-width: 100px; }\r\n}\r\n\r\n@media (max-width: 680px){\r\n  .esj-values{ padding: 100px 6vw 90px; }\r\n  .esj-values-head{ margin-bottom: 70px; }\r\n  .esj-values-head h2{ font-size: clamp(2rem, 6vw, 2.6rem); }\r\n\r\n  \/* Hide compass UI only \u2014 content stays *\/\r\n  .esj-compass-axis,\r\n  .esj-compass-dial,\r\n  .esj-compass-needle{ display: none !important; }\r\n\r\n  \/* Reset compass container for stacked layout *\/\r\n  .esj-compass{\r\n    position: static;\r\n    width: 100%;\r\n    height: auto;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 52px;\r\n  }\r\n\r\n  \/* Reset bearings to static stacked blocks *\/\r\n  .esj-compass-point{\r\n    position: static;\r\n    max-width: 420px;\r\n    width: 100%;\r\n    text-align: center !important;\r\n    transform: none !important;\r\n  }\r\n\r\n  .esj-compass-point:hover{\r\n    transform: translateY(-4px) !important;\r\n  }\r\n\r\n  .esj-compass-point--n:hover,\r\n  .esj-compass-point--s:hover,\r\n  .esj-compass-point--e:hover,\r\n  .esj-compass-point--w:hover{\r\n    transform: translateY(-4px) !important;\r\n  }\r\n}\r\n\r\n@media (max-width: 420px){\r\n  .esj-values{ padding: 90px 6vw 80px; }\r\n  .esj-compass{ gap: 42px; }\r\n  .esj-compass-point h3{ font-size: 1.25rem; }\r\n  .esj-compass-point p{ font-size: 0.9rem; }\r\n  .esj-compass-dir{ font-size: 0.6rem; letter-spacing: 2.5px; }\r\n}\r\n\r\n\/* ============================================================\r\n   SECTION 5 \u2014 MEDICINE & MILITARY (Ribbon Rack Layout)\r\n   ============================================================ *\/\r\n.esj-service{\r\n  position: relative;\r\n  min-height: 100vh;\r\n  padding: 160px 6vw;\r\n  overflow: hidden;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.esj-service-bg{\r\n  position: absolute;\r\n  inset: 0;\r\n  background:\r\n    linear-gradient(135deg, rgba(10,12,17,0.90) 0%, rgba(10,12,17,0.70) 50%, rgba(10,12,17,0.92) 100%),\r\n    url('https:\/\/images.unsplash.com\/photo-1519494026892-80bbd2d6fd0d?q=80&w=2000&auto=format&fit=crop') center\/cover no-repeat;\r\n  z-index: 0;\r\n  animation: esjBgDrift 22s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes esjBgDrift{\r\n  0%{ transform: scale(1); }\r\n  100%{ transform: scale(1.06); }\r\n}\r\n\r\n.esj-service-inner{\r\n  position: relative;\r\n  z-index: 2;\r\n  max-width: 1220px;\r\n  margin: 0 auto;\r\n  width: 100%;\r\n}\r\n\r\n.esj-service-head{\r\n  max-width: 720px;\r\n  margin: 0 auto 130px;\r\n  text-align: center;\r\n}\r\n\r\n.esj-service-head .esj-eyebrow{\r\n  margin-bottom: 24px;\r\n  justify-content: center;\r\n}\r\n\r\n.esj-service-head h2{\r\n  font-family: var(--font-display);\r\n  font-weight: 700;\r\n  font-size: clamp(2.4rem, 4vw, 3.8rem);\r\n  color: var(--esj-cream);\r\n  margin-bottom: 26px;\r\n  line-height: 1.15;\r\n  text-shadow: 0 2px 20px rgba(0,0,0,0.5);\r\n}\r\n\r\n.esj-service-head h2 em{\r\n  color: var(--esj-gold-soft);\r\n  font-style: italic;\r\n  font-weight: 500;\r\n}\r\n\r\n.esj-service-head p{\r\n  font-family: var(--font-serif);\r\n  font-size: 1.15rem;\r\n  line-height: 1.8;\r\n  color: var(--esj-cream-dim);\r\n  text-shadow: 0 1px 10px rgba(0,0,0,0.4);\r\n}\r\n\r\n.esj-ribbon-rack{\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: flex-start;\r\n  gap: 0;\r\n  padding-top: 30px;\r\n}\r\n\r\n.esj-ribbon-thread{\r\n  position: absolute;\r\n  left: 4%;\r\n  right: 4%;\r\n  top: 108px;\r\n  height: 1px;\r\n  background-image: linear-gradient(90deg, transparent, var(--esj-gold) 6%, var(--esj-gold) 94%, transparent);\r\n  opacity: 0.4;\r\n  z-index: 0;\r\n}\r\n\r\n.esj-ribbon-thread::before{\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: -1px 0 auto 0;\r\n  height: 3px;\r\n  background-image: repeating-linear-gradient(90deg, var(--esj-gold) 0 6px, transparent 6px 14px);\r\n  opacity: 0.35;\r\n  animation: esjThreadShimmer 5s linear infinite;\r\n}\r\n\r\n@keyframes esjThreadShimmer{\r\n  0%{ background-position-x: 0; }\r\n  100%{ background-position-x: 40px; }\r\n}\r\n\r\n.esj-ribbon-item{\r\n  position: relative;\r\n  z-index: 2;\r\n  flex: 1 1 0;\r\n  max-width: 270px;\r\n  margin: 0 -8px;\r\n  padding: 46px 30px 40px;\r\n  background: rgba(26, 30, 39, 0.72);\r\n  border: 1px solid var(--esj-hairline-soft);\r\n  backdrop-filter: blur(12px);\r\n  text-align: center;\r\n  transition: all 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);\r\n}\r\n\r\n.esj-ribbon-item:nth-child(2){ transform: translateY(64px) rotate(-0.6deg); }\r\n.esj-ribbon-item:nth-child(3){ transform: translateY(0) rotate(0.6deg); }\r\n.esj-ribbon-item:nth-child(4){ transform: translateY(64px) rotate(-0.4deg); }\r\n.esj-ribbon-item:nth-child(5){ transform: translateY(14px) rotate(0.5deg); }\r\n\r\n.esj-ribbon-clasp{\r\n  position: absolute;\r\n  top: -13px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  width: 30px;\r\n  height: 6px;\r\n  background: var(--esj-ink);\r\n  border: 2px solid var(--esj-gold);\r\n}\r\n\r\n.esj-ribbon-icon{\r\n  font-size: 1.5rem;\r\n  color: var(--esj-gold-soft);\r\n  margin-bottom: 16px;\r\n  opacity: 0.9;\r\n}\r\n\r\n.esj-ribbon-item h3{\r\n  font-family: var(--font-display);\r\n  font-size: 1.4rem;\r\n  font-weight: 600;\r\n  color: var(--esj-gold-soft);\r\n  margin-bottom: 12px;\r\n}\r\n\r\n.esj-ribbon-item p{\r\n  font-family: var(--font-sans);\r\n  font-size: 0.93rem;\r\n  line-height: 1.7;\r\n  color: var(--esj-cream-dim);\r\n  font-weight: 300;\r\n}\r\n\r\n.esj-ribbon-item:hover{\r\n  transform: translateY(-10px) rotate(0deg) !important;\r\n  border-color: var(--esj-gold);\r\n  background: rgba(26, 30, 39, 0.92);\r\n  box-shadow: 0 24px 60px -14px rgba(201, 162, 77, 0.35), inset 0 0 40px rgba(201, 162, 77, 0.03);\r\n}\r\n\r\n.esj-ribbon-item:hover .esj-ribbon-clasp{\r\n  background: var(--esj-gold);\r\n  box-shadow: 0 0 16px rgba(201, 162, 77, 0.7);\r\n}\r\n\r\n\/* ============================================================\r\n   SECTION 6 \u2014 PHILOSOPHY (Dark, Centered Editorial)\r\n   ============================================================ *\/\r\n.esj-philosophy{\r\n  position: relative;\r\n  background: #161616 !important;\r\n  padding: 180px 6vw;\r\n  overflow: hidden;\r\n  text-align: center;\r\n}\r\n\r\n.esj-philosophy::before{\r\n  content: \"\";\r\n  position: absolute;\r\n  top: -20%;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  width: 70%;\r\n  height: 90%;\r\n  background: radial-gradient(circle, rgba(201,162,77,0.09), transparent 65%);\r\n  pointer-events: none;\r\n  z-index: 0;\r\n}\r\n\r\n.esj-philosophy-grid{\r\n  position: relative;\r\n  z-index: 2;\r\n  max-width: 920px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.esj-philosophy blockquote{\r\n  margin: 0;\r\n  padding: 0;\r\n  position: relative;\r\n}\r\n\r\n.esj-philosophy-quote-mark{\r\n  font-family: var(--font-display);\r\n  font-size: 9rem;\r\n  line-height: 0;\r\n  color: var(--esj-gold);\r\n  opacity: 0.1;\r\n  display: block;\r\n  margin-bottom: 50px;\r\n  position: relative;\r\n  top: 30px;\r\n  pointer-events: none;\r\n}\r\n\r\n.esj-philosophy h2{\r\n  font-family: var(--font-display);\r\n  font-weight: 700;\r\n  font-size: clamp(2.2rem, 3.8vw, 3.2rem);\r\n  color: var(--esj-cream);\r\n  margin-bottom: 44px;\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.esj-philosophy h2 em{\r\n  color: var(--esj-gold-soft);\r\n  font-style: italic;\r\n  font-weight: 500;\r\n}\r\n\r\n.esj-philosophy h2::after{\r\n  content: \"\";\r\n  position: absolute;\r\n  bottom: -16px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  width: 90px;\r\n  height: 2px;\r\n  background: var(--esj-gold);\r\n  animation: esjUnderlineExpand 3.5s ease-in-out infinite;\r\n}\r\n\r\n@keyframes esjUnderlineExpand{\r\n  0%, 100%{ width: 90px; opacity: 0.5; }\r\n  50%{ width: 160px; opacity: 1; }\r\n}\r\n\r\n.esj-philosophy blockquote p{\r\n  font-family: var(--font-serif);\r\n  font-size: clamp(1.25rem, 1.9vw, 1.6rem);\r\n  line-height: 1.9;\r\n  color: var(--esj-cream-dim);\r\n  font-style: italic;\r\n  max-width: 800px;\r\n  margin: 0 auto;\r\n}\r\n\r\n\/* ============================================================\r\n   RESPONSIVE\r\n   ============================================================ *\/\r\n@media (max-width: 1080px){\r\n  .esj-compass{ height: 760px; width: 96vw; }\r\n  .esj-compass-point{ max-width: 230px; }\r\n  .esj-compass-dial{ width: 190px; height: 190px; }\r\n  .esj-compass-needle{ height: 66px; }\r\n\r\n  .esj-ribbon-rack{ flex-wrap: wrap; gap: 60px 20px; }\r\n  .esj-ribbon-item{ flex: 1 1 260px; margin: 0; }\r\n  .esj-ribbon-item:nth-child(2),\r\n  .esj-ribbon-item:nth-child(3),\r\n  .esj-ribbon-item:nth-child(4),\r\n  .esj-ribbon-item:nth-child(5){ transform: none; }\r\n  .esj-ribbon-thread{ display: none; }\r\n\r\n  .esj-philosophy{ padding: 130px 6vw; }\r\n}\r\n\r\n@media (max-width: 640px){\r\n  .esj-values{ padding: 110px 6vw; }\r\n  .esj-values-head{ margin-bottom: 80px; }\r\n\r\n  .esj-compass{\r\n    height: auto;\r\n    width: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 46px;\r\n  }\r\n  .esj-compass-axis{ display: none; }\r\n  .esj-compass-dial{\r\n    position: static;\r\n    transform: none;\r\n    width: 170px;\r\n    height: 170px;\r\n  }\r\n  .esj-compass-needle{ height: 58px; }\r\n  .esj-compass-point{\r\n    position: static;\r\n    transform: none !important;\r\n    max-width: 420px;\r\n    text-align: center !important;\r\n  }\r\n\r\n  .esj-service{ padding: 110px 6vw; min-height: auto; }\r\n  .esj-service-head{ margin-bottom: 70px; }\r\n  .esj-ribbon-rack{ flex-direction: column; align-items: center; gap: 26px; }\r\n  .esj-ribbon-item{ max-width: 100%; width: 100%; }\r\n\r\n  .esj-philosophy{ padding: 100px 6vw; }\r\n  .esj-philosophy-quote-mark{ font-size: 6rem; margin-bottom: 30px; }\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-de59908 e-con-full e-flex e-con e-parent\" data-id=\"de59908\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4d86cf2 elementor-widget elementor-widget-html\" data-id=\"4d86cf2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================\r\n     FINAL CTA \u2014 \"A LIFE WORTH REFLECTING ON\"\r\n     Elementor HTML Widget \u2014 Paste Entire Block\r\n     Dark Premium BG + Floating Gold Particles & Glow Orbs\r\n     ============================================ -->\r\n\r\n<style>\r\n.esjcta {\r\n  --c-bg: #0c0b0a;\r\n  --c-bg-deep: #050505;\r\n  --c-gold: #C6A15B;\r\n  --c-gold-bright: #E7C589;\r\n  --c-cream: #F8F5F1;\r\n  --c-text-muted: rgba(248, 245, 241, 0.58);\r\n  --c-text-faint: rgba(248, 245, 241, 0.3);\r\n  --c-border: rgba(198, 161, 91, 0.22);\r\n\r\n  position: relative;\r\n  width: 100%;\r\n  overflow: hidden;\r\n  font-family: 'Inter', sans-serif;\r\n  color: var(--c-cream);\r\n  padding: 180px 0 160px;\r\n\r\n  background:\r\n    radial-gradient(ellipse 55% 45% at 50% 30%, rgba(198, 161, 91, 0.06) 0%, transparent 60%),\r\n    radial-gradient(ellipse 40% 50% at 15% 75%, rgba(94, 70, 54, 0.14) 0%, transparent 60%),\r\n    radial-gradient(ellipse 40% 50% at 85% 70%, rgba(94, 70, 54, 0.1) 0%, transparent 60%),\r\n    linear-gradient(165deg, #0f0e0d 0%, #0c0b0a 40%, #070706 75%, #050505 100%);\r\n\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n\/* Fine grain *\/\r\n.esjcta__grain {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 1;\r\n  pointer-events: none;\r\n  opacity: 0.025;\r\n  background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='6' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n  background-repeat: repeat;\r\n  background-size: 480px 480px;\r\n}\r\n\r\n.esjcta__vignette {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 1;\r\n  pointer-events: none;\r\n  background: radial-gradient(ellipse 75% 60% at 50% 50%, transparent 30%, rgba(0,0,0,0.55) 100%);\r\n}\r\n\r\n\/* ============================================\r\n   FLOATING GLOW ORBS\r\n   ============================================ *\/\r\n.esjcta__orb {\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  pointer-events: none;\r\n  filter: blur(50px);\r\n  z-index: 1;\r\n  animation: esjOrbFloat 14s ease-in-out infinite;\r\n}\r\n\r\n.esjcta__orb--1 {\r\n  width: 320px;\r\n  height: 320px;\r\n  left: 6%;\r\n  top: 12%;\r\n  background: radial-gradient(circle, rgba(198, 161, 91, 0.14) 0%, transparent 70%);\r\n  animation-delay: 0s;\r\n}\r\n\r\n.esjcta__orb--2 {\r\n  width: 260px;\r\n  height: 260px;\r\n  right: 8%;\r\n  top: 40%;\r\n  background: radial-gradient(circle, rgba(198, 161, 91, 0.1) 0%, transparent 70%);\r\n  animation-delay: 3s;\r\n  animation-duration: 18s;\r\n}\r\n\r\n.esjcta__orb--3 {\r\n  width: 220px;\r\n  height: 220px;\r\n  left: 20%;\r\n  bottom: 8%;\r\n  background: radial-gradient(circle, rgba(139, 58, 58, 0.08) 0%, transparent 70%);\r\n  animation-delay: 6s;\r\n  animation-duration: 16s;\r\n}\r\n\r\n@keyframes esjOrbFloat {\r\n  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }\r\n  50% { transform: translate(20px, -24px) scale(1.08); opacity: 1; }\r\n}\r\n\r\n\/* ============================================\r\n   FLOATING GOLD PARTICLES\r\n   ============================================ *\/\r\n.esjcta__particles {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 2;\r\n  pointer-events: none;\r\n  overflow: hidden;\r\n}\r\n\r\n.esjcta__particle {\r\n  position: absolute;\r\n  width: 2px;\r\n  height: 2px;\r\n  background: rgba(198, 161, 91, 0.5);\r\n  border-radius: 50%;\r\n  animation: esjParticleFloat 24s infinite linear;\r\n}\r\n\r\n.esjcta__particle:nth-child(1) { left: 10%; top: 80%; animation-delay: 0s; animation-duration: 30s; }\r\n.esjcta__particle:nth-child(2) { left: 24%; top: 60%; animation-delay: 3s; animation-duration: 26s; width: 3px; height: 3px; }\r\n.esjcta__particle:nth-child(3) { left: 38%; top: 90%; animation-delay: 6s; animation-duration: 34s; background: rgba(248,245,241,0.3); }\r\n.esjcta__particle:nth-child(4) { left: 52%; top: 70%; animation-delay: 1s; animation-duration: 28s; width: 1px; height: 1px; }\r\n.esjcta__particle:nth-child(5) { left: 66%; top: 85%; animation-delay: 8s; animation-duration: 32s; }\r\n.esjcta__particle:nth-child(6) { left: 80%; top: 65%; animation-delay: 4s; animation-duration: 24s; width: 2px; height: 2px; }\r\n.esjcta__particle:nth-child(7) { left: 90%; top: 88%; animation-delay: 10s; animation-duration: 30s; }\r\n.esjcta__particle:nth-child(8) { left: 46%; top: 78%; animation-delay: 12s; animation-duration: 27s; background: rgba(248,245,241,0.25); }\r\n\r\n@keyframes esjParticleFloat {\r\n  0% { transform: translateY(0) translateX(0); opacity: 0; }\r\n  8% { opacity: 1; }\r\n  92% { opacity: 1; }\r\n  100% { transform: translateY(-90vh) translateX(24px); opacity: 0; }\r\n}\r\n\r\n\/* ============================================\r\n   CONTENT\r\n   ============================================ *\/\r\n.esjcta__container {\r\n  position: relative;\r\n  z-index: 10;\r\n  max-width: 780px;\r\n  margin: 0 auto;\r\n  padding: 0 40px;\r\n  text-align: center;\r\n}\r\n\r\n.esjcta__label {\r\n  font-family: 'DM Sans', sans-serif;\r\n  font-size: 0.66rem;\r\n  font-weight: 500;\r\n  letter-spacing: 0.55em;\r\n  text-transform: uppercase;\r\n  color: var(--c-gold);\r\n  margin-bottom: 30px;\r\n}\r\n\r\n.esjcta__divider {\r\n  width: 46px;\r\n  height: 1px;\r\n  background: var(--c-gold);\r\n  opacity: 0.5;\r\n  margin: 0 auto 34px;\r\n}\r\n\r\n.esjcta__title {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: clamp(2.4rem, 4.2vw, 4rem);\r\n  font-weight: 300;\r\n  line-height: 1.15;\r\n  color: var(--c-cream);\r\n  margin: 0 0 28px 0;\r\n  letter-spacing: -0.01em;\r\n}\r\n\r\n.esjcta__title em {\r\n  font-style: italic;\r\n  color: var(--c-gold-bright);\r\n  font-weight: 400;\r\n}\r\n\r\n.esjcta__subtitle {\r\n  font-family: 'Inter', sans-serif;\r\n  font-size: 1.02rem;\r\n  font-weight: 300;\r\n  line-height: 1.9;\r\n  color: var(--c-text-muted);\r\n  max-width: 560px;\r\n  margin: 0 auto 50px;\r\n}\r\n\r\n.esjcta__subtitle strong {\r\n  color: var(--c-cream);\r\n  font-weight: 500;\r\n}\r\n\r\n\/* CTA buttons *\/\r\n.esjcta__buttons {\r\n  display: flex;\r\n  gap: 20px;\r\n  justify-content: center;\r\n  flex-wrap: wrap;\r\n  margin-bottom: 50px;\r\n}\r\n\r\n.esjcta__btn {\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 18px 38px;\r\n  font-family: 'DM Sans', sans-serif;\r\n  font-size: 0.78rem;\r\n  font-weight: 500;\r\n  letter-spacing: 0.1em;\r\n  text-transform: uppercase;\r\n  text-decoration: none !important;\r\n  border-radius: 1px;\r\n  overflow: hidden;\r\n  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\r\n}\r\n\r\n.esjcta__btn--primary {\r\n  background: transparent;\r\n  color: var(--c-cream);\r\n  border: 1px solid rgba(198, 161, 91, 0.35);\r\n}\r\n\r\n.esjcta__btn--primary::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0;\r\n  left: -100%;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: var(--c-gold);\r\n  transition: left 0.5s cubic-bezier(0.23, 1, 0.32, 1);\r\n  z-index: 0;\r\n}\r\n\r\n.esjcta__btn--primary span,\r\n.esjcta__btn--primary svg {\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n.esjcta__btn--primary:hover {\r\n  border-color: var(--c-gold);\r\n  color: #171310;\r\n  box-shadow: 0 0 50px rgba(198, 161, 91, 0.15);\r\n}\r\n\r\n.esjcta__btn--primary:hover::before {\r\n  left: 0;\r\n}\r\n\r\n.esjcta__btn--secondary {\r\n  background: transparent;\r\n  color: var(--c-cream);\r\n  border: 1px solid rgba(248, 245, 241, 0.16);\r\n}\r\n\r\n.esjcta__btn--secondary:hover {\r\n  border-color: rgba(198, 161, 91, 0.4);\r\n  color: var(--c-gold);\r\n  background: rgba(198, 161, 91, 0.04);\r\n}\r\n\r\n.esjcta__btn svg {\r\n  width: 14px;\r\n  height: 14px;\r\n  transition: transform 0.4s ease;\r\n}\r\n\r\n.esjcta__btn:hover svg {\r\n  transform: translateX(4px);\r\n}\r\n\r\n\/* Closing quote *\/\r\n.esjcta__quote {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-style: italic;\r\n  font-size: 1.1rem;\r\n  color: var(--c-text-faint);\r\n  letter-spacing: 0.02em;\r\n}\r\n\r\n.esjcta__quote-line {\r\n  width: 20px;\r\n  height: 1px;\r\n  background: var(--c-gold);\r\n  opacity: 0.4;\r\n  margin: 22px auto 0;\r\n}\r\n\r\n\/* ============================================\r\n   RESPONSIVE\r\n   ============================================ *\/\r\n@media (max-width: 768px) {\r\n  .esjcta { padding: 130px 0 110px; }\r\n  .esjcta__container { padding: 0 28px; }\r\n  .esjcta__buttons { flex-direction: column; align-items: center; }\r\n  .esjcta__btn { width: 100%; max-width: 320px; justify-content: center; }\r\n  .esjcta__orb { display: none; }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .esjcta__title { font-size: 2rem; }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .esjcta__orb, .esjcta__particle { animation: none; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"esjcta\" id=\"esjcta\">\r\n\r\n  <div class=\"esjcta__grain\"><\/div>\r\n  <div class=\"esjcta__vignette\"><\/div>\r\n\r\n  <div class=\"esjcta__orb esjcta__orb--1\"><\/div>\r\n  <div class=\"esjcta__orb esjcta__orb--2\"><\/div>\r\n  <div class=\"esjcta__orb esjcta__orb--3\"><\/div>\r\n\r\n  <div class=\"esjcta__particles\">\r\n    <div class=\"esjcta__particle\"><\/div>\r\n    <div class=\"esjcta__particle\"><\/div>\r\n    <div class=\"esjcta__particle\"><\/div>\r\n    <div class=\"esjcta__particle\"><\/div>\r\n    <div class=\"esjcta__particle\"><\/div>\r\n    <div class=\"esjcta__particle\"><\/div>\r\n    <div class=\"esjcta__particle\"><\/div>\r\n    <div class=\"esjcta__particle\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"esjcta__container\">\r\n    <div class=\"esjcta__label\">Begin the Journey<\/div>\r\n    <div class=\"esjcta__divider\"><\/div>\r\n\r\n    <h2 class=\"esjcta__title\">Every Chapter Carries<br>a <em>Reflection Worth Keeping<\/em><\/h2>\r\n\r\n    <p class=\"esjcta__subtitle\">\r\n      <strong>Reflections on a Wonderful Life<\/strong> is more than a memoir it is an invitation to pause, remember, and honor the quiet moments that shape a legacy. Step into a story of service, purpose, and hope that still speaks to us today.\r\n    <\/p>\r\n\r\n    <div class=\"esjcta__buttons\">\r\n      <a href=\"https:\/\/demowebdesign.live\/Philip\/index.php\/books\/\" class=\"esjcta__btn esjcta__btn--primary\">\r\n        <span>Get Your Copy<\/span>\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\r\n          <polyline points=\"12 5 19 12 12 19\"><\/polyline>\r\n        <\/svg>\r\n      <\/a>\r\n      <!--<a href=\"#about\" class=\"esjcta__btn esjcta__btn--secondary\">-->\r\n      <!--  Learn His Story-->\r\n      <!--  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">-->\r\n      <!--    <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>-->\r\n      <!--    <polyline points=\"12 5 19 12 12 19\"><\/polyline>-->\r\n      <!--  <\/svg>-->\r\n      <!--<\/a>-->\r\n    <\/div>\r\n\r\n    <p class=\"esjcta__quote\">\"The measure of a life is not in years lived, but in lives touched.\"<\/p>\r\n    <div class=\"esjcta__quote-line\"><\/div>\r\n  <\/div>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>The Man Behind the Memoir The Story Behind the Pages For over seven decades, Dr. Philip N. Eskew Jr. has [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-153","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/Philip\/index.php\/wp-json\/wp\/v2\/pages\/153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demowebdesign.live\/Philip\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demowebdesign.live\/Philip\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/Philip\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/Philip\/index.php\/wp-json\/wp\/v2\/comments?post=153"}],"version-history":[{"count":31,"href":"https:\/\/demowebdesign.live\/Philip\/index.php\/wp-json\/wp\/v2\/pages\/153\/revisions"}],"predecessor-version":[{"id":242,"href":"https:\/\/demowebdesign.live\/Philip\/index.php\/wp-json\/wp\/v2\/pages\/153\/revisions\/242"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/Philip\/index.php\/wp-json\/wp\/v2\/media?parent=153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}