/* Halfsecond: site-wide additions on top of the Framer export (all pages). */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/site/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/site/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* the template's floating "Get Astra" promo */
[data-framer-name="Remove Me (Remix Button)"] { display: none !important; }

/* ------------------------------------------------------------- nav bar (2026-10-14)
   The header of every page: three parts on one row. The brand at the left, the symbol and the name as
   the old menu had them; a floating bar of four links in the middle of the page; the Contact button
   at the right. It replaces the template's menu (hidden just below) and the name-and-links layer that
   sat on it. The bar is the brand's black, the same on a white ground and on a black one (a hairline
   and a soft shadow keep it from vanishing on black). The brand and the button take the colour of the
   ground behind them, as the old menu did (halfsecond-nav.js samples it: .is-on-light): paper on
   dark, ink on light. Shapes are the symbol's own corner, 17.5% of the height, like the hero's
   buttons. Markup: the <header class="hs-bar"> at the top of each page's <body> (outside React);
   behaviour: halfsecond-nav.js. Phone: the bar folds into a "Menu" button and its links into a sheet. */
[data-framer-name="Menu"] { display: none !important; }      /* the template's menu: gone */

.hs-bar {
  --row: 56px;                                    /* the header's row: the bar's height */
  --item: 44px;                                   /* what sits in the bar, and the button */
  --pad: 6px;
  --S: 36px;                                      /* the brand's symbol; its name follows the kit's lockup */
  --gutter: 36px;
  --expo: cubic-bezier(.19, 1, .22, 1);
  --spin: cubic-bezier(.7, -.5, .25, 1.35);       /* the symbol's turn (the Services' own curve) */
  --spring: linear(0.0000, 0.0140, 0.0505, 0.1024, 0.1641, 0.2313, 0.3007, 0.3698, 0.4369, 0.5007, 0.5605, 0.6157, 0.6661, 0.7117, 0.7525, 0.7889, 0.8209, 0.8490, 0.8735, 0.8947, 0.9129, 0.9285, 0.9417, 0.9529, 0.9623, 0.9702, 0.9767, 0.9820, 0.9864, 0.9899, 0.9928, 0.9950, 0.9968, 0.9982, 0.9993, 1.0000, 1.0006, 1.0010, 1.0013, 1.0014, 1.0015, 1.0015, 1.0015, 1.0014, 1.0013, 1.0013, 1.0011, 1.0010, 1);   /* the old star's entrance (bounce .1) */
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;            /* the middle part is the middle of the page */
  align-items: center;
  height: var(--row);
  padding: 0 var(--gutter);
  pointer-events: none;                           /* only its parts take the clicks, not the strip */
  font-family: 'Satoshi', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.hs-bar *, .hs-bar *::before, .hs-bar *::after { box-sizing: border-box; }
/* it steps up out of the screen as the page goes down, and comes back as it goes up (halfsecond-nav.js) */
.hs-bar { transition: transform .6s var(--expo); }
.hs-bar.is-away {
  transform: translateY(calc(-100% - 28px));
  visibility: hidden;                             /* out of the tab order and the clicks once gone */
  transition: transform .6s var(--expo), visibility 0s .6s;
}
.hs-bar a,
.hs-bar button { font: inherit; text-decoration: none; -webkit-appearance: none; appearance: none; }
.hs-bar a:focus-visible,
.hs-bar button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---- the brand: the symbol, then the name, in the kit's lockup (the name 5.319 S wide and .714 S
   high, set .33 S to the right of the symbol and .146 S down). It comes in as the old star did:
   from nothing, on a spring, the name from its left edge. Hover: the old menu's, the symbol is set
   going (a small wind-up, three quarters of a turn, a small overshoot, upright), and turns back
   when the pointer leaves; on the whole brand, name included. Not on touch, not with reduced motion. */
.hs-brand {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: flex-start;
  gap: calc(var(--S) * .33);
  height: var(--S);
  color: #fff;
  pointer-events: auto;
  transition: color .35s ease;
}
.hs-brand.is-on-light { color: #0a0a0a; }
.hs-brand__symbol,
.hs-brand__name {
  display: block;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  animation: hs-brand-in 1.6s var(--spring) .3s both;
}
.hs-brand__symbol {
  width: var(--S);
  height: var(--S);
  -webkit-mask-image: url(/assets/brand/svg/halfsecond-symbole-noir.svg);
          mask-image: url(/assets/brand/svg/halfsecond-symbole-noir.svg);
  -webkit-mask-position: center;
          mask-position: center;
}
.hs-brand__name {
  width: calc(var(--S) * 5.319);
  height: calc(var(--S) * .714);
  margin-top: calc(var(--S) * .146);
  transform-origin: 0 50%;
  -webkit-mask-image: url(/assets/brand/svg/halfsecond-nom-noir.svg);
          mask-image: url(/assets/brand/svg/halfsecond-nom-noir.svg);
  -webkit-mask-position: left center;
          mask-position: left center;
}
@keyframes hs-brand-in { from { transform: scale(.01); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hs-brand__symbol { transition: transform 1s var(--spin); will-change: transform; }
  .hs-brand:hover .hs-brand__symbol { transform: rotate(270deg); }
}

/* ---- the bar: four links, floating in the middle */
.hs-bar__nav { grid-column: 2; justify-self: center; pointer-events: none; }
.hs-bar__toggle { display: none; }                /* phone only */
.hs-bar__links {
  display: flex;
  align-items: center;
  gap: 2px;
  height: var(--row);
  margin: 0;
  padding: var(--pad);
  list-style: none;
  border-radius: calc(var(--row) * .175);
  background: rgba(10, 10, 10, .94);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
          backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), 0 14px 34px -14px rgba(0, 0, 0, .5);
  pointer-events: auto;
  animation: hs-bar-in 1s var(--expo) .5s both;
}
@keyframes hs-bar-in { from { opacity: 0; transform: translateY(-14px); } }
.hs-bar__links a {
  display: flex;
  align-items: center;
  height: var(--item);
  padding: 0 16px;
  border-radius: calc(var(--item) * .175);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, .72);
  transition: color .25s ease, background-color .25s ease;
}
@media (hover: hover) {
  .hs-bar__links a:hover::before { clip-path: circle(150% at 50% 50%); }
  .hs-bar__links a:hover .hs-bar__roll > span { transform: translateX(60%); opacity: 0; }
  .hs-bar__links a:hover .hs-bar__roll > span + span { transform: none; opacity: 1; }
}
/* 2026-10-18: the links take the hero buttons' hover, inverted for the black bar: a white fill swells
   out of the middle, the label rolls out and its twin (ink) rolls in */
.hs-bar__links a { position: relative; isolation: isolate; overflow: hidden; --cta-on: #0a0a0a; }
.hs-bar__links a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  clip-path: circle(0 at 50% 50%);
  transition: clip-path .55s var(--expo);
}
.hs-bar__links a:focus-visible::before { clip-path: circle(150% at 50% 50%); }
.hs-bar__links a:focus-visible { color: var(--cta-on); }
@media (prefers-reduced-motion: reduce) { .hs-bar__links a::before { transition: none; } }
.hs-bar__links a:focus-visible { outline-color: #fff; outline-offset: -2px; }
.hs-bar__links a[aria-current="page"] { color: #fff; background-color: rgba(255, 255, 255, .14); }

/* ---- the button: the opposite of its ground, as the hero's buttons are (ink on the light hero, paper
   on dark). Hover, the hero buttons' own: the fill swells out of the middle (the ground's opposite
   again, with a ring: on its ground a plain fill would lose its shape), the label rolls out and its
   twin rolls in. */
.hs-bar__cta {
  --cta-bg: #fff;
  --cta-fg: #0a0a0a;
  --cta-fill: #0a0a0a;
  --cta-on: #fff;
  --cta-ring: #fff;
  grid-column: 3;
  justify-self: end;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  height: var(--item);
  padding: 0 20px;
  border-radius: calc(var(--item) * .175);
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .45);
  transition: background-color .35s ease, color .35s ease;
  animation: hs-bar-in 1s var(--expo) .65s both;
}
.hs-bar__cta.is-on-light {
  /* 2026-10-18: the button stays white over every ground (it no longer flips to ink on light sections);
     a hairline keeps its edge on white, the hover is the same swell, fill ink with a ring */
  --cta-bg: #fff;
  --cta-fg: #0a0a0a;
  --cta-fill: #0a0a0a;
  --cta-on: #fff;
  --cta-ring: #0a0a0a;
  box-shadow: 0 0 0 1px rgba(10, 10, 10, .12), 0 14px 34px -14px rgba(0, 0, 0, .35);
}
.hs-bar__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cta-fill);
  clip-path: circle(0 at 50% 50%);
  transition: clip-path .55s var(--expo);
}
.hs-bar__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px var(--cta-ring);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.hs-bar__roll {
  display: inline-grid;
  overflow: hidden;
  padding: .1em .2em;                             /* glyph overhang stays inside the mask */
  margin: -.1em -.2em;
}
.hs-bar__roll > span {
  grid-area: 1 / 1;
  transition: transform .5s var(--expo), opacity .35s ease;
}
.hs-bar__roll > span + span { transform: translateX(-60%); opacity: 0; color: var(--cta-on, #fff); }
@media (hover: hover) {
  .hs-bar__cta:hover::before { clip-path: circle(150% at 50% 50%); }
  .hs-bar__cta:hover::after { opacity: 1; }
  .hs-bar__cta:hover .hs-bar__roll > span { transform: translateX(60%); opacity: 0; }
  .hs-bar__cta:hover .hs-bar__roll > span + span { transform: none; opacity: 1; }
}
/* the keyboard: filled at once, no roll; the one label takes the twin's colour */
.hs-bar__cta:focus-visible { color: var(--cta-on); }
.hs-bar__cta:focus-visible::before { clip-path: circle(150% at 50% 50%); }
.hs-bar__cta:focus-visible::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hs-bar, .hs-bar.is-away { transition: none; }
  .hs-brand__symbol, .hs-brand__name, .hs-bar__links, .hs-bar__cta { animation: none; }
  .hs-bar__cta::before, .hs-bar__cta::after, .hs-bar__roll > span { transition: none; }
}
html.is-reduced .hs-brand__symbol,
html.is-reduced .hs-brand__name,
html.is-reduced .hs-bar__links,
html.is-reduced .hs-bar__cta { animation: none; }

/* ---- tablet: a smaller brand; below 960 the links are set a little tighter, so the bar stays the
   middle of the page without touching the name */
@media (max-width: 1199.98px) {
  .hs-bar { --S: 28px; }
}
@media (max-width: 959.98px) {
  .hs-bar__links a { padding: 0 11px; font-size: 14px; }
}

/* ---- phone: the brand, "Menu" and the button on the row; the four links drop in a sheet under it */
@media (max-width: 809.98px) {
  .hs-bar {
    --row: 44px;
    --item: 44px;
    --S: 26px;
    --gutter: 16px;
    top: max(12px, env(safe-area-inset-top));
    grid-template-columns: 1fr auto auto;
    column-gap: 6px;
  }
  .hs-bar__nav { grid-column: 2; }
  .hs-bar__cta { grid-column: 3; padding: 0 14px; }
  .hs-bar__toggle {
    display: inline-flex;
    align-items: center;
    height: var(--item);
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: calc(var(--item) * .175);
    background: rgba(10, 10, 10, .94);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
            backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), 0 14px 34px -14px rgba(0, 0, 0, .5);
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    animation: hs-bar-in 1s var(--expo) .5s both;
  }
  .hs-bar.is-open .hs-bar__toggle .hs-bar__roll > span { transform: translateX(60%); opacity: 0; }
  .hs-bar.is-open .hs-bar__toggle .hs-bar__roll > span + span { transform: none; opacity: 1; }

  /* the bar's links become the sheet: under the row, as wide as the screen allows, opaque (the page's
     text must not ghost through) */
  .hs-bar__links {
    position: fixed;
    top: calc(max(12px, env(safe-area-inset-top)) + var(--row) + 8px);
    left: 50%;
    width: min(340px, calc(100vw - 24px));
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px;
    border-radius: 12px;
    background: #0a0a0a;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), 0 24px 48px -16px rgba(0, 0, 0, .55);
    animation: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition: opacity .3s ease, transform .5s var(--expo), visibility 0s .5s;
  }
  .hs-bar.is-open .hs-bar__links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition-delay: 0s;
  }
  .hs-bar__links a {
    height: 56px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.035em;
    color: #fff;
  }
  .hs-bar__links li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
}
/* the narrowest phones: the symbol alone */
@media (max-width: 349.98px) {
  .hs-brand__name { display: none; }
}

/* ------------------------------------------------------------ typography
   Titles: Space Grotesk. Text: Satoshi (Fontshare, ITF Free Font License),
   both self-hosted. Framer sets fonts through --framer-font-family on its text
   presets and inline styles; an !important font-family on the text nodes wins
   over both, so the Framer markup itself stays untouched (no hydration change). */
@font-face{font-family:'Satoshi';font-style:normal;font-weight:300 900;font-display:swap;src:url(/assets/site/satoshi-variable.woff2) format('woff2')}
@font-face{font-family:'Satoshi';font-style:italic;font-weight:300 900;font-display:swap;src:url(/assets/site/satoshi-variable-italic.woff2) format('woff2')}

:root {
  --hs-title: 'Space Grotesk', system-ui, sans-serif;
  --hs-text: 'Satoshi', system-ui, sans-serif;
}

/* text: everything Framer renders (zero specificity, so the title rules below always win) */
:where(#main) :where(.framer-text, [data-framer-component-type="RichTextContainer"], input, textarea, select, button, span, a) {
  font-family: var(--hs-text) !important;
}

/* titles: real headings ... */
#main :is(h1, h2, h3, h4, h5, h6),
#main :is(h1, h2, h3, h4, h5, h6) * ,
/* ... and the large display text that Framer sets as paragraphs */
#main .framer-styles-preset-1kgkikj,                 /* figures and prices: 75, 5,490 */
#main .framer-styles-preset-1kgkikj *,
#main .framer-styles-preset-l07hlc,                  /* project names on the cards */
#main .framer-styles-preset-l07hlc *,
#main .framer-rh87h5 .framer-text,                  /* footer wordmark (its layer name now matches other layers) */
#main :is([data-framer-name="Number"], [data-framer-name="Year"], [data-framer-name="Number container"]) span:not(.framer-text *),   /* counters */
#main span[style*="font-size:34px"][style*="font-weight:bold"] {   /* pie chart totals, not their legends */
  font-family: var(--hs-title) !important;
}


/* Footer wordmark: the official "halfsecond." is ~5.22x its size wide, more
   than the column Framer gives it (it was drawn for "Astra"). Keep Framer's
   sizes (180 / 120 / 90px) and shrink only when the column is narrower. */
#main .framer-1h0xgwi { container-type: inline-size; }
#main .framer-rh87h5 .framer-text { --framer-font-size: min(180px, 18.9cqi) !important; }
@media (max-width: 1199.98px) { #main .framer-rh87h5 .framer-text { --framer-font-size: min(120px, 18.9cqi) !important; } }
@media (max-width: 809.98px)  { #main .framer-rh87h5 .framer-text { --framer-font-size: min(90px, 18.9cqi) !important; } }

/* The template pages that are gone (2026-10-14: Agency, Projects): their links in the Framer footer go
   with them. Each link is its own text block, hidden whole so its gap goes too. */
footer [data-framer-component-type="RichTextContainer"]:has(a[href$="/agency"]),
footer [data-framer-component-type="RichTextContainer"]:has(a[href$="/projects"]) { display: none !important; }

/* Framer's scaled-in background photos ("Backphoto") poke 1-3px past the
   viewport edges: clip, so the page never scrolls sideways. clip (unlike
   hidden) creates no scroll container, so sticky elements keep working. */
html, body { overflow-x: clip; }


/* ------------------------------------------------------------ brand logo
   Kit: assets/brand/ (symbole 09). Every template logo is redrawn with the
   kit's SVGs used as masks, so each takes the colour its context already has
   (white on dark, black on light) and Framer's markup stays untouched. */

/* 1. (the menu's star: the menu is gone; the header's brand, .hs-brand, is drawn from the same kit files) */

/* 2. the "Halfsecond *" label above page titles becomes the full logo */
[data-framer-name="Logo and trusted"] [data-framer-name="Logo"] [data-framer-name="Star"] { display: none !important; }
[data-framer-name="Logo and trusted"] [data-framer-name="Logo"] .framer-text {
  position: relative;
  -webkit-text-fill-color: transparent;
}
[data-framer-name="Logo and trusted"] [data-framer-name="Logo"] .framer-text::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 1.1em;
  aspect-ratio: 664.9 / 100;
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask: url(/assets/brand/svg/halfsecond-logo-noir.svg) left center / contain no-repeat;
          mask: url(/assets/brand/svg/halfsecond-logo-noir.svg) left center / contain no-repeat;
}

/* 3. footer: the big typed "Halfsecond" + (R) becomes the official name */
#main .framer-alkkjs { display: none !important; }    /* the (R) badge */
#main .framer-rh87h5 .framer-text {
  position: relative;
  -webkit-text-fill-color: transparent;
}
#main .framer-rh87h5 .framer-text::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 0.7em;                                        /* the name's ascender-to-baseline height */
  aspect-ratio: 531.9 / 71.4;
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask: url(/assets/brand/svg/halfsecond-nom-noir.svg) left center / contain no-repeat;
          mask: url(/assets/brand/svg/halfsecond-nom-noir.svg) left center / contain no-repeat;
}

/* ------------------------------------------------- Collection demo cards
   Copy v5.1 §02. Above each demo: sector (left) and status (right). The
   template's team avatars are gone; its dates now carry the demo's spec
   (pages / motion). Texts come from assets/site/halfsecond-collection.js. */
#proejcts .framer-Beh6A {
  position: relative;                  /* transparent over the ink; stacking: see [data-hs-over] / [data-hs-under] */
  padding-top: 44px !important;        /* room for the label row: taken from the */
  padding-bottom: 8px !important;      /* card's own 52px bottom space, same height */
}
/* The template's team avatars are gone. On desktop their column stays, empty: the demo keeps the
   template's proportions (at 1440px, 628px high rather than 708px) and the card fits the screen. */
@media (max-width: 1199.98px) { #proejcts .framer-Beh6A [data-framer-name="Team avatars"] { visibility: hidden !important; }   /* hidden, not removed: the picture keeps its size */ }
@media (min-width: 1200px)    { #proejcts .framer-Beh6A [data-framer-name="Team avatars"] { visibility: hidden !important; } }

#proejcts .framer-Beh6A::before,
#proejcts .framer-Beh6A::after {
  position: absolute;
  top: 14px;
  font-family: var(--hs-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .25s ease;       /* the way back in, after an overlap */
}
#proejcts .framer-Beh6A::before {        /* sector */
  content: var(--hs-sector, "");
  left: 0;
  color: #fff;
}
#proejcts .framer-Beh6A::after {         /* status */
  content: var(--hs-status, "");
  right: 0;
  padding-left: 16px;
  color: rgba(255, 255, 255, .62);
  background: radial-gradient(circle at 4px 50%, #3f9d6a 3.5px, transparent 4.5px) no-repeat;
}
/* stacking (set by halfsecond-collection.js): while this card's label row passes over an earlier
   card (data-hs-over), or once a later card covers this one (data-hs-under), its texts go at
   once, no fade, so they are never drawn over another card; they fade back in after */
#proejcts .framer-Beh6A[data-hs-over]::before,
#proejcts .framer-Beh6A[data-hs-over]::after,
#proejcts .framer-Beh6A[data-hs-under]::before,
#proejcts .framer-Beh6A[data-hs-under]::after {
  opacity: 0;
  transition: none;
}
/* the spec column of a covered card: visibility, as Framer owns its opacity (inline) */
#proejcts .framer-Beh6A[data-hs-under] > [data-framer-name="Date"] { visibility: hidden; }
@media (min-width: 1200px) {
  /* desktop: the demo sits between the spec column (7% of the card + a 30px gap) and the empty
     avatars column (a 30px gap + 8%): the labels line up with its edges at any width */
  #proejcts .framer-Beh6A::before { left: calc(7% + 30px); }
  #proejcts .framer-Beh6A::after { right: calc(8% + 30px); }
}

/* ------------------------------------------------- Collection: the stack
   A vertical carousel: each demo comes up and stops in the middle of the screen, whole, for a
   while (--hs-card-hold), then the next one comes over it (Framer shrinks the one underneath).
   - Each card fits the screen: at least --hs-card-top above it (the menu, which comes back when
     the visitor scrolls up, is 83px high: its label row stays clear of it) and --hs-card-margin
     below. In the middle of the screen when there is room; on a short screen it gets narrower (its
     proportions are kept) and sits under the menu. Desktop: the label row (44px) and the bottom
     space (8px) plus the demo, 1.7556 times wider than high, which is the card's width less its
     two columns (15% of it: 7% for the spec, 8% for the empty avatars) and their gaps (2 x 30px).
     Tablet: the demo is the card's width, with the spec row under it (30px + 33px).
   - halfsecond-collection.js marks Framer's sticky wrappers (data-hs-stick) and measures a card
     (--hs-card-h): the wrappers then stop in the middle of the screen. The pause is a margin
     before each next card (Framer's shrink transform sits on the wrapper: its box stays the
     template's), and for the last card a space after it, in the stack (data-hs-stack). The script
     also evens the wrappers out (--hs-stick-even), so that all the cards leave together.
   - Framer eased the whole Collection down while the cards were stacked (its offset, from -320px
     to 0): a stuck card slid down and out of the screen. The offset is kept, fixed, as a margin.
     With reduced motion Framer has no offset: nothing to fix.
   The phone keeps the template's list (no stacking there). */
:root { --hs-card-top: 88px; --hs-card-margin: max(32px, 6svh); --hs-card-hold: 30svh; }
@media (min-width: 1200px) {
  #proejcts .framer-Beh6A { max-width: calc(((100svh - var(--hs-card-top) - var(--hs-card-margin) - 52px) * 1.7556 + 60px) / .85); margin-inline: auto; }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  #proejcts .framer-Beh6A { max-width: calc((100svh - var(--hs-card-top) - var(--hs-card-margin) - 115px) * 1.7556); margin-inline: auto; }
}
#proejcts [data-hs-stick] {
  top: max(var(--hs-card-top), calc((100svh - var(--hs-card-h, 0px)) / 2)) !important;
  margin-bottom: var(--hs-stick-even, 0px) !important;
}
#proejcts [data-hs-stick]:not([data-hs-stick="first"]) { margin-top: var(--hs-card-hold) !important; }
#proejcts [data-hs-stack]::after { content: ''; flex: none; height: var(--hs-card-hold); }
html:not(.is-reduced) #proejcts [data-framer-name="Proejcts"] { transform: none !important; margin-top: -320px; }
/* ... but Framer still animates that offset, and its layout animations (Motion's projection) still
   count on it: when a card's hover state changes, as the cards slide under the cursor, Motion
   measured the card as moved by however much the offset had changed, and sprang it back into place
   (a 60-75px jump of the stopped card). The card and its picture's frame never move in the
   template: their transforms are Motion's phantom correction alone. The shrink of a covered card
   is on its wrapper, the hover's dots on their own elements: both untouched. */
#proejcts .framer-Beh6A,
#proejcts .framer-Beh6A .framer-1wnd6y-container { transform: none !important; }

/* Each demo is a Framer video (preload none, no poster, a see-through background, in a see-through
   card): for its first frames on screen, before the video has a picture, the card was empty and
   the card behind showed through it, then the video popped in. Under each video, its first frame
   (assets/site/collection/, the video's own name): the video starts on that very frame, so it takes
   over without a change. The still sits on the video's own frame (.framer-1wnd6y-container), the
   one Framer dims (brightness .75) and enlarges (103%) on hover: still and video always share box,
   crop and filter, hovered or not. Around it, a plain dark ground (also all there is without
   :has()), which never lets the card behind show through. */
#proejcts [data-framer-name="Video container"] { background-color: #050505; }
#proejcts [data-framer-name="Video container"] .framer-1wnd6y-container { background: 50% 50% / cover no-repeat; }
#proejcts [data-framer-name="Video container"] .framer-1wnd6y-container:has(video[src*="la-sirene-loop-22s-web"]) { background-image: url(/assets/site/collection/la-sirene-loop-22s-web.webp); }
#proejcts [data-framer-name="Video container"] .framer-1wnd6y-container:has(video[src*="8aHtXPH5P2elIPIXrC3qPB77w"]) { background-image: url(/assets/site/collection/8aHtXPH5P2elIPIXrC3qPB77w.webp); }
#proejcts [data-framer-name="Video container"] .framer-1wnd6y-container:has(video[src*="fakWYWFdDhXJYs9oZvxfVVjl55c"]) { background-image: url(/assets/site/collection/fakWYWFdDhXJYs9oZvxfVVjl55c.webp); }

/* the date column now carries the spec */
#proejcts .framer-Beh6A :is([data-framer-name="Date container"], [data-framer-name="Year container"]) .framer-text {
  position: relative;
  -webkit-text-fill-color: transparent;
}
#proejcts .framer-Beh6A :is([data-framer-name="Date container"], [data-framer-name="Year container"]) .framer-text::after {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-text-fill-color: currentColor;
}
#proejcts .framer-Beh6A [data-framer-name="Date container"] .framer-text::after { content: var(--hs-pages, ""); white-space: nowrap; }
#proejcts .framer-Beh6A [data-framer-name="Year container"] .framer-text::after { content: var(--hs-motion, ""); width: 100%; }
@media (min-width: 1200px) {
  /* desktop: the spec column is 96px wide, "3 scroll sequences" takes two lines */
  #proejcts .framer-Beh6A :is([data-framer-name="Year"], [data-framer-name="Year container"]) { overflow: visible !important; }
  #proejcts .framer-Beh6A [data-framer-name="Year container"] .framer-text::after { width: 96px; }
}

/* ------------------------------------------------ Collection: the pillars
   Copy v5.1: §02 line + §04 pillars (titles and keywords), beside the
   "Collection" title, in place of the template's services list and its
   "75+". Built by assets/site/halfsecond-collection.js.
   Arrival = the hero's: titles rise out of a mask (hs-rise, 1.1s, expo out,
   staggered like the hero's two lines), the lead line and the keywords use the
   hero lede's fade-up (hs-fade-up, 1s). Keyframes live in assets/hero/hero.css. */
/* the Collection keeps only its title above the demos: no "75+", no template list */
#proejcts [data-framer-name="Stat line"],
#proejcts [data-framer-name="Services list"] { display: none !important; }

.hs-pillars {
  --hs-expo: cubic-bezier(.19, 1, .22, 1);
  flex: 1 0 0px;
  min-width: 0;
  color: #0a0a0a;
}
.hs-pillars__list { margin: 0; padding: 0; list-style: none; }
.hs-pillars__item {                        /* title, keywords under it */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, .8vw, 12px);
  padding: clamp(16px, 1.7vw, 24px) 0;
}
.hs-pillars__item::after {                 /* the rule under each line */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(10, 10, 10, .12);
}
.hs-pillars__title {
  margin: 0;
  font-family: var(--hs-title);
  font-weight: 700;
  font-size: clamp(28px, 3.9vw, 56px);
  line-height: .95;
  letter-spacing: -0.03em;
}
.hs-pillars__mask {                        /* as .hero__title .mask */
  display: block;
  overflow: hidden;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}
.hs-pillars__mask > span { display: block; }
.hs-pillars__tags {
  font-family: var(--hs-text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(10, 10, 10, .62);
}

/* arrival: waits off-stage until the block scrolls into view */
html:not(.is-reduced) .hs-pillars:not(.is-in) .hs-pillars__mask > span { transform: translateY(110%); }
html:not(.is-reduced) .hs-pillars:not(.is-in) .hs-pillars__tags,
html:not(.is-reduced) .hs-pillars:not(.is-in) .hs-pillars__item::after { opacity: 0; }

html:not(.is-reduced) .hs-pillars.is-in .hs-pillars__mask > span { animation: hs-rise 1.1s var(--hs-expo) .15s both; }
html:not(.is-reduced) .hs-pillars.is-in .hs-pillars__item:nth-child(2) .hs-pillars__mask > span { animation-delay: .27s; }
html:not(.is-reduced) .hs-pillars.is-in .hs-pillars__item:nth-child(3) .hs-pillars__mask > span { animation-delay: .39s; }
html:not(.is-reduced) .hs-pillars.is-in .hs-pillars__tags { animation: hs-fade-up 1s var(--hs-expo) .5s both; }
html:not(.is-reduced) .hs-pillars.is-in .hs-pillars__item:nth-child(2) .hs-pillars__tags { animation-delay: .6s; }
html:not(.is-reduced) .hs-pillars.is-in .hs-pillars__item:nth-child(3) .hs-pillars__tags { animation-delay: .7s; }
html:not(.is-reduced) .hs-pillars.is-in .hs-pillars__item::after { animation: hs-fade 1s cubic-bezier(.2, .7, .1, 1) .5s both; }

/* ------------------------------------- pillars as tabs + the "craft" card
   The three titles switch the card on the left (desktop) / below (tablet,
   phone). Same system as the rest: Space Grotesk titles, Satoshi text, ink
   #0a0a0a, the hero's warm white for the card, 8px radius like the demo
   images, the hero's expo curve and keyframes for arrival and swaps. */

/* tabs: the titles keep their look, the active one is ink, the others recede */
.hs-pillars__tab {
  all: unset;
  display: block;
  cursor: pointer;
  color: rgba(10, 10, 10, .28);
  transition: color .45s cubic-bezier(.2, .7, .1, 1);
}
.hs-pillars__tab:hover { color: rgba(10, 10, 10, .6); }
.hs-pillars__item.is-active .hs-pillars__tab { color: #0a0a0a; }
.hs-pillars__tab:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 4px; border-radius: 4px; }
.hs-pillars__item::before {                /* the active rule draws itself in ink */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  z-index: 1;
  background: #0a0a0a;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .9s cubic-bezier(.19, 1, .22, 1);
}
.hs-pillars__item.is-active::before { transform: scaleX(1); }

/* the card */
.hs-craft {
  --hs-expo: cubic-bezier(.19, 1, .22, 1);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: 12px;
  padding: 12px;
  background: rgb(247, 246, 244);
  border-radius: 8px;
  color: #0a0a0a;
}
.hs-craft__body {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.6vw, 22px);
  padding: clamp(14px, 1.8vw, 24px) clamp(10px, 1.2vw, 16px);
}
.hs-craft__eyebrow {
  font-family: var(--hs-text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, .62);
}
.hs-craft__text {
  margin: 0;
  font-family: var(--hs-text);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.45;
  color: rgba(10, 10, 10, .8);
}
.hs-craft__points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  font-family: var(--hs-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}
.hs-craft__points li { position: relative; padding-left: 14px; }
.hs-craft__points li::before {
  content: '';
  position: absolute;
  left: 0; top: .5em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.hs-craft__meta {
  margin: auto 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--hs-text);
  font-size: 14px;
  color: rgba(10, 10, 10, .62);
}
.hs-craft__visual {
  position: relative;
  min-height: 240px;
  border-radius: 6px;
  overflow: hidden;
  background: #0a0a0a;
}
.hs-craft__visual > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.hs-craft__visual video { object-fit: cover; }
.hs-craft__chrono {                        /* the hero's still and clock */
  background: #fff 78% 30% / cover no-repeat; /* the ink sits in the still's upper right */
}
.hs-craft__chrono span,
.hs-craft__chrono small {
  position: absolute;
  bottom: 14px;
  font-family: var(--hs-title);
  color: #0a0a0a;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 3px rgba(20, 19, 15, .10), 0 14px 30px rgba(20, 19, 15, .22);
}
.hs-craft__chrono span { right: 34px; font-size: clamp(36px, 3.4vw, 54px); font-weight: 500; line-height: .86; }
.hs-craft__chrono small { right: 16px; font-size: clamp(14px, 1.2vw, 20px); color: rgba(20, 19, 15, .62); }
.hs-craft__symbol::after {                 /* the brand symbol, once */
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 34%;
  aspect-ratio: 1;
  background: #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;
}
@media (max-width: 809.98px) {
  .hs-craft { grid-template-columns: minmax(0, 1fr); }
  .hs-craft__visual { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
}

/* arrival with the pillars (like the hero's buttons, after the titles) */
html:not(.is-reduced) .hs-craft:not(.is-in) { opacity: 0; }
html:not(.is-reduced) .hs-craft.is-in { animation: hs-fade-up 1s var(--hs-expo) .64s both; }
/* swap: the new content comes in the same way, line by line */
html:not(.is-reduced) .hs-craft.is-swap .hs-craft__body > * { animation: hs-fade-up 1s var(--hs-expo) both; }
html:not(.is-reduced) .hs-craft.is-swap .hs-craft__body > :nth-child(2) { animation-delay: .06s; }
html:not(.is-reduced) .hs-craft.is-swap .hs-craft__body > :nth-child(3) { animation-delay: .12s; }
html:not(.is-reduced) .hs-craft.is-swap .hs-craft__body > :nth-child(4) { animation-delay: .18s; }
html:not(.is-reduced) .hs-craft.is-swap .hs-craft__visual > * { animation: hs-fade 1s cubic-bezier(.2, .7, .1, 1) both; }


/* ------------------------------------- section: "What wins the half second."
   Between the hero and the Collection (static shell in index.html). Laid out
   like the Collection: the big title on the same column as "Collection"
   (a third in on desktop, a quarter on tablet), then the card (left) and the
   pillars (right). Title = the "Collection" style: Space Grotesk 600,
   -0.04em, line-height .9; it rises out of its masks like the hero's lines. */
.hs-wins {
  position: relative;
  background: rgb(255, 255, 255);
  color: #0a0a0a;
  padding: clamp(96px, 11vw, 160px) 36px clamp(72px, 8vw, 120px);
}
.hs-wins__head { container-type: inline-size; margin-left: calc((100% - 24px) / 3 + 24px); }   /* Framer's grid: 1/3 spacer, 24px gap */
.hs-wins__title {
  margin: 0;
  font-family: var(--hs-title);
  font-weight: 600;
  font-size: min(128px, 13.6cqi);       /* "the half second." fits its column */
  line-height: .9;
  letter-spacing: -0.04em;
}
.hs-wins__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  align-items: stretch;
  margin-top: clamp(48px, 6vw, 88px);
}
.hs-wins__grid > .hs-pillars { min-width: 0; }
@media (max-width: 1199.98px) {
  .hs-wins__head { margin-left: calc((100% - 24px) / 4 + 24px); }   /* tablet: 1/4 spacer */
  .hs-wins__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 40px); }
  .hs-wins__grid > .hs-pillars { order: -1; }
}
@media (max-width: 809.98px) {
  .hs-wins__head { margin-left: 0; }
}

/* arrival: the two title lines rise like the hero's (.15s / .27s) */
html:not(.is-reduced) .hs-wins:not(.is-in) .hs-wins__title .hs-pillars__mask > span { transform: translateY(110%); }
html:not(.is-reduced) .hs-wins.is-in .hs-wins__title .hs-pillars__mask > span { animation: hs-rise 1.1s cubic-bezier(.19, 1, .22, 1) .15s both; }
html:not(.is-reduced) .hs-wins.is-in .hs-wins__title .hs-pillars__mask + .hs-pillars__mask > span { animation-delay: .27s; }
/* the pillars and the card follow the title */
html:not(.is-reduced) .hs-wins .hs-pillars.is-in .hs-pillars__mask > span { animation-delay: .45s; }
html:not(.is-reduced) .hs-wins .hs-pillars.is-in .hs-pillars__item:nth-child(2) .hs-pillars__mask > span { animation-delay: .57s; }
html:not(.is-reduced) .hs-wins .hs-pillars.is-in .hs-pillars__item:nth-child(3) .hs-pillars__mask > span { animation-delay: .69s; }
html:not(.is-reduced) .hs-wins .hs-pillars.is-in .hs-pillars__tags { animation-delay: .8s; }
html:not(.is-reduced) .hs-wins .hs-pillars.is-in .hs-pillars__item:nth-child(2) .hs-pillars__tags { animation-delay: .9s; }
html:not(.is-reduced) .hs-wins .hs-pillars.is-in .hs-pillars__item:nth-child(3) .hs-pillars__tags { animation-delay: 1s; }
html:not(.is-reduced) .hs-wins .hs-pillars.is-in .hs-pillars__item::after { animation-delay: .8s; }
html:not(.is-reduced) .hs-wins .hs-craft.is-in { animation-delay: .94s; }

/* the title sits above the hero's mist spill: the mist drifts behind it */
.hs-wins__head { position: relative; z-index: 3; }

/* the active rule waits for the pillars to arrive, then draws itself;
   after that (is-settled) it follows clicks with no delay */
html:not(.is-reduced) .hs-pillars:not(.is-in) .hs-pillars__item::before { transform: scaleX(0); }
html:not(.is-reduced) .hs-wins .hs-pillars.is-in:not(.is-settled) .hs-pillars__item::before { transition-delay: 1.1s; }

/* desktop: titles on the left in a narrower column (the longest title is
   ~9.55x its size wide), the card on the right, wider */
.hs-wins__grid > .hs-pillars { order: -1; }
@media (min-width: 1200px) {
  .hs-wins__grid { grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); }
}


/* ------------------------------------------------- Direction "Ink" backgrounds
   One image (white ink blooming in black water) behind the Collection, the Team section and
   the footer, in place of the template's starry sky. Files: assets/ink/bg-*.webp. The review
   switcher in index.html (?bg=a|b|c) only changes this variable. */
:root { --hs-ink-bg: url(/assets/ink/bg-a.webp); }

/* Collection (and Pricing): Framer's sticky full-screen layer, with its appear zoom */
#proejcts [data-framer-name="Backphoto (place your image)"],
/* Team: same layer, its starry photo hidden (its Gradient / Noize overlays stay) */
#team [data-framer-name="Backphoto (place your image)"] {
  background: #000 var(--hs-ink-bg) 50% 50% / cover no-repeat;
}
#team [data-framer-name="Backphoto (place your image)"] img { visibility: hidden; }

/* Footer, every page: the starry video goes (never played, so never downloaded); its
   full-screen container shows the image, under the footer's own 30% black overlay */
footer video[src*="XR85lzld6QlWDzCJZj9Q3EXIs"] { display: none !important; }
footer :has(> video[src*="XR85lzld6QlWDzCJZj9Q3EXIs"]) {
  background: #000 var(--hs-ink-bg) 50% 50% / cover no-repeat;
}

/* the white "What wins" section dissolves into the ink: its mist band (index.html) hangs over
   the top of the Collection. Above #main, below the hero (z-index 2), whose own spill keeps
   covering the top of this section. */
.hs-wins { z-index: 1; }
.mist--seam::before {                      /* the wash starts at this section's pure white */
  background: linear-gradient(to bottom, #fff 0, #fff var(--spill-above), rgba(255, 255, 255, 0) 100%);
}

/* The light line, in place of the template's four-pointed stars: a short rule with a light passing
   through it, left to right, in a loop. Colour = currentColor; width = --beam-w. */
.hs-beam {
  display: block;
  flex: none;
  width: var(--beam-w, 32px);
  height: 2px;
  border-radius: 1px;
  background:
    linear-gradient(90deg, transparent 0 35%, currentColor 50%, transparent 65% 100%) 100% 0 / 300% 100% no-repeat,
    color-mix(in srgb, currentColor 22%, transparent);
  animation: hs-beam 2.6s linear infinite;
}
@keyframes hs-beam { to { background-position: 0% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .hs-beam, .hs-offer__list li::before { animation: none; } }

/* Collection (home): the spec on the left (pages / motion) and the team avatars are not for now; a
   white Claim button on each available demo (halfsecond-collection.js). */
#proejcts .framer-Beh6A [data-framer-name="Date"],
#proejcts .framer-Beh6A [data-framer-name="Team avatars"] { visibility: hidden !important; }   /* hidden, not removed: the picture keeps its size */
/* the Claim button: in the label row (44px) above the picture, at its right edge; the status label
   moves left of it. Gone with the labels while a card overlaps another (data-hs-over / -under). */
.hs-claim {
  position: absolute;
  top: 5px;
  right: 0;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 20px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font: 500 14px/1 var(--hs-text, 'Satoshi', system-ui, sans-serif);
  letter-spacing: -.02em;
  text-decoration: none;
  transition: transform .5s cubic-bezier(.19, 1, .22, 1), background-color .3s ease, opacity .25s ease;
}
#proejcts .framer-Beh6A::after { right: 92px; }
@media (min-width: 1200px) {
  .hs-claim { right: calc(8% + 30px); }
  #proejcts .framer-Beh6A::after { right: calc(8% + 30px + 92px); }
}
#proejcts .framer-Beh6A[data-hs-over] > .hs-claim,
#proejcts .framer-Beh6A[data-hs-under] > .hs-claim { opacity: 0; pointer-events: none; transition: none; }
.hs-claim:hover { transform: scale(1.06); background: #ededed; }
.hs-claim:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------------------------------------------------------------- The footer (every page)
   Ours, in place of the template's: Framer's footer stays in the markup but is not shown. Black;
   a call to write at the left, the site and the legal pages in two columns, the name very large,
   then the base. Same faces as the rest (Space Grotesk titles, Satoshi text). */
html.hs-has-foot footer:not(.hs-foot) { display: none !important; }   /* once ours is there (halfsecond-footer.js) */
.hs-foot {
  --col: calc((100% - 24px) / 3 + 24px);
  position: relative;
  z-index: 3;
  overflow: hidden;
  background: #000;
  color: #fff;
  padding: clamp(72px, 8vw, 120px) 36px 28px;
  font-family: var(--hs-text, 'Satoshi', system-ui, sans-serif);
}
.hs-foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px 24px;
}
.hs-foot__label { margin: 0 0 22px; font-size: 14px; font-weight: 500; letter-spacing: -.01em; color: rgba(255, 255, 255, .5); }
.hs-foot a { color: #fff; text-decoration: none; }
.hs-foot__cta { display: flex; flex-direction: column; align-items: flex-start; }
.hs-foot__mail {
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: clamp(26px, 2.8vw, 42px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}
.hs-foot__phone { margin-top: 14px; font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: rgba(255, 255, 255, .72) !important; }
.hs-foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hs-foot__col a { font-size: 18px; font-weight: 500; letter-spacing: -.02em; color: rgba(255, 255, 255, .86); transition: color .3s ease; }
.hs-foot__col .hs-foot__label { margin-bottom: 10px; }
.hs-foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.hs-foot a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.hs-foot__word {
  margin: clamp(56px, 7vw, 110px) 0 0;
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: 18.2vw;
  font-weight: 600;
  line-height: .82;
  letter-spacing: -.05em;
  white-space: nowrap;
  color: #fafafa;
  margin-left: -.04em;
  user-select: none;
}
.hs-foot__base {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 14px;
  color: rgba(255, 255, 255, .5);
}
.hs-foot__base p { margin: 0; }
.hs-foot__base a { color: rgba(255, 255, 255, .72); }
@media (max-width: 809.98px) {
  .hs-foot { padding: 64px 22px 22px; }
  .hs-foot__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hs-foot__cta { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- WhatsApp (every page)
   Projects start on WhatsApp: its glyph next to Contact in the header, and wherever --hs-wa-icon is
   used as a mask (the Process, the footer, the contact page). Same ground logic as the button:
   paper on dark, ink on light (.is-on-light, halfsecond-nav.js). */
:root { --hs-wa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E"); }
.hs-bar__end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.hs-bar__end > * { pointer-events: auto; }
.hs-bar__wa {
  display: inline-grid;
  place-items: center;
  width: var(--item);
  height: var(--item);
  border-radius: calc(var(--item) * .175);
  background: #fff;
  color: #0a0a0a;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .45);
  transition: background-color .35s ease, color .35s ease, transform .5s var(--expo);
  animation: hs-bar-in 1s var(--expo) .6s both;
}
.hs-bar__wa.is-on-light { background: #0a0a0a; color: #fff; }
.hs-bar__wa i { width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--hs-wa-icon) center / contain no-repeat; mask: var(--hs-wa-icon) center / contain no-repeat; }
@media (hover: hover) { .hs-bar__wa:hover { transform: scale(1.06); } }
html.is-reduced .hs-bar__wa { animation: none; }
@media (max-width: 809.98px) { .hs-bar__end { grid-column: 3; gap: 6px; } }

.hs-foot__wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  height: 48px;
  padding: 0 22px 0 18px;
  border-radius: 999px;
  background: #fff;
  color: #000 !important;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.02em;
}
.hs-foot__wa::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--hs-wa-icon) center / contain no-repeat; mask: var(--hs-wa-icon) center / contain no-repeat; }
.hs-foot a.hs-foot__wa:hover { text-decoration: none; }

/* ---------------------------------------------------------------- one corner for every button
   The hero's buttons are the reference: a corner of .175 of their height (about 8px; the header's own
   buttons use the same ratio). Every other button of the site takes it: no pills. */
:root { --hs-btn-radius: 8px; }
.hs-claim,
.hs-offer__cta,
.hs-services__prices,
.hs-proof__link,
.hs-process__cta,
.hs-close__wa,
.hs-close__btn,
.hs-foot__wa,
.hs-endcta__wa,
.hs-endcta__more,
.hs-ct-wa,
.hs-pr-cta,
.hs-bar__wa,
.hs-bar__cta,
[data-framer-name="Submit"] button,
[data-framer-name="Button block"] button { border-radius: var(--hs-btn-radius) !important; }

/* The middle bar is as high as the buttons beside it (the item height, 44px), its titles pure white
   (2026-10-18). The phone's sheet keeps its own rules. */
.hs-bar__links a { color: #fff; }
@media (min-width: 810px) {
  .hs-bar__links { height: var(--item); padding: 4px; border-radius: calc(var(--item) * .175); }
  .hs-bar__links a { height: calc(var(--item) - 8px); border-radius: calc((var(--item) - 8px) * .175); }
}

/* ------------------------------------------------ Collection: the pictures, 2026-10-21
   No black filter: Framer dims the picture to 75% while the pointer is over a card; the demos keep
   their full brightness. La Sirène: its title is the label above the card (halfsecond-collection.js),
   not drawn on the picture; and its whole frame is shown, whatever the card's shape (the screen
   recording is 16:9, the card is nearly square on a phone: "cover" would cut the cans). The ground is
   the recording's own cream, so the margins, if any, do not show. */
#proejcts .framer-1wnd6y-container { filter: none !important; -webkit-filter: none !important; }
/* and no zoom: Framer swells the picture's box to 103% of the card while the pointer is over it */
#proejcts .framer-1wnd6y-container { width: 100% !important; height: 100% !important; transform: none !important; }
#proejcts .framer-Beh6A[data-hs-notitle] [data-framer-name="Name and service"] { display: none !important; }
#proejcts [data-framer-name="Video container"] .framer-1wnd6y-container:has(video[src*="la-sirene-loop-22s-web"]) {
  background-color: #f2f2e8;
  background-size: contain;
}
#proejcts video[src*="la-sirene-loop-22s-web"] { object-fit: contain !important; }

/* ------------------------------------------------ Collection: the demos, live (2026-10-24)
   In a card, the demo is a frame (halfsecond-collection.js) over the film, under a veil: the page scrolls
   through it. A click on the veil opens the demo (.hs-demo): it grows out of its card to nearly the whole
   screen, over a dark backdrop; the page is held still behind it. Close button, Esc or the backdrop give
   the page back. */
.hs-live {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  border-radius: 8px;
  background: #f2f2e8;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
.hs-live[data-ready] { opacity: 1; pointer-events: auto; }
.hs-live__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #f2f2e8;
  pointer-events: none;                  /* a preview: the veil is what is touched */
}
.hs-live__veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hs-live__veil span,
.hs-demo__close,
.hs-demo__hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(10, 10, 10, .84);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  font: 500 14px/1 var(--hs-text, 'Satoshi', system-ui, sans-serif);
  letter-spacing: -.02em;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.hs-live__veil span { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .5s cubic-bezier(.19, 1, .22, 1); }
.hs-live__veil span i {                 /* an arrow, out and up */
  width: 11px; height: 11px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M3 9l6-6M4 3h5v5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M3 9l6-6M4 3h5v5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hs-live:hover .hs-live__veil span,
.hs-live__veil:focus-visible span { opacity: 1; transform: none; }
@media (hover: none) { .hs-live__veil span { opacity: 1; transform: none; } }   /* no hover on a phone: the hint stays */
.hs-live__veil:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

html.hs-demo-open { overflow: hidden !important; padding-right: var(--hs-bar-gap, 0px); }
.hs-demo { position: fixed; inset: 0; z-index: 100000; overscroll-behavior: contain; }
.hs-demo__back {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .82);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .5s ease;
}
.hs-demo.is-in .hs-demo__back { opacity: 1; }
.hs-demo.is-out .hs-demo__back { opacity: 0; }
.hs-demo__win {
  position: fixed;
  overflow: hidden;
  background: #f2f2e8;
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .7);
  transition: left .6s cubic-bezier(.19, 1, .22, 1), top .6s cubic-bezier(.19, 1, .22, 1),
              width .6s cubic-bezier(.19, 1, .22, 1), height .6s cubic-bezier(.19, 1, .22, 1), border-radius .6s ease;
}
.hs-demo__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #f2f2e8; opacity: 0; transition: opacity .5s ease .15s; }
.hs-demo__win[data-ready] .hs-demo__frame { opacity: 1; }
.hs-demo__close {
  position: fixed;                       /* in the strip above the demo: it hides nothing of it */
  top: 9px;
  right: 3vw;
  z-index: 3;
  cursor: pointer;
  border: 0;
  padding-left: 14px;
  transition: background-color .25s ease, transform .4s cubic-bezier(.19, 1, .22, 1);
}
.hs-demo__close:hover { background: #000; transform: scale(1.05); }
.hs-demo__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hs-demo__close i {                      /* the cross */
  position: relative;
  width: 12px; height: 12px;
}
.hs-demo__close i::before, .hs-demo__close i::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1.6px;
  margin-top: -.8px;
  background: currentColor;
  transform: rotate(45deg);
}
.hs-demo__close i::after { transform: rotate(-45deg); }
.hs-demo__hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  z-index: 3;
  margin: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: hs-demo-hint .6s ease .5s forwards;
  transition: opacity .6s ease;
}
.hs-demo__hint b {                       /* a small spinner while the demo's own intro runs */
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.6px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  animation: hs-demo-spin .8s linear infinite;
}
.hs-demo.is-ready .hs-demo__hint b { display: none; }
.hs-demo.is-quiet .hs-demo__hint, .hs-demo.is-out .hs-demo__hint { opacity: 0 !important; animation: none; }
@keyframes hs-demo-hint { to { opacity: 1; } }
@keyframes hs-demo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .hs-demo__win, .hs-demo__back, .hs-demo__frame { transition-duration: .01s; transition-delay: 0s; }
}
@media (max-width: 809.98px) { .hs-demo__close { right: 12px; } }