/* ACT-ON GROUP design system, read off actongroup.com on 21 September 2026.
   Palette: #141720 ink · #23252B dark panel · #F2F3F5 light · #00E1FF quote
   Signature gradient: #17E517 -> #17D7E5 -> #E5179B -> #E5E017
   Type: AvenirNext (their own webfont, self-hosted here) */
@font-face{font-family:'AvenirNext';font-weight:400;font-style:normal;src:url(fonts/AvenirNext-Regular.woff2) format('woff2');font-display:swap}
@font-face{font-family:'AvenirNext';font-weight:500;font-style:normal;src:url(fonts/AvenirNext-DemiBold.woff2) format('woff2');font-display:swap}
@font-face{font-family:'AvenirNext';font-weight:600;font-style:normal;src:url(fonts/AvenirNext-DemiBold.woff2) format('woff2');font-display:swap}
@font-face{font-family:'AvenirNext';font-weight:700;font-style:normal;src:url(fonts/AvenirNext-Bold.woff2) format('woff2');font-display:swap}
@font-face{font-family:'AvenirNext';font-weight:400;font-style:italic;src:url(fonts/AvenirNext-Italic.woff2) format('woff2');font-display:swap}
@font-face{font-family:'AvenirNext';font-weight:500;font-style:italic;src:url(fonts/AvenirNext-MediumItalic.woff2) format('woff2');font-display:swap}
@font-face{font-family:'AvenirNext';font-weight:200;font-style:normal;src:url(fonts/AvenirNext-UltraLight.ttf) format('truetype');font-display:swap}

*{box-sizing:border-box}
body{margin:0;font-family:'AvenirNext',Arial,sans-serif;font-size:16px;line-height:1.6;font-weight:400;color:#000;background:#fff}
h1,h2,h3{margin:0;font-family:'AvenirNext',Arial,sans-serif;font-weight:700}
p{margin:0}
a{color:inherit}

.sec{width:100%;padding:0}
.inner{max-width:1060px;margin:0 auto;padding:80px 140px;display:flex;flex-direction:column;align-items:center}
.bg-light{background:#F2F3F5;color:#141720}
.bg-grey{background:#23252B;color:#F2F3F5}
.bg-ink{background:#141720;color:#F2F3F5}

/* hero, their header-base: photo + 30% ink veil + outlined giant title */
.hero{height:600px;min-height:420px;padding:0;position:relative;
  background-image:linear-gradient(rgba(31,37,51,.3),rgba(31,37,51,.3)),url(img/evenement.webp);
  background-size:auto,cover;background-position:50% 50%;background-repeat:no-repeat}
.hero .inner{height:100%;justify-content:center}
.hero h1{font-weight:600;line-height:1;text-align:center;font-size:130px;max-width:100%;
  color:rgba(255,255,255,0);-webkit-text-stroke:2px #fff;text-stroke:2px #fff}
.shape{position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;line-height:0}
.shape svg{width:100%;height:25px;display:block}

.crumb{padding:0;background:#F2F3F5;color:#141720;font-size:16.64px}
.crumb .inner{align-items:flex-start;padding:20px 140px}

/* their gradient hairline above every section title */
.gline{width:100%;height:1px;background-image:linear-gradient(90deg,#17E517,#17D7E5,#E5179B,#E5E017)}
.gline-dark{background-image:linear-gradient(90deg,#00FF00,#00E1FF,#FF0098,#FFEB00)}

.cols{display:flex;width:100%;flex-direction:row;align-items:stretch;justify-content:center;flex-wrap:wrap}
.col-l{width:50%;padding-right:40px}
.col-r{width:50%;padding-left:40px;border-left:1px solid rgba(20,23,32,.2)}
.bg-grey .col-r{border-left-color:rgba(255,255,255,.2)}
.sech{font-weight:600;margin-top:40px;width:100%;line-height:1.6;font-size:32px}
.sech--lg{font-size:34px}
.body-txt{font-size:16.64px;line-height:26.624px}
.body-txt p+p{margin-top:16px}

/* the three transformation cards: their .caracteristics, read off the live page
   on 21 Sep 2026 with computed styles. The border is ONE pixel: the gradient is
   the border-box layer, the panel colour is the content-box layer, and padding
   lives on the TEXT, never on the card, or the gradient becomes a thick band.
   The title sits ON the border line at top:-14px with the panel colour behind
   it, which is what visually cuts the rule. */
.cards{display:flex;gap:16px;width:100%;margin-top:46px;flex-wrap:wrap;padding-top:14px}
.card3{flex:1;min-width:240px;position:relative;padding:0;border:1px solid transparent;border-radius:0;color:#141720;
  min-height:202px;display:flex;align-items:center;
  background-image:linear-gradient(#F2F3F5,#F2F3F5),linear-gradient(to right,#17E517,#17D7E5,#E5179B,#E5E017);
  background-origin:border-box,border-box;background-clip:content-box,border-box}
.bg-grey .card3{color:#F2F3F5;background-image:linear-gradient(#23252B,#23252B),linear-gradient(to right,#17E517,#17D7E5,#E5179B,#E5E017)}
.bg-ink .card3{color:#F2F3F5;background-image:linear-gradient(#141720,#141720),linear-gradient(to right,#17E517,#17D7E5,#E5179B,#E5E017)}
.card3 h3{position:absolute;top:-14px;left:21px;right:21px;text-transform:uppercase;font-weight:700;font-size:18px;
  line-height:1.6;background:#F2F3F5;padding:0 12px;margin:0}
.bg-grey .card3 h3{background:#23252B}
.bg-ink .card3 h3{background:#141720}
.card3 p{margin:0;padding:30px 20px 20px;font-size:16.64px;line-height:26.624px;width:100%;text-align:center}

/* ROOM TO BREATHE in the three-card row (Salma 4528269: "290 active clients is
   almost visually overlapping with mid-caps"). Their live cards carry ONE-line
   titles, so an absolutely positioned title works for the BEFORE clone and is
   kept there, byte for byte, for the fidelity gate. Our rebuilt copy has
   two-line titles, and an absolute title cannot push the text down: it lands on
   top of it. So on the rebuilt page only, the title returns to the flow and is
   pulled up onto the hairline by the same -14px, which reproduces the look and
   lets the card grow instead of colliding. */
.cards--air{gap:24px;padding-top:20px}
.cards--air .card3{flex-direction:column;align-items:stretch;min-height:224px}
.cards--air .card3 h3{position:static;margin:-14px 21px 0;padding:0 12px;
  width:auto;text-align:center;line-height:1.5}
/* the title stays ON the hairline at the top of every card, so the three
   titles align; the text block is what centres in the space left below it. */
.cards--air .card3{justify-content:flex-start}
.cards--air .card3 .txt{display:flex;flex-direction:column;justify-content:center;
  flex:1;padding:22px 24px 26px}
.cards--air .card3 p{margin:0}
.cards--air .card3 p+p{margin-top:14px}
.centered{text-align:center;margin-top:46px;width:100%}
.centered--lead{font-size:24px;line-height:38.4px}

/* the President block */
.pres{display:flex;width:100%;flex-wrap:wrap;align-items:center}
.pres-l{width:50%;display:flex;flex-direction:column;align-items:center;text-align:center}
.pres-r{width:50%;padding-left:40px;border-left:1px solid rgba(255,255,255,.2)}
.portrait{height:160px;width:160px;border-radius:200px;overflow:hidden;position:relative}
.portrait img{height:160px;width:160px;object-fit:cover;display:block}
.portrait .ov{position:absolute;inset:0;background-image:linear-gradient(45deg,#e5179b,#17d7e5 80%);opacity:.45}
.pres-name{font-size:14px;font-style:italic;color:rgba(241,241,241,.6);text-align:center;margin-top:20px}
.pull{font-size:26px;font-style:italic;font-weight:500;color:#00e1ff;line-height:41.6px}
.pres-body{font-size:16.64px;line-height:26.624px;margin-top:22px}
.pres-body p+p{margin-top:16px}

/* the closing #HumanTech block */
.closeh{text-align:center;font-size:36px;margin-bottom:10px;font-weight:400;line-height:54px}
.tagline{font-weight:600;font-size:36px;line-height:54px;color:#141720;text-align:center}
.bg-grey .tagline{color:#F2F3F5}
.close-cols{display:flex;width:100%;margin-top:40px;flex-wrap:wrap;align-items:center}
.close-l{width:50%;padding-right:40px}
.close-r{width:50%}
.grad-txt{display:inline-block;font-family:'AvenirNext',Arial,sans-serif;font-size:56px;font-weight:500;line-height:1.2;
  background-image:linear-gradient(to right,#17E517,#17D7E5,#E5179B,#E5E017);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#029BEB}
.cta{display:inline-block;margin-top:22px;border-bottom:1px solid #141720;padding:0 14px;text-decoration:none;font-weight:500}
.bg-grey .cta{border-bottom-color:#F2F3F5}
.foot{background:#141720;color:#F2F3F5;padding:0;font-size:16.64px}
.foot .inner{gap:14px;padding:40px 140px}
.foot img{width:126px;height:auto}

@media(max-width:1039px){
  .inner{padding:56px 24px}
  .crumb .inner,.foot .inner{padding:20px 24px}
  .hero{height:420px}
  .hero h1{font-size:60px;-webkit-text-stroke:1px #fff}
  .col-l,.col-r,.pres-l,.pres-r,.close-l,.close-r{width:100%;padding:0;border-left:0}
  .col-r,.pres-r{margin-top:26px}
  .sech{font-size:28px}
  .pull{font-size:20px;text-align:center}
  .grad-txt{font-size:48px}
  .closeh,.tagline{font-size:24px}
}


/* ---------------------------------------------------------------- the rebuild
   Storytelling additions (Salma 4524733: "make sure you are a storyteller, the
   more you read the more you want to continue. a manifesto that converts and
   fills out the forms"). Every value below is built from their own system:
   AvenirNext, the #00E1FF quote cyan, the signature gradient, the 1px hairline.
   Nothing new is invented, the page is only made to pull and to end on a form. */

/* the opening scene: bigger than body copy, smaller than a heading, so the
   first paragraph reads like someone talking and not like marketing */
.scene{font-size:22px;line-height:35.2px;font-weight:400}
/* ROOM TO BREATHE (Salma 4526129): one sentence, one line, with air around it.
   Each beat is its own paragraph, so the gap between beats is what carries the
   pacing. A beat that wraps stays tight inside itself and open around itself. */
.scene p+p{margin-top:26px}
.scene p{text-wrap:pretty}
/* a beat that follows a long sentence gets a wider pause, the paragraph break */
.scene .gap{margin-top:38px}
.scene .beat{color:#00E1FF;font-weight:500}
.bg-light .scene .beat{color:#141720;font-weight:600}

/* the one line that turns the story, set alone */
.turn{font-size:28px;line-height:44.8px;font-weight:600;max-width:820px;text-align:center;margin:0 auto}

/* a quiet cue that there is more below, their gradient as a 1px descender */
.cue{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:54px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.cue i{display:block;width:1px;height:46px;background-image:linear-gradient(#00E1FF,rgba(0,225,255,0))}
.bg-light .cue i{background-image:linear-gradient(#141720,rgba(20,23,32,0))}

/* the four practices, where the conviction gets applied */
.prac{display:flex;width:100%;gap:1px;margin-top:44px;flex-wrap:wrap;background:rgba(255,255,255,.14)}
.bg-light .prac{background:rgba(20,23,32,.14)}
.prac>div{flex:1 1 0;min-width:0;background:#23252B;padding:30px 26px 34px}
.bg-light .prac>div{background:#F2F3F5}
.bg-ink .prac>div{background:#141720}
.prac h3{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.prac .pl{width:38px;height:1px;margin:14px 0 16px;background-image:linear-gradient(90deg,#17E517,#17D7E5,#E5179B,#E5E017)}
.prac p{font-size:16.64px;line-height:26.624px}

/* his signature: the page is signed by a person, not closed by a company */
.sig{display:flex;align-items:center;gap:26px;margin-top:52px;flex-wrap:wrap}
.sig .sl{flex:1;min-width:260px}
.sig .sname{font-size:34px;font-weight:600;font-style:italic;line-height:1.2}
.sig .srole{font-size:14px;margin-top:8px;opacity:.7}
.sig .sface{height:92px;width:92px;border-radius:200px;overflow:hidden;position:relative;flex:none}
.sig .sface img{height:92px;width:92px;object-fit:cover;display:block}

/* the form: their type, their hairline, no boxes, so it reads as a letter back */
.fw{display:flex;width:100%;gap:56px;margin-top:10px;flex-wrap:wrap}
.fw .fl{flex:1;min-width:300px}
.fw .fr{flex:1;min-width:320px}
.frm{display:flex;flex-direction:column;gap:22px;width:100%}
.frm label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.65;margin-bottom:7px}
.frm input,.frm select,.frm textarea{width:100%;font-family:'AvenirNext',Arial,sans-serif;font-size:16.64px;
  color:#141720;background:transparent;border:0;border-bottom:1px solid rgba(20,23,32,.35);
  padding:8px 0 10px;border-radius:0;-webkit-appearance:none;appearance:none}
.frm textarea{resize:vertical;min-height:76px;line-height:26.624px}
.frm input:focus,.frm select:focus,.frm textarea:focus{outline:0;border-bottom-color:#141720}
.frm input::placeholder,.frm textarea::placeholder{color:rgba(20,23,32,.4)}
.frm select{background-image:none}
.frm .row{display:flex;gap:22px;flex-wrap:wrap}
.frm .row>div{flex:1;min-width:180px}
.btn-grad{align-self:flex-start;margin-top:6px;border:0;padding:0;background:transparent;cursor:pointer;
  font-family:'AvenirNext',Arial,sans-serif;font-size:18px;font-weight:600;color:#141720;
  border-bottom:1px solid #141720;padding-bottom:5px}
.btn-grad:hover{background-image:linear-gradient(to right,#17E517,#17D7E5,#E5179B,#E5E017);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fnote{font-size:13px;line-height:21px;opacity:.7;margin-top:22px}
.fok{display:none;font-size:18px;line-height:29px;font-weight:500;padding:22px 0}
.fok.on{display:block}
.frm.off{display:none}

@media(max-width:1039px){
  .prac{flex-wrap:wrap}
  .prac>div{flex:1 1 44%;min-width:200px}
  .scene{font-size:19px;line-height:30px}
  .scene p+p{margin-top:20px}
  .scene .gap{margin-top:30px}
  .turn{font-size:22px;line-height:35px}
  .sig .sname{font-size:26px}
  .fw{gap:34px}
}