/* Outsource Hub — "the handover shelf". Mobile first, RTL/LTR by logical properties. */

@font-face{font-family:"PlexAr";font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"PlexAr";font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"PlexAr";font-weight:700;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"PlexAr";font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"PlexAr";font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"PlexAr";font-weight:700;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
/* wave 1: the Bricolage label face is retired; English headings use the Latin of IBM Plex Sans Arabic (PlexAr). */

/* round 2 (P2-1): the family colours (light F1 / dark D1), type scale and motion come from tokens.css, shared
   byte for byte with the Sysenta sites and shop.oya-sc.com. The shelf's own materials and the brand stay here. */
:root{
  --wall:var(--sx-bg); --paper:var(--sx-surface); --ink:var(--sx-text); --ink-2:var(--sx-text-2);
  --rule:var(--sx-line); --rule-soft:var(--sx-grid);
  --steel:#9AA3AA; --steel-2:#7D868E; --ring:#B8C0C6; --hole:#2A2F33;
  --maroon:#570313; --maroon-hi:#6E0A1F; --petrol:#0075A9; --petrol-hi:#00628F;
  --link:#005E88; --on-board:#FFFFFF;
  --label:#FFFFFF; --label-ink:#1D1517; --label-ink-2:#5B5154;
  --sel:#F0D9DE; --err:#B3261E; --focus:var(--sx-focus);
  --f:var(--sx-font);
  --f-disp:var(--sx-font);   /* wave 1: English headings in IBM Plex too (was Bricolage) */
  --sb-thumb:var(--sx-sb-thumb); --hdr-h:64px; --anchor-gap:0px;
  --ease:var(--sx-ease);
  --gut:16px; --wrap:1200px;
  --sec:clamp(3rem,7vw,5.5rem);
  --dir:1;
  color-scheme:light;
}
[dir="rtl"]{--dir:-1}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --steel:#3D3D3D; --steel-2:#2B2B2B; --ring:#6E6E6E; --hole:#070707;
    --maroon:#7A1A2C; --maroon-hi:#8E2438; --petrol:#0B6A95; --petrol-hi:#0E78A8;
    --link:#6CC3EA; --label:#E9E4E1; --label-ink:#1D1517; --label-ink-2:#4E4547;
    --sel:#4A1A24; --err:#FF8F87;
  }
}
:root[data-theme="dark"]{
  --steel:#3D3D3D; --steel-2:#2B2B2B; --ring:#6E6E6E; --hole:#070707;
  --maroon:#7A1A2C; --maroon-hi:#8E2438; --petrol:#0B6A95; --petrol-hi:#0E78A8;
  --link:#6CC3EA; --label:#E9E4E1; --label-ink:#1D1517; --label-ink-2:#4E4547;
  --sel:#4A1A24; --err:#FF8F87;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--wall);color:var(--ink);font-family:var(--f);font-size:var(--sx-fs-16);line-height:1.8;overflow-x:clip}
:lang(en) body,body:lang(en){line-height:1.6}
img,svg{display:block;max-width:100%}
a{color:var(--link);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
::selection{background:var(--sel);color:var(--ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
html{scrollbar-color:var(--sb-thumb) var(--wall);scrollbar-width:auto}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--wall)}
::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:999px;border:3px solid var(--wall)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-2)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:50;background:var(--ink);color:var(--paper);padding:.6rem 1rem;border-radius:6px;text-decoration:none;font-weight:700}
.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
@media (min-width:640px){:root{--gut:28px}}
[lang="en"] .lat,.lat{font-family:var(--f-disp)}
bdi.num,.num{unicode-bidi:isolate;direction:ltr;font-variant-numeric:tabular-nums}

/* ---------- type ---------- */
.h1{font-weight:700;font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem);line-height:1.3;letter-spacing:0;max-width:24ch;text-wrap:balance}
.h1 .h1__b{display:block;color:var(--ink-2);font-size:.62em;line-height:1.5;margin-top:.35em;max-width:34ch}
:lang(en) .h1,.h1:lang(en){font-family:var(--f-disp);font-size:clamp(2.1rem,1.45rem + 2.6vw,3.4rem);line-height:1.12;letter-spacing:-.02em;max-width:20ch}
:lang(en) .h1 .h1__b{font-size:.56em;line-height:1.35;letter-spacing:-.005em;margin-top:.45em;max-width:30ch}
.h2{font-weight:700;font-size:clamp(1.45rem,1.15rem + 1.1vw,2rem);line-height:1.35;text-wrap:balance}
:lang(en) .h2{font-family:var(--f-disp);font-size:clamp(1.6rem,1.25rem + 1.3vw,2.25rem);line-height:1.2;letter-spacing:-.015em}
.h3{font-weight:700;font-size:var(--sx-fs-18);line-height:1.45}
:lang(en) .h3{font-family:var(--f-disp);font-size:var(--sx-fs-20);line-height:1.35}
.lead{font-size:clamp(1rem,.95rem + .3vw,1.125rem);color:var(--ink-2);max-width:62ch}
.sec{padding-block:var(--sec)}
.sec--paper{background:var(--paper)}
.sec__head{display:grid;gap:.6rem;margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.sec__lead{color:var(--ink-2);max-width:60ch}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:.55rem 1.25rem;border-radius:6px;border:2px solid transparent;font-weight:700;font-size:var(--sx-fs-15);line-height:1.25;text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),background-color .2s,border-color .2s,color .2s}
.btn svg{width:20px;height:20px;flex:none}
.btn--primary{background:var(--maroon);color:#fff}
.btn--primary:hover{background:var(--maroon-hi)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--paper{background:var(--label);color:var(--label-ink)}
.btn--paper:hover{background:var(--wall);color:var(--ink)}
.btn--onboard{background:transparent;color:var(--on-board);border-color:var(--on-board)}
.btn--onboard:hover{background:var(--on-board);color:var(--label-ink)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:progress}
.btn.is-busy{opacity:.85}
.btn.is-busy::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;animation:sx-spin .8s linear infinite}
@keyframes sx-spin{to{transform:rotate(1turn)}}
.arrow{transform:scaleX(var(--dir))}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--rule);transition:box-shadow .24s var(--ease)}
.top__in{display:flex;align-items:center;gap:.75rem;min-height:64px;transition:min-height .24s var(--ease)}
.top.is-scrolled{box-shadow:var(--sx-sh1)}
.top.is-scrolled .top__in{min-height:56px}
:root:has(.top.is-scrolled){--hdr-h:56px}
.top .brand__logo{transition:transform .24s var(--ease);transform-origin:right center}
:lang(en) .top .brand__logo{transform-origin:left center}
.top.is-scrolled .brand__logo{transform:scale(.9)}
.brand{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink);text-decoration:none;margin-inline-end:auto;min-height:44px}
.brand__mark{width:22px;height:32px;flex:none}
.brand__logo{display:block;height:44px;width:auto}.foot__brand .brand__logo{height:56px}@media (max-width:479px){.top .brand__logo{height:36px}}.brand__logo--dark{display:none}:root[data-theme="dark"] .brand__logo{display:none}:root[data-theme="dark"] .brand__logo--dark{display:block}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand__logo{display:none}:root:not([data-theme="light"]) .brand__logo--dark{display:block}}
.brand__name{font-family:var(--f-disp);font-weight:700;font-size:var(--sx-fs-22);letter-spacing:-.01em;line-height:1;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
@media (max-width:479px){.brand__name{font-size:var(--sx-fs-18)}.top__in{gap:.3rem}.tool--lang{padding-inline:.3rem}}
.nav{display:flex;align-items:center;gap:.25rem}
.nav__toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:6px;cursor:pointer;color:var(--ink)}
.nav__toggle svg{width:24px;height:24px}
.nav__check:focus-visible + .nav__toggle{outline:3px solid var(--focus);outline-offset:2px}
.nav__list{display:none;position:absolute;inset-inline:0;top:100%;background:var(--paper);border-bottom:1px solid var(--rule);padding:.5rem var(--gut) 1rem}
.nav__check:checked ~ .nav__list{display:grid}
.nav__list a{display:flex;align-items:center;min-height:48px;padding-inline:.25rem;color:var(--ink);text-decoration:none;font-weight:500;border-bottom:1px solid var(--rule-soft)}
.nav__list a[aria-current="page"]{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.4em}
.nav__list .nav__lang a{font-weight:700;border-bottom:0}
.tool{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding-inline:.5rem;border-radius:6px;border:0;background:transparent;color:var(--ink);text-decoration:none;font-weight:700;cursor:pointer}
.tool:hover{background:var(--wall)}
.tool svg{width:20px;height:20px}
.tool--lang{font-size:var(--sx-fs-15)}
.theme-btn{display:none}
.js .theme-btn{display:inline-flex}
.theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .i-sun{display:block}
  :root:not([data-theme="light"]) .theme-btn .i-moon{display:none}
}
.top__cta{display:inline-flex;min-height:44px;padding-inline:.8rem;font-size:var(--sx-fs-14);white-space:nowrap}
@media (max-width:479px){.tool--lang{display:none}}
@media (min-width:480px){.nav__list .nav__lang{display:none}}
@media (min-width:900px){
  .nav__toggle{display:none}
  .nav__list{display:flex!important;position:static;padding:0;border:0;background:none;gap:.15rem}
  .nav__list a{border:0;min-height:44px;padding-inline:.75rem;border-radius:6px}
  .nav__list a:hover{background:var(--wall)}
  .top__cta{margin-inline-start:.35rem;padding-inline:1.25rem;font-size:var(--sx-fs-15)}
}

/* ---------- hero + shelf ---------- */
.hero{background:var(--wall);padding-top:clamp(2rem,4vw,2.75rem)}
.hero__copy{display:grid;gap:1rem;padding-bottom:clamp(1.75rem,3.5vw,2.5rem)}
@media (min-width:1080px){
  .hero__copy{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end;column-gap:3.5rem}
  .hero__copy .h1,.hero__copy .h1 .h1__b{max-width:none}
  .hero__copy .lead{padding-bottom:.35rem}
}
.shelf-form{margin:0}
.shelf{position:relative;padding-bottom:1.25rem}
.shelf__in{display:grid;gap:1.25rem}
.files{border:0;margin:0;padding:0;min-width:0;display:grid;gap:6px;position:relative;padding-bottom:16px}
/* the steel shelf the stack lies on (phone) */
.files::after{content:"";position:absolute;inset-inline:calc(-1*var(--gut));bottom:0;height:12px;background:var(--steel);border-top:3px solid var(--ring)}
.file{position:relative;display:flex;align-items:stretch;gap:6px}
.file__input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.file__board{--c:var(--maroon);position:relative;flex:1;display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 10px 8px 12px;padding-inline:12px 18px;background:var(--c);color:var(--label-ink);border-radius:4px 2px 2px 4px;cursor:pointer;transition:transform .45s var(--ease),background-color .2s;-webkit-tap-highlight-color:transparent}
[dir="rtl"] .file__board{border-radius:2px 4px 4px 2px}
.file--petrol .file__board{--c:var(--petrol)}
.file__label{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.05rem;background:var(--label);border-radius:2px;padding:.45rem .75rem;outline:1px solid rgba(255,255,255,.45);outline-offset:3px}
.file__name{font-weight:700;font-size:var(--sx-fs-16);line-height:1.3}
:lang(en) .file__name{font-family:var(--f-disp);font-size:var(--sx-fs-17);line-height:1.35}
.file__cycle{font-size:var(--sx-fs-13);color:var(--label-ink-2);line-height:1.3}
.file__ring{flex:none;width:34px;height:34px;border-radius:50%;background:var(--hole);border:4px solid var(--ring);display:grid;place-items:center;transition:background-color .2s}
.file__ring svg{width:18px;height:18px;opacity:0;transform:scale(.6);transition:opacity .2s,transform .3s var(--ease);color:var(--label-ink)}
.file__foot{position:absolute;inset-block:0;inset-inline-end:0;width:7px;background:var(--ring);border-start-end-radius:2px;border-end-end-radius:2px}
.file__board:hover{transform:translateX(calc(-6px * var(--dir)))}
.file__input:checked + .file__board{transform:translateX(calc(-16px * var(--dir)))}
.file__input:checked + .file__board .file__ring{background:var(--label)}
.file__input:checked + .file__board .file__ring svg{opacity:1;transform:none}
.file__input:focus-visible + .file__board{outline:3px solid var(--focus);outline-offset:3px}
.file__open{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;min-height:44px;border-radius:4px;color:var(--ink);background:var(--paper);border:1px solid var(--rule);text-decoration:none}
@media (max-width:719px){
  .file__ring{width:24px;height:24px;border-radius:5px;background:transparent;border:2px solid var(--label)}
  .file__ring svg{width:16px;height:16px}
  .file__input:checked + .file__board .file__ring{background:var(--label)}
}
.file__open svg{width:18px;height:18px}
.file__open-text{display:none}
.file__open:hover{background:var(--ink);color:var(--paper)}
.bookend{display:none}

.slip{position:relative;background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-top:2px dashed var(--steel);border-radius:0 0 4px 4px;padding:1.1rem 1.1rem 1.15rem;display:grid;gap:.8rem;align-content:start}
.slip__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-bottom:2px solid var(--ink);padding-bottom:.45rem}
.slip__title{font-weight:700;font-size:var(--sx-fs-17)}
:lang(en) .slip__title{font-family:var(--f-disp);font-size:var(--sx-fs-18)}
.slip__count{font-size:var(--sx-fs-14);color:var(--ink-2)}
.slip__empty{color:var(--ink-2);font-size:var(--sx-fs-15)}
.slip__list{display:grid}
.slip__item{display:none;align-items:center;gap:.6rem;padding:.4rem 0;border-bottom:1px solid var(--rule-soft);font-weight:500;font-size:var(--sx-fs-15)}
.slip__item .sw{width:12px;height:12px;border-radius:2px;background:var(--maroon);flex:none}
.slip__item--petrol .sw{background:var(--petrol)}
.slip__item .slip__cycle{margin-inline-start:auto;color:var(--ink-2);font-size:var(--sx-fs-13);font-weight:400}
.slip .btn{width:100%}
@keyframes slip-print{from{clip-path:inset(0 0 100% 0);transform:translateY(-6px)}to{clip-path:inset(0 0 0 0);transform:none}}
.mo .slip__item{animation:slip-print .34s var(--sx-ease-out) backwards}
.slip__or{font-size:var(--sx-fs-14);color:var(--ink-2);display:flex;flex-wrap:wrap;gap:.25rem .9rem;align-items:center}
.slip__or a{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;font-weight:700}
.slip__or svg{width:18px;height:18px}
/* CSS-only slip: each pulled file shows its line */
.shelf-form:has(.file__input:checked) .slip__empty{display:none}
.shelf-form:has(#pick-bookkeeping:checked) .slip__item--bookkeeping,
.shelf-form:has(#pick-accounting-tax:checked) .slip__item--accounting-tax,
.shelf-form:has(#pick-internal-audit:checked) .slip__item--internal-audit,
.shelf-form:has(#pick-hr-payroll:checked) .slip__item--hr-payroll,
.shelf-form:has(#pick-company-formation:checked) .slip__item--company-formation{display:flex}

/* standing shelf from 720px: files upright, spine labels on top, ring holes below */
@media (min-width:720px){
  .shelf{padding-bottom:0}
  .shelf::after{content:"";position:absolute;inset-inline:0;bottom:56px;height:18px;background:var(--steel);border-top:4px solid var(--ring);border-bottom:6px solid var(--steel-2)}
  .shelf__in{display:flex;align-items:flex-end;flex-wrap:wrap;column-gap:clamp(.75rem,2vw,1.5rem)}
  .files{flex:1 1 100%;display:flex;align-items:flex-end;gap:10px;padding-bottom:0}
  .files::after{display:none}
  .file{flex:1 1 0;min-width:0;max-width:156px;flex-direction:column;align-items:center;gap:0;container-type:inline-size}
  .file__board{flex:none;width:100%;height:clamp(270px,24vw,330px);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:18px 10px 0;border-radius:4px 4px 1px 1px!important;margin-bottom:28px}
  .file__label{flex:none;flex-direction:column;align-items:stretch;justify-content:space-between;gap:.75rem;min-height:46%;padding:.8rem .5rem .7rem;outline-offset:4px}
  .file__name{font-size:var(--sx-fs-16);font-size:clamp(.84rem,10.6cqi,.98rem);line-height:1.4}
  :lang(en) .file__name{font-size:var(--sx-fs-16);font-size:clamp(.8125rem,10cqi,1rem);line-height:1.35}
  .file__cycle{font-size:var(--sx-fs-13);border-top:1px solid var(--rule);padding-top:.45rem}
  .file__ring{position:absolute;inset-inline:0;margin-inline:auto;bottom:46px;width:40px;height:40px}
  .file__foot{inset-block:auto 0;inset-inline:0;width:auto;height:10px;border-radius:0}
  .file__board::before{content:"";position:absolute;top:0;bottom:10px;inset-inline-start:7px;width:2px;background:rgba(0,0,0,.2)}
  .file__board:hover{transform:translateY(-8px)}
  .file__input:checked + .file__board{transform:translateY(-26px)}
  .file__open{width:100%;min-height:44px;margin-top:0;background:transparent;border:0;border-radius:2px;color:var(--ink);font-size:var(--sx-fs-13);font-weight:700;gap:.3rem;height:56px;align-items:center}
  .file__open-text{display:inline}
  .file__open svg{width:15px;height:15px}
  .file__open:hover{background:transparent;color:var(--link);text-decoration:underline}
  .bookend{display:none}
  .slip{flex:1 1 100%;margin-block:1.5rem}
}
/* 720-1179px: the slip drops below, so the shelf board is drawn under the files themselves */
@media (min-width:720px) and (max-width:1179px){
  .shelf::after{display:none}
  .files{position:relative}
  .files::after{display:block;content:"";position:absolute;inset-inline:calc(-1*var(--gut));top:auto;bottom:56px;height:28px;background:var(--steel);border-top:4px solid var(--ring);border-bottom:6px solid var(--steel-2)}
}
@media (min-width:1180px){
  .shelf__in{flex-wrap:nowrap}
  .files{flex:0 0 auto;gap:12px}
  .file{flex:none;width:144px;max-width:none}
  .bookend{display:block;flex:none;width:14px;height:150px;margin-bottom:84px;background:var(--steel-2);border-radius:2px 2px 0 0;position:relative}
  .bookend::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:56px;height:8px;background:var(--steel-2)}
  .slip{flex:1 1 320px;max-width:400px;margin-block:0 84px}
}

/* ---------- services index (divider tabs) ---------- */
.index{display:grid;gap:0;border-top:2px solid var(--ink)}
.index__row{--c:var(--maroon);display:grid;gap:.6rem 1.5rem;padding:1.4rem 0 1.5rem;border-bottom:1px solid var(--rule)}
.index__row--petrol{--c:var(--petrol)}
.index__tab{justify-self:start;display:inline-flex;align-items:center;gap:.6rem;background:var(--c);color:#fff;text-decoration:none;font-weight:700;font-size:var(--sx-fs-17);padding:.4rem .9rem .45rem;border-radius:6px 6px 0 0;min-height:44px}
:lang(en) .index__tab{font-family:var(--f-disp);font-size:var(--sx-fs-18)}
.index__tab:hover{text-decoration:underline;text-underline-offset:.3em}
.index__summary{font-weight:500}
.index__items{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;color:var(--ink-2);font-size:var(--sx-fs-15)}
.index__items li{display:inline-flex;align-items:center;gap:.45rem}
.index__items li::before{content:"";width:6px;height:6px;border-radius:1px;background:var(--c);flex:none}
.index__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;font-size:var(--sx-fs-14)}
.index__cycle{color:var(--ink-2)}
.index__cycle b{color:var(--ink);font-weight:700}
.index__open{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;font-weight:700}
.index__open svg{width:16px;height:16px}
@media (min-width:900px){
  .index__row{grid-template-columns:minmax(220px,.9fr) 2fr minmax(170px,.8fr);align-items:start;padding-block:1.6rem}
  .index__meta{flex-direction:column;align-items:flex-start;gap:.15rem}
}

/* ---------- process: a handover slip with stamped lines ---------- */
.steps{display:grid;background:var(--paper);border:1px solid var(--rule);border-top:2px dashed var(--steel);border-radius:0 0 4px 4px}
.step{display:grid;grid-template-columns:auto 1fr;gap:.15rem 1rem;padding:1.1rem 1.15rem 1.2rem;border-bottom:1px solid var(--rule-soft)}
.step:last-child{border-bottom:0}
.step__n{grid-row:span 2;align-self:start;width:40px;height:40px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:2px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.step p{color:var(--ink-2)}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(var(--n,4),1fr)}
  .step{grid-template-columns:1fr;align-content:start;border-bottom:0;border-inline-start:1px solid var(--rule-soft);padding:1.4rem 1.25rem 1.5rem}
  .step:first-child{border-inline-start:0}
  .step__n{grid-row:auto;margin-bottom:.75rem}
}

/* ---------- why (ruled list) ---------- */
.why{display:grid;gap:0 2.5rem}
.why__item{padding:1.1rem 0 1.2rem;border-top:1px solid var(--rule)}
.why__item dt{font-weight:700;font-size:var(--sx-fs-17);margin-bottom:.25rem}
:lang(en) .why__item dt{font-family:var(--f-disp);font-size:var(--sx-fs-18);line-height:1.35;margin-bottom:.35rem}
.why__item dd{color:var(--ink-2);max-width:52ch}
@media (min-width:760px){.why{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.why--3{grid-template-columns:repeat(3,1fr)}}
.sectors{margin-top:0;padding-top:1.1rem;border-top:1px solid var(--rule);color:var(--ink-2);font-weight:500;font-size:var(--sx-fs-17);line-height:1.6;max-width:62ch}
:lang(en) .sectors{line-height:1.5}

/* ---------- group band ---------- */
.group{display:grid;gap:1.5rem}
.group p{color:var(--ink-2);max-width:62ch}
.group__links{display:grid;border-top:1px solid var(--rule)}
.group__links a{display:flex;align-items:center;gap:.75rem;min-height:56px;padding-block:.5rem;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
.group__links a:hover .g-name{text-decoration:underline;text-underline-offset:.3em}
.g-name{font-family:var(--f-disp);font-weight:700;font-size:var(--sx-fs-20);direction:ltr;unicode-bidi:isolate}
.g-what{color:var(--ink-2);font-size:var(--sx-fs-15)}
.group__links svg{width:16px;height:16px;margin-inline-start:auto;flex:none}
@media (min-width:900px){.group{grid-template-columns:1.1fr 1fr;align-items:start;gap:3rem}}

/* ---------- close band: a box file lying on its side, on the wall ---------- */
.close{--c:var(--maroon);background:var(--wall);padding-block:clamp(2.5rem,6vw,4rem)}
.close--petrol{--c:var(--petrol)}
.board{position:relative;background:var(--c);color:var(--on-board);border-radius:4px;padding:clamp(1rem,3vw,1.5rem);padding-inline-end:calc(clamp(1rem,3vw,1.5rem) + 12px)}
.board::after{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:12px;background:var(--ring);border-start-end-radius:4px;border-end-end-radius:4px}
.board::before{content:"";position:absolute;inset-inline:0;top:7px;height:2px;background:rgba(0,0,0,.2)}
.close__board{display:grid;gap:1.25rem}
.close__label{background:var(--label);color:var(--label-ink);border-radius:2px;padding:clamp(1.1rem,3vw,1.75rem);outline:1px solid rgba(255,255,255,.45);outline-offset:5px;display:grid;gap:.75rem;max-width:760px}
.close__label p{color:var(--label-ink-2)}
.close__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.35rem}
.close__label .btn--ghost{color:var(--label-ink);border-color:var(--label-ink)}
.close__label .btn--ghost:hover{background:var(--label-ink);color:var(--label)}
/* round 2 (P3-8): the closing band's 64px dark circle (it read as decoration) is now the «received» stamp of the
   handover: on wide screens it is stamped once when the band scrolls into view, and simply sits there otherwise */
.close__stamp{display:none}
@media (min-width:900px){
  .close__board{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .close__stamp{display:grid;place-content:center;justify-items:center;gap:.15rem;width:116px;height:116px;margin-inline:1.25rem .75rem;border:3px solid var(--on-board);border-radius:50%;color:var(--on-board);box-shadow:inset 0 0 0 5px var(--c),inset 0 0 0 7px var(--on-board);transform:rotate(-8deg);text-align:center;line-height:1.1}
  .close__stamp b{font-size:var(--sx-fs-22);font-weight:700}
  .close__stamp small{font-size:var(--sx-fs-12);font-weight:700;letter-spacing:.04em}
}
@keyframes stamp-in{0%{opacity:0;transform:rotate(-8deg) scale(1.6)}55%{opacity:1;transform:rotate(-8deg) scale(.94)}100%{opacity:1;transform:rotate(-8deg) scale(1)}}
.mo .close__stamp.in{animation:stamp-in .5s var(--sx-ease-out) .2s backwards}
.close__hours{font-size:var(--sx-fs-14)}

/* ---------- file head (service / about / contact pages): the file on its side ---------- */
.filehead{--c:var(--maroon);background:var(--wall);color:var(--ink);padding-block:clamp(.75rem,2vw,1.25rem) clamp(1.5rem,4vw,2.5rem)}
.filehead--petrol{--c:var(--petrol)}
.crumbs{display:flex;flex-wrap:wrap;gap:.25rem .5rem;font-size:var(--sx-fs-14);margin-bottom:.5rem;color:var(--ink-2)}
.crumbs a{color:var(--ink);min-height:44px;display:inline-flex;align-items:center}
.crumbs li{display:inline-flex;align-items:center;gap:.5rem}
.crumbs li+li::before{content:"/";opacity:.8}
.filehead__grid{display:grid;gap:1.25rem;align-items:end}
.filehead__label{position:relative;background:var(--label);color:var(--label-ink);border-radius:2px;padding:clamp(1rem,3vw,1.6rem) clamp(1rem,3vw,1.75rem);outline:1px solid rgba(255,255,255,.45);outline-offset:5px;display:grid;gap:.6rem}
.filehead__cycle{display:flex;gap:.5rem;align-items:center;font-size:var(--sx-fs-14);color:var(--label-ink-2);border-top:1px solid #C7CCD0;padding-top:.6rem}
.filehead__cycle b{color:var(--label-ink)}
.filehead__lead{color:var(--on-board);max-width:62ch;font-size:clamp(1rem,.95rem + .3vw,1.125rem)}
.filehead__actions{display:flex;flex-wrap:wrap;gap:.6rem}
.filehead__ring{display:none}
@media (min-width:900px){
  .filehead__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;gap:2.5rem;align-items:center}
  .filehead__ring{display:block;width:64px;height:64px;border-radius:50%;background:var(--hole);border:6px solid var(--ring);margin-inline-end:.5rem}
  .filehead__side{display:grid;gap:1.25rem}
}

/* ---------- divider tabs (in-page nav) ---------- */
.tabs{position:sticky;top:var(--hdr-h);z-index:20;background:var(--wall);border-bottom:2px solid var(--ink);transition:top .24s var(--ease)}
.sheet[id]{scroll-margin-top:62px}
.tabs__in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent;padding-top:10px}
.tabs__in::-webkit-scrollbar{height:6px}
.tabs__in::-webkit-scrollbar-thumb{border-width:1px}
.tabs a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:.35rem 1rem;background:var(--paper);color:var(--ink);text-decoration:none;font-weight:700;font-size:var(--sx-fs-15);border:1px solid var(--rule);border-bottom:0;border-radius:6px 6px 0 0;white-space:nowrap}
.tabs a:hover{background:var(--ink);color:var(--paper)}
.tabs a.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- sheets ---------- */
.sheet{position:relative;background:var(--paper);border-bottom:1px solid var(--rule)}
.sheet__in{padding-block:clamp(2.25rem,5vw,3.75rem);display:grid;gap:1.5rem}
/* the two punched holes on the binding edge */
.sheet::before,.sheet::after{content:"";position:absolute;inset-inline-start:max(6px,calc((100vw - var(--wrap))/2 - 34px));width:12px;height:12px;border-radius:50%;background:var(--wall);box-shadow:inset 0 1px 0 var(--rule)}
.sheet::before{top:36px}
.sheet::after{top:84px}
@media (max-width:719px){.sheet::before,.sheet::after{display:none}}
.take{display:grid;gap:1.75rem}
.take__group h3{padding-bottom:.4rem;border-bottom:2px solid var(--ink);margin-bottom:.4rem}
.take__group li{padding:.5rem 0;border-bottom:1px solid var(--rule-soft);display:flex;gap:.65rem}
.take__group li::before{content:"";flex:none;width:7px;height:7px;margin-top:.72em;border-radius:1px;background:var(--c,var(--maroon))}
@media (min-width:900px){.take{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2.25rem}}
.handover{display:grid;gap:1.75rem}
@media (min-width:760px){.handover{grid-template-columns:1fr 1fr;gap:2.5rem}}
.handover__col h3{display:flex;align-items:center;gap:.6rem;padding-bottom:.45rem;border-bottom:2px solid var(--ink);margin-bottom:.4rem}
.handover__col h3 svg{width:22px;height:22px;flex:none}
.handover__col li{display:flex;gap:.7rem;padding:.55rem 0;border-bottom:1px solid var(--rule-soft)}
.handover__col li::before{content:"";flex:none;width:10px;height:10px;margin-top:.62em;border-radius:2px;border:2px solid var(--ink)}
.handover__col--get li::before{background:var(--ink)}
.system-note{display:grid;gap:1rem;max-width:62ch}
.system-note p{font-size:var(--sx-fs-17)}

/* mini shelf of the other files */
.minishelf{display:grid;gap:6px}
.mini{--c:var(--maroon);display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 14px 6px 10px;padding-inline:10px 14px;background:var(--c);border-radius:3px;text-decoration:none;transition:transform .35s var(--ease)}
.mini--petrol{--c:var(--petrol)}
.mini__label{flex:1;display:flex;flex-direction:column;align-items:flex-start;background:var(--label);color:var(--label-ink);padding:.35rem .7rem;border-radius:2px;font-weight:700;line-height:1.3}
.mini__cycle{font-weight:400;font-size:var(--sx-fs-13);color:var(--label-ink-2);line-height:1.3}
.mini--empty{background:transparent;border:2px dashed var(--steel);min-height:56px}
.mini--empty:hover{transform:none}
:lang(en) .mini__label{font-family:var(--f-disp);font-size:var(--sx-fs-16);line-height:1.35}
.mini__ring{flex:none;width:26px;height:26px;border-radius:50%;background:var(--hole);border:3px solid var(--ring)}
.mini:hover{transform:translateX(calc(-8px * var(--dir)))}
@media (min-width:760px){
  .minishelf{grid-template-columns:repeat(4,1fr);gap:10px;align-items:stretch;border-bottom:14px solid var(--steel);padding-bottom:0}
  .mini{flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:180px;padding:14px 10px 16px;border-radius:4px 4px 1px 1px}
  .mini__ring{margin-top:auto}
  .mini__label{flex:none;gap:.4rem}
  .mini__cycle{border-top:1px solid var(--rule);padding-top:.35rem;align-self:stretch}
  .minishelf--6{grid-template-columns:repeat(6,1fr)}
  .minishelf--5{grid-template-columns:repeat(5,1fr)}
  .mini__ring{align-self:center;width:32px;height:32px}
  .mini:hover{transform:translateY(-8px)}
}

/* ---------- about ---------- */
.mv{display:grid;gap:1.25rem}
.mv__card{background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--ink);border-radius:0;padding:clamp(1.25rem,3vw,1.75rem);display:grid;gap:.6rem}
.mv__card p{font-size:var(--sx-fs-17)}
@media (min-width:760px){.mv{grid-template-columns:1fr 1fr}}
.quote{display:grid;gap:1rem;max-width:44ch}
.quote blockquote{font-weight:700;font-size:clamp(1.3rem,1.05rem + 1vw,1.8rem);line-height:1.5}
:lang(en) .quote blockquote{font-family:var(--f-disp);line-height:1.35;letter-spacing:-.01em}
.quote figcaption{color:var(--ink-2)}
.quote figcaption b{color:var(--ink)}
.clients{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:1rem}
.clients li{font-weight:700;font-size:clamp(1.3rem,1.1rem + .9vw,1.9rem);line-height:1.3;padding-bottom:.2rem;border-bottom:3px solid var(--maroon)}
:lang(en) .clients li{font-family:var(--f-disp);line-height:1.35}

/* ---------- contact ---------- */
.contact{display:grid;gap:2rem;align-items:start}
@media (min-width:980px){.contact{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:3rem}}
.form{background:var(--paper);border:2px solid var(--ink);border-radius:8px;padding:clamp(1.1rem,3vw,1.9rem);display:grid;gap:1.1rem}
.field{display:grid;gap:.35rem}
.field label,.field legend{font-weight:700;font-size:var(--sx-fs-15)}
.field .opt{font-weight:400;color:var(--ink-2);font-size:var(--sx-fs-14)}
.input{width:100%;min-height:50px;padding:.6rem .8rem;background:var(--paper);color:var(--ink);border:2px solid var(--rule);border-radius:6px;transition:border-color .15s}
.input:hover{border-color:var(--ink-2)}
.input:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--ink)}
textarea.input{min-height:140px;resize:vertical;line-height:1.6}
.input[aria-invalid="true"]{border-color:var(--err)}
.input::placeholder{color:var(--ink-2);opacity:1}
.input[type="tel"],.input[type="email"]{direction:ltr}
[dir="rtl"] .input[type="tel"],[dir="rtl"] .input[type="email"]{text-align:right}
.row2{display:grid;gap:1.1rem}
@media (min-width:640px){.row2{grid-template-columns:1fr 1fr}}
.picks{border:0;margin:0;padding:0;min-width:0}
.picks__list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.pick{position:relative}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick label{--c:var(--maroon);display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.3rem .9rem .3rem .7rem;padding-inline:.7rem .95rem;border:2px solid var(--rule);border-radius:6px;background:var(--paper);font-weight:500;font-size:var(--sx-fs-15);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.pick--petrol label{--c:var(--petrol)}
.pick label::before{content:"";width:12px;height:18px;border-radius:2px;background:var(--c);flex:none}
.pick label:hover{border-color:var(--ink-2)}
.pick input:checked + label{background:var(--c);border-color:var(--c);color:#fff}
.pick input:checked + label::before{background:#fff}
.pick input:focus-visible + label{outline:3px solid var(--focus);outline-offset:2px}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.note{font-size:var(--sx-fs-14);color:var(--ink-2)}
.status{min-height:0;font-weight:500}
.status:empty{display:none}
.status--err{color:var(--err);border:2px solid var(--err);border-radius:6px;padding:.7rem .9rem}
.form .btn--primary{justify-self:start;min-width:12rem}
@media (max-width:639px){.form .btn--primary{justify-self:stretch}}
.details{display:grid;gap:0;border-top:2px solid var(--ink)}
.details__row{display:grid;grid-template-columns:28px 1fr;gap:.2rem .8rem;padding:1rem 0;border-bottom:1px solid var(--rule)}
.details__row svg{width:22px;height:22px;margin-top:.2rem;color:var(--ink)}
.details__row h3{font-size:var(--sx-fs-14);font-weight:700;color:var(--ink-2)}
:lang(en) .details__row h3{font-family:var(--f);font-size:var(--sx-fs-14)}
.details__row p,.details__row a{font-size:var(--sx-fs-16)}
.details__row a{font-weight:700;display:inline-flex;align-items:center;min-height:44px}
.social{display:flex;gap:.5rem;margin-top:.25rem}
.social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--rule);border-radius:6px;color:var(--ink)}
.social a:hover{background:var(--ink);color:var(--paper)}
.social svg{width:20px;height:20px}

/* ---------- simple pages ---------- */
.plain{padding-block:clamp(3rem,10vw,7rem)}
.plain__in{display:grid;gap:1.1rem;max-width:980px}
.plain__links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.5rem}

/* ---------- footer ---------- */
.foot{background:var(--paper);border-top:1px solid var(--rule);padding-block:clamp(2.5rem,6vw,3.5rem) 1.5rem;font-size:var(--sx-fs-15)}
.foot__grid{display:grid;gap:2rem}
.foot__brand{display:grid;gap:.75rem;max-width:40ch}
.foot__brand p{color:var(--ink-2)}
.foot h2{font-size:var(--sx-fs-14);font-weight:700;color:var(--ink-2);margin-bottom:.4rem}
.foot ul a,.foot address a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.foot ul a:hover,.foot address a:hover{text-decoration:underline}
.foot address{font-style:normal;display:grid;gap:.1rem;color:var(--ink-2)}
.foot__base{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;color:var(--ink-2);font-size:var(--sx-fs-14)}
.foot__base a{color:var(--ink-2)}
@media (min-width:760px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
.mo .files .file__board{animation:arrive .8s var(--ease) backwards}
.mo .files .file:nth-child(2) .file__board{animation-delay:.08s}
.mo .files .file:nth-child(3) .file__board{animation-delay:.16s}
.mo .files .file:nth-child(4) .file__board{animation-delay:.24s}
.mo .files .file:nth-child(5) .file__board{animation-delay:.32s}
@keyframes arrive{from{transform:translateY(12px);opacity:.4}to{transform:none;opacity:1}}
@media (max-width:719px){@keyframes arrive{from{transform:translateX(calc(-14px * var(--dir)));opacity:.4}to{transform:none;opacity:1}}}
.file__board:hover{box-shadow:0 10px 18px -12px rgba(0,0,0,.45)}

@media print{
  .top,.tabs,.foot,.close,.shelf,.minishelf{display:none}
  body{background:#fff;color:#000}
}

/* ---------- small additions ---------- */
.sec--wall{background:var(--wall)}
.steps--5{--n:5}
.steps--3{--n:3}
.take--maroon{--c:var(--maroon)}
.take--petrol{--c:var(--petrol)}
.ic-inv{stroke:var(--paper)}
.bm-board{fill:var(--maroon)}
.bm-label{fill:#fff}
.bm-l1{fill:var(--maroon)}
.bm-l2{fill:var(--petrol)}
.bm-ring{fill:var(--hole);stroke:var(--ring);stroke-width:1.6}
:root[data-theme="dark"] .bm-board{fill:#8E2438}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bm-board{fill:#8E2438}}

.filehead + .sec{padding-top:clamp(.5rem,2vw,1.25rem)}
.plain .minishelf{margin-top:1.75rem}

/* wave 1 (2026-10-15): phone header order (action, theme, menu), and the menu's language link */
@media (max-width:899px){
  .top__cta{order:1}
  .theme-btn{order:2}
  .tool--lang{order:2}
  .nav{order:3}
  .top__in{gap:.4rem}
}