/* ===================================================================
   C123 studio — stylesheet
   Palette: navy #0E1B2C · cream #F1E9DA · amber #E8A33D
   Type: Space Grotesk (head) · Fraunces (serif accents) · Inter (body)
   =================================================================== */

:root{
  --navy:#0E1B2C; --navy-2:#0c1828; --navy-soft:#16273b;
  --cream:#F1E9DA; --cream-2:#F6F0E5; --cream-3:#ECE2CE; --cream-4:#E7DBC2; --card:#FBF6EC; --card-bd:#e6dac6;
  --accent:#E8A33D; --accent-deep:#cf8a23; --accent-ink:#1a1206;
  --accent-text:#8a5a12; /* AA-compliant amber for small text on cream (>=4.9:1) */
  --head-navy:#15233a; --ink:#22303f; --ink-soft:#5e544b;
  --white:#F7F8FA; --muted:#b9c6d4; --muted-2:#8ea2b6;
  --radius:14px; --radius-lg:20px; --maxw:1120px;
  --f-head:'Space Grotesk',system-ui,sans-serif;
  --f-serif:'Fraunces',Georgia,serif;
  --f-body:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
/* sticky header is 68px — offset in-page anchors so a targeted section's heading
   isn't hidden underneath it when you click a "Start a conversation" / nav link */
section[id]{scroll-margin-top:84px}
body{font-family:var(--f-body);color:var(--ink);background:var(--cream-2);
     line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);
      padding:10px 16px;border-radius:8px;z-index:200;font-weight:600}
.skip:focus{left:16px;top:12px}

.kicker{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
        color:var(--accent-text);margin-bottom:14px}
/* section titles now use the page head font (Space Grotesk) like the hero, via `section h2`
   — owner found Fraunces too different (2026-07-22). The old `.serif` override was removed
   (it duplicated `section h2`); Fraunces still lives on `.signature` and work.html `.rc-result`. */

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     font-family:var(--f-body);font-weight:600;font-size:16px;line-height:1;
     padding:15px 26px;border-radius:12px;border:1.5px solid transparent;cursor:pointer;
     transition:transform .14s ease,background .14s ease,border-color .14s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-deep)}
.btn-ghost{border-color:rgba(255,255,255,.28);color:#fff}
.btn-ghost:hover{border-color:#fff}
.btn-sm{padding:11px 18px;font-size:14.5px;border-radius:10px}
.btn-block{width:100%}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:100;
           background:var(--navy-2);
           border-bottom:1px solid rgba(255,255,255,.08)}
.head-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:11px;color:#fff}
.brand .mark{color:#fff;display:flex}
.brand-name{font-family:var(--f-head);font-weight:700;font-size:20px;letter-spacing:.01em;
            display:flex;align-items:baseline;gap:0}
.brand-name .bn-c{font-size:1.04em}
.brand-name .bn-num{font-family:var(--f-body);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0}
.brand-tag{font-family:var(--f-body);font-weight:600;font-size:10.5px;letter-spacing:.24em;
           text-transform:uppercase;color:var(--accent);position:relative;top:-.5px;margin-left:7px}
.main-nav{display:flex;gap:28px}
.main-nav a{color:#cdd9e6;font-size:15px;font-weight:500;white-space:nowrap;transition:color .14s}
.main-nav a:hover{color:#fff}
.head-right{display:flex;align-items:center;gap:18px}
.head-right .btn-primary{transition:opacity .2s ease}  /* NOT visibility — WebKit/Safari leaves a painted "ghost" when visibility is transitioned; keep the fade on opacity only, visibility flips instantly */
.head-right .btn-primary.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.langs{display:flex;gap:4px}
.langs a{font-size:12px;font-weight:600;color:var(--muted-2);padding:7px 9px;border-radius:7px;transition:.14s}
.langs a:hover{color:#fff}
.langs a.on{background:var(--accent);color:var(--accent-ink)}
.langs a[aria-disabled="true"]{opacity:.5}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px}
.nav-toggle span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.2s}
/* burger open = fog the rest of the page so the menu panel stands out and stays
   very legible. Fixed scrim sits BELOW the sticky header (z-index 100) but above
   page content, so the header/menu paints crisp on top while content is blurred. */
body.nav-open::before{content:"";position:fixed;inset:0;z-index:90;
  background:rgba(14,27,44,.32);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* mobile floating CTA — only phones, where the header CTA is collapsed into the
   burger. main.js creates it and toggles .is-hidden so it never sits over the
   hero CTA or the contact submit button. */
.mobile-cta{display:none}
@media(max-width:680px){
  .mobile-cta{display:inline-flex;align-items:center;position:fixed;right:16px;bottom:16px;z-index:95;
    background:var(--accent);color:var(--accent-ink);font-family:var(--f-body);font-weight:600;font-size:14.5px;
    padding:12px 19px;border-radius:999px;box-shadow:0 10px 26px rgba(14,27,44,.30);
    transition:opacity .2s ease,visibility .2s ease,transform .14s ease}
  .mobile-cta:hover{transform:translateY(-2px)}
  .mobile-cta.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
  /* never let the floating CTA sit over the open burger menu */
  body.nav-open .mobile-cta{display:none}
}

/* ---------- hero ---------- */
.hero{background:
        radial-gradient(900px 520px at 82% -12%,rgba(232,163,61,.16),transparent),
        radial-gradient(700px 400px at 0% 110%,rgba(232,163,61,.06),transparent),
        linear-gradient(180deg,var(--navy),var(--navy-2));
      color:var(--white);padding:44px 0 16px;position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
/* watermark sits INSIDE the content column (right edge of .wrap), so it reads as a
   backdrop under the copy instead of drifting off to the viewport edge on wide screens */
.hero::after{content:"";position:absolute;right:max(3%,calc(50% - var(--maxw) / 2));top:50%;transform:translateY(-50%);
  width:min(30vw,320px);height:min(30vw,320px);pointer-events:none;z-index:0;opacity:.34;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 1 30 30'%3E%3Ccircle cx='16' cy='16' r='14' fill='none' stroke='%23F7F8FA' stroke-width='2'/%3E%3Cpath d='M16 4.15 L20.48 19.55 L16 15.3 L11.52 19.55 Z' fill='%23E8A33D'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:820px){.hero::after{display:none}}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
         color:var(--accent);margin-bottom:24px}
.hero h1{font-family:var(--f-head);font-weight:700;font-size:clamp(40px,6.2vw,68px);
         line-height:1.03;letter-spacing:-.025em;margin-bottom:26px;max-width:920px}
/* No-JS fallback: cap the headline so the long accent line wraps and stays clear of
   the corner watermark. With JS, fitHero() removes this cap and instead scales the
   whole headline down so the accent line holds ONE line, clear of the compass. */
@media(min-width:821px){.hero h1{max-width:62%}}
.hero h1 .ac{color:var(--accent)}
.hero-sub{font-size:clamp(18px,2.2vw,21px);line-height:1.6;color:var(--muted);max-width:680px;margin-bottom:14px;text-wrap:pretty;
          text-align:justify;hyphens:manual}
.hero-soul{font-size:clamp(18px,2.2vw,21px);line-height:1.6;color:#fff;font-weight:600;max-width:660px;margin-bottom:36px}
/* keep the lead paragraph off the watermark on wide screens — same right edge as h1 (placed after
   the base max-width above so it wins the cascade; the h1 cap sits before its own base rule) */
@media(min-width:821px){.hero-sub{max-width:62%}}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:42px}
.hero-pills{list-style:none;display:flex;gap:10px;flex-wrap:wrap}
.hero-pills li{font-size:13.5px;font-weight:600;color:#d4dee9;
               background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
               padding:8px 15px;border-radius:999px}
.hero-pills li::before{content:"\2713";color:var(--accent);margin-right:7px;font-weight:700}

/* ---------- section rhythm ---------- */
section h2{font-family:var(--f-head);font-weight:700;color:var(--head-navy);
           font-size:clamp(28px,4vw,42px);line-height:1.08;letter-spacing:-.02em}
/* prose reads as one held-together block: flush both edges, no auto word-breaking (owner);
   section-leads span the FULL content width per owner request (Fable flagged the long
   measure; owner chose to use the space); left-aligned on phones so justify keeps tight */
.section-lead,.lead{font-size:19px;color:var(--ink-soft);max-width:780px;line-height:1.6;text-wrap:pretty;
                    text-align:justify;hyphens:manual}
.section-lead{max-width:none}
@media(max-width:680px){.section-lead,.lead,.hero-sub{text-align:left}.br-wide{display:none}
  /* keep the break before "C123 transforme cette pression" (problem lead) on mobile too */
  .problem .lead br{display:inline}}

/* ---------- problem ---------- */
/* Option A — descente tonale chronologique: problem(le+clair) -> services -> process -> fields(le+foncé) -> contact navy */
.problem{background:var(--cream-2);padding:26px 0}
.problem h2{margin-bottom:20px}
.problem .lead{font-size:20px;max-width:none}
/* AA fix: accent-deep #cf8a23 = 2.5:1 sur crème (échec 4.5:1) ; accent-text = 5.2:1 */
.problem .lead em{font-style:italic;color:var(--accent-text);font-weight:600}

/* ---------- services ---------- */
.services{background:var(--cream);padding:27px 0;border-top:1px solid #DCCDAF}
.services h2{margin-bottom:12px}
.services .section-lead{margin-bottom:40px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--card-bd);border-radius:var(--radius-lg);
      padding:26px 24px;transition:transform .16s ease,box-shadow .16s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(43,36,32,.10)}
.card .ic{display:inline-flex;width:46px;height:46px;border-radius:12px;
          background:rgba(232,163,61,.14);align-items:center;justify-content:center;margin-bottom:16px}
.card .ic svg{width:24px;height:24px;fill:none;stroke:var(--accent-deep);stroke-width:1.8;
              stroke-linecap:round;stroke-linejoin:round}
.card h3{font-family:var(--f-head);font-weight:600;font-size:19px;color:var(--head-navy);margin-bottom:8px}
.card p{font-size:14.6px;color:var(--ink-soft);line-height:1.55}
.services-note{margin-top:26px;font-size:15px;color:var(--ink-soft);
               background:var(--card);border:1px solid var(--card-bd);border-radius:14px;padding:16px 20px}

/* ---------- approach ---------- */
.approach{background:
            radial-gradient(800px 480px at 90% 0%,rgba(232,163,61,.12),transparent),
            linear-gradient(180deg,var(--navy-2),var(--navy));
          color:#fff;padding:27px 0}
.approach .kicker{color:var(--accent)}
.approach h2{color:#fff;margin-bottom:40px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.steps li{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
          border-radius:var(--radius-lg);padding:24px 22px}
.step-n{font-family:var(--f-head);font-weight:700;font-size:15px;color:var(--accent);
        display:inline-block;margin-bottom:14px;letter-spacing:.05em}
.steps h3{font-family:var(--f-head);font-weight:600;font-size:18px;color:#fff;margin-bottom:8px}
.steps p{font-size:14.5px;color:var(--muted);line-height:1.55}

/* ---------- about ---------- */
.about{background:var(--cream);padding:28px 0}
.about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:54px;align-items:center}
.about-text h2{margin-bottom:18px}
.about-text p{font-size:17px;color:var(--ink-soft);margin-bottom:16px;max-width:560px}
.signature{font-family:var(--f-serif);font-style:italic;color:var(--head-navy);font-size:18px}
.about-traits{list-style:none;display:grid;gap:12px}
.about-traits li{background:var(--card);border:1px solid var(--card-bd);border-radius:14px;
                 padding:16px 18px;display:flex;flex-direction:column;border-left:3px solid var(--accent)}
.about-traits strong{font-family:var(--f-head);font-size:16px;color:var(--head-navy)}
.about-traits span{font-size:13.5px;color:var(--ink-soft)}

/* ---------- contact ---------- */
.contact{background:
           radial-gradient(700px 460px at 10% 0%,rgba(232,163,61,.12),transparent),
           linear-gradient(180deg,var(--navy),var(--navy-2));
         color:#fff;padding:28px 0}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:54px;align-items:start}
.contact-intro .kicker{color:var(--accent)}
.contact-intro h2{color:#fff;margin-bottom:14px}
.contact-intro p{color:var(--muted);font-size:18px;margin-bottom:28px;max-width:420px}
.contact-facts{list-style:none;display:grid;gap:14px}
.contact-facts li{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.10);padding-top:12px}
.contact-facts span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:3px}
.contact-facts a,.contact-facts li{color:#fff;font-size:16px}

.contact-form{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);
              border-radius:var(--radius-lg);padding:28px}
.contact-form .field{margin-bottom:16px}
.contact-form .field label{display:block;font-size:14px;font-weight:600;color:#dbe5ef;margin-bottom:7px}
.contact-form .field .opt{font-weight:400;color:var(--muted-2)}
/* 16px min — anything smaller triggers iOS Safari's auto-zoom on focus, which
   disorients users mid-form */
.contact-form .field input,.contact-form .field textarea{width:100%;font-family:var(--f-body);font-size:16px;color:#fff;
       background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);
       border-radius:11px;padding:13px 15px;transition:border-color .14s,background .14s}
.contact-form .field input::placeholder,.contact-form .field textarea::placeholder{color:var(--muted-2)}
.contact-form .field input:focus,.contact-form .field textarea:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.09)}
.contact-form .field textarea{resize:vertical;min-height:120px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);margin:4px 0 18px;cursor:pointer}
.consent input{margin-top:3px;width:17px;height:17px;accent-color:var(--accent);flex:none}
.consent-note{margin:-12px 0 18px 27px;font-size:12.5px;color:var(--muted-2)}
.consent-note a{color:var(--accent);font-weight:600}
.cf-turnstile{margin-bottom:16px}
.cf-turnstile:empty{margin:0}
.form-status{margin-top:14px;font-size:14.5px;font-weight:600;min-height:1.2em}
.form-status.ok{color:#7fe0b0}
.form-status.err{color:#ffb4a8}

/* ---------- réalisations (subpage) ---------- */
.subpage-hero{background:linear-gradient(180deg,var(--navy),var(--navy-2));color:var(--white);
              padding:52px 0 40px;border-bottom:1px solid rgba(255,255,255,.06)}
.subpage-hero .kicker{color:var(--accent)}
.subpage-hero h1{font-family:var(--f-head);font-weight:700;font-size:clamp(32px,5vw,52px);
                 line-height:1.06;letter-spacing:-.02em;margin-bottom:14px}
.subpage-hero .lead{color:var(--muted);max-width:660px}
.realis-sec{background:var(--cream-2);padding:40px 0 52px}
.realis-note{margin:0 0 26px;font-size:14px;color:var(--ink-soft);background:var(--card);
             border:1px solid var(--card-bd);border-radius:12px;padding:12px 18px}
.realis{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.realis-card{background:var(--card);border:1px solid var(--card-bd);border-radius:var(--radius-lg);
             padding:24px 22px;display:flex;flex-direction:column;gap:11px;
             transition:transform .16s ease,box-shadow .16s ease}
.realis-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(43,36,32,.10)}
.rc-sector{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.rc-title{font-family:var(--f-head);font-weight:700;font-size:18.5px;color:var(--head-navy);line-height:1.2}
.rc-result{font-family:var(--f-serif);font-weight:600;font-size:16.5px;color:var(--accent-text);line-height:1.32}
.rc-desc{font-size:14.2px;color:var(--ink-soft);line-height:1.55}
.rc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.rc-tag{font-size:11px;font-weight:600;color:var(--ink-soft);background:rgba(232,163,61,.10);
        border:1px solid var(--card-bd);border-radius:999px;padding:3px 9px}
.realis-cta{background:var(--cream);border-top:1px solid var(--card-bd);padding:34px 0}
.realis-cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.realis-cta h2{font-family:var(--f-head);font-weight:700;font-size:clamp(22px,3vw,30px);color:var(--head-navy);letter-spacing:-.01em}
.realis-cta p{font-size:15px;color:var(--ink-soft);margin-top:4px}
@media(max-width:860px){.realis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.realis{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.site-foot{background:var(--navy-2);color:#fff;padding:56px 0 26px;border-top:1px solid rgba(255,255,255,.07)}
.foot-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;padding-bottom:34px}
.foot-logo{display:inline-flex;align-items:center;gap:11px}
.foot-logo .mark{display:flex;color:#fff}
.foot-brand .brand-name{font-family:var(--f-head);font-weight:700;font-size:20px;letter-spacing:.01em;color:#fff;display:inline-flex;align-items:baseline;gap:0}
.foot-brand p{color:var(--muted-2);font-size:14.5px;max-width:320px;margin-top:12px}
.foot-col h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.foot-col a,.foot-col span{display:block;color:#cdd9e6;font-size:14.5px;margin-bottom:9px;transition:color .14s}
.foot-col a:hover{color:#fff}
.foot-legal{display:flex;justify-content:space-between;align-items:center;
            border-top:1px solid rgba(255,255,255,.08);padding-top:20px;
            font-size:13.5px;color:var(--muted-2)}
.foot-legal a:hover{color:#fff}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
/* fail-safe: never leave revealed content invisible when JS is off or on print */
@media (scripting: none){.reveal{opacity:1;transform:none}}
@media print{.reveal{opacity:1;transform:none}}

/* ---------- responsive ---------- */
/* mid widths: the full nav is still shown but the long FR/DE labels
   ("Le parcours", "Nos domaines") would wrap to two lines. Keep every label on
   ONE line by trimming the type size + gaps instead (owner request). */
@media(min-width:681px) and (max-width:1040px){
  .main-nav{gap:20px}
  .main-nav a{font-size:13.5px}
}
@media(min-width:681px) and (max-width:900px){
  .main-nav{gap:15px}
  .main-nav a{font-size:12.5px}
  .head-right{gap:12px}
}
@media(max-width:900px){
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:34px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .foot-inner{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .wrap{padding:0 20px}
  .main-nav,.head-right .langs,.head-right .btn{display:none}
  .head-inner{position:relative;flex-wrap:wrap}
  .nav-toggle{display:flex;position:absolute;top:18px;right:0}
  /* open menu = full-width in-flow panel: nav links, then EN/FR/DE/LU, then the CTA last */
  .site-head.open .head-inner{height:auto;padding-bottom:18px}
  .site-head.open .main-nav{display:flex;order:2;width:100%;flex-direction:column;gap:0;
     margin-top:6px;border-top:1px solid rgba(255,255,255,.10)}
  .site-head.open .main-nav a{padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
  .site-head.open .head-right{order:3;width:100%;flex-direction:column;align-items:stretch;gap:15px;margin-top:15px}
  .site-head.open .head-right .langs{display:flex;justify-content:center;gap:8px}
  .site-head.open .head-right .btn{display:inline-flex;justify-content:center;width:100%;
     opacity:1;visibility:visible;pointer-events:auto}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hero{padding:32px 0 20px}
  .cards,.steps,.foot-inner{grid-template-columns:1fr}
  .foot-legal{flex-direction:column;gap:10px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.btn:hover,.card:hover{transform:none}
}

/* ===================================================================
   Additions: hero one-line soul · draft badge · pledge · process
   timeline · showcases (fields) · trusted-by marquee
   =================================================================== */

/* keep the hero soul line on one line (desktop) */
@media(min-width:721px){ .hero-soul{white-space:nowrap;max-width:none} }

/* draft badge */
.draft{display:inline-block;margin-left:8px;font-family:var(--f-body);font-weight:600;
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-text);
  background:rgba(232,163,61,.18);padding:3px 9px;border-radius:999px;vertical-align:middle}

/* pledge band (amber, bold) */
.pledge{background:linear-gradient(180deg,#E8A33D,#dd9a32);color:#241704;padding:21px 0}
.pledge-kicker{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5c3d07;margin-bottom:12px}
.pledge-head{font-family:var(--f-head);font-weight:700;font-size:clamp(26px,3.6vw,40px);
  line-height:1.08;letter-spacing:-.02em;color:#241704;margin-bottom:16px;max-width:780px}
.pledge-sub{font-size:18px;line-height:1.6;color:#3c2a0c;max-width:700px;margin-bottom:24px}
.pledge-tags{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.pledge-tags li{background:rgba(36,23,4,.10);border:1px solid rgba(36,23,4,.20);color:#2c1d05;
  font-weight:600;font-size:14px;padding:8px 16px;border-radius:999px}

/* process timeline */
.process{background:var(--cream-3);padding:27px 0;border-top:1px solid #D6C5A3}
.process h2{margin-bottom:12px}
.process .section-lead{margin-bottom:46px}
.timeline{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:20px;position:relative}
/* connector line is drawn PER SEGMENT on li::before (see loop block) so loop spans can drop it */
.timeline li{position:relative;padding-top:30px}
.t-dot{position:absolute;top:0;left:0;width:18px;height:18px;border-radius:50%;
  background:var(--accent);border:3px solid var(--cream-3);box-shadow:0 0 0 2px var(--accent)}
/* AA fix: t-step (petit texte 11.5px) en accent-deep = 2.2:1 sur cream-3 (échec) ; accent-text = 4.6:1 */
.t-step{font-family:var(--f-head);font-weight:700;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-text)}
.timeline h3{font-family:var(--f-head);font-weight:600;font-size:16.5px;color:var(--head-navy);margin:5px 0 6px}
.timeline p{font-size:13.8px;color:var(--ink-soft);line-height:1.5}
@media(max-width:900px){.timeline{grid-template-columns:repeat(2,1fr);gap:22px 26px}
  .timeline li{padding-top:0;padding-left:30px}.t-dot{top:2px}}
@media(max-width:520px){.timeline{grid-template-columns:1fr}}

/* showcases — business fields */
.fields-sec{background:var(--cream-4);padding:27px 0;border-top:1px solid #D0BD97}
.fields-sec h2{margin-bottom:12px}
/* AA fix: on cream-4 (darkest band) amber #8a5a12 falls to 4.3:1; deeper amber = 5.2:1.
   Kickers are bright var(--accent) only on the navy bands (.approach/.contact-intro). */
.fields-sec .kicker{color:#7a4f0f}
.fields-sec .section-lead{margin-bottom:40px}
.fields{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fields .field{display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left;
  background:var(--card);border:1px solid var(--card-bd);border-radius:16px;padding:22px 20px;
  cursor:pointer;font-family:inherit;transition:transform .14s,border-color .14s,box-shadow .14s}
.fields .field:hover,.fields .field:focus-visible{transform:translateY(-3px);border-color:var(--accent);
  box-shadow:0 14px 30px rgba(43,36,32,.10);outline:none}
.f-ic{width:42px;height:42px;border-radius:11px;background:rgba(232,163,61,.14);
  display:inline-flex;align-items:center;justify-content:center}
.f-ic svg{width:22px;height:22px;fill:none;stroke:var(--accent-deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.f-name{font-family:var(--f-head);font-weight:600;font-size:16px;color:var(--head-navy)}
.f-eg{font-size:13.4px;color:var(--ink-soft);line-height:1.45}
/* Per-sector colour coding (owner request 2026-07-22). LESSON KEPT: an earlier
   build used 11 saturated pastel BACKGROUNDS that fought the warm cream band this
   section sits on — so the hue here is muted and lands mostly on the icon chip +
   a whisper of card tint, never a loud fill. A "+" marks each tile as expandable
   (turns to "−" when open). If a sector is added, give it a --sec below. */
.fields .field{--sec:var(--accent-deep)}
.fields .field:nth-child(1){--sec:#4E6E8E}    /* Industry & manufacturing */
.fields .field:nth-child(2){--sec:#B06134}    /* Retail & points of sale */
.fields .field:nth-child(3){--sec:#3E7CB1}    /* IT & technology */
.fields .field:nth-child(4){--sec:#28818F}    /* Sanitary, HVAC & technical trades */
.fields .field:nth-child(5){--sec:#8A6D3B}    /* Construction & building */
.fields .field:nth-child(6){--sec:#6F7B34}    /* Wholesale & distribution */
.fields .field:nth-child(7){--sec:#5566B0}    /* Logistics & traceability */
.fields .field:nth-child(8){--sec:#3F8A4B}    /* Food & beverage */
.fields .field:nth-child(9){--sec:#B4553E}    /* Automotive & mobility */
.fields .field:nth-child(10){--sec:#B5567C}   /* Healthcare & pharma */
.fields .field:nth-child(11){--sec:#7A6AA6}   /* Public sector & associations */
.fields .field{background:color-mix(in srgb,var(--sec) 6%,var(--card));
  border-color:color-mix(in srgb,var(--sec) 26%,var(--card-bd))}
.fields .field .f-ic{background:color-mix(in srgb,var(--sec) 15%,var(--card))}
.fields .field .f-ic svg{stroke:var(--sec)}
.fields .field:hover,.fields .field:focus-visible{border-color:var(--sec)}
.fields .field:focus-visible{outline:2px solid var(--sec);outline-offset:2px}
.fields .field{position:relative}
.fields .field .f-name{padding-right:20px}
.fields .field::after{content:"+";position:absolute;top:15px;right:17px;font-family:var(--f-head);
  font-weight:600;font-size:17px;line-height:1;color:var(--sec);opacity:.5;
  transition:opacity .14s ease}
.fields .field:hover::after,.fields .field:focus-visible::after{opacity:.9}
.fields .field[aria-expanded="true"]::after{content:"−";opacity:1}
@media(max-width:900px){.fields{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.fields{grid-template-columns:1fr}}

/* trusted-by marquee */
.trusted{background:var(--cream-2);padding:60px 0 70px;border-top:1px solid var(--card-bd);overflow:hidden}
.trusted .wrap{margin-bottom:26px}
.trusted .kicker{margin-bottom:6px}
.t-sub{font-size:15px;color:var(--ink-soft);text-wrap:pretty}
.marquee{position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;gap:16px;width:max-content;animation:marquee 36s linear infinite}
.marquee:hover .marquee-track,.marquee-track.paused{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-chip{flex:none;display:inline-flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--card-bd);border-radius:14px;padding:15px 22px;font-family:var(--f-head);
  font-weight:600;font-size:16px;color:var(--head-navy);cursor:pointer;white-space:nowrap;
  transition:border-color .14s,transform .14s}
.logo-chip:hover,.logo-chip:focus-visible{border-color:var(--accent);transform:translateY(-2px);outline:none}
.logo-chip .mk{width:24px;height:24px;border-radius:7px;background:rgba(232,163,61,.18);
  display:inline-flex;align-items:center;justify-content:center;color:var(--accent-deep);font-size:11px}
.cust-pop{position:fixed;z-index:150;max-width:268px;background:var(--navy);color:#fff;
  border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:13px 15px;font-size:13.6px;
  line-height:1.5;box-shadow:0 16px 38px rgba(0,0,0,.32);opacity:0;transform:translateY(5px);
  transition:opacity .14s ease,transform .14s ease;pointer-events:none}
.cust-pop.show{opacity:1;transform:none}
.cust-pop b{display:block;margin-top:7px;color:var(--accent);font-family:var(--f-head);font-size:13px;font-weight:600}
.cust-pop::after{content:"";position:absolute;bottom:-6px;left:var(--ax,50%);transform:translateX(-50%);
  width:0;height:0;border:6px solid transparent;border-top-color:var(--navy)}
@media(prefers-reduced-motion:reduce){ .marquee-track{animation:none} }

/* timeline: per-segment connector + forward arrows + square agile-loop circuits */
/* straight connector, one per span (dot edge -> next dot edge); loop spans REPLACE it with the circuit */
.timeline li::before{content:"";position:absolute;top:8px;left:18px;width:calc(100% + 2px);height:2px;
  background:var(--accent-deep)}
.timeline li:last-child::before{content:none}
/* arrowhead: fixed-size SVG chevron centered on the connector — stays put on resize */
.timeline li::after{content:"";position:absolute;top:1px;left:calc(50% + 19px);transform:translateX(-50%);
  width:16px;height:16px;background:center/contain no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 2.5 L12 8 L4.5 13.5 Z' fill='%23cf8a23'/%3E%3C/svg%3E")}
.timeline li:last-child::after{content:none}
/* agile-loop spans (Étapes 2-3, 3-4): two-way chevron signals iteration */
.timeline li.loop::before{background:var(--accent-deep)}
.timeline li.loop::after{width:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M6.5 2.5 L1.5 8 L6.5 13.5 Z M17.5 2.5 L22.5 8 L17.5 13.5 Z' fill='%23cf8a23'/%3E%3C/svg%3E")}
/* phones: drop BOTH connector line and arrowheads — the 2-col card layout needs neither.
   Must live AFTER the unconditional ::before/::after rules above so source order wins. */
@media(max-width:900px){.timeline li::before,.timeline li::after{content:none}}

/* showcases — expanding detail band */
.fields .field[aria-expanded="true"],.fields .field.active{border-color:var(--sec);background:#fff;
  box-shadow:0 14px 30px rgba(43,36,32,.10)}
.field-detail{position:relative;margin-top:18px;background:var(--card);border:1px solid var(--card-bd);
  border-left:4px solid var(--accent);border-radius:16px;padding:24px 26px;
  box-shadow:0 16px 34px rgba(43,36,32,.08);animation:fdIn .22s ease}
.field-detail[hidden]{display:none}
@keyframes fdIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.field-detail h3{font-family:var(--f-head);font-weight:600;font-size:20px;color:var(--head-navy);
  margin-bottom:14px;padding-right:34px}
.field-detail ul{list-style:none;display:grid;gap:9px;margin-bottom:20px}
.field-detail li{position:relative;padding-left:24px;font-size:15px;color:var(--ink-soft);line-height:1.5}
.field-detail li::before{content:"\2713";position:absolute;left:0;color:var(--accent-deep);font-weight:700}
.fd-close{position:absolute;top:14px;right:15px;background:none;border:0;font-size:24px;line-height:1;
  color:var(--ink-soft);cursor:pointer;padding:2px 6px;border-radius:6px}
.fd-close:hover{color:var(--head-navy);background:rgba(43,36,32,.06)}

/* showcases — "don't see yours?" call-to-action tile */
.field-cta{display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left;
  background:linear-gradient(160deg,#fbe6cf,#f7dcb4);border:1px solid #e9c891;border-radius:16px;
  padding:22px 20px;transition:transform .14s,box-shadow .14s}
.field-cta:hover,.field-cta:focus-visible{transform:translateY(-3px);box-shadow:0 14px 30px rgba(43,36,32,.12);outline:none}
.field-cta:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
.field-cta .f-ic{background:rgba(190,91,58,.16)}
.field-cta .f-ic svg{stroke:#a64a28}
.field-cta .f-name{font-family:var(--f-head);font-weight:700;font-size:16px;color:var(--head-navy)}
.field-cta .f-eg{font-size:13.4px;color:#7a5326;line-height:1.45;font-weight:500}

/* legal / privacy pages */
.legal{background:var(--cream-2);padding:72px 0 90px;border-top:1px solid var(--card-bd)}
.legal .wrap{max-width:780px}
.legal h1{font-family:var(--f-head);font-weight:700;font-size:clamp(26px,4vw,38px);color:var(--head-navy);margin-bottom:8px}
.legal .updated{font-size:13.5px;color:var(--ink-soft);margin-bottom:34px}
.legal h2{font-family:var(--f-head);font-weight:600;font-size:20px;color:var(--head-navy);margin:34px 0 10px}
.legal p,.legal li{font-size:15.5px;color:var(--ink);line-height:1.65}
.legal ul{margin:8px 0 8px 22px}
.legal a{color:var(--accent-deep);font-weight:600}
.legal .todo{background:#fdf3e3;border:1px dashed var(--accent-deep);border-radius:10px;padding:10px 14px;font-size:14px;color:#7a5326;margin:10px 0}

/* journey principles (merged from the former Approach panel) */
.principles-head{margin-top:52px;margin-bottom:18px;font-family:var(--f-head);font-weight:700;font-size:20px;color:var(--head-navy)}
.principles{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.principles li{background:var(--card);border:1px solid var(--card-bd);border-radius:var(--radius-lg);padding:22px 20px}
.principles .p-n{font-family:var(--f-head);font-weight:700;font-size:14px;color:var(--accent-deep);display:inline-block;margin-bottom:10px;letter-spacing:.05em}
.principles h3{font-family:var(--f-head);font-weight:600;font-size:17px;color:var(--head-navy);margin-bottom:7px}
.principles p{font-size:14.2px;color:var(--ink-soft);line-height:1.55}
@media(max-width:900px){.principles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.principles{grid-template-columns:1fr}}