/* ============================================================
   ORQEST website — shared stylesheet.
   Minimal Geometric: dark brand surfaces, light information
   surfaces, thin technical lines, generous negative space.
   ============================================================ */
@import url("tokens.css");

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
body{
  margin:0; background:var(--navy); color:var(--text-on-dark);
  font-family:var(--font-text); font-size:var(--body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%; height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyan); outline-offset:3px; border-radius:2px}

h1,h2,h3,h4{font-family:var(--font-display); line-height:1.15; margin:0 0 var(--s-4); letter-spacing:-.015em; font-weight:600}
p{margin:0 0 var(--s-4)}
.container{max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,4vw,40px)}

/* ---------- overline / eyebrow ---------- */
.overline{
  font-family:var(--font-text); font-size:var(--overline); font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--cyan);
  display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-4);
}
.overline::before{content:""; width:28px; height:2px; background:var(--cyan); flex:none}
.on-light .overline{color:var(--violet)}
.on-light .overline::before{background:var(--violet)}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,16,32,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-on-dark);
}
.site-header .container{display:flex; align-items:center; gap:var(--s-6); min-height:72px}
.brand-link{display:flex; align-items:center; text-decoration:none; margin-right:auto}
.brand-link svg{height:38px; width:auto; display:block}
.site-nav{display:flex; align-items:center; gap:var(--s-2)}
.site-nav a{
  text-decoration:none; color:var(--text-on-dark-soft); font-size:var(--caption); font-weight:500;
  padding:10px 14px; border-radius:var(--r-sm); transition:color var(--t-fast), background var(--t-fast);
}
.site-nav a:hover{color:var(--text-on-dark); background:rgba(246,248,252,.06)}
.site-nav a[aria-current="page"]{color:var(--text-on-dark); background:rgba(116,87,255,.18)}
.nav-toggle{
  display:none; background:none; border:1px solid var(--border-on-dark); color:var(--text-on-dark);
  border-radius:var(--r-sm); padding:10px 12px; cursor:pointer; min-width:44px; min-height:44px;
}
@media (max-width: 900px){
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}
  .site-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; padding:var(--s-4);
    background:var(--navy); border-bottom:1px solid var(--border-on-dark);
  }
  .site-nav.open{display:flex}
  .site-nav a{padding:14px 16px; font-size:var(--body)}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-text); font-weight:600; font-size:var(--caption);
  letter-spacing:.04em; text-decoration:none; cursor:pointer;
  border-radius:var(--r-sm); padding:14px 24px; min-height:48px;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  border:1px solid transparent;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--violet); color:var(--white)}
.btn-primary:hover{background:var(--violet-lift); color:var(--navy)}
.btn-ghost{background:transparent; color:var(--text-on-dark); border-color:var(--border-on-dark)}
.btn-ghost:hover{border-color:var(--text-on-dark-soft); background:rgba(246,248,252,.05)}
.on-light .btn-ghost{color:var(--text-on-light); border-color:var(--border-on-light)}
.on-light .btn-ghost:hover{border-color:var(--text-on-light-muted); background:rgba(11,16,32,.04)}

/* ---------- sections ---------- */
.section{padding-block:clamp(64px,9vw,112px)}
.section-tight{padding-block:clamp(40px,6vw,72px)}
.on-light{background:var(--off-white); color:var(--text-on-light)}
.on-raise{background:var(--navy-raise)}
.section-head{max-width:720px; margin-bottom:clamp(32px,5vw,56px)}
.section-head h2{font-size:var(--display-lg)}
.section-head p{color:var(--text-on-dark-soft); font-size:var(--body-lg)}
.on-light .section-head p{color:var(--text-on-light-soft)}
.lede{font-size:var(--body-lg); color:var(--text-on-dark-soft); max-width:62ch}
.on-light .lede{color:var(--text-on-light-soft)}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding-block:clamp(72px,10vw,140px)}

/* video hero (home) */
.hero-video{min-height:min(78vh, 720px); display:flex; align-items:center}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-media video, .hero-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:65% center;
}
.hero-media video{opacity:0; transition:opacity .8s var(--ease-out)}
.hero-media video.is-ready{opacity:1}
/* the violet output path leaves the hero and carries the eye into the next section */
.hero-continuation{
  position:absolute; left:0; right:0; bottom:-1px; width:100%; height:120px;
  z-index:3; pointer-events:none;
}
@media (max-width: 700px){ .hero-continuation{display:none} }

/* section media — one shared treatment so every generated visual reads as one campaign */
.figure-media{
  margin:0; border:1px solid var(--border-on-dark); border-radius:var(--r-md);
  overflow:hidden; background:var(--navy-raise);
}
.figure-media img{display:block; width:100%; height:auto}
.figure-media figcaption{
  padding:10px 16px; font-size:var(--overline); letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-on-dark-muted); border-top:1px solid var(--border-on-dark);
}
.on-light .figure-media{border-color:var(--border-on-light); background:var(--white)}
.on-light .figure-media figcaption{color:var(--text-on-light-muted); border-top-color:var(--border-on-light)}
.figure-media--bleed{margin-top:clamp(32px,5vw,56px)}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(11,16,32,.94) 0%, rgba(11,16,32,.78) 42%, rgba(11,16,32,.30) 75%, rgba(11,16,32,.15) 100%),
    linear-gradient(0deg, rgba(11,16,32,.85) 0%, rgba(11,16,32,0) 30%);
}
.hero-video .container{position:relative; z-index:2; width:100%}  /* flex item must not shrink-wrap — copy belongs left, in the video's negative space */
.hero-video .hero-copy{max-width:640px}
@media (max-width: 700px){
  .hero-scrim{background:rgba(11,16,32,.82)}
}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,5vw,72px); align-items:center}
@media (max-width: 900px){ .hero-grid{grid-template-columns:1fr} }
.hero h1{font-size:var(--display-xl); letter-spacing:-.02em; margin-bottom:var(--s-6)}
.hero .accent{color:var(--violet-lift)}
.hero-ctas{display:flex; flex-wrap:wrap; gap:var(--s-4); margin-block:var(--s-8) var(--s-4)}
.hero-note{font-size:var(--caption); color:var(--text-on-dark-muted)}

/* ---------- cards ---------- */
.grid{display:grid; gap:var(--s-6)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width: 1000px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 640px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }

.card{
  background:var(--navy-raise); border:1px solid var(--border-on-dark);
  border-radius:var(--r-md); padding:var(--s-8);
  transition:border-color var(--t-std), transform var(--t-std);
}
.card:hover{border-color:rgba(142,118,255,.45)}
.card h3{font-size:var(--h3); margin-bottom:var(--s-3)}
.card p{color:var(--text-on-dark-soft); font-size:var(--caption); margin:0}
.on-light .card{background:var(--white); border-color:var(--border-on-light)}
.on-light .card p{color:var(--text-on-light-soft)}
.card .k{
  font-family:var(--font-display); font-size:var(--overline); font-weight:600;
  letter-spacing:.2em; color:var(--violet-lift); display:block; margin-bottom:var(--s-3);
}
.on-light .card .k{color:var(--violet)}
a.card{display:block; text-decoration:none; color:inherit}
a.card .more{color:var(--violet-lift); font-size:var(--caption); font-weight:600; display:inline-block; margin-top:var(--s-4)}
.on-light a.card .more{color:var(--violet)}

/* ---------- workflow chain (inline demo of a flow) ---------- */
.chain{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-3); padding:0; margin:var(--s-6) 0; list-style:none}
.chain li{
  background:rgba(246,248,252,.06); border:1px solid var(--border-on-dark);
  padding:8px 14px; border-radius:999px; font-size:var(--caption); color:var(--text-on-dark-soft);
  white-space:nowrap;
}
.chain li.human{border-color:rgba(53,212,255,.5); color:var(--cyan)}
.chain li.out{background:rgba(116,87,255,.2); border-color:rgba(142,118,255,.6); color:var(--text-on-dark)}
.chain .arrow{color:var(--text-on-dark-muted); font-size:var(--caption)}
@media (max-width: 520px){ .chain li{white-space:normal} }
.on-light .chain li{background:var(--white); border-color:var(--border-on-light); color:var(--text-on-light-soft)}
.on-light .chain li.human{border-color:rgba(11,132,180,.55); color:#0B84B4}
.on-light .chain li.out{background:rgba(116,87,255,.1); border-color:rgba(116,87,255,.5); color:var(--text-on-light)}

/* ---------- method steps ---------- */
.steps{counter-reset:step; display:grid; gap:var(--s-4)}
.step{
  display:grid; grid-template-columns:64px 1fr; gap:var(--s-6); align-items:start;
  padding:var(--s-6); border:1px solid var(--border-on-dark); border-radius:var(--r-md);
  background:var(--navy-raise);
}
.step .num{
  counter-increment:step; font-family:var(--font-display); font-weight:600;
  font-size:1.5rem; color:var(--violet-lift);
  width:56px; height:56px; border:2px solid rgba(142,118,255,.4); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.step .num::before{content:counter(step,decimal-leading-zero)}
.step h3{margin-bottom:var(--s-2)}
.step p{color:var(--text-on-dark-soft); margin:0}
.on-light .step{background:var(--white); border-color:var(--border-on-light)}
.on-light .step .num{color:var(--violet); border-color:rgba(116,87,255,.35)}
.on-light .step p{color:var(--text-on-light-soft)}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--border-on-light); border-radius:var(--r-md); background:var(--white)}
table{border-collapse:collapse; width:100%; font-size:var(--caption)}
th,td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--border-on-light); vertical-align:top; color:var(--text-on-light-soft)}
th{font-family:var(--font-display); font-weight:600; color:var(--text-on-light); font-size:var(--overline); letter-spacing:.08em; text-transform:uppercase; background:rgba(11,16,32,.03)}
tr:last-child td{border-bottom:none}
td strong{color:var(--text-on-light)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--border-on-dark); padding-block:var(--s-16) var(--s-8); background:var(--navy)}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--s-8)}
@media (max-width: 900px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width: 560px){ .footer-grid{grid-template-columns:1fr} }
.site-footer .f-h{font-size:var(--overline); letter-spacing:.2em; text-transform:uppercase; color:var(--text-on-dark-muted); margin-bottom:var(--s-4); font-weight:600}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.site-footer a{color:var(--text-on-dark-soft); text-decoration:none; font-size:var(--caption)}
.site-footer a:hover{color:var(--text-on-dark)}
.footer-brand p{color:var(--text-on-dark-muted); font-size:var(--caption); max-width:34ch}
.footer-legal{margin-top:var(--s-12); padding-top:var(--s-6); border-top:1px solid var(--border-on-dark);
  display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between;
  color:var(--text-on-dark-muted); font-size:var(--overline)}

/* ---------- forms ---------- */
.form{display:grid; gap:var(--s-6); max-width:640px}
.field{display:grid; gap:8px}
.field label{font-weight:600; font-size:var(--caption); color:var(--text-on-light)}
.field .hint{font-size:var(--overline); color:var(--text-on-light-muted)}
.field input,.field select,.field textarea{
  font:inherit; padding:13px 14px; min-height:48px; border-radius:var(--r-sm);
  border:1.5px solid rgba(11,16,32,.25); background:var(--white); color:var(--text-on-light);
  transition:border-color var(--t-fast);
}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--violet); outline:none; box-shadow:0 0 0 3px rgba(116,87,255,.2)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--error)}
.field .error-msg{display:none; color:var(--error); font-size:var(--overline); font-weight:600}
.field.invalid .error-msg{display:block}
.form-status{display:none; padding:var(--s-4) var(--s-6); border-radius:var(--r-sm); font-size:var(--caption); font-weight:500}
.form-status.success{display:block; background:rgba(27,158,107,.12); border:1px solid rgba(27,158,107,.4); color:#0d6b47}
.form-status.error{display:block; background:rgba(214,69,69,.1); border:1px solid rgba(214,69,69,.4); color:#a52f2f}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none} }

/* ---------- hero motif animation ---------- */
.motif-signal{ animation:signal-travel 6s var(--ease-out) infinite }
@keyframes signal-travel{
  0%   {opacity:0; transform:translateX(0)}
  8%   {opacity:1}
  46%  {opacity:1; transform:translateX(150px)}
  54%  {opacity:0; transform:translateX(150px)}
  100% {opacity:0; transform:translateX(150px)}
}
.motif-out{ stroke-dasharray:240; stroke-dashoffset:240; animation:draw-out 6s var(--ease-out) infinite }
@keyframes draw-out{
  0%,42% {stroke-dashoffset:240}
  75%    {stroke-dashoffset:0}
  100%   {stroke-dashoffset:0}
}
@media (prefers-reduced-motion: reduce){
  .motif-signal{animation:none; opacity:1}
  .motif-out{animation:none; stroke-dashoffset:0}
}

/* ---------- misc ---------- */
.crumb{font-size:var(--overline); letter-spacing:.1em; text-transform:uppercase; color:var(--text-on-dark-muted); margin-bottom:var(--s-6)}
.crumb a{color:var(--text-on-dark-muted); text-decoration:none}
.crumb a:hover{color:var(--text-on-dark)}
.check-list{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.check-list li{padding-left:30px; position:relative; color:var(--text-on-dark-soft); font-size:var(--caption)}
.check-list li::before{
  content:""; position:absolute; left:0; top:4px; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--violet-lift);
}
.on-light .check-list li{color:var(--text-on-light-soft)}
.on-light .check-list li::before{border-color:var(--violet)}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--cyan); color:var(--navy); padding:12px 20px; z-index:200; font-weight:600; border-radius:0 0 var(--r-sm) 0}
.skip-link:focus{left:0}
.notice{
  border:1px solid rgba(53,212,255,.35); background:rgba(53,212,255,.07);
  border-radius:var(--r-md); padding:var(--s-6); font-size:var(--caption); color:var(--text-on-dark-soft);
}
.on-light .notice{border-color:rgba(116,87,255,.3); background:rgba(116,87,255,.06); color:var(--text-on-light-soft)}

/* ---------- print (portfolio page) ---------- */
@media print{
  .site-header,.site-footer,.no-print{display:none !important}
  body{background:#fff}
  .section{padding-block:24px; break-inside:avoid-page}
  .portfolio-section{break-before:page}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}