@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/IBMPlexMono-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/IBMPlexMono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fonts/IBMPlexMono-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fonts/IBMPlexMono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Serif';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url(fonts/IBMPlexSerif-400-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Serif';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url(fonts/IBMPlexSerif-400-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/IBMPlexSerif-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/IBMPlexSerif-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Serif';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fonts/IBMPlexSerif-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Serif';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fonts/IBMPlexSerif-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   andackartal.com — two voices
   human  = IBM Plex Serif, ink
   agent  = IBM Plex Mono, agent green
   Nothing else gets to speak.
   ============================================================ */

:root{
  --paper:#e8eae9;
  --raised:#f4f5f4;
  --ink:#12191a;
  --ink-soft:#59635f;
  --hair:#c9cecb;
  --agent:#0e6a5f;
  --agent-lit:#17a08d;
  --agent-strong:#0a5148;   /* emphasis in the agent voice — must beat the background */

  --serif:"IBM Plex Serif",Iowan Old Style,Palatino,Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --gutter:clamp(1.25rem,5vw,4.5rem);
  --rail:clamp(0rem,4.5vw,4rem);   /* left rail that carries the band numbers */
  --rule:1px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0f1516;
    --raised:#161d1e;
    --ink:#e4e8e6;
    --ink-soft:#8d9a95;
    --hair:#2b3536;
    --agent:#3fbfa9;
    --agent-lit:#5ad9c2;
    --agent-strong:#7ee8d2;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.62;
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3{font-weight:400}
::selection{background:var(--agent);color:var(--paper)}

.wrap{max-width:74rem;margin:0 auto;padding-inline:var(--gutter)}

/* ---------- voices ---------- */
.human{font-family:var(--serif);color:var(--ink)}
.agent{font-family:var(--mono);color:var(--agent);font-size:.8125rem;line-height:1.7;letter-spacing:.01em}
.mono{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em}

/* skip link */
.skip{
  position:absolute;left:-9999px;top:0;
  font-family:var(--mono);font-size:.75rem;background:var(--raised);color:var(--ink);
  padding:.6rem .9rem;border:var(--rule) solid var(--hair);z-index:9;
}
.skip:focus{left:.75rem;top:.75rem}

/* ---------- masthead ---------- */
.masthead{
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:baseline;justify-content:space-between;
  padding-block:1.75rem 0;
}
.wordmark{font-family:var(--mono);font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase}
.masthead nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:baseline}
.masthead a{
  font-family:var(--mono);font-size:.8125rem;text-decoration:none;
  border-bottom:var(--rule) solid var(--hair);padding-bottom:.15em;
}
.masthead a:hover{border-bottom-color:var(--agent);color:var(--agent)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3.25rem,9vw,6rem) clamp(2.5rem,6vw,4rem)}
.eyebrow{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 clamp(1.5rem,4vw,2.25rem);
}
.hero h1{
  font-family:var(--serif);
  font-size:clamp(2.25rem,1.05rem + 5.4vw,5.75rem);
  line-height:1.02;letter-spacing:-.028em;
  margin:0;max-width:17ch;text-wrap:balance;
}
.hero h1 em{font-style:italic}

/* the handoff rule: ink on the left, agent on the right */
.handoff-rule{display:flex;margin-block:clamp(2rem,5vw,2.75rem) 1.1rem;max-width:34rem}
.handoff-rule span{height:2px;flex:1}
.handoff-rule span:first-child{background:var(--ink)}
.handoff-rule span:last-child{background:var(--agent)}

.statusline{margin:0 0 clamp(1.75rem,4vw,2.25rem)}
.statusline b{font-weight:500;color:var(--agent-strong)}

.lede{margin:0;max-width:50ch;color:var(--ink-soft);font-size:1.06em;text-wrap:pretty}
.lede strong{color:var(--ink);font-weight:500}

.cta{
  display:inline-block;margin-top:clamp(2rem,5vw,2.75rem);
  font-family:var(--mono);font-size:1rem;text-decoration:none;
  border-bottom:2px solid var(--agent);padding-bottom:.2em;
}
.cta:hover{color:var(--agent)}

/* ---------- 02 · proof strip ----------
   Hidden until proof.js decides the data is fresh enough to stand behind.
   Never renders a placeholder, a skeleton, or a zero it did not read. */
.proof-band{border-top:var(--rule) solid var(--hair);padding-block:clamp(1.5rem,3.5vw,2rem)}
.proof-band[hidden]{display:none}
.proof[hidden]{display:none}
.proof{
  margin:0;min-height:1.62em;
  font-family:var(--mono);font-size:.8125rem;line-height:1.7;letter-spacing:.01em;
  color:var(--agent);
}
.proof .sep{opacity:.45;padding-inline:.45em}
.proof .stale{color:var(--ink-soft)}
.proof time{font-variant-numeric:tabular-nums}
.proof-src{
  margin:.5rem 0 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  color:var(--ink-soft);
}
.proof-src[hidden]{display:none}

/* the one line a prospect actually looks for: am I taking work right now */
.availability{
  margin:1.15rem 0 0;padding-top:1.1rem;border-top:var(--rule) solid var(--hair);
  font-family:var(--mono);font-size:.8125rem;line-height:1.7;letter-spacing:.01em;
  color:var(--agent-strong);
}
.availability[hidden]{display:none}
.availability::before{content:"\25CF";font-size:.62em;vertical-align:.22em;margin-right:.6em;opacity:.8}

/* ---------- section frame ---------- */
.band{border-top:var(--rule) solid var(--hair);padding-block:clamp(3rem,7vw,4.75rem)}
.band-n{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--ink-soft);
  margin:0 0 1.25rem;
}
.band-head{margin:0 0 clamp(2rem,4.5vw,2.75rem)}
.band-head h2{
  font-family:var(--serif);letter-spacing:-.018em;
  font-size:clamp(1.55rem,1.15rem + 1.7vw,2.5rem);margin:0;max-width:24ch;text-wrap:balance;
}
.band-note{margin:.9rem 0 0;color:var(--ink-soft);max-width:52ch;text-wrap:pretty}

.legend{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-soft);margin:.9rem 0 0}
.legend i{font-style:normal}
.legend .k-h::before,.legend .k-a::before{
  content:"";display:inline-block;width:.62em;height:.62em;margin-right:.5em;vertical-align:.02em;
}
.legend .k-h::before{background:var(--ink)}
.legend .k-a::before{background:var(--agent)}
.legend .k-a{margin-left:1.5rem}
@media (max-width:34rem){
  .legend i{display:block}
  .legend .k-a{margin-left:0;margin-top:.4rem}
}

/* the visible grid: band numbers move out into the left rail on wide screens */
@media (min-width:60rem){
  .band{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:clamp(1rem,2.5vw,2.5rem)}
  .band > *{grid-column:2}
  .band-n{grid-column:1;grid-row:1 / span 99;margin:0;padding-top:.3em;align-self:start}
}

/* ---------- 03 · facts ---------- */
.facts-group{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--agent);margin:clamp(2rem,4vw,2.75rem) 0 1.1rem;
  padding-top:clamp(1.4rem,3vw,1.9rem);border-top:2px solid var(--hair);font-weight:400;
}
.facts-group:first-of-type{margin-top:0;padding-top:0;border-top:0}
.facts-group span{color:var(--ink-soft);letter-spacing:.06em;text-transform:none}
.facts{margin:0;padding:0}
.facts .fact{
  display:grid;gap:.15rem .5rem;grid-template-columns:1fr;
  padding-block:clamp(.85rem,1.8vw,1.05rem);
  border-top:var(--rule) solid var(--hair);
}
.facts .fact:first-child{border-top:0;padding-top:0}
.facts dt{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);
}
.facts dd{
  margin:0;font-family:var(--mono);font-size:.8125rem;line-height:1.6;
  font-variant-numeric:tabular-nums;
}
.facts dd b{font-weight:500;color:var(--agent-strong)}
@media (min-width:44rem){
  .facts .fact{grid-template-columns:minmax(0,15rem) minmax(0,1fr);align-items:baseline;gap:.6rem 2rem}
  .facts dt{padding-top:.12em}
}

/* ---------- 04 · handoff steps ---------- */
.steps{list-style:none;margin:0;padding:0}
.step{
  display:grid;gap:.6rem clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:3.25rem minmax(0,1fr);
  padding-block:clamp(1.6rem,3.5vw,2.1rem);
  border-top:var(--rule) solid var(--hair);
}
.step:first-child{border-top:0;padding-top:0}
.step-n{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--ink-soft);padding-top:.42em}
.step-name{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 .55rem;
}
.step-h{margin:0;max-width:44ch}
/* narrow screens: the agent line follows the human one in the content column,
   never in the 3.25rem number rail */
.step-a{grid-column:2;margin:.85rem 0 0;max-width:50ch}
.step-a::before{content:"\2192\00a0";color:var(--agent);opacity:.6}
@media (min-width:56rem){
  .step{grid-template-columns:3.25rem minmax(0,1fr) minmax(0,1fr);align-items:start}
  .step-a{margin-top:.42em;padding-left:1.5rem;border-left:var(--rule) solid var(--hair)}
  .step-a::before{content:none}
}

/* ---------- 05 · cases ---------- */
.cases{list-style:none;margin:0;padding:0}
.case{
  padding-block:clamp(1.75rem,3.5vw,2.25rem);
  border-top:var(--rule) solid var(--hair);
}
.case:first-child{border-top:0;padding-top:0}
.case-k{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 .55rem;
}
.case h3{font-size:1.22rem;letter-spacing:-.012em;margin:0 0 .7rem;max-width:34ch}
.case p{margin:0 0 .7rem;max-width:60ch;text-wrap:pretty}
.case .given{color:var(--ink-soft)}
.case .given b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.case-out{margin:1rem 0 0;max-width:56ch}
.case-out::before{content:"\2192\00a0";color:var(--agent);opacity:.6}
.case-out b{font-weight:500;color:var(--agent-strong)}
@media (min-width:60rem){
  .case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(1.5rem,3.5vw,3.5rem)}
  .case-k,.case h3{grid-column:1 / -1}
  .case-out{margin-top:0;padding-left:1.5rem;border-left:var(--rule) solid var(--hair);align-self:start}
  .case-out::before{content:none}
}

/* ---------- 06 · scope ---------- */
.scope{list-style:none;margin:0;padding:0}
.scope li{padding-block:clamp(1.1rem,2.4vw,1.4rem);border-top:var(--rule) solid var(--hair);max-width:62ch}
.scope li:first-child{border-top:0;padding-top:0}
.scope b{font-weight:500}
.scope span{color:var(--ink-soft)}

/* ---------- 07 · refusals ---------- */
.refuse{list-style:none;margin:0;padding:0}
.refuse li{
  position:relative;padding-block:clamp(1rem,2.2vw,1.3rem);padding-left:2rem;
  border-top:var(--rule) solid var(--hair);max-width:60ch;
}
.refuse li:first-child{border-top:0;padding-top:0}
.refuse li::before{
  content:"\00D7";position:absolute;left:0;top:calc(clamp(1rem,2.2vw,1.3rem) + .05em);
  font-family:var(--mono);font-size:.9rem;color:var(--ink-soft);
}
.refuse li:first-child::before{top:.05em}
.refuse b{font-weight:500}
.refuse span{color:var(--ink-soft)}

/* ---------- 08 · terms ---------- */
.terms{margin:0;padding:0}
.terms .term{
  display:grid;gap:.2rem .5rem;grid-template-columns:1fr;
  padding-block:clamp(1rem,2.2vw,1.3rem);
  border-top:var(--rule) solid var(--hair);
}
.terms .term:first-child{border-top:0;padding-top:0}
.terms dt{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
.terms dd{margin:0;max-width:52ch}
@media (min-width:44rem){
  .terms .term{grid-template-columns:minmax(0,13rem) minmax(0,1fr);align-items:baseline;gap:.6rem 2rem}
  .terms dt{padding-top:.28em}
}

/* ---------- 09 · contact ---------- */
.contact p{margin:0 0 1.4rem;max-width:46ch}
.contact .mail{
  font-family:var(--mono);
  font-size:clamp(1.05rem,.85rem + .9vw,1.55rem);
  text-decoration:none;border-bottom:2px solid var(--agent);padding-bottom:.12em;
  display:inline-block;word-break:break-word;
}
.contact .mail:hover{color:var(--agent)}
.contact .note{font-family:var(--mono);font-size:.8125rem;color:var(--ink-soft);margin:1.6rem 0 0}

/* a defined first step — smaller than "hire a consultant" */
.offer{
  margin:0 0 clamp(1.75rem,4vw,2.25rem);padding:clamp(1.25rem,3vw,1.6rem) 0;
  border-top:var(--rule) solid var(--hair);border-bottom:var(--rule) solid var(--hair);
  max-width:56ch;
}
.offer h3{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--agent);margin:0 0 .8rem;
}
.offer p{margin:0;text-wrap:pretty}
.offer p + p{margin-top:.7rem;color:var(--ink-soft)}

/* ---------- footer ---------- */
.foot{
  border-top:var(--rule) solid var(--hair);
  padding-block:2rem 2.75rem;
  font-family:var(--mono);font-size:.7rem;line-height:1.9;letter-spacing:.04em;color:var(--ink-soft);
  display:flex;flex-wrap:wrap;gap:.4rem 2rem;justify-content:space-between;
}
.foot a{text-decoration:none;border-bottom:var(--rule) solid var(--hair)}
.foot a:hover{color:var(--agent);border-bottom-color:var(--agent)}

/* ---------- entrance: human settles, agent follows ---------- */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(.6rem);animation:rise .62s cubic-bezier(.2,.7,.3,1) forwards}
  .d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.42s}.d4{animation-delay:.55s}
  @keyframes rise{to{opacity:1;transform:none}}

  /* The agent voice is hidden only once JS has taken responsibility for
     revealing it (.js-reveal). Without JS, or if the observer never fires,
     the text is simply there — content never depends on an animation. */
  .js-reveal .step-a,.js-reveal .case-out{
    opacity:0;transform:translateX(-.4rem);
    transition:opacity .5s ease .18s,transform .5s ease .18s;
  }
  .js-reveal .seen .step-a,.js-reveal .seen .case-out{opacity:1;transform:none}
}
:focus-visible{outline:2px solid var(--agent-strong);outline-offset:3px;border-radius:2px}

/* Cross-document transitions: Chrome and Safari fade between pages, Firefox
   simply navigates as before. Nothing depends on it. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none !important}
}

@media print{
  .skip,.proof-band{display:none}
  body{background:#fff;color:#000}
}