/* ==========================================================================
   EMMANUEL DRAH / SUCCESS ABOVE DREAMS · MULTI-PAGE PORTFOLIO
   Editorial redesign: ink navy, antique gold, warm paper
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=DM+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600;6..72,700&family=Plus+Jakarta+Sans:wght@600;700;800;900&display=swap');

:root {
    --ink:#08111f; --ink-2:#0d1929; --ink-3:#142238; --paper:#f2eee4; --white:#fffdf8;
    --gold:#d2a24c; --gold-light:#edc87c; --sage:#8fb996; --terracotta:#cf8672;
    --text-main:#f5f0e6; --text-muted:#aab4c2; --text-subtle:#78869a;
    --bg-page:var(--ink); --bg-card:var(--ink-2); --bg-card-hover:var(--ink-3); --bg-card-subtle:#050b14;
    --accent:var(--gold); --accent-light:var(--gold-light); --accent-soft:rgba(210,162,76,.11); --accent-border:rgba(210,162,76,.34);
    --border:rgba(226,232,240,.13); --border-hover:rgba(210,162,76,.56);
    --font:'DM Sans',sans-serif; --font-display:'Newsreader',Georgia,serif;
    --container-width:1180px; --radius-sm:8px; --radius-md:16px; --radius-lg:28px; --radius-full:999px;
    --shadow:0 28px 80px rgba(0,0,0,.28); --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ink);color-scheme:dark;scroll-padding-top:90px}
body{position:relative;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;background:radial-gradient(circle at 85% 10%,rgba(210,162,76,.09),transparent 28rem),radial-gradient(circle at 0 45%,rgba(44,76,117,.16),transparent 32rem),var(--ink);color:var(--text-main);font-family:var(--font);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}

/* ── Page Entrance ─────────────────────────────────────────── */
@keyframes page-in {
    0%   { opacity:0; transform:translateY(14px); }
    100% { opacity:1; transform:translateY(0); }
}
main { animation: page-in .72s var(--ease) both; }
/* Centered prestige SAD logo watermark background on all pages */
body::before{content:'';position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(88vw,660px);height:min(88vw,660px);background:url('../images/sad-watermark-gold.png') center/contain no-repeat;opacity:.11;pointer-events:none;z-index:0;filter:drop-shadow(0 0 50px rgba(210,162,76,.14))}
/* Subtle ambient top-right logo watermark */
body::after{content:'';position:fixed;top:4%;right:3%;width:clamp(190px,25vw,360px);height:clamp(190px,25vw,360px);background:url('../images/sad-watermark-gold.png') center/contain no-repeat;opacity:.05;pointer-events:none;z-index:0}
main{flex:1;position:relative;z-index:1} footer{position:relative;z-index:1} a{color:inherit;text-decoration:none} img{display:block;max-width:100%;height:auto} button,input,textarea{font:inherit} ::selection{background:var(--gold);color:var(--ink)} :focus-visible{outline:3px solid var(--gold-light);outline-offset:4px}
/* Lock scrolling while the photo lightbox is open */
body.no-scroll{overflow:hidden}
.container{width:min(100% - 3rem,var(--container-width));margin-inline:auto}.skip-link{position:fixed;top:.75rem;left:.75rem;z-index:1000;transform:translateY(-150%);background:var(--gold);color:var(--ink);padding:.65rem 1rem;font-weight:700;border-radius:6px}.skip-link:focus{transform:translateY(0)}

/* ── Top Navigation Bar (full menu on desktop, brand bar on mobile) ── */
#navbar{position:sticky;top:0;z-index:200;height:74px;display:flex;align-items:center;background:rgba(8,17,31,.82);border-bottom:1px solid transparent;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);transition:height .3s var(--ease),border-color .3s ease,background .3s ease}
#navbar.scrolled{height:66px;border-color:var(--border);background:rgba(8,17,31,.96)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand-badge{display:inline-flex;align-items:center;gap:.85rem;min-width:max-content;text-decoration:none}
.brand-avatar{width:40px;height:40px;overflow:hidden;border:1px solid rgba(210,162,76,.36);border-radius:7px 7px 14px 7px;background:var(--ink-2)}
.brand-avatar img{width:100%;height:100%;object-fit:cover}
.brand-name{display:block;color:var(--white);font-size:.92rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.brand-tagline{display:block;margin-top:.15rem;color:var(--gold-light);font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(90deg,var(--gold-light) 0%,#fff8e1 44%,var(--gold) 56%,var(--gold-light) 100%);background-size:240% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:brand-shimmer 4s linear infinite;}
@keyframes brand-shimmer{
    0%   { background-position:0% center; }
    100% { background-position:240% center; }
}
.nav-links{display:flex;align-items:center;gap:clamp(.8rem,1.8vw,1.7rem)}
.nav-links>a:not(.btn-nav-talk){position:relative;color:var(--text-muted);font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.nav-links>a:not(.btn-nav-talk)::after{content:'';position:absolute;left:0;right:100%;bottom:-.45rem;height:2px;background:var(--gold);transition:right .25s var(--ease)}
.nav-links>a:hover,.nav-links>a.active{color:var(--white)}
.nav-links>a:hover::after,.nav-links>a.active::after{right:0}
.btn-nav-talk{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:.65rem 1.1rem;border:1px solid var(--gold);border-radius:var(--radius-full);color:var(--ink)!important;background:var(--gold);font-size:.76rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;transition:transform .25s var(--ease),background .25s ease,box-shadow .25s ease}
.btn-nav-talk:hover{transform:translateY(-2px);background:var(--gold-light);box-shadow:0 6px 22px rgba(210,162,76,.38)}

/* ── Bottom Navigation Dock (mobile only) ──────────────────── */
#bottom-navbar{display:none}

.bottom-nav-shell{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:.25rem;
    max-width:var(--container-width);
    margin:0 auto;
    height:66px;
    padding:0 .75rem;
    border:1px solid rgba(210,162,76,.22);
    border-radius:var(--radius-full);
    background:rgba(8,17,31,.88);
    backdrop-filter:blur(24px) saturate(160%);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
    overflow:hidden;
    box-shadow:0 -4px 40px rgba(0,0,0,.5),0 0 0 1px rgba(210,162,76,.06) inset;
}

/* SAD logo as crisp watermark background */
.bottom-nav-shell::before{
    content:'';
    position:absolute;
    inset:0;
    background:url('../images/sad-watermark-gold.png') center/contain no-repeat;
    opacity:.15;
    pointer-events:none;
    border-radius:inherit;
}

/* Gold shimmer top edge */
.bottom-nav-shell::after{
    content:'';
    position:absolute;
    top:0;left:8%;right:8%;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
    pointer-events:none;
}

/* Nav links */
.bottom-nav-links{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:.2rem;
    width:100%;
}

.bottom-nav-link{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.28rem;
    padding:.45rem .8rem;
    border-radius:var(--radius-full);
    color:var(--text-muted);
    font-size:.6rem;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
    text-decoration:none;
    transition:color .22s ease,background .22s ease;
    white-space:nowrap;
    flex:1;
    max-width:80px;
}
.bottom-nav-link:hover{color:var(--white);background:rgba(255,255,255,.06)}
.bottom-nav-link.active{color:var(--ink);background:var(--gold)}
.bottom-nav-link.active:hover{background:var(--gold-light)}

/* Icons */
.bottom-nav-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px}
.bottom-nav-icon svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* "Let's Talk" CTA pill */
.bottom-nav-contact{
    color:var(--ink)!important;
    background:var(--gold);
    border:1px solid var(--gold);
    font-weight:800;
    transition:transform .22s var(--ease),background .22s ease,box-shadow .22s ease;
    box-shadow:0 4px 18px rgba(210,162,76,.22);
}
.bottom-nav-contact:hover{transform:translateY(-2px);background:var(--gold-light);box-shadow:0 8px 26px rgba(210,162,76,.36)}
.bottom-nav-contact.active{background:var(--gold-light);color:var(--ink)!important}

/* Buttons */
.btn-warm-primary,.btn-warm-outline,.btn-whatsapp{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:50px;padding:.82rem 1.35rem;border-radius:var(--radius-full);font-size:.82rem;font-weight:800;letter-spacing:.035em;transition:transform .28s var(--ease),box-shadow .28s ease,background .28s ease,border-color .28s ease}.btn-warm-primary{background:var(--gold);color:var(--ink);border:1px solid var(--gold);box-shadow:0 10px 28px rgba(210,162,76,.15);animation:btn-breathe 3.6s ease-in-out infinite;}.btn-warm-primary:hover{transform:translateY(-4px) scale(1.02);background:var(--gold-light);box-shadow:0 20px 44px rgba(210,162,76,.38);animation:none;}.btn-warm-outline{color:var(--white);border:1px solid var(--border);background:rgba(255,255,255,.025)}.btn-warm-outline:hover{transform:translateY(-4px) scale(1.02);border-color:var(--gold);background:var(--accent-soft);box-shadow:0 16px 36px rgba(210,162,76,.1)}.btn-whatsapp{color:#07150c;background:#70d995;border:1px solid #70d995}.btn-whatsapp:hover{transform:translateY(-4px) scale(1.02);background:#8ae6a9;box-shadow:0 20px 44px rgba(112,217,149,.28)}
@keyframes btn-breathe{
    0%,100% { box-shadow:0 10px 28px rgba(210,162,76,.15); }
    50%      { box-shadow:0 14px 42px rgba(210,162,76,.32), 0 0 0 6px rgba(210,162,76,.07); }
}
/* Status chip: marquee ticker */
@keyframes chip-ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes dot-sonar {
    0%   { box-shadow: 0 0 0 0 rgba(143,185,150,.9), 0 0 0 0 rgba(143,185,150,.5); }
    60%  { box-shadow: 0 0 0 6px rgba(143,185,150,.15), 0 0 0 12px rgba(143,185,150,0); }
    100% { box-shadow: 0 0 0 0 rgba(143,185,150,0), 0 0 0 0 rgba(143,185,150,0); }
}
@keyframes dot-glow {
    0%,100% { background: var(--sage); }
    50%     { background: #a8e8b4; filter: drop-shadow(0 0 4px rgba(143,185,150,.9)); }
}
.status-chip {
    display: inline-flex;
    align-items: center;
    max-width: 280px;
    padding: .48rem .9rem;
    border: 1px solid rgba(143,185,150,.35);
    border-radius: var(--radius-full);
    color: #b9dabe;
    background: rgba(143,185,150,.07);
    font-size: .76rem;
    font-weight: 700;
    overflow: hidden;
    cursor: default;
    box-shadow: 0 0 16px rgba(143,185,150,.12);
}
.status-chip-track {
    display: inline-flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    animation: chip-ticker 9s linear infinite;
    will-change: transform;
}

.intro-status-wrap .status-chip-track {
    animation: none;
    will-change: auto;
}
.status-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    display: inline-block;
    border-radius: 50%;
    background: var(--sage);
    animation: dot-sonar 2s ease-out infinite,
               dot-glow  2s ease-in-out infinite;
}

.tag-pill{display:inline-flex;align-items:center;padding:.35rem .72rem;border:1px solid var(--border);border-radius:var(--radius-full);color:var(--text-muted);background:rgba(255,255,255,.025);font-size:.72rem;font-weight:600}

/* Heroes */
.hero-section{position:relative;isolation:isolate;padding:clamp(5rem,10vw,9rem) 0 clamp(4rem,8vw,7rem);overflow:hidden}.hero-section::before{content:'';position:absolute;z-index:-1;width:clamp(260px,40vw,620px);aspect-ratio:1;top:0;right:-8%;border:1px solid rgba(210,162,76,.12);border-radius:50%;box-shadow:inset 0 0 0 4rem rgba(210,162,76,.018),inset 0 0 0 8rem rgba(210,162,76,.018);animation:orbit-ring 22s linear infinite;}.hero-section::after{content:'';position:absolute;z-index:-1;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-border),transparent)}.hero-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(310px,.72fr);align-items:center;gap:clamp(3rem,8vw,7rem)}
@keyframes orbit-ring{
    0%   { transform:rotate(0deg) scale(1); }
    50%  { transform:rotate(180deg) scale(1.045); }
    100% { transform:rotate(360deg) scale(1); }
}
.hero-greeting,.section-eyebrow{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;color:var(--gold-light);font-size:.72rem;font-weight:800;letter-spacing:.16em;line-height:1.3;text-transform:uppercase}.hero-greeting::before,.section-eyebrow::before{content:'◆';width:auto;height:auto;background:none;font-size:.42rem;color:var(--gold);line-height:1;flex-shrink:0;margin-top:.05em;animation:diamond-spin 6s ease-in-out infinite;}
@keyframes diamond-spin{
    0%,100% { transform:rotate(0deg) scale(1); color:var(--gold); }
    50%      { transform:rotate(180deg) scale(1.4); color:var(--gold-light); }
}
.hero-headline{max-width:900px;margin-bottom:1.4rem!important;color:var(--white);font-family:var(--font-display);font-size:clamp(2.6rem,5vw,4.8rem)!important;font-weight:600;letter-spacing:-.045em;line-height:.96;text-wrap:balance}.hero-subhead{max-width:720px!important;margin-bottom:2rem;color:var(--text-muted);font-size:clamp(.96rem,1.4vw,1.06rem);line-height:1.75}.hero-subhead strong{color:var(--white)}.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
/* Hero word-reveal: words stagger in via JS adding .hero-words-ready */
.hero-headline .hw{
    display:inline-block;
    opacity:0;
    transform:translateY(0.45em) skewY(2deg);
    transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.hero-headline.hero-words-ready .hw{
    opacity:1;
    transform:translateY(0) skewY(0deg);
}
.hero-photo-wrap{position:relative;max-width:430px;justify-self:end;animation:photo-float 7s ease-in-out infinite;}.hero-photo-wrap::before{content:'HO · GHANA';position:absolute;z-index:2;top:2rem;left:-2.4rem;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--gold);font-size:.62rem;font-weight:800;letter-spacing:.22em}.hero-photo-wrap::after{content:'';position:absolute;z-index:-1;inset:-1rem 1rem 1rem -1rem;border:1px solid var(--accent-border);border-radius:110px 16px 110px 16px;animation:glow-border 4s ease-in-out infinite;}.hero-photo-card{position:relative;overflow:hidden;background:var(--paper);border:0;border-radius:110px 16px 110px 16px;padding:0;box-shadow:var(--shadow)}.hero-photo-card img{width:100%;height:min(620px,67vh);min-height:470px;object-fit:cover;object-position:center top;border-radius:inherit;transition:transform .9s var(--ease);}.hero-photo-wrap:hover .hero-photo-card img{transform:scale(1.03);}.hero-photo-caption{position:absolute;left:1rem;right:1rem;bottom:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border:1px solid rgba(255,255,255,.16);border-radius:12px 12px 45px 12px;background:rgba(8,17,31,.84);backdrop-filter:blur(14px)}.hero-caption-name{color:var(--white);font-weight:700;line-height:1.2}.hero-caption-role{color:var(--gold-light);font-size:.72rem;font-weight:700;text-transform:uppercase}
@keyframes photo-float{
    0%,100% { transform:translateY(0px) rotate(0deg); }
    33%      { transform:translateY(-9px) rotate(.25deg); }
    66%      { transform:translateY(-4px) rotate(-.2deg); }
}
@keyframes glow-border{
    0%,100% { opacity:.5; box-shadow:none; }
    50%      { opacity:1; box-shadow:0 0 28px rgba(210,162,76,.18); }
}
/* Retired legacy hero overrides: every page now uses the intro poster hero
   (see INTRO POSTER HERO below), so the old per-page .hero-headline and
   .hero-photo-card exceptions are no longer needed. */

/* ==========================================================================
   INTRO POSTER HERO (Editorial Magazine Card inspired by reference)
   ========================================================================== */
body[data-page='index'] .hero-section {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3.5rem, 6vw, 5.5rem);
}

.intro-poster-card {
    position: relative;
    background: transparent;
    border-radius: 36px;
    box-shadow: 0 0 0 1px rgba(210, 162, 76, 0.22);
    overflow: hidden;
    color: var(--text-main);
    isolation: isolate;
    transition: box-shadow 0.4s ease;
}

.intro-poster-card:hover {
    box-shadow: 0 0 0 1px rgba(210, 162, 76, 0.45);
}

/* Faint decorative background monogram */
.intro-poster-watermark {
    position: absolute;
    top: -40px;
    left: 8%;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(14rem, 26vw, 24rem);
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(210, 162, 76, 0.08);
    pointer-events: none;
    z-index: 0;
    line-height: 1;
    user-select: none;
    letter-spacing: -0.05em;
}

.intro-poster-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    align-items: stretch;
    position: relative;
    z-index: 1;
}

.intro-poster-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.8rem) 0;
    position: relative;
    z-index: 2;
}

.intro-status-wrap {
    margin-bottom: 1.25rem;
}

.status-chip-light {
    border-color: rgba(143, 185, 150, 0.5) !important;
    background: rgba(143, 185, 150, 0.12) !important;
    color: #c6e4cb !important;
    font-weight: 700;
}

.intro-kicker {
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: -0.015em;
    margin-bottom: 0.85rem;
    line-height: 1.3;
}

.intro-headline {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(3.2rem, 6.5vw, 6.2rem);
    font-weight: 900;
    line-height: 0.94;
    letter-spacing: -0.045em;
    margin-bottom: 1.5rem;
}

.intro-headline .intro-line {
    display: block;
}

.intro-headline .intro-dark {
    color: var(--white);
}

.intro-headline .intro-orange {
    color: #e25822;
    text-shadow: 0 4px 22px rgba(226, 88, 34, 0.3);
}

.intro-bio {
    font-size: clamp(0.95rem, 1.35vw, 1.06rem);
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 520px;
    margin-bottom: 1.8rem;
}

.intro-bio strong {
    color: var(--white);
    font-weight: 700;
}

.intro-bio a {
    color: var(--gold-light);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.intro-bio a:hover {
    color: var(--white);
}

.intro-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}

.btn-intro-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.75rem 1.45rem;
    background: var(--gold);
    color: #08111f !important;
    border: 1px solid var(--gold);
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: transform 0.25s var(--ease), background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.btn-intro-primary:hover {
    transform: translateY(-3px);
    background: var(--gold-light);
    border-color: var(--gold-light);
    box-shadow: 0 10px 24px rgba(210, 162, 76, 0.35);
}

.btn-intro-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.75rem 1.4rem;
    background: transparent;
    color: var(--text-main);
    border: 1.5px solid rgba(245, 240, 230, 0.28);
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: transform 0.25s var(--ease), border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.btn-intro-outline:hover {
    transform: translateY(-3px);
    border-color: var(--gold);
    color: var(--gold-light);
    background: rgba(210, 162, 76, 0.08);
}

.intro-signature-script {
    display: flex;
    flex-direction: column;
    font-family: 'Caveat', cursive, sans-serif;
    font-size: clamp(2.7rem, 4.2vw, 3.6rem);
    line-height: 0.76;
    color: #ffffff;
    position: relative;
    user-select: none;
    align-self: flex-start;
}

.intro-photo-caption {
    position: absolute;
    z-index: 10;
    left: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px 8px 24px 8px;
    background: rgba(8, 17, 31, 0.62);
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 12px 32px rgba(0, 0, 0, 0.3);
}

.sig-first {
    display: block;
    transform: rotate(-1.5deg);
}

.sig-last-wrap {
    position: relative;
    display: inline-block;
    margin-top: 0.15em;
    padding: 0 0.2em;
}

.sig-last-highlight {
    position: absolute;
    left: -6px;
    right: -10px;
    top: 25%;
    bottom: 12%;
    background: #e25822;
    border-radius: 4px;
    z-index: 1;
    transform: rotate(-2deg);
}

.sig-last {
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-weight: 700;
}

.intro-photo-caption-copy {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.35;
}

.intro-photo-caption-role {
    color: var(--gold-light);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.intro-photo-caption-location {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
}

.intro-photo-caption-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Right side photo column */
.intro-poster-photo-wrap {
    position: relative;
    min-height: 540px;
    overflow: hidden;
    background: #0d1a2d;
    display: flex;
    align-items: stretch;
}

.intro-photo-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.intro-photo-img {
    width: 100%;
    height: 100%;
    min-height: 540px;
    object-fit: cover;
    object-position: center top;
    filter: none;
    transition: transform 0.65s var(--ease);
}

.intro-poster-photo-wrap:hover .intro-photo-img {
    transform: scale(1.03);
}

.intro-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,26,48,0.05) 0%, rgba(11,26,48,0.2) 65%, rgba(7,22,44,0.7) 100%);
    pointer-events: none;
}

/* Floating "Swipe 👆" Pill */
.intro-swipe-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 1.35rem;
    background: #e25822;
    color: #ffffff !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    border-radius: var(--radius-full);
    box-shadow: 0 10px 28px rgba(226, 88, 34, 0.45);
    text-decoration: none;
    transition: transform 0.25s var(--ease), box-shadow 0.25s ease, background 0.25s ease;
    animation: swipe-bounce 3.5s ease-in-out infinite;
}

.intro-swipe-pill:hover {
    transform: translateY(-4px) scale(1.06);
    background: #f0642f;
    box-shadow: 0 16px 36px rgba(226, 88, 34, 0.65);
    animation: none;
}

.intro-swipe-pill svg {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.intro-swipe-pill:hover svg {
    transform: translateY(-2px);
}

@keyframes swipe-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

main,
.hero-section,
.section-wrap,
.footer,
.site-footer,
.container {
    position: relative;
    z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 960px) {
    .intro-poster-grid {
        grid-template-columns: 1fr;
    }
    .intro-poster-card {
        border-radius: 28px;
    }
    .intro-poster-content {
        padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.2rem) 0;
    }
    .intro-poster-photo-wrap {
        min-height: 440px;
    }
    .intro-photo-img {
        min-height: 440px;
        max-height: 540px;
    }
    .intro-photo-caption {
        gap: 0.7rem;
    }
    .intro-photo-caption-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.8rem;
    }
    .intro-swipe-pill {
        align-self: flex-end;
    }
}

/* Keep short poster headline lines from wrapping on small phones */
@media (max-width: 480px) {
    .intro-headline {
        font-size: clamp(2.1rem, 10vw, 2.9rem);
    }
}


/* Sections */
.section-wrap{position:relative;padding:clamp(5rem,9vw,8.5rem) 0;border-top:0}.section-wrap+.section-wrap::before{content:'';position:absolute;top:0;left:max(1.5rem,calc((100vw - var(--container-width))/2));right:max(1.5rem,calc((100vw - var(--container-width))/2));height:1px;background:var(--border)}main>.section-wrap:nth-of-type(even){background:linear-gradient(90deg,transparent,rgba(255,255,255,.018) 16%,rgba(255,255,255,.018) 84%,transparent)}.section-head{display:grid;grid-template-columns:minmax(190px,.34fr) minmax(0,1fr);column-gap:2rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem)}.section-head .section-eyebrow{grid-row:1/span 2;align-self:start;padding-top:.55rem}.section-title{color:var(--white);font-family:var(--font-display);font-size:clamp(1.9rem,3.8vw,3.4rem);font-weight:600;letter-spacing:-.04em;line-height:1.05;text-wrap:balance}.section-desc{max-width:720px;margin-top:.85rem;color:var(--text-muted);font-size:1rem}

/* Projects */
.projects-grid{display:flex;flex-direction:column;gap:clamp(2rem,5vw,4.5rem)}.spotlight-card{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);min-height:500px;overflow:hidden;background:var(--ink-2);border:1px solid var(--border);border-radius:10px 60px 10px 60px;box-shadow:0 20px 60px rgba(0,0,0,.14);transition:transform .35s var(--ease),border-color .35s ease}.spotlight-card:hover{transform:translateY(-7px);border-color:var(--border-hover)}.spotlight-card.reverse{grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr);border-radius:60px 10px 60px 10px}.spotlight-card.reverse .spotlight-media{order:2}.spotlight-card.reverse .spotlight-info{order:1}.spotlight-media{position:relative;min-height:440px;overflow:hidden;background:#050b14;padding:0!important}.spotlight-media::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 50%,rgba(8,17,31,.38));pointer-events:none}.spotlight-media img{width:100%!important;height:100%!important;min-height:440px;max-height:none!important;object-fit:cover;transition:transform .7s var(--ease)}.spotlight-card:hover .spotlight-media img{transform:scale(1.035)}.spotlight-card .spotlight-media[style] img[style]{width:min(62%,300px)!important;height:auto!important;min-height:0;object-fit:contain!important;margin:auto;position:absolute;inset:0}.spotlight-badge{position:absolute;z-index:2;top:1.25rem;left:1.25rem;display:inline-flex;align-items:center;gap:.55rem;padding:.5rem .85rem;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-full);color:var(--white);background:rgba(8,17,31,.8);backdrop-filter:blur(12px);font-size:.68rem;font-weight:700}.spotlight-info,.spotlight-card.reverse .spotlight-info{display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,5vw,4.25rem)!important}.spotlight-category{margin-bottom:1rem;color:var(--gold-light);font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.spotlight-title{margin-bottom:1rem;color:var(--white);font-family:var(--font-display);font-size:clamp(2.1rem,4vw,3.75rem);font-weight:600;letter-spacing:-.04em;line-height:1}.spotlight-story{margin-bottom:1.5rem;color:var(--text-muted);font-size:.95rem;line-height:1.75}.spotlight-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem}.spotlight-actions{display:flex;flex-wrap:wrap;gap:.7rem}

/* Stories, timelines and cards */
.story-box{position:relative;max-width:950px;margin:0 auto 5rem;padding:clamp(2.2rem,6vw,5rem);border:1px solid var(--accent-border);border-radius:10px 70px 10px 70px;background:linear-gradient(145deg,rgba(210,162,76,.09),rgba(255,255,255,.02))}.story-box::before{content:'“';position:absolute;top:.8rem;left:1.6rem;color:rgba(210,162,76,.2);font-family:var(--font-display);font-size:7rem;line-height:1}.story-lead{position:relative;margin-bottom:1.5rem;color:var(--white);font-family:var(--font-display);font-size:clamp(1.65rem,3vw,2.4rem);font-weight:600;line-height:1.3}.story-body{color:var(--text-muted);font-size:1rem;line-height:1.85}.story-body+.story-body{margin-top:1rem}.story-body strong{color:var(--white)}
.timeline-clean{position:relative;max-width:980px;margin:2rem auto 0}.timeline-clean::before{content:'';position:absolute;left:164px;top:0;bottom:0;width:1px;background:linear-gradient(var(--gold),var(--border))}.timeline-row{position:relative;display:grid;grid-template-columns:140px 1fr;gap:3.5rem;padding:0 0 3.25rem;border:0}.timeline-row::before{content:'';position:absolute;top:.45rem;left:159px;width:11px;height:11px;border:3px solid var(--ink);border-radius:50%;background:var(--gold);box-shadow:0 0 0 1px var(--gold);animation:timeline-beat 2.8s ease-in-out infinite;}.timeline-row:nth-child(2)::before{animation-delay:.5s}.timeline-row:nth-child(3)::before{animation-delay:1s}.timeline-row:nth-child(4)::before{animation-delay:1.5s}.timeline-year{color:var(--gold-light);font-size:.72rem;font-weight:800;letter-spacing:.05em;text-align:right}.timeline-content{padding:0 0 2rem;border-bottom:1px solid var(--border)}.timeline-content h4{margin-bottom:.55rem;color:var(--white);font-family:var(--font-display);font-size:1.45rem;line-height:1.25}.timeline-content p{color:var(--text-muted);font-size:.92rem;line-height:1.75}.timeline-content a{color:var(--gold-light)!important}
@keyframes timeline-beat{
    0%,100% { box-shadow:0 0 0 1px var(--gold); transform:scale(1); }
    40%      { box-shadow:0 0 0 6px rgba(210,162,76,.22), 0 0 0 12px rgba(210,162,76,.07); transform:scale(1.14); }
    60%      { box-shadow:0 0 0 3px rgba(210,162,76,.12); transform:scale(1); }
}
.skills-grid-clean,.principles-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;margin-top:1.5rem}.skill-card-clean,.principle-card{position:relative;grid-column:span 4;min-height:230px;padding:2rem;overflow:hidden;border:1px solid var(--border);border-radius:8px 32px 8px 32px;background:rgba(13,25,41,.74);transition:transform .35s var(--ease),border-color .35s ease,background .35s ease,box-shadow .35s ease}.skill-card-clean:nth-child(even),.principle-card:nth-child(even){border-radius:32px 8px 32px 8px}.skill-card-clean:hover,.principle-card:hover{transform:translateY(-7px) scale(1.015);border-color:var(--border-hover);background:var(--ink-3);box-shadow:0 24px 56px rgba(0,0,0,.22),0 0 0 1px rgba(210,162,76,.14);}.skill-card-clean::after,.principle-card::after{content:'';position:absolute;width:90px;height:90px;right:-46px;bottom:-46px;border:1px solid var(--accent-border);border-radius:50%;transition:transform .5s var(--ease),opacity .5s ease;}.skill-card-clean:hover::after,.principle-card:hover::after{transform:scale(1.5);opacity:.6;}.skill-card-clean>span:first-child,.principle-num{display:block!important;margin-bottom:2.2rem!important;font-size:.72rem!important;font-weight:800!important;letter-spacing:.13em}.skill-card-clean>span:first-child,.principle-num{color:var(--gold)}.skill-card-clean h4,.principle-card h4{margin-bottom:.6rem;color:var(--white);font-family:var(--font-display);font-size:1.45rem;font-weight:600;line-height:1.2}.skill-card-clean p,.principle-card p{color:var(--text-muted);font-size:.88rem;line-height:1.7}.skill-card-clean .tag-pill{margin-top:.4rem}body[data-page='index'] .skills-grid-clean .skill-card-clean{grid-column:span 3}

/* Galleries */
.photo-gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:dense;gap:1rem;margin-top:2rem}.memory-card{position:relative;grid-column:span 4;overflow:hidden;min-height:360px;border:1px solid var(--border);border-radius:8px 35px 8px 35px;background:var(--ink-2);cursor:pointer;transition:transform .35s var(--ease),border-color .35s ease}.memory-card:nth-child(4n + 1){grid-column:span 7}.memory-card:nth-child(4n + 2){grid-column:span 5}.memory-card:hover{transform:translateY(-6px);border-color:var(--border-hover)}.memory-media{position:absolute;inset:0;padding:0!important;background:var(--ink-2)!important}.memory-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(5,11,20,.94))}.memory-media img{width:100%!important;height:100%!important;max-height:none!important;aspect-ratio:auto;object-fit:cover!important;transition:transform .7s var(--ease)}.memory-card:hover .memory-media img{transform:scale(1.045)}.memory-card .memory-media[style] img[style]{width:min(55%,250px)!important;height:auto!important;object-fit:contain!important;margin:auto;position:absolute;inset:0}.memory-caption{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:1.5rem}.memory-event{display:block;margin-bottom:.3rem;color:var(--gold-light);font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.memory-title{max-width:450px;color:var(--white);font-family:var(--font-display);font-size:1.4rem;font-weight:600;line-height:1.2}body[data-page='certifications'] .memory-card{min-height:460px}body[data-page='index'] .photo-gallery-grid .memory-card,body[data-page='about'] .photo-gallery-grid .memory-card{grid-column:span 4;min-height:340px}

/* Creed and CTA */
.creed-banner{position:relative;isolation:isolate;overflow:hidden;margin:0;padding:clamp(2.5rem,6vw,5.5rem)!important;border:1px solid var(--accent-border);border-radius:10px 70px 10px 70px;background:linear-gradient(125deg,rgba(210,162,76,.12),rgba(13,25,41,.95) 45%,rgba(20,34,56,.8));text-align:center;animation:creed-breathe 5s ease-in-out infinite;}.creed-banner::after{content:'SAD';position:absolute;z-index:-1;right:-1rem;bottom:-3.5rem;color:rgba(255,255,255,.025);font-family:var(--font-display);font-size:clamp(8rem,20vw,17rem);font-weight:700;line-height:1;animation:creed-watermark 8s ease-in-out infinite;}.creed-quote{max-width:900px;margin:0 auto 1.2rem;color:var(--white);font-family:var(--font-display);font-size:clamp(2rem,4.5vw,4.25rem)!important;font-weight:600;letter-spacing:-.035em;line-height:1.08}.creed-author{color:var(--gold-light);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.creed-banner[style*='text-align: left']{display:grid!important;grid-template-columns:1fr;align-items:center!important;gap:1.4rem!important;text-align:left!important;animation:none;}.creed-banner[style*='text-align: left'] h3{color:var(--white)!important;font-family:var(--font-display);font-size:clamp(2rem,4vw,3.4rem)!important;font-weight:600!important;line-height:1.05}.creed-banner[style*='text-align: left'] p{color:var(--text-muted)!important}
/* Mobile-first: split CTA banners stack by default, split into text + buttons from 900px up */
@media(min-width:900px){.creed-banner[style*='text-align: left']{grid-template-columns:minmax(0,1fr) auto;gap:2rem!important}.footer-kicker{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
@keyframes creed-breathe{
    0%,100% { border-color:rgba(210,162,76,.34); box-shadow:none; }
    50%      { border-color:rgba(210,162,76,.55); box-shadow:0 0 60px rgba(210,162,76,.08),inset 0 0 40px rgba(210,162,76,.04); }
}
@keyframes creed-watermark{
    0%,100% { opacity:.025; transform:translateX(0) rotate(0deg); }
    50%      { opacity:.04; transform:translateX(-1.5rem) rotate(-1.5deg); }
}

/* Contact */
.contact-grid-clean{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);align-items:start;gap:clamp(2rem,6vw,5rem);margin-top:0}.contact-direct-cards{display:flex;flex-direction:column;gap:.75rem}.contact-channel{display:flex;align-items:center;gap:1rem;padding:1rem 0;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;transition:padding .25s var(--ease),border-color .25s ease}a.contact-channel:hover{padding-left:.65rem;border-color:var(--gold)}.channel-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border:1px solid var(--border);border-radius:50%;background:rgba(255,255,255,.025);font-size:1rem}.channel-info{min-width:0}.channel-info strong{display:block;color:var(--gold-light);font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.channel-info span{display:block;overflow-wrap:anywhere;color:var(--white);font-size:.92rem;font-weight:600}.contact-direct-cards>div[style]{margin-top:1.5rem!important;padding:1.5rem!important;border:1px solid var(--accent-border)!important;border-left:1px solid var(--accent-border)!important;border-radius:8px 28px 8px 28px!important;background:var(--accent-soft)!important}.contact-form-box{padding:clamp(1.6rem,5vw,3.5rem);border:1px solid var(--border);border-radius:8px 45px 8px 45px;background:var(--ink-2);box-shadow:var(--shadow)}.contact-form-box h3{color:var(--white)!important;font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem)!important;font-weight:600!important}.contact-form-box>p{color:var(--text-muted)!important}.form-group-warm{margin-bottom:1.15rem}.label-warm{display:block;margin-bottom:.45rem;color:var(--white);font-size:.75rem;font-weight:700}.input-warm,.textarea-warm{width:100%;padding:.9rem 1rem;border:1px solid var(--border);border-radius:7px;outline:0;color:var(--white);background:rgba(5,11,20,.7);font-family:var(--font);font-size:.92rem;transition:border-color .2s ease,box-shadow .2s ease}.input-warm:focus,.textarea-warm:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(210,162,76,.1)}.textarea-warm{min-height:130px;resize:vertical}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;padding:2rem;background:rgba(3,7,13,.94);backdrop-filter:blur(14px)}.lightbox.active{display:flex;animation:lightbox-in .3s var(--ease) both;}.lightbox img{max-width:92vw;max-height:84vh;object-fit:contain;border:1px solid var(--accent-border);border-radius:8px 30px 8px 30px;box-shadow:var(--shadow);animation:lightbox-img-in .4s var(--ease) .08s both;}.lightbox-close{position:absolute;top:1.2rem;right:1.2rem;width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;color:var(--white);background:var(--ink-2);font-size:1.5rem;cursor:pointer;transition:color .2s,border-color .2s,transform .2s var(--ease);}.lightbox-close:hover{color:var(--gold);border-color:var(--gold);transform:rotate(90deg) scale(1.1);}
@keyframes lightbox-in{
    0% { opacity:0; } 100% { opacity:1; }
}
@keyframes lightbox-img-in{
    0%   { opacity:0; transform:scale(.92) translateY(16px); }
    100% { opacity:1; transform:scale(1) translateY(0); }
}

/* Footer */
footer{position:relative;margin-top:auto;padding:clamp(2.5rem,5vw,4rem) 0 1.5rem;border-top:1px solid var(--border);background:#050b14;overflow:hidden}
footer::before{content:'';position:absolute;right:4%;bottom:2rem;width:clamp(180px,25vw,340px);height:clamp(180px,25vw,340px);background:url('../images/sad-watermark-gold.png') center/contain no-repeat;opacity:.07;pointer-events:none;z-index:0;animation:footer-logo-drift 12s ease-in-out infinite;}
@keyframes footer-logo-drift{
    0%,100% { transform:translateY(0) rotate(0deg); opacity:.07; }
    50%      { transform:translateY(-12px) rotate(4deg); opacity:.10; }
}
.footer-kicker{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:start;padding-bottom:clamp(1.5rem,3vw,2.5rem);margin-bottom:2rem;border-bottom:1px solid var(--border)}.footer-kicker span{display:block;margin-bottom:.4rem;color:var(--gold-light);font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.footer-kicker h2{max-width:760px;color:var(--white);font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,3rem);font-weight:600;letter-spacing:-.04em;line-height:1.05}.footer-kicker a.btn-warm-primary{animation:btn-breathe 3.6s ease-in-out infinite;}
.footer-content-clean{position:relative;z-index:1;display:grid;grid-template-columns:minmax(280px,1.5fr) repeat(3,minmax(120px,.55fr));gap:clamp(1.5rem,3vw,3rem)}.footer-bio-col{max-width:390px}.footer-brand-row{display:flex;align-items:center;gap:.9rem;margin-bottom:.75rem}.footer-brand-row img{width:44px;height:44px;object-fit:cover;border-radius:9px 9px 20px 9px}.footer-bio-name{color:var(--white);font-family:var(--font-display);font-size:1.2rem;font-weight:600;line-height:1.1}.footer-bio-text{color:var(--text-muted);font-size:.84rem;line-height:1.7}.footer-nav-col h5{margin-bottom:.75rem;color:var(--gold-light);font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.footer-nav-col ul{display:flex;flex-direction:column;gap:.5rem;list-style:none}.footer-nav-col a{color:var(--text-muted);font-size:.84rem;transition:color .2s ease,padding-left .2s ease;display:inline-block;}.footer-nav-col a:hover{color:var(--white);padding-left:.4rem;}.footer-bottom-clean{position:relative;z-index:1;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2rem;padding-top:1rem;border-top:1px solid var(--border);color:var(--text-subtle);font-size:.72rem}

/* ── Scroll Reveal System ───────────────────────────────────── */
/* Elements start hidden and animate in when JS adds .is-visible */
[data-reveal]{
    opacity:0;
    transform:translateY(32px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal='left']  { transform:translateX(-40px); }
[data-reveal='right'] { transform:translateX(40px); }
[data-reveal='scale'] { transform:scale(.94); }
[data-reveal].is-visible{
    opacity:1 !important;
    transform:none !important;
}
/* Legacy class kept for compatibility */
.reveal-ready .section-wrap .container>*,.reveal-ready .spotlight-card{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s var(--ease)}.reveal-ready .section-wrap .container>*.is-visible,.reveal-ready .spotlight-card.is-visible{opacity:1;transform:none}

/* Below ~1300px cards span nearly the full width, so a translateX reveal start
   pokes past the viewport edge and allows a small sideways scroll until the
   card reveals. Slide up instead on those widths: same timing, no overflow. */
@media (max-width: 1300px) {
    [data-reveal='left'],
    [data-reveal='right'] {
        transform: translateY(28px);
    }
}

/* Responsive */
@media(max-width:1080px){.skill-card-clean,.principle-card{grid-column:span 6}body[data-page='index'] .skills-grid-clean .skill-card-clean{grid-column:span 6}}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:4rem}.hero-photo-wrap{justify-self:start;width:min(100%,420px);margin-left:1.5rem}.hero-photo-card img{height:560px}.section-head{grid-template-columns:1fr}.section-head .section-eyebrow{grid-row:auto}.spotlight-card,.spotlight-card.reverse{grid-template-columns:1fr;min-height:0;border-radius:8px 42px 8px 42px}.spotlight-card.reverse .spotlight-media{order:1}.spotlight-card.reverse .spotlight-info{order:2}.spotlight-media{min-height:390px}.contact-grid-clean{grid-template-columns:1fr}.contact-direct-cards{max-width:620px}.memory-card,.memory-card:nth-child(4n + 1),.memory-card:nth-child(4n + 2),body[data-page='index'] .photo-gallery-grid .memory-card,body[data-page='about'] .photo-gallery-grid .memory-card{grid-column:span 6}.footer-content-clean{grid-template-columns:1.4fr 1fr 1fr}.footer-bio-col{grid-column:1/-1}}
@media(max-width:620px){.container{width:min(100% - 2rem,var(--container-width))}.hero-section{padding:4.25rem 0 3.75rem!important}.hero-headline,body:not([data-page='index']):not([data-page='about']):not([data-page='the-brand']) .hero-headline,body[data-page='resume'] .hero-headline,body[data-page='gallery'] .hero-headline,body[data-page='certifications'] .hero-headline{font-size:clamp(3rem,15vw,4.8rem)!important;line-height:.94}.hero-subhead{font-size:.96rem}.hero-ctas{align-items:stretch}.hero-ctas>a{width:100%}.hero-photo-wrap{width:calc(100% - 1.5rem)}.hero-photo-wrap::before{left:-1.65rem}.hero-photo-card img{min-height:0;height:480px}.section-wrap{padding:4.5rem 0}.section-title{font-size:clamp(2.4rem,12vw,3.6rem)}.spotlight-media{min-height:320px}.spotlight-media img{min-height:320px}.spotlight-info,.spotlight-card.reverse .spotlight-info{padding:1.6rem!important}.spotlight-actions>a{width:100%}.skills-grid-clean,.principles-grid,.photo-gallery-grid{grid-template-columns:1fr}.skill-card-clean,.principle-card,body[data-page='index'] .skills-grid-clean .skill-card-clean,body[data-page='case-studies'] .skills-grid-clean .skill-card-clean,body[data-page='contact'] .skills-grid-clean .skill-card-clean,.memory-card,.memory-card:nth-child(4n + 1),.memory-card:nth-child(4n + 2),body[data-page='index'] .photo-gallery-grid .memory-card,body[data-page='about'] .photo-gallery-grid .memory-card{grid-column:1}.memory-card,body[data-page='certifications'] .memory-card{min-height:390px}.timeline-clean::before{left:7px}.timeline-row{grid-template-columns:1fr;gap:.6rem;padding-left:2rem}.timeline-row::before{left:2px}.timeline-year{text-align:left}.story-box{padding:2rem 1.4rem}.creed-banner{padding:2rem 1.4rem!important}.creed-banner[style*='text-align: left']>div:last-child{width:100%}.creed-banner[style*='text-align: left']>div:last-child a{width:100%}.contact-form-box{padding:1.5rem}.footer-content-clean{grid-template-columns:1fr 1fr}.footer-bio-col{grid-column:1/-1}.footer-nav-col:last-child{grid-column:1/-1}.footer-bottom-clean{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.reveal-ready .section-wrap .container>*,.reveal-ready .spotlight-card{opacity:1;transform:none}[data-reveal],[data-reveal='left'],[data-reveal='right'],[data-reveal='scale']{opacity:1;transform:none}}

/* Refined scale and stronger SAD identity */
.hero-section{padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(3.5rem,6vw,5.5rem)}
.hero-section::before{width:clamp(230px,32vw,460px)}
.hero-headline{font-size:clamp(2.2rem,4vw,4.2rem)!important;line-height:1.04}
.hero-photo-wrap{max-width:380px}
.hero-photo-wrap::before{content:'SUCCESS ABOVE DREAMS';left:-2rem;font-size:.56rem}
.hero-photo-wrap::after{border-radius:70px 12px 70px 12px}
.hero-photo-card{border-radius:70px 12px 70px 12px}
.hero-photo-card img{height:min(520px,60vh);min-height:410px}
.section-wrap{padding:clamp(4rem,7vw,6.5rem) 0}
.section-head{margin-bottom:clamp(2rem,4vw,3.5rem)}
.section-title{font-size:clamp(1.6rem,3vw,3rem)}
.projects-grid{gap:clamp(1.75rem,4vw,3.5rem)}
.spotlight-card{min-height:430px;border-radius:8px 38px 8px 38px}
.spotlight-card.reverse{border-radius:38px 8px 38px 8px}
.spotlight-media,.spotlight-media img{min-height:380px}
.spotlight-info,.spotlight-card.reverse .spotlight-info{padding:clamp(1.8rem,4vw,3.25rem)!important}
.spotlight-title{font-size:clamp(1.6rem,2.8vw,2.4rem)}
.story-box{margin-bottom:4rem;padding:clamp(2rem,4.5vw,3.75rem);border-radius:8px 44px 8px 44px}
.story-lead{font-size:clamp(1.2rem,2vw,1.7rem)}
.skill-card-clean,.principle-card{min-height:200px;padding:1.65rem}
.skill-card-clean>span:first-child,.principle-num{margin-bottom:1.5rem!important}
.skill-card-clean h4,.principle-card h4{font-size:1.2rem}
.memory-card{min-height:320px}
body[data-page='certifications'] .memory-card{min-height:390px}
body[data-page='index'] .photo-gallery-grid .memory-card,body[data-page='about'] .photo-gallery-grid .memory-card{min-height:310px}
.creed-banner{padding:clamp(2.25rem,5vw,4rem)!important;border-radius:8px 44px 8px 44px}
.creed-banner::after{font-size:clamp(7rem,15vw,12rem)}
.creed-quote{font-size:clamp(1.4rem,2.5vw,2.2rem)!important}
.creed-banner[style*='text-align: left'] h3{font-size:clamp(1.5rem,2.5vw,2.2rem)!important}
.contact-form-box{padding:clamp(1.6rem,4vw,2.75rem);border-radius:8px 34px 8px 34px}
.contact-form-box h3{font-size:clamp(1.6rem,2.5vw,2rem)!important}
footer{padding:clamp(2rem,4vw,3.5rem) 0 1.5rem}
.footer-kicker{padding-bottom:clamp(1.25rem,3vw,2rem);margin-bottom:1.75rem}
.footer-kicker h2{font-size:clamp(1.4rem,2.5vw,2rem)}

@media(max-width:900px){
    /* Top bar keeps only the brand on mobile; the dock takes over navigation */
    .nav-links{display:none}
    #bottom-navbar{display:block;position:fixed;bottom:0;left:0;right:0;z-index:200;padding:0 1rem max(.7rem,env(safe-area-inset-bottom))}
    body{padding-bottom:92px}
    .hero-grid{gap:3rem}
    .hero-photo-card img{height:500px}
    .spotlight-media{min-height:340px}
}

/* Bottom nav: tighten on small screens */
@media(max-width:680px){
    #bottom-navbar{padding:0 .6rem max(.55rem,env(safe-area-inset-bottom))}
    .bottom-nav-shell{height:60px}
    .brand-avatar{width:36px;height:36px}
    .bottom-nav-link{padding:.45rem .5rem;font-size:.56rem;letter-spacing:.05em}
}

/* Bottom nav: icon-only strip on very small phones */
@media(max-width:480px){
    .bottom-nav-link > span:last-child{display:none}
    .bottom-nav-link{padding:.65rem .55rem;gap:0}
    .bottom-nav-icon{width:22px;height:22px}
    .bottom-nav-icon svg{width:20px;height:20px}
    .bottom-nav-contact > span:last-child{display:none}
}

/* ── Brand Manifesto Layer (the-brand.html) ─────────────────── */
.brand-manifesto-hero {
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(5rem, 12vw, 9rem) 0 clamp(4rem, 8vw, 6rem);
    position: relative;
}

.manifesto-kicker {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    display: inline-block;
}

.manifesto-headline {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--white);
    max-width: 980px;
    margin-bottom: 2rem;
}

.manifesto-taglines {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 2rem;
    margin-bottom: 3.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.manifesto-tagline-item {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    color: var(--gold-light);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.manifesto-tagline-item:not(:last-child)::after {
    content: '·';
    margin-left: 2rem;
    color: var(--text-subtle);
}

.manifesto-opening {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.2vw, 1.9rem);
    line-height: 1.5;
    color: var(--text-main);
    max-width: 860px;
    margin-bottom: 2rem;
    font-weight: 500;
}

.manifesto-opening span {
    color: var(--white);
    font-weight: 600;
}

/* One statement per screen */
.manifesto-screen {
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(3rem, 6vw, 5rem) 0;
    position: relative;
    border-top: 1px solid rgba(226, 232, 240, 0.08);
}

.manifesto-screen:first-of-type {
    border-top: none;
}

.manifesto-label {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
    font-size: clamp(0.78rem, 1.2vw, 0.92rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 1.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.manifesto-label::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--gold);
    animation: line-draw-in 1.2s var(--ease) both;
    transform-origin: left center;
}
@keyframes line-draw-in {
    0%   { transform:scaleX(0); opacity:0; }
    100% { transform:scaleX(1); opacity:1; }
}

.manifesto-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--white);
    margin-bottom: 1.2rem;
    max-width: 880px;
}

.manifesto-body {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.75;
    color: var(--text-muted);
    max-width: 700px;
}

.manifesto-body strong {
    color: var(--white);
    font-weight: 600;
}

.manifesto-proverb-box {
    margin-top: 2.2rem;
    padding: 1.8rem 2.2rem;
    border-left: 2px solid var(--gold);
    background: rgba(210, 162, 76, 0.06);
    border-radius: 0 16px 16px 0;
    max-width: 720px;
}

.manifesto-proverb-ewe {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    color: var(--gold-light);
    margin-bottom: 0.5rem;
    line-height: 1.35;
}

.manifesto-proverb-meaning {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Photo with personal quote */
.manifesto-portrait-wrap {
    display: grid;
    grid-template-columns: minmax(280px, 400px) 1fr;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
    margin: clamp(4rem, 8vw, 7rem) 0;
}

.manifesto-portrait-img {
    border-radius: 60px 12px 60px 12px;
    overflow: hidden;
    border: 1px solid var(--accent-border);
    box-shadow: var(--shadow);
}

.manifesto-portrait-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.manifesto-portrait-text {
    max-width: 560px;
}

.manifesto-portrait-quote {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    line-height: 1.25;
    color: var(--white);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.manifesto-portrait-author {
    font-size: 0.82rem;
    color: var(--gold-light);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Closing Line & Creed */
.manifesto-closing-section {
    padding: clamp(6rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 7rem);
    text-align: center;
    position: relative;
}

.manifesto-closing-statement {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.4vw, 3.6rem);
    line-height: 1.2;
    color: var(--white);
    max-width: 860px;
    margin: 0 auto 4rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.manifesto-creed-box {
    max-width: 920px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4.5rem);
    border: 1px solid var(--accent-border);
    border-radius: 12px 60px 12px 60px;
    background: linear-gradient(135deg, rgba(210, 162, 76, 0.12), rgba(13, 25, 41, 0.9));
    position: relative;
}

@media(max-width: 800px) {
    .manifesto-tagline-item:not(:last-child)::after {
        display: none;
    }
    .manifesto-portrait-wrap {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .manifesto-screen {
        min-height: auto;
        padding: 4rem 0;
    }
}

/* ── Home: Identity & Brand Layout ─────────────────────────── */
.home-identity-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
    margin-top: 1.5rem;
}

.home-pillar-card {
    padding: clamp(1.5rem, 3vw, 2.2rem);
    border: 1px solid var(--border);
    border-radius: 12px 32px 12px 32px;
    background: rgba(13, 25, 41, 0.7);
    margin-bottom: 1.25rem;
    transition: transform 0.35s var(--ease), border-color 0.35s ease, box-shadow 0.35s ease;
}

.home-pillar-card:hover {
    transform: translateY(-6px) scale(1.012);
    border-color: var(--border-hover);
    box-shadow: 0 20px 48px rgba(0,0,0,.2), 0 0 0 1px rgba(210,162,76,.12);
}

.home-pillar-num {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--gold);
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.6rem;
}

.home-pillar-card h4 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--white);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.home-pillar-card p {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.7;
}

.home-craft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.home-craft-card {
    padding: clamp(1.8rem, 3.5vw, 2.5rem);
    border: 1px solid var(--border);
    border-radius: 12px 36px 12px 36px;
    background: linear-gradient(145deg, rgba(13, 25, 41, 0.85), rgba(8, 17, 31, 0.95));
    transition: transform 0.38s var(--ease), border-color 0.38s ease, box-shadow 0.38s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.home-craft-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(210,162,76,.06) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .38s ease;
    pointer-events: none;
    border-radius: inherit;
}
.home-craft-card:hover {
    transform: translateY(-7px) scale(1.015);
    border-color: var(--border-hover);
    box-shadow: 0 28px 60px rgba(0,0,0,.22), 0 0 0 1px rgba(210,162,76,.14);
}
.home-craft-card:hover::before { opacity: 1; }

@media(max-width: 900px) {
    .home-identity-grid {
        grid-template-columns: 1fr;
    }
}

/* Glass-and-clay surface treatment */
.intro-poster-card,
.story-box,
.skill-card-clean,
.principle-card,
.home-pillar-card,
.home-craft-card,
.creed-banner,
.contact-form-box {
    border-color: rgba(235, 241, 248, 0.3);
    background-color: rgba(31, 45, 62, 0.72);
    background-image: linear-gradient(140deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.055) 25%, transparent 48%, rgba(210, 162, 76, 0.16)), radial-gradient(ellipse at top left, rgba(210, 162, 76, 0.16), transparent 62%);
    backdrop-filter: blur(28px) saturate(145%);
    -webkit-backdrop-filter: blur(28px) saturate(145%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 1px 0 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 18px 42px rgba(0, 0, 0, 0.38), 0 2px 12px rgba(210, 162, 76, 0.09);
}

.intro-poster-card {
    border: 1px solid rgba(235, 207, 151, 0.48);
    background-color: rgba(17, 31, 50, 0.76);
}

.intro-poster-content {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(8, 17, 31, 0.32) 45%, rgba(210, 162, 76, 0.09));
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.12), inset -1px 0 0 rgba(255, 255, 255, 0.06);
}

.intro-poster-card:hover {
    border-color: rgba(255, 224, 165, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 1px 0 0 rgba(255, 255, 255, 0.15), 0 22px 50px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(210, 162, 76, 0.22);
}

.story-box,
.skill-card-clean,
.principle-card,
.home-pillar-card,
.home-craft-card,
.creed-banner,
.contact-form-box {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 1px 0 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 18px 42px rgba(0, 0, 0, 0.38), 0 2px 12px rgba(210, 162, 76, 0.09);
}

.btn-intro-primary,
.btn-warm-primary,
.btn-nav-talk,
.bottom-nav-contact {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.38), inset -1px -1px 0 rgba(83, 53, 12, 0.25), 0 7px 18px rgba(0, 0, 0, 0.24);
}

.btn-intro-outline,
.btn-warm-outline {
    background: rgba(217, 227, 240, 0.12);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 8px 22px rgba(0, 0, 0, 0.24);
}

/* Skeuomorphic bevels and tactile press states */
.btn-intro-primary,
.btn-warm-primary,
.btn-nav-talk {
    border-color: #f0cb79;
    background: linear-gradient(180deg, #f4d27f 0%, #d2a24c 54%, #bc8732 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(109, 70, 17, 0.28), 0 3px 0 #815b23, 0 8px 18px rgba(0, 0, 0, 0.32);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24);
}

.btn-warm-primary,
.footer-kicker a.btn-warm-primary {
    animation: none;
}

.btn-whatsapp {
    border-color: #89f0ab;
    background: linear-gradient(180deg, #8cebac 0%, #65d28d 58%, #43b96e 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.48), inset 0 -2px 0 rgba(20, 95, 48, 0.26), 0 3px 0 #348954, 0 8px 18px rgba(0, 0, 0, 0.28);
}

.btn-intro-outline,
.btn-warm-outline {
    border-color: rgba(235, 241, 248, 0.42);
    background: linear-gradient(180deg, rgba(222, 232, 244, 0.2), rgba(92, 108, 127, 0.16) 48%, rgba(31, 45, 62, 0.5));
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.32), 0 3px 0 rgba(3, 8, 15, 0.72), 0 8px 18px rgba(0, 0, 0, 0.28);
}

.btn-intro-primary:hover,
.btn-warm-primary:hover,
.btn-nav-talk:hover,
.bottom-nav-contact:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #ffe29b 0%, #e5b85f 56%, #c28f3c 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.62), inset 0 -2px 0 rgba(109, 70, 17, 0.2), 0 4px 0 #815b23, 0 10px 20px rgba(0, 0, 0, 0.34);
}

.btn-whatsapp:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #a0f5ba 0%, #73df99 58%, #49bf74 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.58), inset 0 -2px 0 rgba(20, 95, 48, 0.2), 0 4px 0 #348954, 0 10px 20px rgba(0, 0, 0, 0.3);
}

.btn-intro-outline:hover,
.btn-warm-outline:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 224, 165, 0.72);
    background: linear-gradient(180deg, rgba(245, 220, 171, 0.24), rgba(92, 108, 127, 0.2) 48%, rgba(31, 45, 62, 0.58));
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.36), inset 0 -2px 0 rgba(0, 0, 0, 0.28), 0 4px 0 rgba(3, 8, 15, 0.72), 0 10px 20px rgba(0, 0, 0, 0.3);
}

.btn-intro-primary:active,
.btn-warm-primary:active,
.btn-nav-talk:active,
.btn-whatsapp:active,
.btn-intro-outline:active,
.btn-warm-outline:active {
    transform: translateY(2px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(3, 8, 15, 0.72);
}

.status-chip-light {
    border-color: rgba(178, 224, 185, 0.58) !important;
    background: linear-gradient(180deg, rgba(143, 185, 150, 0.2), rgba(36, 70, 49, 0.42)) !important;
    box-shadow: inset 0 1px 0 rgba(235, 255, 236, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.3), 0 2px 0 rgba(4, 12, 8, 0.7), 0 8px 18px rgba(0, 0, 0, 0.2);
}

.intro-photo-caption {
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.38), 0 12px 32px rgba(0, 0, 0, 0.38);
}

.creed-banner {
    animation: none;
}

/* Shared skeuomorphic finish */
#navbar {
    border-bottom-color: rgba(235, 207, 151, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 8px rgba(0, 0, 0, 0.2);
}

.brand-avatar,
.footer-brand-row img {
    border-color: rgba(237, 200, 124, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 0 rgba(0, 0, 0, 0.55), 0 5px 12px rgba(0, 0, 0, 0.28);
}

.bottom-nav-shell {
    border-color: rgba(237, 200, 124, 0.48);
    background: linear-gradient(180deg, rgba(31, 45, 62, 0.96), rgba(8, 17, 31, 0.97));
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), inset 0 -3px 0 rgba(0, 0, 0, 0.65), 0 -4px 28px rgba(0, 0, 0, 0.46), 0 4px 0 rgba(3, 8, 15, 0.82);
}

.bottom-nav-link.active,
.bottom-nav-contact {
    border: 1px solid #f0cb79;
    background: linear-gradient(180deg, #f4d27f, #d2a24c 58%, #bc8732);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), inset 0 -2px 0 rgba(109, 70, 17, 0.26), 0 2px 0 #815b23;
}

.bottom-nav-link.active:active,
.bottom-nav-contact:active {
    transform: translateY(2px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

.spotlight-card {
    border-color: rgba(235, 207, 151, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 1px 0 0 rgba(255, 255, 255, 0.08), inset 0 -2px 0 rgba(0, 0, 0, 0.34), 0 18px 40px rgba(0, 0, 0, 0.36), 0 2px 0 rgba(3, 8, 15, 0.72);
}

.spotlight-info,
.spotlight-card.reverse .spotlight-info {
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.075), transparent 44%, rgba(210, 162, 76, 0.07));
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.08);
}

.memory-card {
    border-color: rgba(235, 207, 151, 0.44);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.38), inset 2px 0 0 rgba(255, 255, 255, 0.12), inset 0 -3px 0 rgba(0, 0, 0, 0.5), 0 14px 28px rgba(0, 0, 0, 0.32);
}

.memory-card::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.memory-caption {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.story-box,
.skill-card-clean,
.principle-card,
.home-pillar-card,
.home-craft-card,
.creed-banner,
.contact-form-box {
    border-color: rgba(237, 200, 124, 0.34);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.24), inset 1px 0 0 rgba(255, 255, 255, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.3), 0 14px 30px rgba(0, 0, 0, 0.28), 0 2px 0 rgba(3, 8, 15, 0.58);
}

.timeline-content {
    padding: 1rem 1.15rem 1.2rem;
    border: 1px solid rgba(226, 232, 240, 0.14);
    border-radius: 6px 18px 6px 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(13, 25, 41, 0.28) 55%, rgba(210, 162, 76, 0.045));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.24), 0 5px 14px rgba(0, 0, 0, 0.15);
}

.contact-channel {
    padding: 0.8rem;
    border: 1px solid rgba(226, 232, 240, 0.15);
    border-radius: 7px 18px 7px 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(13, 25, 41, 0.26) 55%, rgba(210, 162, 76, 0.055));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.26), 0 5px 12px rgba(0, 0, 0, 0.16);
}

a.contact-channel:hover {
    padding-left: 0.8rem;
    transform: translateY(-2px);
    border-color: rgba(237, 200, 124, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 18px rgba(0, 0, 0, 0.24);
}

.channel-icon,
.spotlight-badge,
.tag-pill {
    border-color: rgba(237, 200, 124, 0.34);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(13, 25, 41, 0.65));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.32), 0 2px 0 rgba(0, 0, 0, 0.3);
}

.input-warm,
.textarea-warm,
.input-warm:focus,
.textarea-warm:focus {
    border-color: rgba(237, 200, 124, 0.3);
    background: linear-gradient(180deg, rgba(3, 8, 15, 0.88), rgba(13, 25, 41, 0.82));
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.56), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.input-warm:focus,
.textarea-warm:focus {
    border-color: var(--gold-light);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.48), 0 0 0 3px rgba(210, 162, 76, 0.16);
}

.lightbox-close {
    border-color: rgba(237, 200, 124, 0.44);
    background: linear-gradient(180deg, #24344a, #0d1929 65%, #07101d);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -2px 0 rgba(0, 0, 0, 0.44), 0 3px 0 #03070d, 0 8px 20px rgba(0, 0, 0, 0.3);
}

.lightbox-close:active {
    transform: translateY(2px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 0 #03070d;
}

body[data-page='about'] .intro-poster-grid {
    grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
}

body[data-page='about'] .intro-poster-photo-wrap {
    order: -1;
    min-height: 620px;
    margin: 1rem 0 1rem 1rem;
    border-radius: 18px 100px 18px 18px;
}

body[data-page='about'] .intro-poster-content {
    justify-content: center;
    padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem);
}

body[data-page='case-studies'] .intro-poster-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1.18fr);
}

body[data-page='case-studies'] .intro-poster-photo-wrap {
    min-height: 650px;
}

body[data-page='case-studies'] .intro-poster-content {
    justify-content: center;
    padding-block: 3.5rem;
}

body[data-page='certifications'] .intro-poster-grid {
    grid-template-columns: minmax(300px, 0.76fr) minmax(0, 1.24fr);
}

body[data-page='certifications'] .intro-poster-content {
    justify-content: center;
    padding-block: 3rem;
}

body[data-page='certifications'] .intro-poster-photo-wrap {
    order: -1;
    min-height: 580px;
    margin: 1rem 0 1rem 1rem;
    border-radius: 12px 90px 12px 12px;
}

body[data-page='contact'] .intro-poster-card {
    max-width: 1080px;
    margin-inline: auto;
}

body[data-page='contact'] .intro-poster-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.68fr);
}

body[data-page='contact'] .intro-poster-content {
    justify-content: center;
    padding: clamp(2rem, 4vw, 3.5rem);
}

body[data-page='contact'] .intro-headline {
    font-size: clamp(2.8rem, 4.5vw, 4.8rem);
}

body[data-page='contact'] .intro-poster-photo-wrap {
    min-height: 480px;
}

body[data-page='gallery'] .intro-poster-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    min-height: 0;
}

body[data-page='gallery'] .intro-poster-photo-wrap {
    order: 0;
    height: clamp(520px, 44vw, 590px);
    min-height: 520px;
    max-height: 590px;
    margin: 1rem 1rem 1rem 0;
    border-radius: 12px 90px 12px 12px;
}

body[data-page='gallery'] .intro-photo-img {
    height: 100%;
    min-height: 0;
    object-position: center 34%;
}

body[data-page='gallery'] .intro-photo-overlay {
    background: linear-gradient(180deg, transparent 45%, rgba(8, 17, 31, 0.58));
}

body[data-page='gallery'] .intro-poster-content {
    width: auto;
    min-height: 0;
    justify-content: center;
    padding: clamp(1.75rem, 3vw, 2.6rem);
}

body[data-page='gallery'] .intro-headline {
    font-size: clamp(2.6rem, 3.5vw, 3.8rem);
    margin-bottom: 1rem !important;
}

body[data-page='gallery'] .intro-kicker {
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    margin-bottom: 0.55rem;
}

body[data-page='gallery'] .intro-bio {
    max-width: 34rem;
    margin-bottom: 1.1rem;
    font-size: 0.96rem;
    line-height: 1.6;
}

body[data-page='gallery'] .intro-ctas {
    gap: 0.65rem;
    margin-bottom: 0;
}

body[data-page='gallery'] .intro-signature-block,
body[data-page='gallery'] .intro-swipe-pill {
    display: none;
}

body[data-page='projects'] .intro-poster-grid {
    grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
}

body[data-page='projects'] .intro-poster-photo-wrap {
    order: -1;
    min-height: 620px;
}

body[data-page='projects'] .intro-poster-content {
    justify-content: center;
    padding-block: 3.5rem;
}

body[data-page='resume'] .intro-poster-grid {
    grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.38fr);
    align-items: center;
}

body[data-page='resume'] .intro-poster-photo-wrap {
    order: -1;
    min-height: 430px;
    max-height: 500px;
    margin: 2rem 0 2rem 2rem;
    border-radius: 140px 140px 10px 10px;
}

body[data-page='resume'] .intro-poster-content {
    justify-content: center;
    padding-block: 3rem;
}

body[data-page='services'] .intro-poster-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
}

body[data-page='services'] .intro-poster-content {
    justify-content: center;
    padding-block: 3.5rem;
}

body[data-page='services'] .intro-poster-photo-wrap {
    min-height: 560px;
    margin: 1rem 1rem 1rem 0;
    border-radius: 110px 12px 12px 12px;
}

body[data-page='the-brand'] .intro-poster-grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
}

body[data-page='the-brand'] .intro-poster-photo-wrap {
    min-height: 540px;
    margin: 1rem;
    border-radius: 110px 14px 14px 14px;
}

body[data-page='the-brand'] .intro-poster-content {
    justify-content: center;
    padding-block: 3rem;
}

@media (max-width: 960px) {
    body[data-page='about'] .intro-poster-grid,
    body[data-page='case-studies'] .intro-poster-grid,
    body[data-page='contact'] .intro-poster-grid,
    body[data-page='projects'] .intro-poster-grid,
    body[data-page='resume'] .intro-poster-grid,
    body[data-page='services'] .intro-poster-grid {
        grid-template-columns: 1fr;
    }

    body[data-page='about'] .intro-poster-photo-wrap,
    body[data-page='projects'] .intro-poster-photo-wrap,
    body[data-page='resume'] .intro-poster-photo-wrap,
    body[data-page='services'] .intro-poster-photo-wrap {
        order: -1;
        min-height: 420px;
        max-height: 560px;
        margin: 1rem;
        border-radius: 18px 60px 12px 12px;
    }

    body[data-page='case-studies'] .intro-poster-photo-wrap,
    body[data-page='contact'] .intro-poster-photo-wrap {
        min-height: 420px;
    }

    body[data-page='about'] .intro-poster-content,
    body[data-page='case-studies'] .intro-poster-content,
    body[data-page='contact'] .intro-poster-content,
    body[data-page='projects'] .intro-poster-content,
    body[data-page='resume'] .intro-poster-content,
    body[data-page='services'] .intro-poster-content {
        padding: 2rem clamp(1.5rem, 5vw, 3rem);
    }

    body[data-page='certifications'] .intro-poster-grid,
    body[data-page='the-brand'] .intro-poster-grid {
        grid-template-columns: 1fr;
    }

    body[data-page='certifications'] .intro-poster-photo-wrap {
        order: 1;
        min-height: 340px;
        max-height: 420px;
        margin: 1rem;
        border-radius: 8px 36px 8px 36px;
    }

    body[data-page='the-brand'] .intro-poster-photo-wrap {
        order: -1;
        min-height: 380px;
        max-height: 480px;
        margin: 1rem;
        border-radius: 18px 64px 12px 12px;
    }

    body[data-page='gallery'] .intro-poster-grid {
        grid-template-columns: 1fr;
    }

    body[data-page='gallery'] .intro-poster-content {
        width: 100%;
        padding: 1.35rem 1.5rem 1.5rem;
    }

    body[data-page='gallery'] .intro-poster-photo-wrap {
        order: -1;
        height: 260px;
        min-height: 260px;
        max-height: 260px;
        margin: 0.75rem 0.75rem 0;
        border-radius: 10px 56px 10px 10px;
    }

    body[data-page='gallery'] .intro-headline {
        font-size: clamp(2rem, 8vw, 2.5rem);
        line-height: 0.98;
    }

    body[data-page='gallery'] .intro-bio {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 0.9rem;
    }
}

@media (max-width: 620px) {
    body[data-page='about'] .intro-poster-photo-wrap,
    body[data-page='case-studies'] .intro-poster-photo-wrap,
    body[data-page='contact'] .intro-poster-photo-wrap,
    body[data-page='certifications'] .intro-poster-photo-wrap,
    body[data-page='projects'] .intro-poster-photo-wrap,
    body[data-page='resume'] .intro-poster-photo-wrap,
    body[data-page='services'] .intro-poster-photo-wrap {
        min-height: 340px;
        margin: 0.75rem;
    }

    body[data-page='gallery'] .intro-poster-photo-wrap {
        min-height: 390px;
    }

    body[data-page='gallery'] .intro-poster-photo-wrap {
        height: 250px;
        min-height: 250px;
        max-height: 250px;
    }

    body[data-page='certifications'] .intro-poster-photo-wrap,
    body[data-page='the-brand'] .intro-poster-photo-wrap {
        min-height: 320px;
        height: 320px;
        max-height: none;
    }

    body[data-page='certifications'] .intro-photo-img,
    body[data-page='the-brand'] .intro-photo-img {
        min-height: 0;
        height: 100%;
        max-height: none;
    }

    body[data-page='certifications'] .intro-signature-block,
    body[data-page='the-brand'] .intro-signature-block,
    body[data-page='certifications'] .intro-ctas .btn-whatsapp,
    body[data-page='the-brand'] .intro-ctas .btn-whatsapp {
        display: none;
    }
}