/* ==========================================================================
   components.css — reusable pieces that appear in more than one section
   ========================================================================== */

/* --- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.92em 1.6em;
  font-weight:500; font-size:.95rem;
  border-radius:2px; border:1.5px solid transparent;
  cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
.btn--solid{ background:var(--field); color:var(--white) }
.btn--solid:hover{ background:var(--ink); transform:translateY(-2px) }
.btn--line{ border-color:var(--rule); color:var(--ink) }
.btn--line:hover{ border-color:var(--ink); background:var(--ink); color:var(--white); transform:translateY(-2px) }
.on-ink .btn--line{ border-color:rgba(255,255,255,.32); color:var(--white) }
.on-ink .btn--line:hover{ background:var(--white); color:var(--ink); border-color:var(--white) }
.btn--amber{ background:var(--signal); color:var(--ink) }
.btn--amber:hover{ background:var(--white); transform:translateY(-2px) }

/* --- top bar ------------------------------------------------------------- */
.topbar{ background:var(--ink); color:var(--muted-on-ink); font-size:.78rem }
.topbar .wrap{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; padding-block:.5rem; flex-wrap:wrap;
}
.topbar a{ color:#D6E0F5; transition:color .25s }
.topbar a:hover{ color:var(--signal) }
.topbar__tag{ font-family:var(--mono); font-size:.7rem; color:var(--signal); letter-spacing:.06em }
.topbar__links{ display:flex; gap:1.4rem; flex-wrap:wrap }

/* --- nav ----------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:80;
  background:rgba(233,237,234,.82);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:border-color .35s, box-shadow .35s;
}
.nav.is-stuck{ border-bottom-color:var(--rule); box-shadow:0 10px 30px -22px rgba(13,27,62,.5) }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.4rem; padding-block:.8rem }

.brand{ display:flex; align-items:center; gap:.72rem; flex-shrink:0 }
.brand img{ width:44px; height:44px }
.brand__txt b{ display:block; font-family:var(--display); font-weight:600; font-size:1.02rem; letter-spacing:-.022em; line-height:1.1 }
.brand__txt small{ display:block; font-family:var(--mono); font-size:.575rem; letter-spacing:.14em; color:var(--muted); margin-top:2px }

.menu{ display:flex; align-items:center; gap:.1rem; list-style:none; margin:0; padding:0 }
.menu a{ display:block; padding:.55rem .7rem; font-size:.875rem; position:relative; transition:color .25s }
.menu a::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.28rem; height:1.5px;
  background:var(--field); transform:scaleX(0); transform-origin:left;
  transition:transform .38s var(--ease-out);
}
.menu a:hover::after, .menu a.is-active::after{ transform:scaleX(1) }
.menu a.is-active{ color:var(--field) }
.nav__cta{ display:flex; align-items:center; gap:.6rem }

.burger{ display:none; width:44px; height:40px; background:none; border:1px solid var(--rule); border-radius:2px; cursor:pointer; position:relative }
.burger i{ position:absolute; left:11px; right:11px; height:1.6px; background:var(--ink); transition:transform .35s var(--ease), opacity .2s }
.burger i:nth-child(1){ top:14px } .burger i:nth-child(2){ top:19.2px } .burger i:nth-child(3){ top:24.4px }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(5.2px) rotate(45deg) }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-5.2px) rotate(-45deg) }

.drawer{
  position:fixed; inset:0; z-index:79;
  background:var(--ink); color:var(--white);
  display:flex; flex-direction:column; justify-content:center;
  padding:5rem var(--gut) 3rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .6s var(--ease-out);
  visibility:hidden; overflow-y:auto;
}
.drawer.is-open{ clip-path:inset(0 0 0 0); visibility:visible }
.drawer ul{ list-style:none; margin:0; padding:0 }
.drawer li{ overflow:hidden }
.drawer a{
  display:block; font-family:var(--display);
  font-size:clamp(1.45rem, 6vw, 2.1rem); font-weight:500; letter-spacing:-.025em;
  padding:.24em 0; border-bottom:1px solid rgba(255,255,255,.1);
  transform:translateY(115%);
  transition:transform .55s var(--ease-out), color .25s;
}
.drawer.is-open a{ transform:translateY(0) }
.drawer a:hover{ color:var(--signal) }
/* Sign-in CTA inside the drawer: the header button is hidden below 1080px, so this is the only
   route to the console on mobile. Overrides the big display-link look of `.drawer a` (higher
   specificity) while keeping its staggered slide-up reveal. */
.drawer__cta{ margin-top:1.9rem }
.drawer__cta a{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--body); font-size:.98rem; font-weight:600; letter-spacing:0;
  padding:.92em 1.7em; border-bottom:0; border-radius:2px;
  background:var(--signal); color:var(--ink);
}
.drawer__cta a:hover{ background:var(--white); color:var(--ink) }
.drawer__foot{ margin-top:2rem; font-size:.86rem; color:var(--muted-on-ink); line-height:1.9 }
.drawer__foot a{ display:inline; font-family:var(--body); font-size:.92rem; padding:0; border:0; transform:none; color:var(--signal) }

/* --- live dot ------------------------------------------------------------ */
.dot-live{
  width:6px; height:6px; border-radius:50%; background:var(--field-lt);
  box-shadow:0 0 0 0 rgba(77,134,238,.6);
  animation:ping 2.4s infinite;
  flex:none;
}

/* --- the case docket ----------------------------------------------------- */
.docket{
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:3px;
  box-shadow:0 40px 70px -46px rgba(13,27,62,.6), 0 2px 0 0 var(--rule-soft);
  position:relative;
}
.docket::before{
  content:""; position:absolute; top:-9px; right:26px; width:74px; height:18px;
  background:repeating-linear-gradient(90deg, var(--signal) 0 9px, rgba(247,128,30,.35) 9px 18px);
  border-radius:1px;
}
.docket__head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
  padding:.95rem 1.2rem; border-bottom:1px solid var(--rule-soft); background:var(--paper-2);
}
.docket__who b{ font-family:var(--display); font-size:1.06rem; font-weight:600; letter-spacing:-.02em; display:block }
.docket__ref{ font-family:var(--mono); font-size:.66rem; color:var(--muted); letter-spacing:.03em; margin-top:.25rem; display:block }
.docket__product{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  background:rgba(247,128,30,.16); color:var(--signal-dp);
  border:1px solid rgba(247,128,30,.4); border-radius:100px; padding:.3rem .6rem; white-space:nowrap;
}

.docket__steps{ list-style:none; margin:0; padding:.7rem 1.2rem }
.docket__steps li{
  display:grid; grid-template-columns:20px 1fr; gap:.7rem;
  padding:.5rem 0; font-size:.83rem; line-height:1.5;
  border-bottom:1px solid var(--rule-soft);
  opacity:.32; transition:opacity .45s var(--ease);
}
.docket__steps li:last-child{ border-bottom:0 }
.docket__steps li.is-done{ opacity:1 }
.docket__steps b{ font-weight:500; color:var(--ink) }
.docket__steps .det{ color:var(--muted) }
.tick{
  width:19px; height:19px; border-radius:50%; border:1.4px solid var(--rule);
  display:grid; place-items:center; margin-top:2px;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.tick svg{
  width:10px; height:10px; stroke:var(--white); stroke-width:2.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:16; stroke-dashoffset:16;
  transition:stroke-dashoffset .4s var(--ease) .08s;
}
.is-done .tick{ background:var(--field); border-color:var(--field) }
.is-done .tick svg{ stroke-dashoffset:0 }

.shots{ display:flex; gap:.35rem; margin-top:.5rem }
.shots i{
  width:38px; height:28px; border-radius:2px; background:var(--paper);
  border:1px solid var(--rule-soft); position:relative; overflow:hidden;
}
.shots i::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(140deg, var(--field-lt) 0 42%, var(--field) 42% 70%, var(--signal) 70%);
  opacity:.5;
}
.shots i:nth-child(2)::after{ background:linear-gradient(115deg, var(--field) 0 55%, var(--field-lt) 55%) }
.shots i:nth-child(3)::after{ background:linear-gradient(160deg, var(--signal) 0 38%, var(--field) 38%) }

.docket__foot{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.9rem 1.2rem; border-top:1px solid var(--rule-soft); background:var(--paper-2);
}
.docket__tat{ font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--muted) }
.docket__tat b{ color:var(--ink); font-size:.84rem; letter-spacing:0; display:block; margin-top:2px }
.stamp{
  font-family:var(--display); font-weight:700; font-size:.85rem; letter-spacing:.13em;
  color:var(--field); border:2.5px solid var(--field); border-radius:3px;
  padding:.28rem .7rem; text-align:center; line-height:1.15;
  transform:rotate(-9deg) scale(2.1); opacity:0;
  transition:transform .5s var(--pop), opacity .28s;
}
.stamp small{ display:block; font-family:var(--mono); font-size:.52rem; letter-spacing:.1em; font-weight:400; margin-top:2px }
.stamp.is-hit{ transform:rotate(-9deg) scale(1); opacity:.92 }

/* --- ticker -------------------------------------------------------------- */
.ticker{ background:var(--ink); overflow:hidden; padding-block:.95rem; border-block:1px solid var(--ink-2) }
.ticker__track{ display:flex; width:max-content; animation:slide 46s linear infinite }
.ticker:hover .ticker__track{ animation-play-state:paused }
.ticker span{
  font-family:var(--display); font-weight:500; font-size:1rem;
  padding-inline:1.5rem; display:flex; align-items:center; gap:1.5rem;
  white-space:nowrap; color:#DCE6F5;
}
.ticker span::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--signal); flex:none }

/* --- accordions (services + faq) ----------------------------------------- */
.acc-panel{ overflow:hidden; height:0; transition:height .55s var(--ease-out) }
details[open] > .acc-panel{ height:auto }

/* --- tags & chips -------------------------------------------------------- */
.tag{
  font-family:var(--mono); font-size:.67rem; color:var(--field);
  background:var(--white); border:1px solid var(--rule-soft);
  border-radius:100px; padding:.34rem .68rem;
}
.chips{ list-style:none; margin:1.5rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem }
.chips li{
  font-size:.82rem; border:1px solid rgba(255,255,255,.18);
  border-radius:100px; padding:.4rem .85rem; color:#CFDCF2;
  transition:border-color .3s, color .3s;
}
.chips li:hover{ border-color:var(--signal); color:var(--signal) }

/* --- form ---------------------------------------------------------------- */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem }
.f{ position:relative }
.f--full{ grid-column:1/-1 }
.f label{
  position:absolute; left:0; top:.85rem; font-size:.95rem;
  color:rgba(255,255,255,.5); pointer-events:none;
  transition:transform .3s var(--ease), font-size .3s var(--ease), color .3s;
}
.f input,.f select,.f textarea{
  width:100%; background:transparent; border:0;
  border-bottom:1px solid rgba(255,255,255,.22);
  padding:.85rem 0 .7rem; color:var(--white);
  font-family:var(--body); font-size:1rem; border-radius:0;
  transition:border-color .3s;
}
.f textarea{ resize:vertical; min-height:92px }
.f select{ cursor:pointer }
.f select option{ background:var(--ink); color:var(--white) }
.f input:focus,.f select:focus,.f textarea:focus{ outline:0; border-bottom-color:var(--signal) }
.f input:focus + label,
.f textarea:focus + label,
.f input:not(:placeholder-shown) + label,
.f textarea:not(:placeholder-shown) + label,
.f--select label{
  transform:translateY(-1.35rem); font-size:.66rem;
  letter-spacing:.08em; color:var(--signal); font-family:var(--mono);
}
.form__foot{
  grid-column:1/-1; display:flex; justify-content:space-between; align-items:center;
  gap:1.2rem; flex-wrap:wrap; margin-top:.5rem;
}
.form__note{ font-size:.78rem; color:var(--muted-on-ink); max-width:40ch; margin:0 }
.form__msg{
  grid-column:1/-1; font-size:.9rem; padding:.9rem 1.1rem;
  border-left:2px solid var(--signal); background:rgba(247,128,30,.1);
  color:#F5E3C0; display:none;
}
.form__msg.is-shown{ display:block; animation:fadeUp .5s var(--ease-out) }

/* --- footer -------------------------------------------------------------- */
.foot{ background:#071233; color:var(--muted-on-ink); padding-block:clamp(2.8rem,4vw,3.6rem) 1.8rem; font-size:.875rem }
.foot__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.2rem; padding-bottom:2.4rem; border-bottom:1px solid rgba(255,255,255,.1) }
.foot h4{ font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; color:var(--signal); font-weight:400; margin:0 0 1rem }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem }
.foot a:hover{ color:var(--white) }
.foot .brand__txt b{ color:var(--white) }
.foot__blurb{ margin:1.3rem 0 0; max-width:38ch; line-height:1.75 }
.foot__bot{ display:flex; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; padding-top:1.6rem; font-size:.78rem }
.foot__bot nav{ display:flex; gap:1.4rem; flex-wrap:wrap }

/* --- floating CTA -------------------------------------------------------- */
.float{
  position:fixed; right:clamp(14px,2.4vw,26px); bottom:clamp(14px,2.4vw,26px); z-index:70;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85em 1.25em; background:var(--signal); color:var(--ink);
  border-radius:100px; font-size:.87rem; font-weight:500;
  box-shadow:0 16px 34px -14px rgba(13,27,62,.6);
  transform:translateY(140%);
  transition:transform .55s var(--ease-out), background .3s;
}
.float.is-in{ transform:translateY(0) }
.float:hover{ background:var(--white) }
.float svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }

/* --- photographs ---------------------------------------------------------
   A consistent treatment so photography sits inside the palette rather than
   fighting it: hairline frame, a faint green wash, and a warmer grade.       */
.shot{ position:relative; margin:0; border:1px solid var(--rule); border-radius:3px; overflow:hidden; background:var(--ink) }
.shot img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.86) contrast(1.04) }
.shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(29,90,224,.24) 0%, rgba(13,27,62,.06) 46%, rgba(247,128,30,.12) 100%);
  mix-blend-mode:multiply;
}
.shot figcaption{
  position:relative; z-index:2; background:var(--ink); color:var(--muted-on-ink);
  font-size:.8rem; line-height:1.5; padding:.85rem 1.1rem;
  border-top:2px solid var(--signal);
}
.shot--hero img{ aspect-ratio:4/4.35; object-position:46% 52% }
.shot--hero{ box-shadow:0 30px 60px -44px rgba(13,27,62,.6) }
.shot--contact{ margin-top:2rem; border-color:rgba(255,255,255,.16) }
.shot--sector{ margin-top:1.8rem; max-width:330px }
.shot--sector img{ aspect-ratio:430/470; object-position:center 26% }
.shot--contact img{ aspect-ratio:16/7 }

/* --- full-bleed photo band ------------------------------------------------ */
.band{
  position:relative; overflow:hidden; isolation:isolate;
  padding-block:clamp(4rem,8vw,7rem); color:var(--white);
  background:var(--ink);
}
.band__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:72% 58%; z-index:-2; filter:saturate(.62);
}
.band::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(13,27,62,.96) 0%, rgba(13,27,62,.88) 46%, rgba(13,27,62,.42) 100%);
}
.band__inner{ max-width:var(--wrap) }
.band h2{ color:var(--white); max-width:none }
.band .kicker{ color:var(--signal) }
.band .lede{ color:#C7D6F0; max-width:52ch }

/* --- commitment over a photograph ----------------------------------------- */
.commit{ position:relative; overflow:hidden; isolation:isolate; background:var(--ink); color:var(--white) }
.commit__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 46%; z-index:-2; filter:saturate(.55);
}
.commit::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(13,27,62,.9) }
.commit blockquote{ color:var(--white) }
.commit .commit__after{ color:#C7D6F0 }

/* --- direct-desk email list ----------------------------------------------- */
.ct-people{ margin-top:1.8rem }
.ct-people__lbl{ font-family:var(--mono); font-size:.63rem; letter-spacing:.12em; color:var(--signal); display:block; margin-bottom:.6rem }
.ct-people ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem }
.ct-people a{
  display:block; font-size:.8rem; color:#DCE6F5;
  border:1px solid rgba(255,255,255,.18); border-radius:100px; padding:.36rem .8rem;
  transition:border-color .3s, color .3s;
}
.ct-people a:hover{ border-color:var(--signal); color:var(--signal) }