/* ============================================================
   SERVICES AS A GRID
   ------------------------------------------------------------
   Seven services were stacked as seven full-width rows of display
   type, which ran to most of a screen on its own for what is really
   a scannable list. A producer reads this to check one thing: is the
   part I need on it. That is a grid job, not a stack.

   Written as its own file on purpose: site.css was owned by another
   agent mid-run, and this needed no markup change, only layout, so
   it could be built and proven in isolation and linked afterwards.

   Overrides the stacked .svc-list / .svc rules in site.css. Load it
   AFTER site.css.
   ============================================================ */

.svc-list{
  margin-top:clamp(2.2rem,5vh,3.4rem);
  display:grid;
  /* Explicit counts, not auto-fit. There are seven services and seven is
     prime, so any auto-fit column count leaves a dead cell at the end that
     reads as a hole. Fixed counts let the last item span the remainder and
     close the block into a clean rectangle at every breakpoint. */
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--line-2);              /* hairlines are the gaps */
  border:1px solid var(--line-2);
  border-radius:10px;
  overflow:hidden;
  border-top:1px solid var(--line-2);
}

.svc{
  /* reset the stacked row */
  display:flex;
  align-items:flex-end;
  gap:0;
  padding:clamp(1.3rem,2.6vw,1.9rem);
  border-bottom:0;
  background:var(--ink);
  min-height:clamp(120px,15vh,168px);
  /* mid-size display, not the full headline scale it had as a row */
  font-variation-settings:"wdth" 100,"wght" 600;
  font-size:clamp(1rem,1.45vw,1.32rem);
  line-height:1.14;
  letter-spacing:-.018em;
  text-wrap:balance;
  position:relative;
  transition:background .4s ease;
}

/* the counter-current drift belongs to a row list, not a grid: in a grid
   it just knocks cells out of alignment with their own hairlines */
.svc:nth-child(odd),
.svc:nth-child(even){transform:none}

.svc:hover{background:#101012}

/* a hairline that draws in her accent on hover, the one moment of colour */
.svc::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.16,.84,.3,1);
}
.svc:hover::after{transform:scaleX(1)}

/* Was eight services in a 4x2, which is why four columns was picked: 4 divides
   8 and three did not. The client cut casting, fixer services and post-production
   in the 2026-08-14 revision, so it is six now, and six divides by three and by
   two. 3 across on the wide view is two rows, 2 across on a phone is three rows.
   Still no spans and still no empty cell, which was the whole point of counting
   the columns against the item count rather than reaching for auto-fit. */
@media (max-width:1099px){
  .svc-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .svc{min-height:104px;padding:1rem;font-size:.95rem}
}

@media (prefers-reduced-motion:reduce){
  .svc,.svc::after{transition:none}
}

/* ---------- icons ----------
   Icon sits to the RIGHT of the label, in white. The cell keeps the exact
   layout and size it had before icons existed: an earlier attempt switched
   .svc to a column and blew the grid apart. Nothing here may change the cell's
   box, only what sits inside it. */
.svc-icon{
  /* 38px, just under 2x the 20px it started at. Sized against the cell rather
     than guessed: the cell is 129px tall with clamp(1.3rem,2.6vw,1.9rem) of
     padding, so ~87px is free. 58 fitted the box but read as oversized against
     the label, so this is the middle ground between that and the original 20.
     The cell's geometry is unchanged, which is the standing constraint here. */
  width:38px;height:38px;flex:0 0 38px;
  margin-left:auto;                 /* pushes it to the right edge of the cell */
  /* .svc is align-items:flex-end, which lines up the icon's BOX with the text
     box. The artwork stops short of the bottom of its 24-unit viewBox, so the
     ink floated above the label's baseline. This drops the box by that slack so
     the drawn bottom sits on the same line as the words. */
  margin-bottom:-7px;
  fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  color:#fff;opacity:.85;
  transition:opacity .4s ease,stroke .4s ease;
}
/* On hover the icon picks up her orange, matching the hairline that draws in
   along the bottom of the cell. --accent is a linear-gradient and cannot be a
   stroke, so this uses --org, which is the orange end of that same gradient. */
.svc:hover .svc-icon{opacity:1;stroke:var(--org)}


/* At 720px the cell drops to 104px tall with 1rem padding, leaving ~72px.
   Scale the icons to suit rather than let them crowd the label. */
@media (max-width:720px){
  /* Smaller, and pulled in off the cell edge. At 38px hard against the padding
     the icon ran into the label on the narrow cells; the right margin keeps it
     clear of the hairline and the left margin guarantees a gap from the words
     however long the label wraps. */
  .svc-icon{width:28px;height:28px;flex:0 0 28px;stroke-width:1.6;
            margin-left:.9rem;margin-right:.35rem;margin-bottom:-5px}
}

/* A touch device cannot hover, so the orange state was unreachable and every
   icon stayed white. Keyed to the input rather than the width, so a tablet gets
   it too. Same --org as the hover state, which is the orange end of --accent. */
@media (hover:none){
  .svc-icon{opacity:1;stroke:var(--org)}
}