/* ===== 1. YOUR COLOURS: change these and the whole site updates ===== */
:root{
  --bg:#E8E8E8;          /* light page background */
  --ink:#121212;         /* main text */
  --muted:#525252;       /* small grey text */
  --green:#123C30;       /* dark green sections */
  --green-soft:#1D5240;  /* green highlighted words */
  --lime:#BFDC36;        /* accent: buttons, highlights */
  --on-green:#F4F7F2;    /* text on dark green */
  --on-green-muted:#A6C1BA;
  --ease:cubic-bezier(.22,1,.36,1);  /* smooth easing for all animations */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter Tight',system-ui,sans-serif;font-weight:300;background:var(--bg);color:var(--ink);line-height:1.3;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
h1,h2{font-weight:300;letter-spacing:-.04em}

/* Scroll progress line at the very top */
.bar{position:fixed;top:0;left:0;width:100%;height:3px;background:var(--lime);transform:scaleX(0);transform-origin:0 50%;z-index:30}

/* ===== Top bar ===== */
.top{position:fixed;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:center;padding:20px 28px;z-index:20;animation:fade 1s .2s var(--ease) both}
.top .name{font-weight:400;text-decoration:none}
.pill{display:inline-flex;align-items:center;gap:10px;background:var(--lime);color:var(--green);text-decoration:none;font-size:.8rem;font-weight:500;padding:6px 6px 6px 16px;border-radius:999px}
.pill i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;font-style:normal;transition:transform .4s var(--ease)}
.pill:hover i{transform:rotate(45deg)}

/* ===== Hero ===== */
.hero{padding:150px 24px 40px;text-align:center}
.hero h1{font-size:clamp(2.6rem,7.2vw,5.6rem);line-height:.98;max-width:11.5em;margin:0 auto}
.hero p{margin-top:18px;color:var(--green-soft);font-size:1rem;animation:rise .9s .75s var(--ease) both}
/* Headline: each word slides up from behind a mask (split by the script below), then a lime shine sweeps through the words in a loop */
.js .hero h1:not(.split){visibility:hidden}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .1em;margin:0 -.04em -.1em}
.w>span{display:inline-block;padding:.05em .06em .12em;margin:-.05em -.06em -.12em;transform:translateY(110%);
  background:linear-gradient(105deg,var(--ink) 46%,var(--green-soft) 48%,var(--lime) 50%,var(--green-soft) 52%,var(--ink) 54%) 100% 0/300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:wordUp 1s var(--ease) forwards,shine 4.8s ease-in-out infinite;
  animation-delay:calc(var(--i) * .08s + .15s),calc(var(--i) * .16s + 1.8s)}

/* Work strip: scrolls sideways by itself and keeps moving on hover or touch. Replace each .tile with your own image or video */
.strip{display:flex;gap:16px;overflow-x:auto;padding:48px 24px 24px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.strip::-webkit-scrollbar{display:none}
.tile{flex:0 0 clamp(230px,28vw,330px);aspect-ratio:4/3;border-radius:14px;position:relative;overflow:hidden;color:#fff;font-size:.8rem;display:flex;align-items:flex-end;padding:14px;text-decoration:none}
.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.tile:hover img,.tile:hover video{transform:scale(1.06)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.6))}
.tile span{position:relative;z-index:1}
.t1{background:linear-gradient(150deg,#123C30,#0a1f18)}
.t2{background:linear-gradient(150deg,#2b2b2b,#0b0b0b)}
.t3{background:linear-gradient(150deg,#1D5240,#123C30 60%,#BFDC36 160%)}
.t4{background:linear-gradient(150deg,#3b4a2a,#121212)}
.t5{background:linear-gradient(150deg,#0f2e25,#525252)}

/* ===== Floating menu ===== */
.menu{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:2px;background:#fff;padding:5px;border-radius:999px;box-shadow:0 8px 30px rgba(0,0,0,.15);z-index:20;animation:menuIn 1s .6s var(--ease) both}
.menu a{text-decoration:none;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:9px 18px;border-radius:999px;transition:background .3s var(--ease),color .3s}
.menu a.on{background:var(--lime);color:var(--green)}
.menu a:not(.on):hover{background:rgba(0,0,0,.06)}

.more{text-align:center;margin-top:4px}
.more a{position:relative;display:inline-block;font-size:.8rem;text-decoration:none;border:1px solid rgba(18,18,18,.35);padding:11px 22px;border-radius:999px;overflow:hidden;isolation:isolate;box-shadow:0 0 0 1px rgba(191,220,54,.12),0 0 16px rgba(191,220,54,.18);transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.more a::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.95) 42%,rgba(191,220,54,.9) 50%,transparent 70%);background-size:240% 100%;animation:worksShine 3s linear infinite;opacity:.8}
.more a::after{content:"";position:absolute;inset:2px;z-index:-1;border-radius:inherit;background:var(--paper,#fff)}
.more a:hover{background:var(--lime);border-color:var(--lime);box-shadow:0 0 8px rgba(191,220,54,.75),0 0 25px rgba(191,220,54,.55),0 0 42px rgba(191,220,54,.25)}
@keyframes worksShine{0%{background-position:100% 0}100%{background-position:-140% 0}}

/* ===== About ===== */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;padding-top:110px;padding-bottom:110px}
.about h2{font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.08;letter-spacing:-.03em}
.about p{margin-top:28px;max-width:46ch;font-size:.9rem;color:var(--muted);line-height:1.55}
/* Profile photo: floats gently, and the picture inside slowly breathes */
.portrait{justify-self:end;width:min(100%,380px);aspect-ratio:3/4;background:var(--lime);border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.18);display:grid;place-items:center;font-size:8rem;color:var(--green);font-weight:300;animation:float 7s ease-in-out infinite}
.portrait img,.portrait span{grid-area:1/1;animation:breathe 10s ease-in-out infinite alternate}
.portrait img{width:100%;height:100%;object-fit:cover}

/* ===== Services (dark green) ===== */
.dark{background:var(--green);color:var(--on-green)}
.services{padding:120px 0}
.services h2{text-align:center;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.03em}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:70px}
.col{border-top:1px solid rgba(255,255,255,.18);padding-top:28px}
.col h3{font-weight:400;font-size:1.05rem;transition:color .4s,transform .5s var(--ease)}
.col:hover h3{color:var(--lime);transform:translateX(6px)}
.col p{margin-top:10px;font-size:.85rem;line-height:1.5;color:var(--on-green-muted)}
.tools{margin-top:56px;text-align:center;font-size:.85rem;color:var(--on-green-muted)}

/* ===== Experience ===== */
.exp{padding-top:110px}
.exp .row{display:flex;justify-content:space-between;gap:24px;padding:26px 0;border-bottom:1px solid rgba(18,18,18,.15)}
.exp h3{font-weight:400;font-size:1.15rem;letter-spacing:-.01em;transition:transform .5s var(--ease)}
.exp .row:hover h3{transform:translateX(10px)}
.exp p{margin-top:6px;font-size:.85rem;color:var(--muted)}
.exp .row span{font-size:.85rem;color:var(--muted);white-space:nowrap}

/* ===== Approach and values ===== */
.label{font-size:.85rem;color:var(--green-soft);padding-bottom:20px;border-bottom:1px solid rgba(18,18,18,.15)}
.big{font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.1;letter-spacing:-.03em;max-width:21em}
.big em{font-style:normal;color:var(--green-soft)}
.approach{padding-top:110px}
.approach .big{margin-top:36px}
.values{padding:150px 24px 120px}
.values .big{padding:34px 0;border-top:1px solid rgba(18,18,18,.15)}
.values .label{border:0}

/* ===== Contact ===== */
.contact{padding:120px 0 40px}
.contact h2{font-size:clamp(3.2rem,11vw,8rem);line-height:.95;letter-spacing:-.05em}
.contact h2 b{font-weight:300;color:var(--lime);display:block}
.avatar{display:inline-grid;place-items:center;width:.72em;height:.72em;border-radius:50%;background:var(--lime);color:var(--green);font-size:.6em;vertical-align:.12em;margin-left:.15em;overflow:hidden;border:2px solid rgba(255,255,255,.25)}
.avatar img{width:100%;height:100%;object-fit:cover;grid-area:1/1}
.foot{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;align-items:center;margin-top:90px;padding:26px 0 70px;border-top:1px solid rgba(255,255,255,.12);font-size:.85rem}
.foot .mail{color:var(--on-green-muted)}
.foot .mail a{color:var(--on-green);margin-left:8px}
.foot button{background:none;border:0;color:var(--on-green-muted);cursor:pointer;font:inherit;margin-left:6px;transition:color .3s}
.foot button:hover{color:var(--lime)}
.links{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.links a{transition:color .3s}
.links a:hover{color:var(--lime)}
.links small{color:var(--on-green-muted)}

/* Flying avatar sticker: wanders across the whole screen (moved by the script at the bottom) */
.fly{position:fixed;left:0;top:0;width:64px;height:64px;border-radius:50%;background:var(--lime);color:var(--green);display:grid;place-items:center;overflow:hidden;border:4px solid #fff;box-shadow:0 10px 24px rgba(0,0,0,.25);font-size:1.6rem;z-index:15;pointer-events:none;will-change:transform;animation:fade 1s 2.4s var(--ease) both,bob 2.6s ease-in-out infinite}
.fly span,.fly img{grid-area:1/1}
.fly img{width:100%;height:100%;object-fit:cover}

/* ===== ANIMATIONS: change the seconds (.9s, 7s...) to speed up or slow down ===== */
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes wordUp{to{transform:none}}
@keyframes menuIn{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes float{50%{translate:0 -10px}}
@keyframes breathe{to{transform:scale(1.06)}}
@keyframes shine{0%{background-position:100% 0}45%,100%{background-position:0 0}}
@keyframes bob{50%{translate:0 -7px}}
/* Scroll reveal: items fade up once as they enter the screen */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

@media(max-width:760px){
  .about{grid-template-columns:1fr;gap:40px}
  .portrait{justify-self:start}
  .cols{grid-template-columns:1fr}
  .top{padding:16px 18px}
  .fly{width:52px;height:52px}
  .menu a{padding:9px 12px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .js .reveal{opacity:1;transform:none}
  .w>span{transform:none}
  .fly{display:none}
}

/* ===== Text selection: light green, also on mobile ===== */
::selection{background:var(--lime);color:var(--green)}
::-moz-selection{background:var(--lime);color:var(--green)}
html{-webkit-tap-highlight-color:rgba(191,220,54,.35)}

/* Ambient dust + 3D glass-orb cursor */
#dust{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:.58}
.custom-cursor{position:fixed;left:-100px;top:-100px;width:30px;height:30px;border-radius:50%;pointer-events:none;z-index:100;transform:translate(-50%,-50%);opacity:.96;
  background:radial-gradient(ellipse at 28% 20%,rgba(255,255,255,.98) 0 4%,rgba(255,255,255,.72) 8%,rgba(225,255,190,.34) 17%,rgba(191,220,54,.18) 32%,rgba(65,133,95,.22) 53%,rgba(255,255,255,.08) 66%,rgba(255,255,255,.55) 74%,rgba(135,188,150,.26) 82%,rgba(255,255,255,.88) 96%),linear-gradient(135deg,rgba(255,255,255,.5),rgba(191,220,54,.15));
  border:1px solid rgba(255,255,255,.82);box-shadow:inset -3px -4px 7px rgba(18,60,48,.22),inset 2px 2px 5px rgba(255,255,255,.9),0 0 0 1px rgba(191,220,54,.2),0 0 15px rgba(191,220,54,.28),0 5px 14px rgba(18,60,48,.22);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);transition:width .2s ease,height .2s ease,box-shadow .2s ease;mix-blend-mode:screen}
.custom-cursor:before{content:"";position:absolute;left:18%;top:13%;width:35%;height:18%;border-radius:50%;background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,.08));filter:blur(.25px);transform:rotate(-32deg)}
.custom-cursor:after{content:"";position:absolute;right:16%;bottom:14%;width:25%;height:12%;border-radius:50%;background:rgba(191,220,54,.55);filter:blur(2px)}
.custom-cursor.hover{width:42px;height:42px;box-shadow:inset -4px -5px 9px rgba(18,60,48,.22),inset 3px 3px 7px rgba(255,255,255,.95),0 0 0 3px rgba(191,220,54,.18),0 0 25px rgba(191,220,54,.52),0 8px 20px rgba(18,60,48,.25)}
@media(pointer:coarse){.custom-cursor{display:none}}
.contact .avatar{width:1em;height:1em;font-size:.72em;vertical-align:-.12em;box-shadow:0 0 24px rgba(191,220,54,.3)}
.menu{max-width:calc(100vw - 24px);white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
.menu a{font-size:.62rem;padding:9px 13px}

/* Floating avatar: display the configured image cleanly across all pages. */
.fly img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;}
.fly.avatar-image-missing span{display:grid;}


/* ===== Licenses & Certifications: contrasting, credential-inspired surface ===== */
.credentials-section{background:#173b35;color:#f4f7f2;padding:84px 0 92px;margin:34px 0 0}
.credentials-section .label{color:#b9d8cf}
.credentials-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}
.credential-card{display:flex;align-items:flex-start;gap:16px;padding:22px;border:1px solid rgba(244,247,242,.2);border-radius:16px;background:rgba(255,255,255,.045);min-width:0;transition:background .25s,border-color .25s,transform .25s}
.credential-card:hover{background:rgba(255,255,255,.085);border-color:rgba(191,220,54,.65);transform:translateY(-2px)}
.credential-mark{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#bfdc36;color:#173b35;font-size:1.2rem;font-weight:500}
.credential-main{flex:1;min-width:0}
.credential-card h3{font-size:1.1rem;font-weight:400;line-height:1.25}
.credential-org{margin-top:8px;color:#f4f7f2;font-size:.9rem}
.credential-date,.credential-meta{margin-top:6px;color:#b9d8cf;font-size:.78rem;overflow-wrap:anywhere}
.credential-link{flex-shrink:0;color:#bfdc36;font-size:.78rem;text-decoration:none;align-self:flex-end}
.credential-link:hover{text-decoration:underline}
.education-section{padding-top:78px;padding-bottom:20px}
@media(max-width:700px){.credentials-list{grid-template-columns:1fr}.credential-card{padding:18px;flex-wrap:wrap}.credential-link{margin-left:54px}.credentials-section{padding:64px 0}.education-section{padding-top:60px}}

/* Optional per-certificate image, independently editable in the admin panel */
.credential-photo{flex:0 0 76px;width:76px;height:76px;object-fit:cover;border-radius:12px;border:1px solid rgba(244,247,242,.22);background:rgba(255,255,255,.06)}
@media(max-width:700px){.credential-photo{width:64px;height:64px;flex-basis:64px}}