/* ------------------------------------------------------------- "Services" (home)
   Copy v5.1 §09 (the section the user calls Services). Our own section in index.html, drawn like the
   template's pricing cards (measured on its Framer markup: sizes, faces, greys, the pill), with three
   cards where the template had two. Placed after the Collection by halfsecond-collection.js, played
   by halfsecond-services.js: an opening (the title and the first card, on a pinned stage), then the
   two other cards in the flow, then a closing note. The template's own Pricing is hidden
   (halfsecond-integration.css).

   The template's greys: #91908e for labels, rules and the small titles; #fafafa / #fff for text. */
.hs-services {
  --sv-grey: rgb(145, 144, 142);
  position: relative;
  z-index: 1;
  align-self: stretch;                       /* Framer's column centres its children */
  padding: clamp(80px, 10vw, 140px) 36px clamp(96px, 11vw, 160px);
  background: #000;
  color: rgb(250, 250, 250);
}
/* until it is in place (after the Collection): out of the flow, unseen */
html.js .hs-services:not([data-hs-placed]) { position: absolute; left: 0; right: 0; visibility: hidden; }
.hs-services__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* head: the template's Pricing header (a rule, then the title on the right two thirds) */
.hs-services__head { border-top: 1px solid var(--sv-grey); padding-top: clamp(56px, 9.7vw, 140px); }
.hs-services__title {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: calc((100% - 24px) / 3 + 24px);
  font-family: var(--hs-title);
  font-weight: 600;
  font-size: 128px;
  line-height: .9;
  letter-spacing: -0.04em;
}
/* --------------------------------------------------------------- the cards
   Desktop: a third (the marks) and two thirds (the card), the side alternating like the template's
   two plans; inside, the picture and price on the left, the list and the foot on the right, the other
   way round on the left-hand card (the template mirrored it: its picture stays near the middle). */
.hs-offer { margin-top: 30px; }
.hs-services__head + .hs-offer { margin-top: clamp(64px, 8vw, 120px); }
.hs-offer__row { display: grid; grid-template-columns: 1fr 2fr; column-gap: 30px; align-items: start; }
.hs-offer--left .hs-offer__row { grid-template-columns: 2fr 1fr; }
.hs-offer__marks { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; }
.hs-offer__marks .hs-beam { --beam-w: 40px; color: #fff; }
.hs-offer--right .hs-offer__card { grid-column: 2; grid-row: 1; }
.hs-offer--left .hs-offer__card { grid-column: 1; grid-row: 1; }
.hs-offer__card { min-width: 0; }

.hs-offer__title {
  margin: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--sv-grey);
  font-family: var(--hs-title);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: var(--sv-grey);
}
.hs-offer__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 30px;
  padding-top: 32px;
}

.hs-offer__price { display: flex; align-items: center; gap: 20px; }
@media (min-width: 1200px) { .hs-offer--left .hs-offer__price { order: 2; } }
/* the symbol's place (the template's round picture); the symbol itself is .hs-offer__logo, which the
   script lifts to the middle of the screen and brings back */
.hs-offer__mark { position: relative; flex: none; width: 185px; height: 185px; }
.hs-offer__logo { position: absolute; inset: 0; display: block; transform-origin: 50% 50%; }
.hs-offer__logo > i {
  position: absolute;
  inset: 12%;
  display: block;
  background-color: #fff;
  -webkit-mask: url(/assets/brand/svg/halfsecond-symbole-noir.svg) center / contain no-repeat;
          mask: url(/assets/brand/svg/halfsecond-symbole-noir.svg) center / contain no-repeat;
  transition: transform 1s cubic-bezier(.7, -.5, .25, 1.35);     /* the menu symbol's turn */
}
/* under the cursor it stands up, like the menu's */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html:not(.is-reduced) .hs-offer__card:hover .hs-offer__logo > i { transform: rotate(270deg); }
}

.hs-offer__amount { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.hs-offer__amount > span {
  font-family: var(--hs-text);
  font-weight: 500;
  font-size: 22.08px;
  line-height: 1.4;
  letter-spacing: -0.04em;
  color: rgb(250, 250, 250);
  white-space: nowrap;
}
.hs-offer__amount > b {
  font-family: var(--hs-title);
  font-weight: 600;
  font-size: 40.8px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgb(250, 250, 250);
  white-space: nowrap;
}
.hs-offer__amount small {
  font-family: var(--hs-text);
  font-weight: 500;
  font-size: 22.08px;
  letter-spacing: -0.04em;
  color: var(--sv-grey);
}

.hs-offer__info { position: relative; display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.hs-offer__list { margin: 0; padding: 0 40px 0 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.hs-offer__list li {
  position: relative;
  padding-left: 21px;
  font-family: var(--hs-text);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.05em;
  color: #fff;
}
.hs-offer__list li::before {                 /* a short line with a light passing through it, left to right, in a loop */
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 11px;
  height: 1.5px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.22) 0 35%, #fff 50%, rgba(255,255,255,.22) 65% 100%) 100% 0 / 300% 100%;
  animation: hs-beam 2.6s linear infinite;
}
.hs-offer__index {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--hs-text);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.05em;
  color: var(--sv-grey);
}
.hs-offer__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--sv-grey);
}
.hs-offer__delivery { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hs-offer__delivery > span {
  font-family: var(--hs-text);
  font-weight: 500;
  font-size: 14.08px;
  line-height: 1.4;
  letter-spacing: -0.05em;
  color: var(--sv-grey);
}
.hs-offer__delivery > b {
  font-family: var(--hs-text);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.04em;
  color: #fff;
}

/* the template's pill: a 2px rule at 25% white; under the cursor the label rolls and the white dot
   grows into a disc that holds the two others, black */
.hs-offer__cta {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 201px;
  height: 42px;
  padding: 10px 17px 10px 20px;
  border-radius: 32px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25);
  color: #fff;
  text-decoration: none;
  font-family: var(--hs-text);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.04em;
}
.hs-offer__cta-label { position: relative; display: block; height: 1.4em; overflow: hidden; }
.hs-offer__cta-label > span { display: block; transition: transform .5s cubic-bezier(.19, 1, .22, 1), opacity .3s; }
.hs-offer__cta-label > span + span { position: absolute; top: 0; left: 0; transform: translateY(100%); opacity: 0; }
.hs-offer__dots { position: relative; flex: none; width: 19px; height: 8px; }
.hs-offer__dots i {
  position: absolute;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sv-grey);
  transition: all .45s cubic-bezier(.19, 1, .22, 1);
}
.hs-offer__dots i:nth-child(1) { left: 0; }
.hs-offer__dots i:nth-child(2) { left: 0; opacity: 0; }
.hs-offer__dots i:nth-child(3) { left: 11px; background: #fff; }
@media (hover: hover) {
  .hs-offer__cta:hover .hs-offer__cta-label > span:first-child { transform: translateY(-100%); opacity: 0; }
  .hs-offer__cta:hover .hs-offer__cta-label > span + span { transform: none; opacity: 1; }
  .hs-offer__cta:hover .hs-offer__dots i:nth-child(3) { left: -2.5px; top: -8px; width: 24px; height: 24px; }
  .hs-offer__cta:hover .hs-offer__dots i:nth-child(1) { left: 3px; top: 1px; width: 6px; height: 6px; background: #000; z-index: 1; }
  .hs-offer__cta:hover .hs-offer__dots i:nth-child(2) { left: 9px; top: 1px; width: 6px; height: 6px; background: #000; opacity: 1; z-index: 1; }
}
.hs-offer__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* the closing note: the template's (a line, then the text), across the whole width; the copy's
   opening argument, then the promise */
.hs-services__note {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: none;
  margin: clamp(64px, 8vw, 120px) 0 0;
}
.hs-services__note .hs-beam { --beam-w: 56px; color: #fff; }
.hs-services__note p {
  margin: 0;
  font-family: var(--hs-text);
  font-weight: 500;
  font-size: 22.08px;
  line-height: 1.4;
  letter-spacing: -0.04em;
  color: var(--sv-grey);
}
.hs-services__note .hs-services__promise { color: rgb(250, 250, 250); }

/* -------------------------------------------------------------- tablet / phone */
@media (max-width: 1199.98px) {
  .hs-services__title { margin-left: calc((100% - 24px) / 4 + 24px); font-size: 92.8px; }
  .hs-offer__row,
  .hs-offer--left .hs-offer__row { grid-template-columns: minmax(0, 1fr); }
  .hs-offer__marks { display: none; }
  .hs-offer--right .hs-offer__card,
  .hs-offer--left .hs-offer__card { grid-column: 1; }
  .hs-offer__body { grid-template-columns: 177px minmax(0, 1fr); }
  .hs-offer__price { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hs-offer__mark { width: 152px; height: 152px; }
  .hs-offer__amount > b { font-size: 40px; }
  .hs-offer__cta { width: 256px; }
}
@media (max-width: 809.98px) {
  .hs-services__title,
  .hs-services__note { margin-left: 0; }
  .hs-services__title { font-size: clamp(48px, 18vw, 76.8px); }
  .hs-offer__body { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .hs-offer__price { flex-direction: row; align-items: center; gap: 20px; }
  .hs-offer__mark { width: 140px; height: 140px; }
  .hs-offer__amount > b { font-size: 33.6px; line-height: 1.2; }
  .hs-offer__info { gap: 26px; }
  .hs-offer__foot { flex-direction: column; align-items: stretch; gap: 24px; }
  .hs-offer__cta { width: 100%; }
}

/* ---------------------------------------------------- played (halfsecond-services.js)
   The opening has a runway and its stage is pinned for it: the symbol starts alone in the middle of
   the screen, turns as it shrinks into its place while the first card rises to it (--hs-rise, in
   px), then the title comes in above (--hs-head). The other cards are in the flow: their symbol
   slides in from the middle as the card comes up (--in on each card: the title, then the price,
   then the list and the foot). On a screen too short for the title and the first card together
   (hs-open-off), the opening is not pinned: the first card comes in like the others. */
.hs-services.is-live { padding-top: 0; }
/* the nav bar's "Prices": where the runway ends, i.e. the opening's last screen (the stage has just
   let go: the title and the first card in place). On a screen where the opening is not pinned, the
   first card is in the flow and this lands near the top of it. */
.hs-services__open { position: relative; }
.hs-services__anchor {
  position: absolute;
  left: 0;
  top: max(0px, calc(100% - 100svh));
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.hs-services.is-live:not(.hs-open-off) .hs-services__open { height: calc(100svh + 130svh); }
.hs-services.is-live:not(.hs-open-off) .hs-services__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hs-services.is-live:not(.hs-open-off) .hs-services__head { padding-top: clamp(20px, 3vh, 40px); }
.hs-services.is-live:not(.hs-open-off) .hs-services__head + .hs-offer { margin-top: clamp(24px, 4vh, 56px); }
/* the cards after it follow right under the first one as the stage lets go (measured by the script) */
.hs-services.is-live:not(.hs-open-off) .hs-services__open + .hs-offer { margin-top: var(--hs-follow, 30px); }
.hs-services.is-live:not(.hs-open-off) .hs-services__head {
  opacity: var(--hs-head, 1);
  transform: translate3d(0, calc((1 - var(--hs-head, 1)) * 24px), 0);
}
.hs-services.is-live:not(.hs-open-off) .hs-offer--first .hs-offer__row { transform: translate3d(0, var(--hs-rise, 0px), 0); }
.hs-services.is-live .hs-offer__logo { will-change: transform; }
.hs-services.is-live .hs-offer__title { --a: clamp(0, calc(var(--in, 1) * 3), 1); }
.hs-services.is-live .hs-offer__amount { --a: clamp(0, calc((var(--in, 1) - .2) * 3), 1); }
.hs-services.is-live .hs-offer__info { --a: clamp(0, calc((var(--in, 1) - .4) * 3), 1); }
.hs-services.is-live .hs-offer__marks { --a: clamp(0, calc((var(--in, 1) - .55) * 3), 1); }
.hs-services.is-live :is(.hs-offer__title, .hs-offer__amount, .hs-offer__info, .hs-offer__marks) {
  opacity: var(--a);
  transform: translate3d(0, calc((1 - var(--a)) * 18px), 0);
}
/* the stage's empty box may lie over the next card for a moment as it lets go: only its content
   takes clicks */
.hs-services.is-live .hs-services__stage { pointer-events: none; }
.hs-services.is-live .hs-services__stage > * { pointer-events: auto; }
/* until it has come in, a card takes no clicks; reached with the keyboard, it shows at once */
.hs-services.is-live .hs-offer:not([data-shown]) .hs-offer__card { pointer-events: none; }
.hs-services.is-live .hs-offer:focus-within { --in: 1 !important; }

/* the way to the Prices page: under each list, and under the closing note */
.hs-offer__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: #fff;
  font-family: var(--hs-text, 'Satoshi', system-ui, sans-serif);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -.02em;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, .4);
  transition: text-decoration-color .3s ease;
}
.hs-offer__more:hover { text-decoration-color: #fff; }
.hs-offer__more .hs-arrow, .hs-services__prices .hs-arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hs-services__prices {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: 8px;
  padding: 0 24px;
  height: 52px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-family: var(--hs-text, 'Satoshi', system-ui, sans-serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -.02em;
  text-decoration: none;
  transition: transform .5s cubic-bezier(.19, 1, .22, 1);
}
@media (hover: hover) { .hs-services__prices:hover { transform: scale(1.03); } }

/* every call on a black ground is white (the user's rule, 2026-10-15): the pill filled white,
   its label black; under the cursor the black dot grows into a disc holding the two others, white */
.hs-offer__cta { background: #fff; color: #000; box-shadow: none; }
.hs-offer__dots i:nth-child(1) { background: rgba(0, 0, 0, .35); }
.hs-offer__dots i:nth-child(3) { background: #000; }
@media (hover: hover) {
  .hs-offer__cta:hover .hs-offer__dots i:nth-child(1),
  .hs-offer__cta:hover .hs-offer__dots i:nth-child(2) { background: #fff; }
}