:root{
  --paper:#f3f0e8;
  --ink:#111111;
  --blue:#2237ff;
  --lime:#d4ff3a;
  --line:rgba(17,17,17,.16);
  --muted:#55524b;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"DM Sans","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);line-height:1.04;margin:0;letter-spacing:-.02em}

/* header */
header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.01em}
.brand img{width:38px;height:38px}
.brand span small{display:block;font-family:var(--body);font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:-2px}
nav{display:flex;gap:26px;align-items:center}
nav a{text-decoration:none;font-size:.95rem;font-weight:500}
nav a:hover{color:var(--blue)}
.lang{display:flex;gap:4px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px}
.lang a{padding:5px 13px;border-radius:999px;font-size:.8rem;font-weight:700;text-decoration:none}
.lang a.on{background:var(--ink);color:var(--paper)}
@media(max-width:900px){nav a.l{display:none}}
@media(max-width:560px){.brand{font-size:1rem;white-space:nowrap}.brand small{display:none}.brand img{width:32px;height:32px}.nav{gap:10px}nav a{font-size:.88rem}.lang a{padding:5px 10px}}

/* hero */
.hero{padding:72px 0 64px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.eyebrow:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--blue)}
h1{font-size:clamp(2.8rem,7vw,5.6rem);margin:22px 0 24px;font-weight:800}
h1 em{font-style:normal;background:var(--lime);padding:0 .12em;border-radius:.12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lead{font-size:1.2rem;color:var(--muted);max-width:52ch;margin:0}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid var(--ink);transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.p{background:var(--ink);color:var(--paper)}
.btn.s{background:transparent}
.art{width:100%;height:auto}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.art{max-width:420px;margin:0 auto}}

/* marquee */
.marquee{background:var(--blue);color:#fff;overflow:hidden;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.marquee .track{display:flex;width:max-content;animation:slide 38s linear infinite}
.marquee span{font-family:var(--display);font-weight:700;font-size:1.5rem;padding:16px 28px;white-space:nowrap}
.marquee span:after{content:"✦";margin-left:56px;color:var(--lime)}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee .track{animation:none}}

/* sections */
section{padding:96px 0}
.kicker{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
h2{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:800;max-width:20ch}
.intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.intro p{margin:0;color:var(--muted);font-size:1.12rem}
@media(max-width:900px){.intro{grid-template-columns:1fr;gap:20px}}
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;border-top:2px solid var(--ink)}
.point{padding:26px 28px 6px 0}
.point+.point{padding-left:28px;border-left:1px solid var(--line)}
.point h3{font-size:1.3rem;margin-bottom:8px}
.point p{margin:0;color:var(--muted)}
@media(max-width:900px){.points{grid-template-columns:1fr}.point+.point{padding-left:0;border-left:0;border-top:1px solid var(--line)}}

/* services */
.dark{background:var(--ink);color:var(--paper)}
.dark .kicker{color:var(--lime)}
.dark .intro p{color:#b9b5aa}
.svcs{margin-top:56px;border-top:1px solid rgba(243,240,232,.3)}
.svc{display:grid;grid-template-columns:70px 1.1fr 1fr 120px;gap:28px;padding:34px 0;border-bottom:1px solid rgba(243,240,232,.3);align-items:start;transition:background .2s,padding .2s}
.svc:hover{background:rgba(212,255,58,.06)}
.svc .n{font-family:var(--display);font-weight:800;color:var(--lime);font-size:1.1rem}
.svc h3{font-size:1.7rem;margin-bottom:10px}
.svc p{margin:0;color:#b9b5aa}
.svc ul{margin:0;padding:0;list-style:none}
.svc li{padding:6px 0;border-bottom:1px dashed rgba(243,240,232,.2)}
.svc li:last-child{border:0}
.svc li:before{content:"→";color:var(--lime);margin-right:10px}
.caen{justify-self:end;font-size:.72rem;font-weight:700;letter-spacing:.08em;border:1px solid var(--lime);color:var(--lime);padding:5px 10px;border-radius:999px;white-space:nowrap}
@media(max-width:900px){.svc{grid-template-columns:1fr;gap:12px}.caen{justify-self:start}}

/* who */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.who div{border:2px solid var(--ink);border-radius:24px;padding:32px 28px;background:#fff}
.who div:nth-child(2){background:var(--lime)}
.who h3{font-size:1.45rem;margin-bottom:10px}
.who p{margin:0}
@media(max-width:900px){.who{grid-template-columns:1fr}}

/* process */
.blue{background:var(--blue);color:#fff}
.blue .kicker{color:var(--lime)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px}
.step{border-top:3px solid var(--lime);padding-top:20px}
.step b{display:block;font-family:var(--display);font-size:3.4rem;line-height:1;color:var(--lime);font-weight:800;margin-bottom:12px}
.step h3{font-size:1.35rem;margin-bottom:8px}
.step p{margin:0;opacity:.88}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* company */
.co{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:start}
dl{margin:0;border-top:2px solid var(--ink)}
.row{display:grid;grid-template-columns:.9fr 1.3fr;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}
dt{color:var(--muted);font-size:.95rem}
dd{margin:0;font-weight:500}
@media(max-width:900px){.co{grid-template-columns:1fr;gap:28px}.row{grid-template-columns:1fr;gap:2px}}

/* contact */
.contact{background:var(--lime);border-top:2px solid var(--ink)}
.mail{display:inline-block;font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,5vw,3.6rem);letter-spacing:-.02em;text-decoration:none;border-bottom:4px solid var(--ink);margin:30px 0 26px;word-break:break-all}
.mail:hover{color:var(--blue);border-color:var(--blue)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:20px}
.two p{margin:0 0 10px}
@media(max-width:900px){.two{grid-template-columns:1fr;gap:18px}}

/* privacy + footer */
.privacy{padding:64px 0}
.privacy p{max-width:80ch;color:var(--muted);margin:14px 0 0}
.privacy h2{font-size:1.8rem}
footer{background:var(--ink);color:#b9b5aa;padding:32px 0;font-size:.9rem}
footer .f{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:var(--paper)}