/* ==========================================================================
   toumisoft.tn — shared stylesheet (en / fr / ar)

   Direction-agnostic: every inline axis rule uses logical properties, so the
   same file drives LTR and RTL. The [dir="rtl"] blocks below only handle what
   logical properties cannot express — mirrored gradients, arrow glyphs, and
   Arabic typography.
   ========================================================================== */

/* ============ TOKENS ============ */
:root{
  color-scheme: light dark;
  --paper:   light-dark(oklch(0.972 0.005 265), oklch(0.155 0.012 265));
  --paper-2: light-dark(oklch(0.941 0.007 265), oklch(0.196 0.014 265));
  --ink:     light-dark(oklch(0.205 0.020 265), oklch(0.960 0.004 265));
  --muted:   light-dark(oklch(0.520 0.020 265), oklch(0.700 0.018 265));
  --line:    light-dark(oklch(0.885 0.008 265), oklch(0.285 0.015 265));
  --signal:  light-dark(oklch(0.520 0.230 278), oklch(0.730 0.185 278));
  --citron:  light-dark(oklch(0.840 0.180 118), oklch(0.880 0.190 118));
  --danger:  light-dark(oklch(0.545 0.210 27), oklch(0.720 0.170 27));

  --font-display: 'Bricolage Grotesque','Inter Tight',sans-serif;
  --font-body: 'Inter Tight',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono: 'JetBrains Mono',ui-monospace,monospace;

  --mono-spacing: .14em;
  --mono-case: uppercase;
  --display-leading: 0.95;
  --body-leading: 1.6;

  --rail: 88px;
  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1240px;

  --fs-display: clamp(2.4rem, 6.5vw, 5rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.4rem);
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-mono: 0.72rem;

  --ease: cubic-bezier(.2,.7,.2,1);
}
@supports not (color: light-dark(#fff,#000)){
  :root{
    --paper:#F4F5F8; --paper-2:#E9EBF0; --ink:#191C22; --muted:#6C707C;
    --line:#DDE0E7; --signal:#4B3BE8; --citron:#CDE84B; --danger:#C7362B;
  }
}

/* The home page runs a larger display scale than the inner pages. */
body.page-home{
  --fs-display: clamp(2.6rem, 8.5vw, 7rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  --display-leading: 0.92;
}

/* ---- Arabic -------------------------------------------------------------
   Latin display faces have no Arabic coverage, and the uppercase/tracked
   treatment of .mono is meaningless in Arabic — letter-spacing in particular
   fights the cursive joining. Arabic also needs more leading and slightly
   larger text to stay comfortable at the same optical size.
   ------------------------------------------------------------------------- */
:root:lang(ar), [lang="ar"], [dir="rtl"]{
  --font-display: 'Noto Kufi Arabic','Bricolage Grotesque',sans-serif;
  --font-body: 'Noto Sans Arabic','Inter Tight',sans-serif;
  --font-mono: 'Noto Sans Arabic','JetBrains Mono',monospace;

  --mono-spacing: 0;
  --mono-case: none;
  /* Kufic-style display faces read as cramped at Latin line-heights once a
     title wraps to two lines — open it up well past the body leading. */
  --display-leading: 1.5;
  --body-leading: 1.85;

  --fs-display: clamp(2rem, 5.5vw, 4rem);
  --fs-mono: 0.78rem;
  /* Arabic words do not fit an 88px vertical rail, so it widens and the
     nav switches to normal horizontal text. */
  --rail: 116px;
}
body.page-home[dir="rtl"], [dir="rtl"] body.page-home{
  --fs-display: clamp(2.2rem, 6.5vw, 5rem);
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);line-height:var(--body-leading);font-weight:350;
  padding-inline-start:var(--rail);overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
::selection{background:var(--signal);color:var(--paper)}

.mono{
  padding: .2rem .4rem; 
  font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:var(--mono-spacing);text-transform:var(--mono-case);
  color:var(--muted);font-weight:500;
}
.display{
  font-family:var(--font-display);font-weight:600;
  letter-spacing:-0.035em;line-height:var(--display-leading);text-wrap:balance;
}
/* Tightened tracking is a Latin-display trick; it damages Arabic — letter
   joining breaks under it. Word-spacing is safe and adds the same sense of
   air without touching the letters inside a word. */
[dir="rtl"] .display{letter-spacing:0;word-spacing:.2em}
p{text-wrap:pretty;max-width:62ch}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Skip link — visible only once focused. */
.skip{
  position:absolute;inset-block-start:-100px;inset-inline-start:1rem;z-index:100;
  background:var(--ink);color:var(--paper);padding:.7rem 1.2rem;
  border-radius:0 0 10px 10px;font-size:.9rem;
  transition:inset-block-start .2s var(--ease);
}
.skip:focus{inset-block-start:0}

/* ============ SITE CHROME ============
   The rail and footer are the <site-rail> / <site-footer> custom elements in
   assets/js/site-chrome.js — their styles live inside those shadow roots and
   read the custom properties above, which cross the shadow boundary.

   The two rules here are all the outer document needs to know about them: a
   reserved slot before upgrade, so nothing reflows when the script runs.
   ====================================== */
site-rail{
  display:block;position:fixed;inset-block:0;inset-inline-start:0;
  width:var(--rail);z-index:50;
}
site-footer{display:block}

/* Without JavaScript the components never upgrade and their <noscript>
   fallbacks render as ordinary flow content instead. The rail is not fixed in
   that case, so the reserved space has to come back. */
site-rail:not(:defined){position:static;width:auto;display:block}
body:has(site-rail:not(:defined)){padding-inline-start:0}

.fallback-nav{
  display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;
  padding:1rem var(--pad);border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:var(--mono-spacing);text-transform:var(--mono-case);
}
.fallback-nav a{color:var(--muted)}
.fallback-nav a:hover,.fallback-nav a[aria-current="page"]{color:var(--ink)}

/* ============ LAYOUT ============ */
.wrap{max-width:var(--maxw);padding-inline:var(--pad)}
section{padding-block:clamp(3rem,7vw,6.5rem)}
body.page-home section{padding-block:clamp(4rem,9vw,8.5rem)}

.page-head{padding-block:clamp(4rem,9vw,7.5rem) clamp(2.5rem,5vw,4rem)}
.eyebrow{display:flex;align-items:center;gap:.7rem;margin-bottom:clamp(1.25rem,3vw,2rem)}
.eyebrow::before{content:'';width:clamp(20px,4vw,48px);height:1px;background:var(--muted);flex-shrink:0}
h1.page-title{font-size:var(--fs-display);max-width:16ch;view-transition-name:page-title}
.lede{
  margin-top:clamp(1.25rem,3vw,2rem);color:var(--muted);
  max-width:52ch;font-size:clamp(1.05rem,1.5vw,1.25rem);
}

/* ============ SECTION HEAD ============ */
.head{
  display:flex;align-items:baseline;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  padding-bottom:1.25rem;border-bottom:1px solid var(--line);margin-bottom:clamp(2rem,4vw,3rem);
}
.head h2{
  font-family:var(--font-display);font-size:var(--fs-h2);
  font-weight:600;letter-spacing:-0.025em;
}
[dir="rtl"] .head h2{letter-spacing:0}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.5rem;
  border-radius:999px;font:inherit;font-size:.95rem;font-weight:500;
  cursor:pointer;border:1px solid var(--ink);background:transparent;color:var(--ink);
  transition:background .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),translate .3s var(--ease),opacity .2s var(--ease);
}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--signal);border-color:var(--signal);translate:0 -2px}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);translate:0 -2px}
.btn .arrow{transition:translate .3s var(--ease)}
.btn:hover .arrow{translate:4px 0}
/* Travel direction follows the reading direction. */
[dir="rtl"] .btn:hover .arrow{translate:-4px 0}
/* A quick settle on press gives the button weight — it isn't just a hover toy. */
.btn:active{translate:0 0;scale:.97}
.btn[disabled]{opacity:.55;cursor:progress;translate:none}
.btn[disabled]:hover,.btn[disabled]:active{background:var(--ink);border-color:var(--ink);translate:none;scale:1}

/* ============ HERO (home) ============ */
.hero{
  position:relative;min-height:min(88svh,860px);
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(4rem,10vw,7rem);overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:clamp(56px,7vw,96px) clamp(56px,7vw,96px);
  -webkit-mask-image:radial-gradient(120% 90% at 12% 30%,#000 0%,transparent 72%);
  mask-image:radial-gradient(120% 90% at 12% 30%,#000 0%,transparent 72%);
  opacity:.85;
}
/* The grid fade hugs the start edge, so it mirrors with the text. */
[dir="rtl"] .hero::before{
  -webkit-mask-image:radial-gradient(120% 90% at 88% 30%,#000 0%,transparent 72%);
  mask-image:radial-gradient(120% 90% at 88% 30%,#000 0%,transparent 72%);
}
.hero > *{position:relative;z-index:1}
h1.hero-line{
  font-size:var(--fs-display);max-width:14ch;
  view-transition-name:page-title;font-variation-settings:'wdth' 100,'opsz' 96;
}
[dir="rtl"] h1.hero-line{max-width:18ch;font-variation-settings:normal}
.hero-line em{font-style:normal;color:var(--signal)}
.hero-sub{
  margin-top:clamp(1.5rem,3vw,2.25rem);color:var(--muted);
  max-width:46ch;font-size:clamp(1rem,1.4vw,1.2rem);
}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(2rem,4vw,3rem)}

/* ============ CAPABILITIES ============ */
.caps{display:grid;gap:clamp(1.5rem,3vw,3rem);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cap{border-top:1px solid var(--line);padding-top:1.25rem}
.cap h3{font-family:var(--font-display);font-size:1.2rem;font-weight:600;margin-bottom:.5rem}
.cap p{color:var(--muted);font-size:.98rem}

/* ============ WORK INDEX ============ */
.index{container-type:inline-size;border-top:1px solid var(--line)}
.row{
  display:grid;align-items:center;gap:1rem;grid-template-columns:auto 1fr auto;
  padding:clamp(1.1rem,2.2vw,1.6rem) .5rem;border-bottom:1px solid var(--line);
  position:relative;isolation:isolate;transition:padding-inline .35s var(--ease);
}
.row::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--paper-2);
  scale:1 0;transform-origin:bottom;transition:scale .38s var(--ease);
}
.row:hover::before{scale:1 1;transform-origin:top}
.row:hover{padding-inline:1.25rem .75rem}
.row .yr{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--muted);letter-spacing:.1em}
.row .name{
  font-family:var(--font-display);font-size:clamp(1.15rem,2.6vw,1.75rem);
  font-weight:600;letter-spacing:-0.02em;
}
[dir="rtl"] .row .name{letter-spacing:0}
.row .disc{display:none;color:var(--muted);font-size:.9rem}
.row .go{font-size:1.1rem;color:var(--muted);transition:translate .35s var(--ease),color .35s var(--ease)}
.row:hover .go{translate:6px 0;color:var(--signal)}
[dir="rtl"] .row:hover .go{translate:-6px 0}
@container (min-width: 720px){
  .row{grid-template-columns:5rem 1fr 16rem auto}
  .row .disc{display:block}
}

/* ============ PROSE ============ */
.prose{display:grid;gap:clamp(2rem,4vw,4rem);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
.prose p + p{margin-top:1.1rem}
.prose p{color:var(--muted)}
.prose strong{color:var(--ink);font-weight:500}

/* ============ PULL QUOTE ============ */
.pull{
  border-inline-start:2px solid var(--signal);
  padding-block:clamp(1.25rem,3vw,2rem);
  padding-inline-start:clamp(1.25rem,3vw,2.5rem);
  margin-block:clamp(2.5rem,6vw,5rem);
}
.pull p{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.3rem,3vw,2.1rem);line-height:1.2;letter-spacing:-0.025em;
  color:var(--ink);max-width:24ch;text-wrap:balance;
}
[dir="rtl"] .pull p{letter-spacing:0;line-height:1.6;max-width:30ch}

/* ============ STEPS ============ */
.steps{counter-reset:step;border-top:1px solid var(--line)}
.step{
  display:grid;gap:.4rem 2rem;align-items:start;grid-template-columns:1fr;
  padding-block:clamp(1.5rem,3vw,2.25rem);border-bottom:1px solid var(--line);
}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:.1em;color:var(--signal);
}
.step h3{font-family:var(--font-display);font-size:1.25rem;font-weight:600;letter-spacing:-0.02em}
[dir="rtl"] .step h3{letter-spacing:0}
.step p{color:var(--muted);font-size:.98rem}
@media (min-width:820px){
  .step{grid-template-columns:4rem 15rem 1fr}
  .step::before{grid-row:1}
  .step h3{grid-column:2}
  .step p{grid-column:3}
}

/* ============ TILES ============ */
.grid-3{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.tile{border-top:1px solid var(--line);padding-top:1.25rem}
.tile h3{font-family:var(--font-display);font-size:1.15rem;font-weight:600;margin-bottom:.5rem}
.tile p{color:var(--muted);font-size:.96rem}

/* ============ FACTS ============ */
.facts{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.fact{background:var(--paper);padding:clamp(1.25rem,3vw,2rem)}
.fact .n{
  font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.6rem);
  font-weight:600;letter-spacing:-0.03em;display:block;line-height:1;
}
.fact .l{margin-top:.5rem;display:block}

/* ============ CONTACT COLUMNS ============ */
.columns{
  display:grid;gap:clamp(2.5rem,5vw,5rem);grid-template-columns:1fr;
  padding-bottom:clamp(3rem,7vw,6rem);align-items:start;
}
@media (min-width:960px){ .columns{grid-template-columns:1fr 1.15fr} }

.details{border-top:1px solid var(--line)}
.detail{padding-block:1.4rem;border-bottom:1px solid var(--line)}
.detail .k{display:block;margin-bottom:.35rem}
.detail .v{font-size:1.05rem}
.detail .v a{border-bottom:1px solid var(--line);transition:border-color .25s var(--ease),color .25s var(--ease)}
.detail .v a:hover{color:var(--signal);border-color:var(--signal)}
/* An LTR email address inside an RTL block still aligns to the start edge. */
[dir="rtl"] .detail .v[dir="ltr"]{text-align:right}
.note{margin-top:1.75rem;color:var(--muted);font-size:.95rem}

/* ============ FORM ============ */
form.enquiry{
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:clamp(14px,2vw,20px);padding:clamp(1.5rem,4vw,2.75rem);
}
.field{margin-bottom:1.4rem}
fieldset.field{border:0;padding:0;min-width:0}
fieldset.field legend{padding:0;margin-bottom:.6rem}
label{display:block;margin-bottom:.5rem}
input,textarea,select{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:.85rem 1rem;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
/* A field forced to dir="ltr" (email) still reads from the start edge. */
[dir="rtl"] input[dir="ltr"]{text-align:right}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--signal);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--signal) 16%, transparent);
}
textarea{min-height:8lh;resize:vertical;field-sizing:content}

/* The honeypot. Hidden from people, left in the DOM for bots to find. */
.gotcha{
  position:absolute!important;inset-inline-start:-9999px!important;
  width:1px;height:1px;overflow:hidden;
}

/* chip radio group */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips label{
  margin:0;cursor:pointer;border:1px solid var(--line);border-radius:999px;
  padding:.5rem 1rem;font-size:.9rem;color:var(--muted);background:var(--paper);
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.chips label:hover{border-color:var(--ink);color:var(--ink)}
.chips label:active{scale:.96}
.chips input:checked + label{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chips input:focus-visible + label{outline:2px solid var(--signal);outline-offset:3px}

.form-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.75rem}

/* ============ FORM FEEDBACK ============ */
.field-error{
  display:block;margin-top:.45rem;font-size:.88rem;color:var(--danger);font-weight:400;
}
.field-error:empty{display:none}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--danger)}
input[aria-invalid="true"]:focus,textarea[aria-invalid="true"]:focus{
  border-color:var(--danger);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--danger) 16%, transparent);
}
.notice{
  border-radius:10px;padding:.9rem 1.1rem;margin-bottom:1.5rem;
  font-size:.95rem;border:1px solid var(--line);
}
.notice[data-kind="ok"]{
  border-color:color-mix(in oklab, var(--signal) 45%, var(--line));
  background:color-mix(in oklab, var(--signal) 10%, transparent);
  color:var(--ink);
}
.notice[data-kind="error"]{
  border-color:color-mix(in oklab, var(--danger) 45%, var(--line));
  background:color-mix(in oklab, var(--danger) 10%, transparent);
  color:var(--ink);
}
.notice:empty{display:none}
@media (prefers-reduced-motion: no-preference){
  .notice[data-kind]{animation:rise .35s var(--ease) both}
}

/* ============ CTA BAND ============ */
.band{
  background:var(--ink);color:var(--paper);border-radius:clamp(14px,2vw,24px);
  padding:clamp(2.5rem,6vw,5rem);margin-block:clamp(3rem,7vw,6rem);
}
.band h2{
  font-family:var(--font-display);font-size:var(--fs-h2);
  font-weight:600;letter-spacing:-0.03em;max-width:18ch;text-wrap:balance;
}
[dir="rtl"] .band h2{letter-spacing:0;max-width:24ch}
.band p{color:var(--muted);margin-top:1rem;max-width:44ch}
.band .btn{border-color:var(--paper);background:var(--paper);color:var(--ink);margin-top:2rem}
.band .btn:hover{background:var(--citron);border-color:var(--citron);color:#191C22}

/* ============ MAINTENANCE ============ */
.maint-langs{margin-top:clamp(2rem,4vw,3rem);display:grid;gap:.6rem}
.maint-langs p{color:var(--muted);max-width:46ch;margin:0}
.maint-langs p[lang="ar"]{font-family:'Noto Sans Arabic',sans-serif;line-height:1.85}

/* ============ FOOTER ============ */
footer{
  border-top:1px solid var(--line);padding:2.5rem var(--pad);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
footer a:hover{color:var(--signal)}

/* ============ MOTION ============ */
@media (prefers-reduced-motion: no-preference){
  .page-title,.hero-line{animation:widen 1s var(--ease) both}
  .eyebrow,.lede,.hero-sub,.actions{animation:rise .8s var(--ease) both}
  .eyebrow{animation-delay:.05s}
  .lede{animation-delay:.3s}
  .hero-sub{animation-delay:.32s}
  .actions{animation-delay:.44s}
}
@keyframes widen{
  from{font-variation-settings:'wdth' 75,'opsz' 12;opacity:0;translate:0 14px}
  to{font-variation-settings:'wdth' 100,'opsz' 96;opacity:1;translate:0 0}
}
/* Noto Kufi has no width axis, so animate opacity only. */
[dir="rtl"] .page-title,[dir="rtl"] .hero-line{animation-name:rise}
@keyframes rise{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@keyframes reveal{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}

/* cross-document page morphing */
@view-transition{navigation:auto}
::view-transition-old(root){animation:fade .22s var(--ease) both reverse}
::view-transition-new(root){animation:fade .3s var(--ease) both}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ============ MOBILE ============ */
@media (max-width:860px){
  body{padding-inline-start:0;padding-bottom:64px}
  :root:lang(ar),[lang="ar"],[dir="rtl"]{--rail:88px}
  /* The rail becomes a bottom bar; its internals restyle themselves inside
     the shadow root, this only moves the host. */
  site-rail{
    inset-block:auto 0;inset-inline:0;width:100%;height:64px;
  }
  .hero{min-height:auto}
  /* Thumbs are less precise than a cursor; keep every tap target close to
     the 44px comfort minimum instead of the desktop chip size. */
  .chips label{padding-block:.7rem}
}