/* ============================================================
   GROWMARK — service pages (branding, websites, creative campaigns)
   One service a page, read top to bottom: the hero (what it is, the
   numbers it is measured by, its plaster object, the way in), the
   selected work, what it covers, how it works, the other services,
   the Q&A and the close on carbon, then the home page's footer.
   Each service has one of the plaster renders: the cavalier statue
   (Branding), the castle (Websites), the astrolabe (Creative
   Campaigns). They were rendered on pure white, so they are laid on
   the paper with multiply: the white drops out and only the object
   and its shading stay, as if cut out. From the home page: the grey
   chips (#who, How it works), the bracketed address that copies, the
   line whose underline sweeps, the dot arrow. Everything reads the
   frame tokens and the shared .btn, .tlink, .eyebrow, .display, .h2,
   .h3 and .role__tag.
   ============================================================ */

/* the nav has no ground of its own here (the user): the page shows
   through it, also once the careers script marks it solid */
.service-page .nav,
.service-page .nav[data-solid]{background:transparent}

/* the renders' white is the paper's, whatever the paper is */
.svc-hero__img,.svc-rel__img{mix-blend-mode:multiply}

/* ---------------------------- chips ------------------------ */

/* the home page's How it works icons: their dots step one pitch */
.dots{display:block;overflow:visible}
.dots__move{transition:transform var(--dur-2) var(--ease)}

/* the grey chip over a phrase (the home page's #who and How it works
   chips): ink on hover. It wraps with its phrase, the slab cloned on
   each line */
.svc-chip{
  --chip:#EFF0F5;
  --chip-icon:#838591;
  padding:0 .12em .02em;
  background:var(--chip);
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
  transition:background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.svc-chip__icon{
  display:inline-block;
  width:20px;
  height:20px;
  margin-left:.18em;
  vertical-align:-.2em;
  color:var(--chip-icon);
  transition:color var(--dur-1) var(--ease);
}
.svc-chip:hover{background:var(--ink);color:var(--ground)}
.svc-chip:hover .svc-chip__icon{color:inherit}
.svc-chip:hover .dots__move{transform:translate(var(--mx,0),var(--my,0))}

/* the section label's mark: the dot arrow, small */
.svc-mark{display:inline-block;width:6px;height:auto;margin-right:10px;vertical-align:-1px;color:var(--ink)}

/* ---------------------------- sections --------------------- */

.svc{padding-block:clamp(52px,6.5vw,88px);border-top:1px solid var(--line)}

/* a section's head: the label over the heading, on the left column */
.svc__head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(32px,4.5vw,56px);max-width:44rem}
.svc__head .h2{margin:0}
.svc__note{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted);max-width:36em}

/* ---------------------------- hero ------------------------- */

/* Two columns, the first screen tall (the user's layout, 2026-10-30):
   the label at the top left, then the title, the description and the
   way in together below it; the object large on the right, out to the
   page's edge, standing on the foot line's rule (its top always in
   frame under the nav, only its base runs off). */
.svc-hero{padding-top:clamp(20px,2.4vw,36px);padding-bottom:0;border-top:0}
.svc-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,3vw,48px);
  /* the screen under the band (37), the nav (~70) and the foot line (~56) */
  --hero-h:clamp(480px,calc(100svh - 190px),800px);
  min-height:var(--hero-h);
}
.svc-hero__left{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:48px;
  min-width:0;
  padding-bottom:clamp(40px,6vw,96px);
}
/* the H1 is the search words, set as the label */
.svc-hero__h1{margin:0;color:var(--ink);max-width:24em}
.svc-hero__copy{display:flex;flex-direction:column;align-items:flex-start}
.svc-hero__line{margin:0;max-width:17em;font-size:clamp(2.2rem,3.5vw,3.6rem);line-height:1.06;text-wrap:balance}
.svc-hero__lead{margin:clamp(18px,1.8vw,26px) 0 0;font-size:clamp(15px,1.2vw,17px);line-height:1.5;color:var(--ink);max-width:34em}
.svc-hero__acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(32px,3.6vw,52px)}
.svc-hero__acts .tlink{color:var(--ink);font-size:15px}
/* the email in place of Start a project (hero and How it works): the
   plain black-text .svc-mail below, at the size of See the work */
.svc-hero__acts .svc-mail{margin:0;font-size:15px;font-weight:500}
/* under "Start where you are" it is the section's headline, close
   under its eyebrow (sized to stay on one line on a phone) */
.svc-how .svc-mail{margin:0;font-size:clamp(1.5rem,3vw,2.4rem);font-weight:400;line-height:1.1;letter-spacing:-.028em}

.svc-hero__obj{
  margin:0 calc(var(--gutter) * -1) 0 0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  min-width:0;
  min-height:0;
}
.svc-hero__img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(var(--hero-h) - 8px);
  object-fit:contain;
  object-position:100% 100%;
  /* its foot fades into the paper, so the cut base reads soft and the
     section under it starts clean */
  -webkit-mask-image:linear-gradient(180deg,#000 68%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 68%,transparent 100%);
}
/* the castle is wide: its column takes the larger share (two-column
   screens only: the selector outranks the phone rule's one column) */
@media (min-width:821px){
  .svc-hero__grid:has(img[src*="castle"]){grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
}
/* the hero ends on the fade, not a rule: the first section under it
   starts without its line */
.svc-hero + .svc{border-top:0}
/* the astrolabe hangs: it floats a little clear of the rule */
.svc-hero__img[src*="astrolabe"]{max-height:calc(var(--hero-h) * .92 - clamp(20px,3vw,40px));margin-bottom:clamp(20px,3vw,40px)}

/* the foot line, as under the home hero: the address that copies on
   the left, the three services in the middle (this one underlined),
   the cue down on the right */
.svc-hero__base{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:12px 24px;
  padding-block:18px;
  border-top:1px solid var(--line);
  font-size:14px;
}
.svc-mail{
  justify-self:start;
  display:inline-flex;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:var(--ink);
  white-space:nowrap;
  cursor:pointer;
}
.svc-mail:focus-visible{outline:1px solid currentColor;outline-offset:3px}
.svc-mail__roll{
  display:inline-grid;
  overflow:hidden;
  padding-bottom:.18em;
  background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;
  transition:background-size var(--dur-3) var(--ease);
}
.svc-mail:hover:not([data-spent]) .svc-mail__roll{background-size:100% 1px}
.svc-mail__roll > span{grid-area:1 / 1;transition:transform .55s var(--ease),opacity .35s var(--ease)}
.svc-mail__done{transform:translateY(100%);opacity:0}
.svc-mail[data-copied] .svc-mail__text{transform:translateY(-100%);opacity:0}
.svc-mail[data-copied] .svc-mail__done{transform:none;opacity:1}

.svc-switch{display:flex;flex-wrap:wrap;justify-content:center;gap:6px clamp(18px,2.6vw,40px);margin:0;padding:0;list-style:none}
.svc-switch a{
  padding-bottom:.18em;
  color:var(--muted);
  background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;
  transition:color var(--dur-1) var(--ease),background-size var(--dur-3) var(--ease);
}
.svc-switch a:hover,.svc-switch a:focus-visible{color:var(--ink);background-size:100% 1px}
/* this page: ink, underlined, and the underline sweeps on hover (the
   home hero's line: out to the right, back in from the left) */
.svc-switch a[aria-current]{color:var(--ink);background-size:100% 1px}
.svc-switch a[aria-current]:hover{animation:lineSweep .8s var(--ease)}
@keyframes lineSweep{
  0%{background-position:100% 100%;background-size:100% 1px}
  45%{background-position:100% 100%;background-size:0 1px}
  45.01%{background-position:0 100%;background-size:0 1px}
  100%{background-position:0 100%;background-size:100% 1px}
}
.svc-cue{justify-self:end;display:inline-flex;color:var(--ink)}
.svc-cue svg{width:10px;height:14px;transition:transform var(--dur-2) var(--ease)}
.svc-cue:hover svg{transform:translateY(3px)}

/* ---------------------------- the approach line ------------ */

/* one line, centred, its phrases in pills with the home page's dot
   icons (grafit's value line) */
.svc-say{padding-block:clamp(72px,10vw,140px)}
.svc-say__text{
  max-width:30em;
  margin:0 auto;
  font-size:clamp(1.35rem,2.1vw,1.85rem);
  line-height:1.6;
  letter-spacing:-.015em;
  text-align:center;
  text-wrap:balance;
}
.svc-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0 .1em;
  padding:.18em .55em .2em .45em;
  border:1px solid var(--line);
  background:var(--paper);
  font-size:.6em;
  line-height:1.3;
  letter-spacing:0;
  vertical-align:.18em;
  white-space:nowrap;
  transition:border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease);
}
.svc-pill .svc-chip__icon{width:14px;height:14px;margin:0;vertical-align:0}
.svc-pill:hover{border-color:var(--ink);background:#fff}
.svc-pill:hover .dots__move{transform:translate(var(--mx,0),var(--my,0))}

/* ---------------------------- selected work ---------------- */

/* the head: the label, the title and a grey second line under it */
.svc-work__head{max-width:none}
.svc-work__sub{display:block;color:var(--muted);font-family:var(--sans);font-size-adjust:none;letter-spacing:-.028em}
/* the cards: the picture the whole card, its line over the top and a
   foot row (what it is, and the name), on a shade that keeps the
   white words legible (grafit's work cards) */
.svc-work__grid{
  display:grid;
  grid-template-columns:repeat(var(--n,3),minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px);
  margin:0;
  padding:0;
  list-style:none;
}
.svc-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  aspect-ratio:var(--card,4 / 5);
  padding:clamp(18px,1.8vw,26px);
  overflow:hidden;
  color:#fff;
  background:var(--carbon);
  isolation:isolate;
}
.svc-work__grid[style*="--n:2"]{--card:5 / 4}
.svc-work__grid[style*="--n:1"]{--card:16 / 10}
.svc-card__img{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--ease-soft);
}
.svc-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,9,.55) 0%,rgba(10,10,9,0) 38%,rgba(10,10,9,0) 60%,rgba(10,10,9,.6) 100%);
}
.svc-card:hover .svc-card__img{transform:scale(1.04)}
/* the storefront and a still beside it (the user, 2026-11-06: "reduce
   the width and add imagrey on the right"): columns in the two
   pictures' proportions (16:10, 4:3) so they stand the same height */
.svc-work__grid--duo{grid-template-columns:minmax(0,1.6fr) minmax(0,1.3416fr)}
.svc-work__grid--duo .svc-card{--card:16 / 10}
.svc-work__still{position:relative;overflow:hidden;background:var(--carbon)}
.svc-work__still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:820px){
  .svc-work__grid--duo{grid-template-columns:minmax(0,1fr)}
  .svc-work__still{aspect-ratio:1889 / 1408}
}
.svc-card__line{max-width:16em;font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.3;letter-spacing:-.01em}
.svc-card__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;font-size:12.5px;letter-spacing:.01em}
.svc-card__name{font-size:clamp(1rem,1.3vw,1.25rem);font-weight:500;letter-spacing:-.01em}

/* ---------------------------- what it covers: the cards ---- */

/* After grafit's work cards: one row of tall cards, slightly rounded,
   the words big at the top and the number and the name along the foot.
   The first card is lit, with the page's plaster close-up rising from
   its foot; the rest stand on dark stone grounds in the site's own
   greys (the one accent stays reserved for metrics). */
.bcards{
  display:grid;
  grid-template-columns:repeat(var(--n,5),minmax(0,1fr));
  gap:clamp(12px,1.2vw,18px);
  margin:0;
  padding:0;
  list-style:none;
}
.bcard{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
  min-width:0;
  height:clamp(300px,26vw,400px);
  padding:clamp(20px,1.8vw,26px);
  overflow:hidden;
  border-radius:6px;
  isolation:isolate;
  --ink:var(--paper);
  --muted:var(--muted-on-carbon);
  color:var(--ink);
  background:var(--ground-card);
}
.bcards[style*="--n:4"] .bcard{height:clamp(300px,30vw,440px)}
.bcard--g1{
  --ink:var(--carbon);
  --muted:var(--muted-on-paper);
  --ground-card:radial-gradient(90% 80% at 60% 40%,#ffffff 0%,#e4e3df 85%);
}
.bcard--g2{--ground-card:linear-gradient(165deg,#3b3a37 0%,#1a1918 55%,#0d0d0c 100%)}
.bcard--g3{--ground-card:linear-gradient(195deg,#5a524a 0%,#26221f 50%,#100f0e 100%)}
.bcard--g4{--ground-card:linear-gradient(170deg,#2c3034 0%,#141618 60%,#0a0b0c 100%)}
.bcard--g5{--ground-card:linear-gradient(185deg,#6d6c68 0%,#2a2a28 52%,#121211 100%)}
.bcard__text{
  position:relative;
  z-index:1;
  margin:0;
  max-width:16em;
  font-size:clamp(1.05rem,1.45vw,1.35rem);
  line-height:1.3;
  letter-spacing:-.015em;
  text-wrap:pretty;
}
.bcard__foot{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
}
.bcard__n{font-size:13px;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums}
.bcard__name{margin:0;font-size:clamp(1rem,1.25vw,1.2rem);font-weight:500;letter-spacing:-.015em;text-align:right}
/* the lit card's object: its close-up rising from the foot, faded at
   its cut edge, under the words */
.bcard__img{
  position:absolute;
  right:6%;
  bottom:52px;
  z-index:0;
  width:auto;
  height:calc(78% - 52px);
  max-width:88%;
  object-fit:contain;
  object-position:100% 100%;
  mix-blend-mode:multiply;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%),linear-gradient(180deg,#000 70%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 24%),linear-gradient(180deg,#000 70%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
  transition:transform 1.2s var(--ease-soft);
  transform-origin:100% 100%;
}
/* a lift under the pointer */
.bcard{transition:transform .6s var(--ease-soft)}
.bcard:hover{transform:translateY(-4px)}
.bcard:hover .bcard__img{transform:scale(1.03)}

/* ---------------------------- how it works ----------------- */

/* on carbon, three steps a row, each its dot icon over its name and
   words (grafit's deliverables) */
/* 2026-11-06: centred; the title gave way to a Start a project button */
.svc-how .svc__head{margin:0 auto clamp(48px,6vw,88px);align-items:center;text-align:center;gap:10px}
.svc-how .svc__head .btn{align-self:center}
.svc-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(36px,4vw,56px) clamp(28px,4vw,64px);
  margin:0;
  padding:0;
  list-style:none;
}
.svc-steps li{display:flex;flex-direction:column;align-items:center;text-align:center}
.svc-steps .svc-chip__icon{width:20px;height:20px;margin:0 0 clamp(28px,3vw,44px);color:var(--muted)}
.svc-steps li:hover .svc-chip__icon{color:var(--ink)}
.svc-steps li:hover .dots__move{transform:translate(var(--mx,0),var(--my,0))}
.svc-steps h3{margin:0 0 16px}
.svc-steps p{margin:0;max-width:26em;font-size:15.5px;line-height:1.6;color:var(--muted)}

/* ---------------------------- the other services ----------- */

/* the two other services, each with its object over its name */
.svc-rel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,32px);margin:0;padding:0;list-style:none}
.svc-rel__card{
  display:flex;
  flex-direction:column;
  gap:12px;
  height:100%;
  padding:24px 28px 28px;
  border:1px solid var(--line);
  background:var(--ground);   /* its own paper: the wipe's clip-path seals the card off from the page's, and the picture's white needs something to multiply onto */
  isolation:isolate;
  transition:border-color var(--dur-1) var(--ease);
}
.svc-rel__card:hover,.svc-rel__card:focus-visible{border-color:var(--ink)}
.svc-rel__art{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  height:clamp(180px,20vw,280px);
  margin:0 0 16px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.svc-rel__img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:50% 100%;
  transition:transform .9s var(--ease);
  transform-origin:50% 100%;
}
.svc-rel__card:hover .svc-rel__img{transform:scale(1.03)}
.svc-rel__card h3{margin:0}
.svc-rel__card p{margin:0 0 auto;font-size:15px;line-height:1.5;color:var(--muted)}
.svc-rel__card .tlink{align-self:flex-start;margin-top:14px;color:var(--ink);font-size:14.5px}

/* ---------------------------- Q&A -------------------------- */

/* The contact page's Q&A (css/contact.css .qa, js/contact-qa.js): the
   title, a line to reach us and who answers on the left, staying in
   view; a question a row on hairlines on the right, each with the
   dotted chevron that flips while its answer is open. */
.qa{display:block}
@media (min-width:900px){
  .qa{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(48px,7vw,112px);align-items:start}
  .qa__side{position:sticky;top:clamp(96px,14vh,140px)}
  .qa .qa__kicker,.qa .qa__title{text-align:left}
  .qa .qa__list{margin-top:0}
}
.qa__kicker{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:center;margin:0}
.qa__title{
  margin:calc(12px - .12em) 0 -.18em;
  padding:.12em 0 .18em;
  overflow:hidden;
  font-size:clamp(1.9rem,3.6vw,2.6rem);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.03em;
  text-align:center;
  text-wrap:balance;
}
.qa__title > span{display:block}
.qa__intro{margin:clamp(18px,2.6vh,26px) 0 0;max-width:28em;font-size:15.5px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.qa__intro .tlink{font:inherit;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.qa__intro .tlink::after{display:none}
.qa__person{display:flex;align-items:flex-start;gap:16px;margin:clamp(28px,4vh,40px) 0 0}
.qa__face{width:56px;height:56px;flex:none;object-fit:cover;object-position:50% 25%;background:#000}
.qa__who{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding-top:2px}
.qa__name{font-size:15.5px;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.qa__role{font-size:13.5px;line-height:1.3;color:var(--muted)}
.qa__in{display:inline-flex;margin-top:6px;color:var(--muted);transition:color var(--dur-1) var(--ease)}
.qa__in:hover,.qa__in:focus-visible{color:var(--ink)}
@media (max-width:899px){
  .qa__intro{margin-inline:auto;text-align:center}
  .qa__person{justify-content:center;margin-bottom:clamp(8px,2vh,16px)}
}
.qa__list{margin-top:clamp(28px,4.5vh,44px)}
.qa__item{border-bottom:1px solid var(--line)}
.qa__item:first-child{border-top:1px solid var(--line)}
.qa__head{font:inherit;margin:0}
.qa__toggle{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:24px;
  padding:20px 4px 20px 0;
  margin:0;
  border:0;
  background:none;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
.qa__q{font-size:clamp(1.08rem,1.7vw,1.25rem);font-weight:400;line-height:1.3;letter-spacing:-.018em;text-wrap:pretty}
.qa__chev{width:14px;height:8px;fill:var(--muted);transition:transform var(--dur-3) var(--ease-soft),fill var(--dur-1) var(--ease)}
.qa__toggle:hover .qa__chev,.qa__item[data-expanded] .qa__chev{fill:var(--ink)}
.qa__item[data-expanded] .qa__chev{transform:rotate(180deg)}
.qa__toggle:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.qa__panel{display:grid;grid-template-rows:1fr}
.qa__clip{min-height:0;overflow:hidden}
.qa__a{max-width:34em;margin:0;padding:0 40px 24px 0;font-size:15.5px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.qa__list:not([data-ready]) .qa__chev{display:none}
.qa__list:not([data-ready]) .qa__toggle{cursor:default}
.qa__list[data-ready] .qa__panel{transition:grid-template-rows .5s var(--ease-soft),visibility 0s linear 0s}
.qa__list[data-ready] .qa__clip{transition:opacity .4s var(--ease) .08s}
.qa__list[data-ready] .qa__item:not([data-expanded]) .qa__panel{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .42s var(--ease-soft),visibility 0s linear .42s}
.qa__list[data-ready] .qa__item:not([data-expanded]) .qa__clip{opacity:0;transition-duration:.2s;transition-delay:0s}
.qa__list[data-still] *{transition:none !important}
/* it rises in the first time it scrolls into view (data-reveal) */
@keyframes q-in{from{opacity:0;transform:translateY(14px)}}
@keyframes q-word{from{transform:translateY(135%)}}
.qa[data-reveal="wait"] .qa__kicker,.qa[data-reveal="wait"] .qa__intro,.qa[data-reveal="wait"] .qa__person,.qa[data-reveal="wait"] .qa__item{opacity:0}
.qa[data-reveal="wait"] .qa__title > span{transform:translateY(135%)}
.qa[data-reveal="in"] .qa__kicker{animation:q-in .7s var(--ease-soft) var(--after,0s) backwards}
.qa[data-reveal="in"] .qa__title > span{animation:q-word 1.1s var(--ease-soft) calc(var(--after,0s) + .06s) backwards}
.qa[data-reveal="in"] .qa__intro{animation:q-in .7s var(--ease-soft) calc(var(--after,0s) + .18s) backwards}
.qa[data-reveal="in"] .qa__person{animation:q-in .7s var(--ease-soft) calc(var(--after,0s) + .26s) backwards}
.qa[data-reveal="in"] .qa__item{animation:q-in .7s var(--ease-soft) backwards;animation-delay:calc(var(--after,0s) + .3s + var(--i,0) * .05s)}
@media (max-width:640px){
  .qa__toggle{column-gap:16px;padding:18px 0}
  .qa__a{padding-right:0;font-size:15px}
}
/* the contact page's closing line, centred under the Q&A: the quick
   word (on the contact page) or the address on the clipboard
   (js/foot.js sets [data-copied] for a moment); it rises in after
   the last row */
.qa__alt{margin:clamp(44px,7vh,72px) 0 0;font-size:14.5px;line-height:1.6;color:var(--muted);text-align:center;text-wrap:balance}
.qa__alt .tlink{font-weight:400;color:var(--ink)}
.qa__alt button.tlink{margin:0;padding:0 0 2px;border:0;background:none;cursor:pointer}
.qa__alt button.tlink:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.qa__alt-done{display:none}
.qa__alt [data-copied] .qa__alt-copy{display:none}
.qa__alt [data-copied] .qa__alt-done{display:inline}
.qa[data-reveal="wait"] + .qa__alt{opacity:0}
.qa[data-reveal="in"] + .qa__alt{animation:q-in .7s var(--ease-soft) calc(var(--after,0s) + .85s) backwards}

/* ---------------------------- smaller screens -------------- */

@media (max-width:1080px){
  /* tablets: a shorter hero, the object kept to it */
  .svc-hero__grid{min-height:0}
  .svc-hero__img{max-height:560px}
}
@media (max-width:820px){
  /* one column: the label, the title, the description and the way in,
     then the object standing on the rule */
  .svc-hero__grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .svc-hero__left{padding-bottom:0;gap:32px}
  .svc-hero__obj{margin:8px 0 0;justify-content:center}
  .svc-hero__img{max-height:min(56vh,440px)}
  /* the castle at the astrolabe's size (the user's ask, 2026-11-07): the
     astrolabe's height (the text column's width x 1105/900), centred, the
     wide castle running off both screen edges */
  .svc-hero__obj:has(img[src*="castle"]){margin:8px calc(var(--gutter) * -1) 0;overflow:hidden}
  .svc-hero__img[src*="castle"]{
    flex:none;
    max-width:none;
    max-height:none;
    height:min(calc((100vw - 2 * var(--gutter)) * 1.2278),552px);
  }
  .svc-hero__base{grid-template-columns:minmax(0,1fr) auto}
  .svc-switch{grid-column:1 / -1;grid-row:1;justify-content:flex-start}
  .svc-work__grid{grid-template-columns:minmax(0,1fr)}
  .svc-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* tablets: the cards three, then two, a row */
@media (max-width:1080px){.bcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.bcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .svc-rel,.svc-steps{grid-template-columns:minmax(0,1fr)}
  .svc-work__grid[style]{--card:4 / 5}
  /* phones: one card under another */
  .bcards{grid-template-columns:minmax(0,1fr)}
  .bcard,.bcards[style*="--n:4"] .bcard{height:auto;min-height:220px}
}

@media (prefers-reduced-motion:reduce){
  .svc-card__img,.svc-rel__img,.bcard__img,.bcard{transition:none}
  .svc-card:hover .svc-card__img,.svc-rel__card:hover .svc-rel__img,.bcard:hover,.bcard:hover .bcard__img{transform:none}
}

/* ---------------------------- intros ------------------------
   js/service-intro.js gives every part of a section its beat (--d)
   and sets [data-in] on the section as it comes up the screen (the
   hero on arrival); once played it takes .svc-rise / .svc-wipe off
   again so hovers keep their own transitions. The hidden states only
   hold under html.svc-io (set in the head, never under reduced
   motion), so without the script the page is simply there.
   Large type is never faded from nothing: the big lines rise word by
   word out of a mask, so they paint at once. */

/* small parts: a short rise into place */
.svc-io .svc-rise{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s var(--ease) var(--d,0ms),
             transform 1.1s var(--ease-soft) var(--d,0ms);
}
.svc-io [data-in] .svc-rise{opacity:1;transform:none}

/* the big lines: each word out of its own mask, its foot first */
.svc-io .svc-w{display:inline-block;clip-path:inset(-.3em -.12em -.14em -.12em)}
.svc-io .svc-w__in{
  display:inline-block;
  transform:translateY(118%);
  transition:transform 1.1s var(--ease-soft) calc(var(--d,0ms) + var(--w,0) * 45ms);
}
.svc-io [data-in] .svc-w__in{transform:none}
.svc-io .svc-wf{opacity:0;transition:opacity .6s var(--ease) calc(var(--d,0ms) + var(--w,0) * 45ms + .35s)}
.svc-io [data-in] .svc-wf{opacity:1}

/* the cards: wiped up from their foot */
.svc-io .svc-wipe{
  clip-path:inset(100% 0 0 0);
  transition:clip-path 1.3s var(--ease-soft) var(--d,0ms),
             transform .6s var(--ease-soft),
             border-color var(--dur-1) var(--ease);
}
.svc-io [data-in] .svc-wipe{clip-path:inset(-24px)}

/* the hero's plaster object fades in where it stands, a beat after the words */
.svc-io .svc-hero__img.svc-rise{
  opacity:0;
  transform:none;
  transition:opacity 1.6s var(--ease) .3s;
}
.svc-io [data-in] .svc-hero__img.svc-rise{opacity:1}