/* KAWEN — Services.
   Loaded only by services.html. css/main.css and css/objects.css are left
   byte-identical so the index.html and objects.html pixel baselines hold.
   Grounds run ink → paper → cobalt → ink, inside the §4 palette. Cobalt is
   used as a flat environment, never as a gradient, and text on it is always
   full-strength paper: #F4F0E7 on #2254FF measures 4.89:1, so any opacity
   reduction there would fall through the AA floor. */

.page-services{
  --cobalt:#2254FF;
  --gutter:clamp(20px,5vw,72px);
  --hair:rgba(9,10,12,.16);
  background:var(--ink);
  color:var(--paper);
}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- nav: in flow, over the ink masthead ---------- */
.nav-flow{position:static;padding:calc(22px + env(safe-area-inset-top)) var(--gutter) 0}
.page-services .nav-links a{opacity:.6}
.page-services .nav-links a:hover{opacity:1}
.page-services .nav-links a[aria-current="page"]{opacity:1;
  border-bottom:2px solid var(--acid);padding-bottom:3px}
@media (max-width:740px){.page-services .nav-links a{display:inline}}

/* ---------- masthead (ink) ---------- */
.svc-masthead{padding:clamp(52px,8vh,96px) var(--gutter) clamp(64px,10vh,116px)}
.chapter-on-ink{color:rgba(244,240,231,.55)}
.svc-masthead h1{font-weight:700;font-size:clamp(42px,6.4vw,100px);line-height:.94;
  letter-spacing:-.024em}
.svc-masthead .ar-display{margin-top:22px;font-family:var(--sans-ar);font-weight:500;
  font-size:clamp(20px,2vw,30px);color:rgba(244,240,231,.72)}
.svc-masthead .lede{margin-top:32px;max-width:56ch;
  font-size:clamp(16px,1.25vw,18px);line-height:1.55;color:rgba(244,240,231,.74)}

/* ---------- the three services (paper) ---------- */
.offer{background:var(--paper);color:var(--ink);border-top:3px solid var(--acid);
  padding:clamp(10px,2vh,26px) var(--gutter) clamp(56px,9vh,104px)}
.svcs{list-style:none}

/* Asymmetric two-column editorial band, not a card: the identity hangs in the
   wide column, the job card sits in the narrow one, and the body copy runs
   under the identity at reading measure. */
.svc{display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  column-gap:clamp(28px,5vw,88px);
  grid-template-areas:"head spec" "body note";
  border-top:1px solid rgba(9,10,12,.28);
  padding:clamp(38px,6vh,64px) 0 clamp(34px,5vh,56px)}
.svc:first-child{border-top:0}
.svc-head{grid-area:head;display:flex;align-items:baseline;
  align-self:start;                       /* hug the title: a stretched head drops .svc-ar */
  gap:clamp(16px,2.4vw,34px)}
.svc-i{font-family:var(--mono);font-size:13px;letter-spacing:.14em;
  color:rgba(9,10,12,.5);padding-top:8px;flex:none}
.svc-head h3{font-weight:700;font-size:clamp(30px,3.4vw,52px);
  letter-spacing:-.02em;line-height:1.02}
.svc-lead .svc-head h3{font-size:clamp(36px,4.6vw,70px)}
.svc-ar{align-self:flex-end;font-family:var(--sans-ar);font-size:clamp(15px,1.3vw,19px);
  color:rgba(9,10,12,.55);white-space:nowrap;text-align:left}

/* job card */
.svc-spec{grid-area:spec;display:grid;gap:10px;align-content:start;padding-top:9px}
.svc-spec > div{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;border-bottom:1px solid var(--hair);padding-bottom:8px}
.svc-spec dt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(9,10,12,.5)}
.svc-spec dd{font-family:var(--mono);font-size:13px;text-align:right}
.svc-spec .is-pending{color:rgba(9,10,12,.55)}
.svc-spec .is-next{font-weight:500;box-shadow:inset 0 -.55em 0 var(--acid)}
/* Session H1: the one service that is actually open. Same acid underline as
   .is-next — acid is an accent here, not a ground (CLAUDE.md section 4). */
.svc-spec .is-open{font-weight:600;box-shadow:inset 0 -.55em 0 var(--acid)}

.svc-body{grid-area:body;padding-top:clamp(20px,3vh,30px)}
.svc-body p{font-size:clamp(16px,1.2vw,18px);line-height:1.55;
  color:rgba(9,10,12,.74);max-width:44ch}
.svc-lead .svc-body p{font-size:clamp(17px,1.45vw,21px);color:rgba(9,10,12,.82)}

.svc-note{grid-area:note;margin-top:clamp(20px,3vh,30px);align-self:start;
  border-left:2px solid rgba(9,10,12,.22);padding-left:16px}
.svc-note p{font-size:15px;line-height:1.55;color:rgba(9,10,12,.66);max-width:42ch}
.svc-note-hot{border-left-color:var(--acid)}
.svc-note-hot p{color:rgba(9,10,12,.78)}
.svc-link{margin-top:16px}
.svc-link a{border-bottom:2px solid var(--ink);padding-bottom:4px;
  display:inline-flex;gap:8px;font-weight:600;font-size:15px;
  transition:border-color .15s}
.svc-link a:hover{border-color:var(--acid)}
.svc-link a:hover .arrow{transform:translateX(4px)}

/* ---------- not offered yet (cobalt) ---------- */
.notyet{background:var(--cobalt);color:var(--paper);
  padding:clamp(64px,10vh,116px) var(--gutter) clamp(70px,11vh,124px)}
.chapter-on-cobalt{color:var(--paper);opacity:.82}
.notyet h2{font-weight:700;font-size:clamp(36px,4.6vw,72px);letter-spacing:-.02em;
  line-height:1.0}
.notyet-ar{margin-top:16px;font-family:var(--sans-ar);font-weight:500;
  font-size:clamp(19px,1.8vw,27px);color:var(--paper)}
.notyet-line{margin-top:26px;max-width:52ch;font-size:clamp(16px,1.2vw,17px);
  line-height:1.55;color:var(--paper)}

.ledger{margin-top:clamp(40px,6vh,64px);border-top:1px solid rgba(244,240,231,.45)}
.led{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(20px,3vw,44px);align-items:baseline;
  border-bottom:1px solid rgba(244,240,231,.28);padding:20px 0}
.led dt{font-weight:700;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.008em}
.led-what{font-size:15px;line-height:1.5;color:var(--paper)}
.led-state{font-family:var(--mono);font-size:13px;line-height:1.5;
  color:var(--paper)}

/* ---------- what has to happen first (ink) ---------- */
.svc-close{background:var(--ink);color:var(--paper);
  padding:clamp(64px,10vh,116px) var(--gutter) clamp(76px,12vh,140px)}
.close-steps{list-style:none;display:grid;gap:clamp(32px,4vw,64px);
  grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px;max-width:1100px}
.close-steps li{border-top:1px solid rgba(244,240,231,.22);padding-top:20px}
.p-index{font-family:var(--mono);font-size:13px;letter-spacing:.18em;color:var(--acid)}
.close-steps h3{margin-top:16px;font-weight:700;font-size:clamp(21px,2vw,29px);
  letter-spacing:-.01em}
.close-steps li p:last-child{margin-top:12px;font-size:15px;line-height:1.55;
  color:rgba(244,240,231,.7);max-width:38ch}
.close-back{margin-top:clamp(48px,7vh,84px);display:flex;flex-wrap:wrap;
  gap:16px 40px;font-weight:600;font-size:17px}
.close-back a{border-bottom:2px solid var(--paper);padding-bottom:5px;
  display:inline-flex;gap:8px;transition:border-color .15s}
.close-back a:hover{border-color:var(--acid)}
.close-back a:hover .arrow{transform:translateX(4px)}

/* ---------- tablet ---------- */
@media (max-width:1080px){
  .svc{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
  .svc-lead .svc-head h3{font-size:clamp(32px,4.4vw,54px)}
  .led{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
    grid-template-areas:"name what" ". state";row-gap:8px}
  .led dt{grid-area:name}
  .led-what{grid-area:what}
  .led-state{grid-area:state}
}

/* ---------- mobile ---------- */
@media (max-width:740px){
  .svc{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"head" "spec" "body" "note";
    padding:30px 0 28px}
  .svc-head{display:block}
  .svc-i{padding-top:0;margin-bottom:10px}
  .svc-head h3{font-size:30px}
  .svc-lead .svc-head h3{font-size:34px}
  .svc-head h3 br{display:none}
  .svc-ar{margin-top:8px;white-space:normal}
  .svc-spec{margin-top:22px;padding-top:0}
  .svc-body p,.svc-note p{max-width:none}
  .notyet h2 br{display:none}
  .led{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"name" "what" "state";row-gap:7px}
  .close-steps{grid-template-columns:minmax(0,1fr)}
  .close-steps li p:last-child{max-width:none}
}

/* ---------- landscape phones ---------- */
@media (min-width:741px) and (max-height:480px){
  .svc-masthead{padding-top:clamp(36px,6vh,64px)}
}

/* ---------- reduced motion: nothing on this page animates ---------- */