.home-offerings {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,28px);
  margin:20px clamp(12px,3vw,38px) 0;
}

.offering-card {
  position:relative;
  display:grid;
  place-items:center;
  min-block-size:215px;
  border:1px solid #dce2f3;
  border-radius:22px;
  background:linear-gradient(160deg,#f5f7fe,#fff 66%);
  box-shadow:0 8px 18px -15px #25346346;
  transition:background-color .24s,border-color .24s,box-shadow .24s;
}
.offering-card.is-previewing {
  z-index:2;
  border-color:#b2bfed;
  box-shadow:0 13px 28px -18px #354aa66e;
}
.card-control {
  position:absolute;
  z-index:4;
  inset:0;
  inline-size:100%;
  block-size:100%;
  border:0;
  border-radius:inherit;
  background:transparent;
  cursor:pointer;
}
.offering-copy {
  display:grid;
  justify-items:center;
  gap:8px;
  inline-size:100%;
  padding:clamp(18px,2.4vw,28px);
  transition:opacity .18s,transform .25s var(--ease);
}
.offering-copy h3,.offering-copy p { margin:0; }
.offering-copy p { max-inline-size:34ch; }
.offering-icon {
  display:grid;
  place-items:center;
  inline-size:44px;
  block-size:44px;
  margin-block-end:4px;
  border:1px solid #dce1f7;
  border-radius:11px;
  background:linear-gradient(#fff,#edf0ff);
  box-shadow:inset 0 1px 0 #fff,0 3px 7px -4px #24346160;
}

/* Website. The original heading and description become the hero of the miniature page. */
.mini-site-viewport {
  position:relative;
  display:grid;
  align-items:center;
  inline-size:100%;
  min-block-size:100%;
  overflow:hidden;
  border-radius:inherit;
  transition:background-color .25s;
}
.mini-site-page { min-inline-size:0; }
.mini-site-nav {
  position:absolute;
  z-index:1;
  inset:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  block-size:32px;
  padding-inline:13px;
  border-block-end:1px solid #dbe4fc;
  background:#fbfcff;
  color:#334690;
  font-size:.68rem;
  font-weight:780;
  opacity:0;
  transform:translateY(-100%);
  transition:opacity .2s,transform .28s var(--ease);
  pointer-events:none;
}
.mini-site-nav bdi { margin-inline-end:auto; }
.mini-site-nav span,.mini-site-footer span {
  inline-size:16px;
  block-size:3px;
  border-radius:2px;
  background:#a7b5e3;
}
.mini-site-nav span:last-child { inline-size:21px;background:#6b7fd6; }
.mini-site-projects,.mini-site-details,.mini-site-footer { display:none; }
#websites.is-previewing .mini-site-viewport {
  align-items:start;
  background:#f8faff;
}
#websites.is-previewing .mini-site-nav { opacity:1;transform:none; }
#websites.is-previewing .mini-site-page { position:absolute;inset:32px 0 auto; }
#websites.is-previewing .offering-copy {
  position:relative;
  justify-items:start;
  gap:7px;
  padding:16px 14px 15px;
  text-align:start;
  background:radial-gradient(ellipse at 90% 0%,#dce5ff,transparent 72%),#edf2ff;
}
#websites.is-previewing .offering-icon {
  inline-size:22px;
  block-size:22px;
  margin:0;
  border-radius:6px;
}
#websites.is-previewing .offering-icon img { inline-size:13px;block-size:13px; }
#websites.is-previewing .offering-copy h3 { color:#263765;font-size:1.1rem; }
#websites.is-previewing .offering-copy p { color:#3e4c71;font-size:.78rem;line-height:1.36; }
#websites.is-previewing .mini-site-projects {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  padding:10px 12px;
}
.mini-project {
  position:relative;
  block-size:43px;
  border-radius:6px;
  background:var(--project-color);
}
.mini-project::before,.mini-project::after {
  content:"";
  position:absolute;
  inset-inline-start:6px;
  inset-block-end:8px;
  inline-size:51%;
  block-size:2px;
  border-radius:2px;
  background:#3d4f82a3;
}
.mini-project::after { inset-block-end:13px;inline-size:31%; }
.mini-project--sky { --project-color:#dbe8fd; }
.mini-project--indigo { --project-color:#dedcfa; }
.mini-project--peach { --project-color:#f6e6de; }
#websites.is-previewing .mini-site-details {
  display:grid;
  grid-template-columns:30% 1fr;
  align-items:center;
  gap:9px;
  margin:0 12px 9px;
  padding:7px;
  border-radius:6px;
  background:#eef2ff;
}
.mini-site-details span {
  block-size:27px;
  border-radius:4px;
  background:linear-gradient(140deg,#a9baf0,#d5e0fd);
}
.mini-site-details span+span {
  background:
    linear-gradient(#92a1d3,#92a1d3) 0 6px / 38% 3px no-repeat,
    linear-gradient(#c2ccec,#c2ccec) 0 14px / 76% 2px no-repeat,
    linear-gradient(#c2ccec,#c2ccec) 0 20px / 56% 2px no-repeat;
}
#websites.is-previewing .mini-site-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  block-size:25px;
  padding-inline:13px;
  border-block-start:1px solid #dbe4fc;
  background:#f4f7ff;
}
#websites.is-previewing .mini-site-page { animation:mini-page-scroll 3.35s var(--ease) both; }
@keyframes mini-page-scroll {
  0%,20%,100% { transform:translateY(0); }
  49%,72% { transform:translateY(-60px); }
}

/* Software. The same panels slide and resize into a different workspace. */
@property --workspace-color {
  syntax:"<color>";
  initial-value:#7861bf;
  inherits:true;
}
.software-workspace {
  --workspace-color:#7861bf;
  --workspace-time:2s;
  position:absolute;
  inset:11px;
  display:grid;
  grid-template-rows:34px minmax(0,1fr);
  gap:7px;
  padding:7px;
  border:1px solid color-mix(in srgb,var(--workspace-color),white 70%);
  border-radius:15px;
  background:color-mix(in srgb,var(--workspace-color),white 92%);
  opacity:0;
  transform:scale(.96);
  transition:opacity .16s,transform .24s var(--ease);
  pointer-events:none;
}
#custom.is-previewing .offering-copy { opacity:0;transform:scale(.97); }
#custom.is-previewing .software-workspace {
  opacity:1;
  transform:none;
  animation:workspace-palette var(--workspace-time) ease-in-out both;
}
.software-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-inline:9px;
  border-radius:8px;
  background:color-mix(in srgb,var(--workspace-color),white 82%);
  color:color-mix(in srgb,var(--workspace-color),#182039 53%);
  font-size:.75rem;
  font-weight:750;
}
.software-labels { display:grid; }
.software-labels bdi { grid-area:1 / 1; }
.software-labels bdi:not(:last-child) { opacity:0; }
#custom.is-previewing .software-labels bdi:first-child { animation:workspace-label-first var(--workspace-time) both; }
#custom.is-previewing .software-labels bdi:nth-child(2) { animation:workspace-label-second var(--workspace-time) both; }
#custom.is-previewing .software-labels bdi:last-child { animation:workspace-label-last var(--workspace-time) both; }
@keyframes workspace-label-first {
  0%,25% { opacity:1; }
  33%,100% { opacity:0; }
}
@keyframes workspace-label-second {
  0%,32%,70%,100% { opacity:0; }
  39%,62% { opacity:1; }
}
@keyframes workspace-label-last {
  0%,69% { opacity:0; }
  76%,100% { opacity:1; }
}
.software-search {
  position:relative;
  inline-size:35%;
  block-size:14px;
  border-radius:7px;
  background:#fffdff;
}
.software-search::before {
  content:"";
  position:absolute;
  inset:3px auto auto 5px;
  inline-size:6px;
  block-size:6px;
  border:1px solid var(--workspace-color);
  border-radius:50%;
}
.software-search::after {
  content:"";
  position:absolute;
  inset:9px auto auto 10px;
  inline-size:4px;
  block-size:1px;
  background:var(--workspace-color);
  transform:rotate(45deg);
}
.software-canvas { position:relative;min-inline-size:0; }
.software-tile {
  position:absolute;
  left:var(--tile-left);
  top:var(--tile-top);
  width:var(--tile-width);
  height:var(--tile-height);
  display:flex;
  gap:6px;
  padding:9px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--workspace-color),white 78%);
  border-radius:9px;
  background:#fff;
}
.software-tile--tasks {
  --tile-left:63%;--tile-top:0%;--tile-width:37%;--tile-height:55%;
  flex-direction:column;
  justify-content:center;
}
.software-tile--tasks i {
  display:flex;
  align-items:center;
  gap:4px;
  inline-size:100%;
}
.software-tile--tasks i::before {
  content:"";
  flex:none;
  inline-size:6px;
  block-size:6px;
  border:1px solid color-mix(in srgb,var(--workspace-color),white 32%);
  border-radius:2px;
  background:color-mix(in srgb,var(--workspace-color),white 79%);
}
.software-tile--tasks i::after {
  content:"";
  inline-size:60%;
  block-size:3px;
  border-radius:3px;
  background:color-mix(in srgb,var(--workspace-color),white 55%);
}
.software-tile--chart {
  --tile-left:0%;--tile-top:0%;--tile-width:60%;--tile-height:100%;
  align-items:end;
  justify-content:center;
  background:repeating-linear-gradient(to top,#fff 0 17px,color-mix(in srgb,var(--workspace-color),white 86%) 17px 18px);
}
.software-tile--chart i {
  inline-size:11%;
  min-inline-size:4px;
  block-size:var(--bar-height,45%);
  border-radius:3px 3px 0 0;
  background:linear-gradient(color-mix(in srgb,var(--workspace-color),white 27%),var(--workspace-color));
}
.software-tile--chart i:nth-child(2) { --bar-height:60%; }
.software-tile--chart i:nth-child(3) { --bar-height:52%; }
.software-tile--chart i:nth-child(4) { --bar-height:75%; }
.software-tile--chart i:nth-child(5) { --bar-height:89%; }
.software-tile--metric {
  --tile-left:63%;--tile-top:59%;--tile-width:37%;--tile-height:41%;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb,var(--workspace-color),white 84%);
}
.software-tile--metric i {
  inline-size:12%;
  block-size:10px;
  border-radius:50%;
  background:var(--workspace-color);
}
.software-tile--metric i:nth-child(2) { background:color-mix(in srgb,var(--workspace-color),white 28%); }
.software-tile--metric i:nth-child(3) { background:color-mix(in srgb,var(--workspace-color),white 48%); }
#custom.is-previewing .software-tile--tasks { animation:workspace-tasks var(--workspace-time) ease-in-out both; }
#custom.is-previewing .software-tile--chart { animation:workspace-chart var(--workspace-time) ease-in-out both; }
#custom.is-previewing .software-tile--metric { animation:workspace-metric var(--workspace-time) ease-in-out both; }
@keyframes workspace-palette {
  0%,21% { --workspace-color:#bc6c57; }
  43%,56% { --workspace-color:#277d72; }
  81%,100% { --workspace-color:#7861bf; }
}
@keyframes workspace-tasks {
  0%,21% { left:0%;top:0%;width:53%;height:100%; }
  43%,56% { left:0%;top:57%;width:100%;height:43%; }
  81%,100% { left:63%;top:0%;width:37%;height:55%; }
}
@keyframes workspace-chart {
  0%,21% { left:56%;top:0%;width:44%;height:62%; }
  43%,56% { left:0%;top:0%;width:61%;height:53%; }
  81%,100% { left:0%;top:0%;width:60%;height:100%; }
}
@keyframes workspace-metric {
  0%,21% { left:56%;top:66%;width:44%;height:34%; }
  43%,56% { left:64%;top:0%;width:36%;height:53%; }
  81%,100% { left:63%;top:59%;width:37%;height:41%; }
}

/* Automation. The face of the card sits between the back and front tracks. */
#tools {
  --repair-time:4.8s;
  --floor-walk:clamp(32px,6vw,82px);
  --roof-walk:clamp(27px,5vw,64px);
  --lift-drop:96px;
  isolation:isolate;
  background:none;
}
#tools::before {
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(160deg,#f5f7fe,#fff 66%);
  pointer-events:none;
}
#tools .offering-copy { position:relative;z-index:2; }
#tools.is-previewing {
  border-color:#9eb9ae;
  box-shadow:0 11px 25px -18px #3278678c;
}
#tools.is-previewing::before { background:linear-gradient(160deg,#f2faf6,#fffdf9 72%); }
.repair-layer {
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .16s;
  pointer-events:none;
}
.repair-layer--back { z-index:0; }
.repair-layer--front { z-index:3; }
#tools.is-previewing .repair-layer {
  opacity:1;
  animation:repair-cycle var(--repair-time) linear both;
}
@keyframes repair-cycle {
  0%,87% { opacity:1; }
  100% { opacity:0; }
}

.repair-rail {
  position:absolute;
  inset-inline:-23px;
  height:6px;
  border-block-start:1px solid #7e9d92a6;
  background:repeating-linear-gradient(125deg,transparent 0 8px,#a3b8ad76 8px 9px,transparent 9px 13px);
}
.repair-rail--floor { bottom:-18px; }
.repair-rail--ceiling {
  top:-12px;
  inset-inline:11px;
  border-block-start-style:dashed;
  opacity:.78;
}
.repair-lift-track {
  position:absolute;
  right:2px;
  top:-15px;
  height:calc(var(--lift-drop) + 12px);
  border-inline-start:1px dashed #506e63;
}
.repair-lift {
  position:absolute;
  right:-17px;
  top:-51px;
  width:42px;
  padding-block-end:5px;
  transform:translateY(var(--lift-drop));
}
.repair-lift-platform {
  position:absolute;
  inset:auto 0 0;
  height:6px;
  border:1px solid #506e63;
  border-radius:2px;
  background:repeating-linear-gradient(125deg,#cfe4db 0 5px,#eef6e9 5px 8px);
}
.repair-lift-platform::after {
  content:"";
  position:absolute;
  right:3px;
  bottom:-4px;
  width:5px;
  height:5px;
  border:1px solid #506e63;
  border-radius:50%;
  background:#fff;
}
.repair-actor {
  --actor-size:39px;
  --entry-time:.1s;
  --face:1;
  --bot-shell:#d7e8fa;
  --bot-accent:#f5c87e;
  position:absolute;
  width:var(--actor-size);
  height:auto;
  overflow:visible;
  transform-origin:50% 90%;
}
.repair-facing { scale:var(--face) 1;transform-origin:center;transform-box:view-box; }
.repair-actor--foreman { left:-28px;bottom:-12px; }
.repair-actor--rear {
  right:-27px;
  bottom:-12px;
  --face:-1;
  --entry-time:.19s;
  --bot-shell:#ffe5bf;
  --bot-accent:#d7ebd8;
}
.repair-actor--porter {
  --actor-size:35px;
  left:28%;
  top:-47px;
  --entry-time:.22s;
  --bot-shell:#eadffa;
  --bot-accent:#f5c87e;
}
.repair-actor--hanger {
  --actor-size:36px;
  --face:-1;
  --bot-shell:#d7eee4;
  --bot-accent:#f2ba7f;
  position:static;
  display:block;
  margin-inline:auto;
}
.repair-actor--runner {
  --actor-size:34px;
  left:14%;
  bottom:-17px;
  --face:-1;
  --entry-time:.94s;
  --bot-shell:#f8dfda;
  --bot-accent:#dbe8f6;
}
.ink-feet-b,.ink-feet-pass { opacity:0; }
.ink-arm { transform-origin:30px 31px; }
.repair-actor--porter .ink-arm { rotate:53deg; }
.repair-actor--hanger .ink-reach { transform-origin:29px 30px; }

.is-previewing .repair-actor--foreman { animation:foreman-route var(--repair-time) linear both; }
.is-previewing .repair-actor--rear { animation:rear-route var(--repair-time) linear both; }
.is-previewing .repair-actor--porter { animation:porter-route var(--repair-time) linear both; }
.is-previewing .repair-actor--runner { animation:runner-route var(--repair-time) linear both; }
.is-previewing .repair-lift { animation:lift-route var(--repair-time) var(--ease) both; }
.is-previewing .repair-lift-track { animation:cable-route var(--repair-time) var(--ease) both; }

.repair-actor :is(.ink-feet-a,.ink-feet-b,.ink-feet-pass) { --stride:.29s; }
.ink-feet-a { --foot-frame:foot-a; }
.ink-feet-b { --foot-frame:foot-b; }
.ink-feet-pass { --foot-frame:foot-pass; }
.is-previewing .repair-actor:not(.repair-actor--hanger) :is(.ink-feet-a,.ink-feet-b,.ink-feet-pass) {
  animation:
    var(--foot-frame) var(--stride) steps(1,end) var(--entry-time) 3,
    var(--foot-frame) var(--stride) steps(1,end) 3.65s 3;
}
.is-previewing :is(.repair-actor--foreman,.repair-actor--porter) :is(.ink-feet-a,.ink-feet-b,.ink-feet-pass) {
  animation:
    var(--foot-frame) var(--stride) steps(1,end) var(--entry-time) 3,
    var(--foot-frame) var(--stride) steps(1,end) 1.49s 3,
    var(--foot-frame) var(--stride) steps(1,end) 3.65s 3;
}

.is-previewing .repair-actor--foreman .ink-arm {
  animation:hammer-poses .54s .87s steps(1,end),hammer-poses .54s 2.57s steps(1,end) 2;
}
.is-previewing .repair-actor--rear .ink-arm {
  animation:hammer-poses .54s 1.07s steps(1,end) 2;
}
.is-previewing .repair-actor--porter .ink-arm {
  animation:hammer-poses .54s .93s steps(1,end),hammer-poses .54s 2.47s steps(1,end) 2;
}
.is-previewing .repair-actor--hanger .ink-arm {
  animation:hammer-poses .54s 2.02s steps(1,end) 2;
}
.is-previewing .repair-actor--hanger .ink-reach {
  animation:hold-poses .88s .89s steps(1,end) both;
}
.is-previewing .repair-actor--runner .ink-arm {
  animation:tape-poses .76s 2.14s steps(1,end) both;
}

/* Pause at the first repair, walk to the second, then step inside the card. */
@keyframes foreman-route {
  0% { opacity:0;transform:translate(28px,-12px); }
  7% { opacity:1;transform:translate(15px,-2px); }
  17%,30% { opacity:1;transform:none; }
  39% { transform:translate(calc(var(--floor-walk) * .38),-2px); }
  49% { transform:translate(calc(var(--floor-walk) * .82),-1px); }
  53%,74% { opacity:1;transform:translateX(var(--floor-walk)); }
  85% { opacity:1;transform:translate(calc(var(--floor-walk) + 21px),-8px); }
  94%,100% { opacity:0;transform:translate(calc(var(--floor-walk) + 28px),-32px); }
}
@keyframes rear-route {
  0%,4% { opacity:0;transform:translate(-29px,-11px); }
  11% { opacity:1;transform:translate(-16px,-2px); }
  19%,75% { opacity:1;transform:none; }
  86% { opacity:1;transform:translate(-15px,-6px); }
  94%,100% { opacity:0;transform:translate(-32px,-25px); }
}
@keyframes porter-route {
  0%,5% { opacity:0;transform:translate(-28px,27px); }
  12% { opacity:1;transform:translate(-14px,10px); }
  19%,30% { opacity:1;transform:none; }
  39% { transform:translate(calc(var(--roof-walk) * .45),-2px); }
  50%,74% { opacity:1;transform:translateX(var(--roof-walk)); }
  84% { opacity:1;transform:translate(calc(var(--roof-walk) + 13px),7px); }
  94%,100% { opacity:0;transform:translate(calc(var(--roof-walk) + 17px),28px); }
}
@keyframes runner-route {
  0%,19% { opacity:0;transform:translate(42px,-16px); }
  26% { opacity:1;transform:translate(23px,-1px); }
  40%,68% { opacity:1;transform:translateX(-26px); }
  82% { opacity:1;transform:translate(12px,-6px); }
  94%,100% { opacity:0;transform:translate(27px,-25px); }
}
@keyframes lift-route {
  0%,9% { opacity:0;transform:translateY(0); }
  17% { opacity:1;transform:translateY(0); }
  39%,68% { opacity:1;transform:translateY(var(--lift-drop)); }
  81% { opacity:1;transform:translateY(0); }
  94%,100% { opacity:0;transform:translate(-20px,18px); }
}
@keyframes cable-route {
  0%,9% { opacity:0;height:12px; }
  17% { opacity:1;height:12px; }
  39%,68% { opacity:1;height:calc(var(--lift-drop) + 12px); }
  81% { opacity:1;height:12px; }
  94%,100% { opacity:0;height:8px; }
}
@keyframes foot-a { 0%,100% { opacity:1; } 29%,78% { opacity:0; } }
@keyframes foot-b { 0%,28%,78%,100% { opacity:0; } 53% { opacity:1; } }
@keyframes foot-pass { 0%,53%,100% { opacity:0; } 29%,78% { opacity:1; } }
@keyframes hammer-poses {
  0%,100% { transform:rotate(0); }
  22% { transform:rotate(-55deg); }
  49% { transform:rotate(33deg); }
  70% { transform:rotate(13deg); }
}
@keyframes tape-poses {
  0%,100% { transform:rotate(0); }
  26% { transform:rotate(-39deg); }
  61% { transform:rotate(26deg); }
}
@keyframes hold-poses {
  0%,100% { transform:rotate(0); }
  36% { transform:rotate(-10deg); }
  66% { transform:rotate(7deg); }
}

.repair-tool,.repair-spark {
  position:absolute;
  width:21px;
  height:21px;
}
.repair-tool--left {
  --throw-x:-17px;--throw-y:-13px;--turn:-91deg;
  left:-20px;
  top:43%;
  rotate:-22deg;
}
.repair-tool--right {
  --throw-x:16px;--throw-y:-14px;--turn:93deg;
  right:-21px;
  top:46%;
  rotate:21deg;
}
.repair-tool--roof {
  --throw-x:8px;--throw-y:-15px;--turn:120deg;
  left:57%;
  top:-25px;
  rotate:68deg;
}
.repair-tool--floor {
  --throw-x:14px;--throw-y:14px;--turn:100deg;
  right:25%;
  bottom:-16px;
  rotate:57deg;
}
.repair-tool--spool {
  left:-13px;
  bottom:-13px;
  width:20px;
  height:20px;
}
.is-previewing .repair-tool { animation:tool-burst .62s var(--ease) both; }
.is-previewing .repair-tool--right { animation-delay:.04s; }
.is-previewing .repair-tool--roof { animation-delay:.10s; }
.is-previewing .repair-tool--floor { animation-delay:.15s; }
.is-previewing .repair-tool--spool { animation:spool-roll 1.13s .24s ease-out both; }
@keyframes tool-burst {
  0% { opacity:0;transform:translate(calc(var(--throw-x) * -.7),calc(var(--throw-y) * -.7)) scale(.3); }
  19% { opacity:1; }
  58% { opacity:1;transform:translate(var(--throw-x),var(--throw-y)) rotate(var(--turn)); }
  100% { opacity:1;transform:none; }
}
@keyframes spool-roll {
  0% { opacity:0;transform:translateX(48px) scale(.4); }
  23% { opacity:1; }
  75% { opacity:1;transform:translateX(-5px) rotate(-420deg); }
  100% { opacity:1;transform:rotate(-450deg); }
}

.repair-spark { opacity:0; }
.repair-spark--left { left:-12px;bottom:14px; }
.repair-spark--right { right:-11px;bottom:15px; }
.repair-spark--roof { left:calc(28% + 24px);top:-15px; }
.repair-spark--floor { left:calc(var(--floor-walk) - 9px);bottom:13px; }
.repair-spark--roof-next { left:calc(28% + var(--roof-walk) + 24px);top:-15px; }
.repair-spark--lift { right:11px;top:calc(var(--lift-drop) - 32px); }
.is-previewing .repair-spark {
  animation:ink-impact .54s var(--spark-delay,.87s) steps(1,end) var(--spark-hits,1);
}
.repair-spark--right { --spark-delay:1.07s;--spark-hits:2; }
.repair-spark--roof { --spark-delay:.93s; }
.repair-spark--floor { --spark-delay:2.57s;--spark-hits:2; }
.repair-spark--roof-next { --spark-delay:2.47s;--spark-hits:2; }
.repair-spark--lift { --spark-delay:2.02s;--spark-hits:2; }
@keyframes ink-impact {
  0%,48%,67%,100% { opacity:0;transform:scale(.68); }
  49% { opacity:1;transform:scale(1); }
}

.repair-patch {
  position:absolute;
  width:27px;
  height:10px;
  border-block:1px solid #b28d4b81;
  border-radius:2px;
  clip-path:polygon(0 8%,100% 0,94% 24%,100% 48%,94% 72%,100% 100%,0 92%,6% 68%,0 45%,6% 25%);
  background:repeating-linear-gradient(110deg,#e8c879 0 1px,#f6dfa5 1px 4px);
  rotate:var(--patch-angle);
}
.repair-patch--upper { --patch-angle:35deg;top:3px;right:-3px; }
.repair-patch--lower { --patch-angle:-32deg;bottom:5px;left:-5px; }
.is-previewing .repair-patch {
  animation:tape-press .26s var(--tape-delay,1.99s) var(--ease) both,tape-fade .44s 3.94s ease-in forwards;
}
.repair-patch--lower { --tape-delay:2.32s; }
@keyframes tape-press {
  from { opacity:0;transform:translateY(-4px) scaleX(.35); }
  to { opacity:1;transform:none; }
}
@keyframes tape-fade { to { opacity:0; } }

@media(max-width:1000px) {
  .repair-actor { --actor-size:32px; }
  .repair-actor--porter { top:-43px; }
  .repair-actor--foreman { left:-23px; }
  .repair-actor--rear { right:-23px; }
}
@media(max-width:760px) {
  .home-offerings {
    grid-template-columns:1fr;
    max-inline-size:30rem;
    margin-inline:auto;
    padding-inline:30px;
  }
  #tools { margin-block-start:12px; }
}