/* ============================================================
   Logiciel Solutions - canonical stylesheet (single source of truth)
   Every page links this file. Page-specific layout lives in each
   page's own <style> block; foundations + tokens live ONLY here.
   ============================================================ */

/* Satoshi - self-hosted (was Fontshare CDN; cross-origin swap was unreliable,
   leaving headings on the system fallback). Files: public/assets/fonts/. */
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* paper / ink */
  --paper:#FAF8F5; --paper-2:#F2EEE7; --paper-3:#EBE5D9;
  --ink:#0F0F10; --ink-2:#2B2B2E; --ink-3:#54545C; --ink-4:#94949C;
  --line:rgba(15,15,16,0.08); --line-2:rgba(15,15,16,0.14);

  /* brand red */
  --brand:#A41E21; --brand-2:#C0282C; --brand-soft:rgba(164,30,33,0.14);
  --red-dark:#C0282C;            /* red text/accents on dark surfaces */

  /* night (dark sections) */
  --night:#0F0708; --night-2:#1A0E10; --night-text:#F4EDE8; --night-muted:#B5A8A3; --night-line:rgba(255,255,255,0.10);

  /* sage (secondary tone) */
  --sage:#1F2A28; --sage-2:#2A3835; --sage-text:#E8EFEB; --sage-muted:#A6B5AD; --sage-line:rgba(255,255,255,0.08); --sage-gold:#D8C078;

  /* cream (warm tone) */
  --cream:rgb(245 237 220 / 29%); --cream-2:rgb(245 237 220 / 45%); --cream-3:rgb(245 237 220 / 62%); --cream-ink:#1E2B27; --cream-muted:#4C5A55; --cream-line:rgba(60,40,15,0.12);

  /* type */
  --f-display:"Satoshi","Satoshi-fallback",system-ui,-apple-system,sans-serif;
  --f-body:"Inter",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --w-heading:500;               /* default display heading weight */
  --w-strong:700;                /* emphasised heading weight */

  /* radii */
  --r-sm:6px; --r-md:10px; --r-lg:16px;
}

/* tone scopes - red text/accents read brighter on dark surfaces */
.dark, .section.dark, .footer, .cta-card, .cd-hero, .cd-close { --brand:var(--red-dark); --brand-2:var(--red-dark); }

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{overflow-x:clip;}
body{font-family:var(--f-body);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;font-size:14px;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
::selection{background:var(--ink);color:var(--paper);}

/* Type */
.h1{font-family:var(--f-display);font-weight:var(--w-heading);font-size:clamp(38px,6vw,84px);letter-spacing:-0.035em;line-height:0.98;margin:0;}
/* Global: H1 titles are Title Case. Sanity-authored content titles that keep their
   own casing (glossary terms with acronyms like gRPC/iOS) opt out via a guard class. */
.h1,.h1-inner{text-transform:capitalize;}
.h2{font-family:var(--f-display);font-weight:var(--w-heading);font-size:clamp(30px,4.2vw,56px);letter-spacing:-0.03em;line-height:1.04;margin:0;}
.h3{font-family:var(--f-display);font-weight:var(--w-heading);font-size:clamp(19px,1.9vw,25px);letter-spacing:-0.02em;line-height:1.2;margin:0;}
.section.cream .h1 em,.section.cream .h2 em,.section.cream .h3 em,.cream .h1 em,.cream .h2 em,.cream .h3 em{color:#5C5346;}
.section.dark .h1 em,.section.dark .h2 em,.section.dark .h3 em,.dark .h1 em,.dark .h2 em,.dark .h3 em{color:var(--brand-2);}
.lead{font-size:clamp(15px,1.2vw,18px);color:var(--ink-2);line-height:1.6;}
.h1 em,.h2 em,.h3 em{font-style:normal;color:var(--brand);}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-3);font-weight:500;}
.rdot{color:var(--brand);}

/* Layout */
.container{max-width:1360px;margin:0 auto;padding:0 28px !important;}
.section{padding:70px 0;position:relative;border-top:1px solid var(--line);}
.section.dense{padding:80px 0;}
.section.dark{background:var(--night);color:var(--night-text);border-top:0;}
.section.cream{background:var(--cream);color:var(--cream-ink);border-top:0;}
.section.sage{background:var(--sage);color:var(--sage-text);border-top:0;}
.cream .mono{color:var(--cream-muted);}
.sage .mono{color:var(--sage-muted);}

/* Section heading - STANDARD: red-line eyebrow stacked above a left-aligned h2 */
.sec-head{max-width:760px;margin:0 0 52px;}
.sec-head .h2{margin-bottom:16px;}
.sec-head .lead{color:var(--ink-3);}
.dark .sec-head .lead{color:var(--night-muted);}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.sec-head.center .eyebrow{justify-content:center;}

/* Eyebrow - red line + red uppercase mono label (one style site-wide) */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--brand);font-weight:500;margin-bottom:18px;}
.eyebrow .dot{width:28px;height:1px;background:var(--brand);flex:none;}

/* Red text/accents on dark surfaces are bolder (uses the tone-scoped brand red) */
.dark .eyebrow, .section.dark .eyebrow, .sage .eyebrow,
.dark .rdot, .section.dark .rdot, .sage .rdot,
.dark .h1 em, .dark .h2 em, .dark .h3 em,
.section.dark .h1 em, .section.dark .h2 em, .section.dark .h3 em,
.proc-step, .cta-card h2 em, .cd-hero h1 em, .cd-close h2 em { font-weight:var(--w-strong); }

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:10px;font-size:14px;font-weight:500;border:1px solid transparent;transition:all 0.2s ease;white-space:nowrap;cursor:pointer;}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{background:#1f1f22;transform:translateY(-1px);}
.btn-red{background:var(--brand);color:#fff;}
.btn-red:hover{background:#871719;transform:translateY(-1px);}
.btn-ghost{border-color:var(--line-2);color:var(--ink);background:transparent;}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.dark .btn-ghost{border-color:var(--night-line);color:var(--night-text);}
.dark .btn-ghost:hover{background:var(--night-text);color:var(--night);border-color:var(--night-text);}

/* Nav (sticky mega-menu) */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(250,248,245,0.85);border-bottom:1px solid var(--line);}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:76px;max-width:1360px;margin:0 auto;padding:0 28px;}
.nav-mark img{height:48px;}
.nav-links{display:flex;align-items:center;gap:2px;font-size:14px;color:var(--ink-2);}
.nav-item{position:relative;}
.nav-trigger,.nav-link{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;color:var(--ink-2);white-space:nowrap;transition:color 0.2s,background 0.2s;}
.nav-link:hover{color:var(--brand);}
.nav-item:hover>.nav-trigger,.nav-item:focus-within>.nav-trigger{color:var(--brand);background:var(--paper-2);}
.nav-trigger .chev{color:var(--ink-4);transition:transform 0.2s,color 0.2s;}
.nav-item:hover>.nav-trigger .chev,.nav-item:focus-within>.nav-trigger .chev{transform:rotate(180deg);color:var(--brand);}
.nav-trigger:focus-visible,.nav-link:focus-visible,.mega a:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px;}
.mega{position:absolute;top:calc(100% + 12px);left:0;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:0 24px 64px rgba(15,15,16,0.14);padding:24px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity 0.18s ease,transform 0.18s ease,visibility 0.18s;z-index:60;}
.mega.align-right{left:auto;right:0;}
.mega::before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px;}
.nav-item:hover>.mega,.nav-item:focus-within>.mega{opacity:1;visibility:visible;transform:translateY(0);}
.mega-grid{display:grid;gap:28px;}.mega.services .mega-grid{grid-template-columns:repeat(3,minmax(190px,1fr));}.mega.simple{padding:14px;min-width:300px;}
.mega-col-label{font-family:var(--f-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line);}
.mega a{display:block;padding:9px 12px;border-radius:var(--r-sm);font-size:14px;color:var(--ink-2);line-height:1.3;transition:background 0.15s,color 0.15s;}
.mega a:hover{background:var(--paper-2);color:var(--brand);}

/* Footer */
.footer{background:var(--night);color:var(--night-text);padding:80px 0 40px;border-top:1px solid var(--night-line);}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:48px;margin-bottom:64px;}
.footer h4{font-family:var(--f-mono);font-size:11px;letter-spacing:0.05em;text-transform:uppercase;color:var(--night-muted);margin:0 0 18px;font-weight:500;}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.footer ul a{font-size:13px;opacity:0.85;}
.footer ul a:hover{opacity:1;color:var(--brand);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;border-top:1px solid var(--night-line);font-size:12px;color:var(--night-muted);flex-wrap:wrap;gap:16px;}
.socials{display:flex;gap:10px;margin-top:24px;}
.social-ico{width:38px;height:38px;border:1px solid var(--night-line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--night-text);transition:background 0.2s,color 0.2s,border-color 0.2s,transform 0.2s;}
.social-ico:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-2px);}
.social-ico svg{width:17px;height:17px;}

/* Row label (eyebrow + heading stacked, left aligned) */
.row-label{display:flex;flex-direction:column;align-items:flex-start;gap:22px;}
.row-label .eyebrow{margin:0;}
.row-label .h2{text-align:left;}

/* FAQ accordion */
.acc{border-bottom:1px solid var(--line);padding:22px 0;cursor:pointer;}
.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;}
.acc summary::-webkit-details-marker{display:none;}
.acc .q{font-family:var(--f-display);font-size:clamp(18px,1.6vw,22px);letter-spacing:-0.02em;font-weight:500;line-height:1.3;color:var(--ink);}
.acc .plus{width:32px;height:32px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:var(--ink);transition:transform 0.2s,background 0.2s;}
.acc[open] .plus{transform:rotate(45deg);background:var(--ink);color:#fff;border-color:var(--ink);}
.acc .a{margin-top:14px;color:var(--ink-2);max-width:70ch;padding-right:60px;font-size:15px;line-height:1.6;}

/* hero dot-grid texture */
.hero-dots{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(circle,rgba(15,15,16,0.07) 1px,transparent 1.5px);background-size:32px 32px;-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 70% 40%,#000 30%,transparent 75%);}
.hero-dots~*{position:relative;z-index:1;}

/* Shared responsive */
@media (max-width:900px){
  .container,.nav-row{padding-left:40px !important;padding-right:40px !important;}
  .nav-links{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
}
@media (max-width:600px){
  .container,.nav-row{padding-left:22px !important;padding-right:22px !important;}
  .footer-grid{grid-template-columns:1fr;}
}

/* ============ Step-sequence scroll reveal (shared: proc + flow step headers) ============
   Palette-agnostic (transform-only) so it works on dark .proc and light/cream .flow and
   preserves each section's resting colors. JS (BaseLayout) adds .sr then .sr-in on scroll. */
.proc-dot,.flow-dot{position:relative;}
.proc-line,.flow-line{transform-origin:left center;}
.proc-grid.sr .proc-line,.flow-grid.sr .flow-line{transform:scaleX(0);}
.proc-grid.sr .proc-dot,.flow-grid.sr .flow-dot{transform:scale(0);}
.proc-grid.sr .proc-line,.proc-grid.sr .proc-dot,.flow-grid.sr .flow-line,.flow-grid.sr .flow-dot{transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease;}
.proc-grid.sr.sr-in .proc-line,.flow-grid.sr.sr-in .flow-line{transform:scaleX(1);}
.proc-grid.sr.sr-in .proc-dot,.flow-grid.sr.sr-in .flow-dot{transform:scale(1);}
.proc-grid.sr.sr-in .proc:nth-child(1) .proc-line,.flow-grid.sr.sr-in .flow:nth-child(1) .flow-line{transition-delay:.05s;}
.proc-grid.sr.sr-in .proc:nth-child(1) .proc-dot,.flow-grid.sr.sr-in .flow:nth-child(1) .flow-dot{transition-delay:.25s;}
.proc-grid.sr.sr-in .proc:nth-child(2) .proc-line,.flow-grid.sr.sr-in .flow:nth-child(2) .flow-line{transition-delay:.30s;}
.proc-grid.sr.sr-in .proc:nth-child(2) .proc-dot,.flow-grid.sr.sr-in .flow:nth-child(2) .flow-dot{transition-delay:.50s;}
.proc-grid.sr.sr-in .proc:nth-child(3) .proc-line,.flow-grid.sr.sr-in .flow:nth-child(3) .flow-line{transition-delay:.55s;}
.proc-grid.sr.sr-in .proc:nth-child(3) .proc-dot,.flow-grid.sr.sr-in .flow:nth-child(3) .flow-dot{transition-delay:.75s;}
.proc-grid.sr.sr-in .proc:nth-child(4) .proc-line,.flow-grid.sr.sr-in .flow:nth-child(4) .flow-line{transition-delay:.80s;}
.proc-grid.sr.sr-in .proc:nth-child(4) .proc-dot,.flow-grid.sr.sr-in .flow:nth-child(4) .flow-dot{transition-delay:1.00s;}
.proc-grid.sr.sr-in .proc:nth-child(5) .proc-line,.flow-grid.sr.sr-in .flow:nth-child(5) .flow-line{transition-delay:1.05s;}
.proc-grid.sr.sr-in .proc:nth-child(5) .proc-dot,.flow-grid.sr.sr-in .flow:nth-child(5) .flow-dot{transition-delay:1.25s;}
.proc-grid.sr.sr-in .proc:nth-child(6) .proc-line,.flow-grid.sr.sr-in .flow:nth-child(6) .flow-line{transition-delay:1.30s;}
.proc-grid.sr.sr-in .proc:nth-child(6) .proc-dot,.flow-grid.sr.sr-in .flow:nth-child(6) .flow-dot{transition-delay:1.50s;}
.proc-grid.sr.sr-in .proc-dot::after,.flow-grid.sr.sr-in .flow-dot::after{content:'';position:absolute;inset:-1px;border-radius:50%;animation:sr-steppulse .7s ease-out both;}
.proc-grid.sr.sr-in .proc:nth-child(1) .proc-dot::after,.flow-grid.sr.sr-in .flow:nth-child(1) .flow-dot::after{animation-delay:.25s;}
.proc-grid.sr.sr-in .proc:nth-child(2) .proc-dot::after,.flow-grid.sr.sr-in .flow:nth-child(2) .flow-dot::after{animation-delay:.50s;}
.proc-grid.sr.sr-in .proc:nth-child(3) .proc-dot::after,.flow-grid.sr.sr-in .flow:nth-child(3) .flow-dot::after{animation-delay:.75s;}
.proc-grid.sr.sr-in .proc:nth-child(4) .proc-dot::after,.flow-grid.sr.sr-in .flow:nth-child(4) .flow-dot::after{animation-delay:1.00s;}
.proc-grid.sr.sr-in .proc:nth-child(5) .proc-dot::after,.flow-grid.sr.sr-in .flow:nth-child(5) .flow-dot::after{animation-delay:1.25s;}
.proc-grid.sr.sr-in .proc:nth-child(6) .proc-dot::after,.flow-grid.sr.sr-in .flow:nth-child(6) .flow-dot::after{animation-delay:1.50s;}
@keyframes sr-steppulse{0%{box-shadow:0 0 0 0 rgba(192,40,44,.5);}100%{box-shadow:0 0 0 8px rgba(192,40,44,0);}}

/* Stats band: on tablet + mobile, stack one stat per row (full-width, flush-left,
   with a hairline divider between) instead of the cramped multi-column grid where
   wider values (e.g. "1-8%") wrapped. Applies across all pages using .stat-cell. */
@media (max-width:768px){
  .stats-row{grid-template-columns:1fr !important;}
  .stat-cell{padding:18px 0 !important;border-left:none;border-top:1px solid var(--line);}
  .stat-cell:first-child{border-top:none;padding-top:0 !important;}
  .stat-cell-n{white-space:nowrap;}
}

/* Diagonal arrow (.garrow) is a "this opens/links" affordance: show it only
   when the box or text is actually a link; hide it on plain non-link boxes. */
.garrow{display:none;}
a .garrow{display:inline-flex;}