/* ==========================================================================
   main.css — Loïc Sans portfolio
   ========================================================================== */

/* ── Reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root{--black:#0a0a0a;--white:#f6f6f6;--red:#d0392b;--mid:#595959;--border:1.5px solid #0a0a0a;--mono:'IBM Plex Mono',monospace;--serif:'Canela','Georgia',serif}

/* ── Base ───────────────────────────────────────────────────────────────── */
html{font-size:16px;scroll-behavior:smooth}
body{background:var(--white);color:var(--black);font-family:var(--mono);overflow-x:hidden;cursor:crosshair;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal}
a{color:inherit;text-decoration:none}

/* ── Grid overlay ───────────────────────────────────────────────────────── */
.grid-overlay{position:fixed;inset:0;background-image:linear-gradient(rgba(10,10,10,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,10,.03) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0}

/* ── Layout wrapper ─────────────────────────────────────────────────────── */
.site-wrapper{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 28px}

/* ── Navigation ─────────────────────────────────────────────────────────── */
nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:var(--border)}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo img{height:48px;width:auto;display:block;opacity:0;animation:fadeUp .6s cubic-bezier(.16,1,.3,1) .1s forwards}
.nav-wordmark{font-family:var(--mono);font-size:24px;line-height:1;letter-spacing:.04em;color:var(--white);opacity:0;animation:fadeUp .6s cubic-bezier(.16,1,.3,1) .15s forwards;white-space:nowrap}
.nav-wordmark-first{font-weight:300}
.nav-wordmark-bold{font-weight:700}
.nav-links{display:flex;gap:36px;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.nav-links a{position:relative;padding-bottom:2px;opacity:0;animation:fadeUp .5s cubic-bezier(.16,1,.3,1) forwards}
.nav-links a:nth-child(1){animation-delay:.2s}
.nav-links a:nth-child(2){animation-delay:.28s}
.nav-links a:nth-child(3){animation-delay:.36s}
.nav-links a:nth-child(4){animation-delay:.44s}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.16,1,.3,1)}
.nav-links a:hover::after{width:100%}
.nav-links a:hover{color:var(--red)}.nav-links a:hover::after{transform:scaleX(1)}
.lang-switch{display:flex;gap:4px;font-size:10px;opacity:0;animation:fadeUp .5s cubic-bezier(.16,1,.3,1) .5s forwards}
.lang-btn{padding:4px 8px;border:1px solid transparent;cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:none;color:var(--mid);transition:all .2s}
.lang-btn.active{border-color:var(--black);color:var(--black)}
.lang-btn:hover{color:var(--red);border-color:var(--red)}
.hero{padding:64px 0 0;border-bottom:var(--border)}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero-eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mid);margin-bottom:28px;opacity:0;animation:fadeUp .6s cubic-bezier(.16,1,.3,1) .4s forwards}
.hero-eyebrow .dot{color:var(--red);margin:0 8px}
.hero-eyebrow .avail{color:var(--red)}
.hero-headline{font-family:var(--serif);font-size:clamp(44px,7vw,96px);font-weight:300;line-height:1.12;letter-spacing:-.02em;max-width:1080px;margin-bottom:40px;opacity:0;animation:heroReveal .95s cubic-bezier(.16,1,.3,1) .55s forwards}
.hero-headline .word-ai{font-style:italic;color:var(--red)}
.hero-sub{font-size:clamp(14px,1.5vw,16px);line-height:1.8;color:#444;max-width:68ch;margin-bottom:48px;font-weight:300;opacity:0;animation:fadeUp .6s cubic-bezier(.16,1,.3,1) .85s forwards}
.hero-cta{display:flex;gap:16px;align-items:center;padding-bottom:48px;opacity:0;animation:fadeUp .6s cubic-bezier(.16,1,.3,1) 1s forwards}
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:var(--black);color:var(--white);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:var(--border);cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.btn-primary::before{content:'';position:absolute;inset:0;background:var(--red);transform:translateX(-101%);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.btn-primary:hover::before{transform:translateX(0)}
.btn-primary span{position:relative;z-index:1}
.btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:transparent;color:var(--black);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:var(--border);cursor:pointer;transition:all .2s}
.btn-secondary:hover{background:var(--black);color:var(--white)}

/* ── Hero meta grid ─────────────────────────────────────────────────────── */
.hero-meta{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--border);opacity:0;animation:fadeUp .5s cubic-bezier(.16,1,.3,1) 1.1s forwards}
.hero-meta-cell{padding:20px 0;border-right:var(--border)}
.hero-meta-cell:last-child{border-right:none}
.hero-meta-cell+.hero-meta-cell{padding-left:24px}
.meta-label{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);margin-bottom:6px}
.meta-value{font-size:13px;font-weight:700;line-height:1.4}

/* ── Ticker strip ───────────────────────────────────────────────────────── */
.ticker-wrap{overflow:hidden;border-bottom:var(--border);background:var(--red);padding:16px 0}
.ticker{display:flex;white-space:nowrap;animation:ticker 28s linear infinite}
.ticker span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--white);padding:0 40px}
.ticker span.sep{color:rgba(255,255,255,.45);padding:0 16px}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Section header ─────────────────────────────────────────────────────── */
.section-header{display:flex;align-items:baseline;gap:16px;padding:36px 0 28px;border-bottom:var(--border)}
.section-num{font-size:10px;color:var(--red);letter-spacing:.12em;font-weight:700}
.section-title{font-family:var(--serif);font-size:clamp(40px,6vw,80px);font-weight:300;line-height:1;letter-spacing:-.015em}
.section-aside{margin-left:auto;font-size:10px;color:var(--mid);letter-spacing:.1em}

/* ── Work grid ──────────────────────────────────────────────────────────── */
.work-grid{display:grid;grid-template-columns:1fr 1fr;border-bottom:var(--border)}
.work-item{padding:36px 32px;border-bottom:var(--border);border-right:var(--border);cursor:pointer;position:relative;transition:background .2s;overflow:hidden}
.work-item:nth-child(even){border-right:none;}
.work-item:nth-last-child(-n+2){border-bottom:none}
.work-item::before{content:'';position:absolute;inset:0;background:var(--black);transform:translateY(101%);transition:transform .36s cubic-bezier(.16,1,.3,1)}
.work-item:hover::before{transform:translateY(0)}
.work-item:hover .work-type,.work-item:hover .work-title,.work-item:hover .work-desc,.work-item:hover .work-tags span,.work-item:hover .work-year,.work-item:hover .arrow,.work-item:hover .work-cs-arrow{color:var(--white)}
.work-item:hover .work-tags span{border-color:rgba(245,242,237,.3)}
.work-num{font-size:10px;color:var(--red);letter-spacing:.12em;margin-bottom:20px;position:relative;z-index:1}
.work-type{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);margin-bottom:12px;position:relative;z-index:1;transition:color .2s}
.work-title{font-family:var(--serif);font-size:clamp(26px,3.5vw,50px);font-weight:300;line-height:1.08;margin-bottom:16px;position:relative;z-index:1;transition:color .2s}
.work-desc{font-size:14px;line-height:1.7;color:#555;margin-bottom:20px;max-width:52ch;position:relative;z-index:1;transition:color .2s}
.work-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px;position:relative;z-index:1}
.work-tags span{font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border:1px solid rgba(10,10,10,.2);transition:all .2s}
.work-
/* ── Footer ─────────────────────────────────────────────────────────────── */
footer{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.work-year{font-size:10px;color:var(--mid);letter-spacing:.1em;transition:color .2s}
.arrow{font-size:20px;transition:all .2s}
.work-cs{position:relative;display:inline-flex;align-items:center}
.work-cs-arrow{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:20px;opacity:1;transition:opacity .18s}
.work-cs-label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border:1px solid rgba(255,255,255,.35);color:var(--white);white-space:nowrap;opacity:0;transition:opacity .18s;visibility:hidden}
.work-item:hover .work-cs-arrow{opacity:0}
.work-item:hover .work-cs-label{opacity:1;visibility:visible}

/* ── Services strip ─────────────────────────────────────────────────────── */
.services-strip{border-bottom:var(--border);overflow:hidden}
.services-inner{display:flex}
.service-pill{padding:20px 28px;border-right:var(--border);font-size:10px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:default;transition:background .2s}
.service-pill:last-child{border-right:none}
.service-pill:hover{background:var(--black);color:var(--white)}
.pill-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red);margin-right:10px;vertical-align:middle}

/* ── About ──────────────────────────────────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:1fr 340px;gap:0;border-bottom:var(--border)}
.about-left{padding:40px 40px 40px 0;border-right:var(--border)}
.about-pull{font-family:var(--serif);font-size:clamp(22px,3vw,34px);font-weight:300;line-height:1.3;letter-spacing:-.01em;margin-bottom:32px}
.about-pull 
/* ── Utilities ──────────────────────────────────────────────────────────── */
.red{color:var(--red);font-style:italic}
.about-body{font-size:15px;line-height:1.8;color:#444;font-weight:300;max-width:68ch}
.about-body p+p{margin-top:18px}
.about-body strong{font-weight:700;color:var(--black)}
.about-right{padding:40px 0 40px 32px}

/* ── Stats ──────────────────────────────────────────────────────────────── */
.stat-block{padding:24px 0;border-bottom:var(--border)}
.stat-block:first-child{padding-top:0}
.stat-block:last-child{border-bottom:none;padding-bottom:0}
.stat-num{font-family:var(--serif);font-variant-numeric:tabular-nums;font-size:clamp(72px,10vw,128px);font-weight:300;line-height:.92;letter-spacing:-.03em;margin-bottom:12px}
.stat-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);line-height:1.5}

/* ── Skills ─────────────────────────────────────────────────────────────── */
.skills-section{border-bottom:var(--border)}
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--border)}
.skill-col{padding:32px 0;border-right:var(--border)}
.skill-col:last-child{border-right:none}
.skill-col+.skill-col{padding-left:28px}
.skill-col-label{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);margin-bottom:20px}
.skill-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.skill-name{font-size:11px;letter-spacing:.04em;width:120px;flex-shrink:0}
.skill-bar-track{flex:1;height:2px;background:rgba(10,10,10,.1);position:relative;overflow:hidden}
.skill-bar-fill{height:100%;background:var(--black);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.76,0,.24,1)}
.skill-bar-fill.red{background:var(--black)}

/* ── Experience ─────────────────────────────────────────────────────────── */
.exp-section{border-bottom:var(--border)}
.exp-list{border-top:var(--border)}
.exp-item{display:grid;grid-template-columns:200px 1fr;border-bottom:var(--border);transition:background .2s}
.exp-item:last-child{border-bottom:none}
.exp-item:hover{background:rgba(10,10,10,.02)}
.exp-left{padding:28px 24px 28px 0;border-right:var(--border)}
.exp-period{font-size:10px;letter-spacing:.1em;color:var(--mid);margin-bottom:6px}
.exp-company{font-size:14px;font-weight:700;line-height:1.3;margin-bottom:6px}
.exp-location{font-size:10px;color:var(--mid);letter-spacing:.08em}
.exp-right{padding:28px 0 28px 28px}
.exp-role{font-family:var(--serif);font-size:clamp(16px,2vw,22px);font-weight:300;margin-bottom:12px}
.exp-desc{font-size:14px;line-height:1.7;color:#555;font-weight:300;max-width:62ch}
.exp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.exp-tag{font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;background:rgba(10,10,10,.06);color:var(--mid)}
footer{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-top:var(--border);font-size:10px;letter-spacing:.1em;color:var(--mid)}
.footer-brands{display:flex;gap:32px;align-items:center}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-brand img{height:32px;width:auto;opacity:.7;transition:all .2s}
.footer-brand img.logo-invert{filter:invert(1) grayscale(1)}
.footer-brand:hover img{opacity:1}
.footer-brand:hover img.logo-invert{filter:invert(1)}
.footer-brand-info{font-size:9px;letter-spacing:.1em;text-transform:uppercase;line-height:1.5}
.footer-brand-name{color:var(--black);font-weight:700}
.footer-brand-desc{color:var(--mid)}
.red{color:var(--red)}

/* ── Hero zone — dark inversion ─────────────────────────────────────────── */
.hero-zone{background:var(--black)}
.hero-zone nav{border-bottom-color:rgba(255,255,255,.1)}
.hero-zone .nav-links a{color:rgba(255,255,255,.55)}
.hero-zone .nav-links a:hover{color:var(--white)}
.hero-zone .nav-links a:hover::after{transform:scaleX(1)}
.hero-zone .nav-links a::after{background:var(--red)}
.hero-zone .lang-btn{color:rgba(255,255,255,.4)}
.hero-zone .lang-btn.active{color:var(--white);border-color:rgba(255,255,255,.45)}
.hero-zone .lang-btn:hover{color:var(--red);border-color:var(--red)}
.hero-zone .hero{border-bottom-color:transparent;padding-top:80px}
.hero-zone .hero-eyebrow{color:rgba(255,255,255,.45)}
.hero-zone .hero-eyebrow .dot{color:rgba(255,255,255,.2)}
.hero-zone .avail{color:var(--white)}
.hero-zone .hero-headline{color:var(--white)}
.hero-zone .hero-sub{color:rgba(255,255,255,.6)}
.hero-zone .btn-primary{background:var(--white);color:var(--black);border-color:var(--white)}
.hero-zone .btn-primary::before{background:var(--red)}
.hero-zone .btn-primary:hover{color:var(--white)}
.hero-zone .btn-secondary{color:var(--white);border-color:rgba(255,255,255,.3)}
.hero-zone .btn-secondary:hover{background:var(--white);color:var(--black)}
.hero-zone .hero-meta{border-top-color:rgba(255,255,255,.1)}
.hero-zone .hero-meta-cell{border-right-color:rgba(255,255,255,.1)}
.hero-zone .meta-label{color:rgba(255,255,255,.4)}
.hero-zone .meta-value{color:var(--white)}

/* ── Social icons ───────────────────────────────────────────────────────── */
.footer-social{display:flex;gap:16px;align-items:center}
.footer-social a{display:flex;align-items:center;color:var(--black);opacity:.6;transition:opacity .2s}
.footer-social a:hover{opacity:1}
.footer-social svg{display:block}

/* ── Photography ────────────────────────────────────────────────────────── */
.photo-section{display:grid;grid-template-columns:1fr 1fr;border-bottom:var(--border)}
.photo-left{padding:48px 40px 48px 0;border-right:var(--border)}
.photo-right{padding:48px 0 48px 40px}
.photo-pull{font-family:var(--serif);font-size:clamp(28px,3.8vw,52px);font-weight:300;line-height:1.18;letter-spacing:-.015em;margin-bottom:0}
.photo-pull span{display:block}
.photo-body{font-size:14px;line-height:1.8;color:#444;font-weight:300;max-width:68ch}
.photo-body p{margin-bottom:20px}
.photo-body p:last-child{margin-bottom:0}
.section-aside a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;transition:opacity .2s}
.section-aside a:hover{opacity:.6}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
/* ── Mobile nav ─────────────────────────────────────────────────────── */

/* ── Mobile nav overlay ─────────────────────────────────────────────────── */
.nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:5.5px;background:none;border:none;cursor:pointer;padding:10px;margin-right:-10px;position:relative;z-index:200;min-height:44px;min-width:44px}
.nav-hamburger span{display:block;width:22px;height:1.5px;background:var(--white);transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .2s;transform-origin:center}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile-overlay{position:fixed;inset:0;background:var(--black);z-index:100;display:flex;flex-direction:column;justify-content:center;padding:80px 28px 48px;opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.16,1,.3,1)}
.nav-mobile-overlay.open{opacity:1;pointer-events:auto}
.nav-mobile-link{font-family:var(--serif);font-size:clamp(40px,12vw,56px);font-weight:300;color:rgba(255,255,255,.45);line-height:1.1;display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);text-decoration:none;transition:color .2s;opacity:0;transform:translateY(16px);transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1),color .2s}
.nav-mobile-overlay.open .nav-mobile-link{opacity:1;transform:none}
.nav-mobile-overlay.open .nav-mobile-link:nth-child(1){transition-delay:.04s}
.nav-mobile-overlay.open .nav-mobile-link:nth-child(2){transition-delay:.08s}
.nav-mobile-overlay.open .nav-mobile-link:nth-child(3){transition-delay:.12s}
.nav-mobile-overlay.open .nav-mobile-link:nth-child(4){transition-delay:.16s}
.nav-mobile-link:hover,.nav-mobile-link:focus{color:var(--white)}
.nav-mobile-overlay.open body.menu-open{overflow:hidden}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){.nav-mobile-link,}

/* ── Mobile layout ───────────────────────────────────────────────────── */

/* ── Responsive — mobile (≤768px) ───────────────────────────────────────── */
@media(max-width:768px){
  .nav-links{display:none}
  .lang-switch{opacity:1;animation:none}
  .lang-btn{min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;padding:4px 12px}
  .nav-hamburger{display:flex}
  .hero-zone .hero{padding-top:48px;min-height:calc(100svh - 66px)}
  .hero-headline{font-size:clamp(32px,9vw,48px);letter-spacing:-.018em}
  .hero-sub{font-size:13px;max-width:100%}
  .hero-cta{flex-direction:column;gap:12px;padding-bottom:40px}
  .hero-cta a{width:100%;justify-content:center;min-height:52px;text-align:center}
  .hero-meta{grid-template-columns:1fr 1fr}
  .hero-meta-cell:nth-child(2n){border-right:none}
  .meta-value{font-size:12px}
  .section-title{font-size:clamp(32px,9vw,48px)}
  .about-pull{font-size:clamp(20px,6vw,28px)}
  .about-right{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .stat-num{font-size:clamp(44px,12vw,72px);line-height:.95}
  .stat-block{padding:20px 0}
  .work-item{padding:28px 0}
  .work-title{font-size:clamp(22px,7vw,36px)}
  .work-desc{max-width:100%}
  .work-cs-arrow{opacity:0;pointer-events:none}
  .work-cs-label{opacity:1;visibility:visible;border-color:rgba(10,10,10,.25);color:var(--black)}
  .section-header{padding:28px 0 20px}
  .exp-item{padding:20px 0}
  .exp-right{padding-top:0}
  .photo-pull{font-size:clamp(24px,8vw,40px)}
  .photo-left,.photo-right{padding-left:0;padding-right:0}
  footer{padding:20px 0 32px}
  .ticker span{padding:0 24px}
  .skill-name{width:100px;font-size:10px}
}

/* ── Keyframe animations ────────────────────────────────────────────────── */
@keyframes heroReveal{from{opacity:0;transform:translateY(32px) scale(.98);filter:blur(5px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
.js-anim .section-header.scroll-reveal{transform:translateY(40px)}
.js-anim .work-item.scroll-reveal.visible{transition-delay:calc(var(--i,0) * 80ms)}
.js-anim .exp-item.scroll-reveal.visible{transition-delay:calc(var(--i,0) * 70ms)}
.btn-primary:active,.btn-secondary:active{transform:scale(.97)}
.scroll-reveal{opacity:1;transform:none}
.js-anim .scroll-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.js-anim .scroll-reveal.visible{opacity:1;transform:translateY(0)}
h1,h2,.about-pull{text-wrap:balance}
p,.hero-sub,.about-body,.work-desc,.exp-desc{text-wrap:pretty}
a:focus-visible,button:focus-visible,.work-item:focus-visible,.service-pill:focus-visible{outline:2px solid var(--red);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js-anim .scroll-reveal{opacity:1;transform:none;transition:none}
  .ticker{animation:none}
  .hero-headline{animation:none;opacity:1;filter:none;transform:none}
  .avail-dot{animation:none}
}
/* Delight */
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:.3}}
.avail-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:9px;vertical-align:middle;position:relative;top:-1px;animation:statusPulse 2.2s ease-in-out infinite}
.hero-zone .avail-dot{background:var(--white);animation:statusPulse 2.2s ease-in-out infinite}
.ticker-wrap:hover .ticker{animation-play-state:paused}
.work-item:hover .arrow{transform:translate(4px,-4px);transition:transform .22s cubic-bezier(.16,1,.3,1),color .2s}
.conviction-tip{position:relative;cursor:default;border-bottom:1px solid transparent;transition:border-color .2s}
.conviction-tip:hover{border-bottom-color:currentColor}
.conviction-tip::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);background:var(--black);color:var(--white);font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1);z-index:10}
.conviction-tip:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Language toggle ────────────────────────────────────────────────────── */
html:not([data-lang="fr"]) .lang-fr{display:none}
html[data-lang="fr"] .lang-en{display:none}
@media(max-width:768px){
  .work-grid{grid-template-columns:1fr}
  .work-item:nth-child(even){padding-left:0;border-right:var(--border)}
  .work-item:nth-last-child(-n+2){border-bottom:var(--border)}
  .work-item:last-child{border-bottom:none}
  .about-grid{grid-template-columns:1fr}
  .about-left{padding-right:0;border-right:none;border-bottom:var(--border)}
  .about-right{padding-left:0}
  .skills-grid{grid-template-columns:1fr}
  .skill-col{border-right:none;border-bottom:var(--border)}
  .skill-col:last-child{border-bottom:none}
  .skill-col+.skill-col{padding-left:0}
  .exp-item{grid-template-columns:1fr}
  .exp-left{border-right:none;border-bottom:var(--border);padding-right:0;padding-bottom:16px}
  .exp-right{padding-left:0;padding-top:16px}
  .hero-meta{grid-template-columns:1fr 1fr}
  .services-strip{overflow-x:auto}
  footer{flex-direction:column;gap:16px;text-align:center}
  .footer-brands{flex-direction:column;gap:16px}
  .footer-social{display:flex;gap:16px;align-items:center}
.footer-social a{display:flex;align-items:center;color:var(--black);opacity:.6;transition:opacity .2s}
.footer-social a:hover{opacity:1}
.footer-social svg{display:block}
.photo-section{grid-template-columns:1fr}
  .photo-left{padding-right:0;border-right:none;border-bottom:var(--border);padding-bottom:32px}
  .photo-right{padding-left:0;padding-top:32px}
  .nav-links{gap:20px}
}