/* ==========================================================================
   Satisco V6: "Blueprint" design system layer
   Loads AFTER base-*.css and v5.css. It restyles the V5 markup without
   changing the content. Tokens come from the Satisco Design System.
   ========================================================================== */
@import url("v6/colors.css");
@import url("v6/typography.css");
@import url("v6/spacing.css");
@import url("v6/patterns.css");

/* ---- 1. Remap V5 charter tokens onto V6 values ---- */
:root{
  --color-navy:var(--blue-900);--color-blue:var(--blue-700);--color-amber:var(--orange-500);
  --color-muted:var(--ink-500);--color-bg:var(--surface-blueprint);--color-surface-alt:var(--blue-50);
  --navy-700:var(--blue-800);--navy-600:var(--blue-800);--amber-100:var(--orange-100);
  --ink:var(--ink-900);--ink-secondary:var(--ink-500);--action:var(--blue-700);--action-ink:var(--blue-700);
  --accent:var(--orange-500);--page:var(--surface-blueprint);--surface-alt:var(--blue-50);
  --hairline:var(--line);
  --v5-navy:var(--blue-900);--v5-blue:var(--blue-700);--v5-amber:var(--orange-500);
}

/* ---- 2. Page surface: cross + dot field ---- */
body{background-color:var(--surface-blueprint);background-image:var(--pattern-grid);background-size:var(--pattern-grid-size);background-position:0 0;color:var(--text-body)}
::selection{background:var(--blue-200);color:var(--ink-900)}
:focus-visible{outline-color:var(--blue-500)}

/* ---- 3. Logo (official file, replaces the typeset V5 logotype) ---- */
.logo-img{display:block;height:26px;width:auto}
.site-footer .logo-img{height:28px}
.powered b{color:var(--text-strong)}
.site-footer .powered,.site-footer .powered b{color:var(--blue-200)}
.site-footer .powered b{color:#fff}

/* ---- 4. Header ---- */
.v5-header{background:rgba(244,246,252,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.v5-header-inner{min-height:76px}
.v5-desktop-nav{font-weight:500}
.v5-desktop-nav>a,.v5-desktop-nav>details>summary{border-radius:var(--r-pill);color:var(--text-strong);font-weight:500}
.v5-desktop-nav>a:hover,.v5-desktop-nav>details>summary:hover{background:var(--blue-50);color:var(--action)}
.v5-desktop-nav>a[aria-current=page]::before,.v5-desktop-nav>details>summary.v5-current-section::before{inset:auto 10px 2px;height:3px;border:0;border-radius:3px;background:var(--signal)}
.v5-mega{top:76px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh-md);background-image:var(--pattern-grid);background-size:var(--pattern-grid-size)}
.v5-mega .nav-pillar{font-size:var(--fs-annot);font-weight:600;letter-spacing:var(--ls-annot);text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:10px}
.v5-mega .nav-pillar::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px var(--orange-100)}
.v5-mega a:not(.nav-pillar){border-radius:var(--r-md);padding-inline:10px;background:#fff}
.v5-mega a:not(.nav-pillar):hover{background:var(--blue-50);color:var(--action)}
.v5-lang>div,.v5-desktop-nav .v5-company-links{border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-md)}
.v5-lang summary{border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:0 14px}
@media (max-width:1050px){.v5-mobile-menu>nav{top:76px;border-bottom:1px solid var(--line);box-shadow:var(--sh-md)}}

/* ---- 5. Buttons & links ---- */
.btn{border-radius:var(--r-pill);font-weight:600;transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--action);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--action-hover);color:#fff}
.btn-secondary:where(:not(.on-navy *,.hero *,.page-head *,.cta *,.panel-navy *,.v5-close *,.site-footer *)){background:#fff;border-color:var(--line-strong);color:var(--text-strong)}
.btn-secondary:where(:not(.on-navy *,.hero *,.page-head *,.cta *,.panel-navy *,.v5-close *,.site-footer *)):hover:not(:disabled){background:#fff;border-color:var(--action);color:var(--action)}
.v5-text-link{color:var(--action);text-decoration:none;font-weight:600}
.v5-text-link:hover{color:var(--action-hover)}
.v5-text-link span[aria-hidden]{transition:transform var(--dur-fast)}
.v5-text-link:hover span[aria-hidden]{transform:translateX(3px)}

/* ---- 6. Annotations (V5 kicker, restored as the blueprint label) ---- */
.kicker{display:inline-flex!important;align-items:center;gap:10px;font-size:var(--fs-annot);font-weight:600;letter-spacing:var(--ls-annot);text-transform:uppercase;color:var(--text-muted)}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px var(--orange-100)}
.on-navy .kicker,.page-head .kicker,.panel-navy .kicker{color:var(--blue-300)}
.panel h4,.card h4,.site-footer h4,.mega-col .col-head,.ref .sector,.card .sector,.post .sector,a.card .sector,.next span,.placeholder b{font-size:var(--fs-annot);letter-spacing:var(--ls-annot);color:var(--text-muted)}
.site-footer h4{color:var(--blue-300)}

/* ---- 7. Home hero: light blueprint + annotated figure ---- */
.v5-hero{background:transparent;color:var(--text-body);padding:88px 0 72px;border-bottom:1px solid var(--line)}
.v5-hero h1{color:var(--text-strong);font-size:var(--fs-display);letter-spacing:var(--ls-display);line-height:var(--lh-tight);max-width:14ch}
.v5-hero .lead{color:var(--text-body)}
.v5-hero .btn-primary{background:var(--action);color:#fff}
.v5-hero .btn-primary:hover{background:var(--action-hover)}
.v5-hero .v5-text-link{color:var(--action)}
.v5-hero :focus-visible{outline-color:var(--blue-500)}
.hero-layout{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px}
.v5-credentials{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0!important;margin-top:48px!important;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;color:var(--text-strong);font-size:1.25rem;font-weight:700;letter-spacing:-.02em;max-width:none;padding:0}
.v5-credentials span{border-left:1px solid var(--line)!important;padding:16px 20px!important}
.v5-credentials span:first-child{border-left:0!important}
.flow-map{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-md);overflow:hidden;position:relative;padding-top:48px}
.flow-map::before{content:"Fig. 01";position:absolute;left:0;right:0;top:0;padding:14px 20px;border-bottom:1px solid var(--line);font-size:var(--fs-annot);font-weight:600;letter-spacing:var(--ls-annot);text-transform:uppercase;color:var(--text-muted);background:#fff}
.flow-map::after{content:"";position:absolute;right:20px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px var(--orange-100)}
.flow-map ol{padding:32px 28px 28px;gap:28px;background-image:var(--pattern-grid);background-size:var(--pattern-grid-size);background-position:0 0}
.flow-map li{background:#fff;border:1px solid var(--line-strong);border-radius:var(--r-md);padding:14px 16px;grid-template-columns:48px 1fr}
.flow-map li+li::before{left:39px;top:-29px;height:28px;width:1px;background:var(--blue-300)}
.flow-map li+li::after{content:"";position:absolute;left:35px;top:-19px;width:9px;height:9px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px var(--orange-100)}
.flow-map strong{color:var(--text-strong);font-size:1.0625rem;font-weight:600}
.flow-map span{color:var(--text-muted)}
.flow-map figcaption{margin:0;max-width:none;padding:12px 20px;border-top:1px solid var(--line);color:var(--text-muted);background:#fff}
@media (max-width:740px){.v5-hero{padding:48px 0}.v5-credentials{grid-template-columns:1fr 1fr 1fr;font-size:1rem}.flow-map{border-top:1px solid var(--line)}}

/* ---- 8. Sections: hairlines, numbered heads on the home page ---- */
.v5-section{padding:96px 0;border-bottom:1px solid var(--line)}
.v5-alt{background:rgba(255,255,255,.72)}
.v5-section h2{font-size:var(--fs-h2);letter-spacing:var(--ls-heading)}
.section-intro{color:var(--text-muted)}
main:has(>.v5-hero){counter-reset:sec}
main:has(>.v5-hero)>.v5-section:not(.v5-close)>.wrap>h2{counter-increment:sec;display:grid;gap:14px}
main:has(>.v5-hero)>.v5-section:not(.v5-close)>.wrap>h2::before{content:counter(sec,decimal-leading-zero);font-size:3.5rem;font-weight:700;letter-spacing:-.04em;line-height:.8;color:var(--blue-200)}

/* ---- 9. Rows → hairline cards ---- */
.case-row,.need-row{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:22px 28px;margin-bottom:8px;transition:background var(--dur-fast),border-color var(--dur-fast)}
.case-row:hover,.need-row:hover{background:var(--blue-50);border-color:var(--blue-300)}
.need-row:hover h3{text-decoration:none;color:var(--action)}
.need-row .arrow{color:var(--action)}
.case-row h3{font-size:var(--fs-annot);font-weight:600;letter-spacing:var(--ls-annot);text-transform:uppercase;color:var(--text-muted)}
.pillar-grid{gap:24px}
.pillar-column{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.pillar-column h3{padding:24px 24px 0}
.pillar-column h3 span{font-size:var(--fs-annot);font-weight:600;letter-spacing:var(--ls-annot);text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:10px}
.pillar-column h3 span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px var(--orange-100)}
.pillar-column>p{padding:0 24px 20px;border-bottom:1px solid var(--line);margin-top:10px;font-size:var(--fs-small)}
.pillar-column ul{margin:0;padding:6px}
.pillar-column li{border-top:0}
.pillar-column li a{border-radius:var(--r-md);padding:0 14px;min-height:56px;color:var(--text-strong)}
.pillar-column li a:hover{background:var(--blue-50);color:var(--action)}
.method-list{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);gap:0;counter-reset:m}
.method-list li{padding:32px 28px;border-left:1px solid var(--line);counter-increment:m}
.method-list li:first-child{border-left:0}
.method-list li::before{content:"";display:block;width:14px;height:14px;border-radius:50%;border:2px solid var(--action);background:#fff;margin-bottom:20px}
.method-list li:first-child::before{border-color:var(--signal);background:var(--signal);box-shadow:0 0 0 5px var(--orange-100)}
@media (max-width:740px){.method-list li{border-left:0;border-top:1px solid var(--line)}.method-list li:first-child{border-top:0}}
.people-layout{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:40px}

/* ---- 10. Deep surfaces: closing CTA, page heads, footer ---- */
.v5-close,.page-head,.hero,.cta,.panel-navy,.case-figure{background-color:var(--surface-deep)!important;background-image:var(--pattern-grid-deep)!important;background-size:var(--pattern-grid-size)!important}
.v5-close{border-bottom:0}
.v5-close p,.page-head .lead,.page-head p{color:var(--blue-200)}
.page-head{border-radius:0;border-bottom:0}
.page-head h1{color:#fff}
.promise{background:rgba(255,255,255,.06);border:1px solid var(--line-on-deep);border-radius:var(--r-md)}
.crumb a{color:var(--blue-200)}
.site-footer{background-color:var(--surface-deep);background-image:var(--pattern-grid-deep);background-size:var(--pattern-grid-size);border-radius:0;margin-top:0}
.site-footer a:hover{color:#fff}

/* ---- 11. Inner-page blocks → flat white + hairline ---- */
.card,.ref,.post,.job,.tile,.step,.tl,.caps li,.next a,.pillar,.quote,.arch-figure,.tech-wall,.case-photo,.portrait img,.chips li{box-shadow:none!important}
.card,.ref,.post,.job,.tile,.step,.tl,.caps li,.next a,.pillar,.arch-figure,.tech-wall{background:#fff;border:1px solid var(--line)}
a.card:hover,.next a:hover,.post:hover{box-shadow:var(--sh-md)!important;border-color:var(--blue-300);translate:0 -2px}
.panel{background:#fff;border:1px solid var(--line)}
.quote{background:#fff;border:1px solid var(--line);background-image:var(--pattern-grid);background-size:var(--pattern-grid-size)}
.tile b,.kpi b{color:var(--action)}
.chips li{background:var(--surface-page);border:1px solid var(--line-strong);color:var(--text-body)}
.stack-line,.ref .stack{background:var(--surface-page);border:1px dashed var(--line-strong)}
.placeholder{background:var(--pattern-hatch),#fff;border:1px dashed var(--blue-300)}
input,select,textarea{border:1.5px solid var(--line-strong);border-radius:var(--r-md);background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--action);box-shadow:0 0 0 4px var(--blue-100)}
.v5-status{background:#fff;border:1px solid var(--line)}
.v5-backtop{border-color:var(--line-strong);color:var(--action)}

/* ---- 12. Deep surfaces: restore light ink (brand.css rules are @layer'd, so they lose to this unlayered file) ---- */
:is(.cta,.panel-navy,.on-navy,.hero,.page-head,.case-figure,.case-nav,.v5-close,.site-footer) :is(h1,h2,h3,h4,h5,b,strong,blockquote){color:#fff}
:is(.cta,.panel-navy,.on-navy,.hero,.page-head,.case-figure,.case-nav,.v5-close) :is(p,li,dd,span,small,.lead){color:var(--blue-200)}
:is(.panel-navy,.on-navy,.case-nav,.cta,.site-footer) :is(h4,.kicker,.sector,.cn-head,.cn-sector,dt){color:var(--blue-300)}
:is(.cta,.panel-navy,.on-navy,.v5-close,.page-head,.hero) .btn-primary{background:var(--signal);color:var(--ink-900)}
:is(.cta,.panel-navy,.on-navy,.v5-close,.page-head,.hero) .btn-primary:hover:not(:disabled){background:#FFC24D;color:var(--ink-900)}
:is(.cta,.panel-navy,.on-navy,.v5-close,.page-head,.hero) .btn-secondary{background:transparent;border-color:rgba(201,208,248,.45);color:#fff}
:is(.cta,.panel-navy,.on-navy,.v5-close,.page-head,.hero) .btn-secondary:hover:not(:disabled){background:rgba(255,255,255,.1);border-color:var(--blue-200);color:#fff}
:is(.cta,.panel-navy,.on-navy,.v5-close,.page-head,.hero,.site-footer) :is(a:not(.btn),.link,.v5-text-link){color:var(--blue-200)}
:is(.cta,.panel-navy,.on-navy,.v5-close,.page-head,.hero,.site-footer) :is(a:not(.btn),.link,.v5-text-link):hover{color:#fff}
.on-navy :is(.card,.step,.tile,.tl,.caps li,.chips li,.next a,.kpi,.facet){background:rgba(255,255,255,.06)!important;border:1px solid var(--line-on-deep)!important;color:#fff}
.on-navy .tile b,.hero .kpi b,.case-figure b{color:#fff}
.on-navy .step .idx{background:rgba(255,255,255,.14);color:#fff}
.site-footer p,.site-footer li,.site-footer .foot-bottom{color:var(--blue-200)}
.site-footer .offices li b{color:#fff}