/* ---------------------------------------------------------------- top bar */
.bar{position:sticky;top:0;z-index:20;background:rgb(255 255 255 / .72);backdrop-filter:blur(10px)}
.bar__inner{max-width:var(--page-max);margin:0 auto;padding:var(--space-4) var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--space-5)}
.brand{text-decoration:none;font-weight:var(--font-weight-medium);font-size:var(--font-size-body);letter-spacing:-.005em;white-space:nowrap}
.bar__links{display:flex;align-items:center;gap:var(--space-6)}
.bar__links a{text-decoration:none;white-space:nowrap;color:var(--color-text-secondary);font-size:var(--font-size-body-sm)}
.bar__links a:hover{color:var(--color-text-primary)}
/* the contact link is one of the others; only its weight says it is the one to click */
.bar__cta{font-weight:var(--font-weight-semibold);color:var(--color-text-primary)!important}
/* the switch names the language you are not reading, and nothing else */
.lang{border:0;padding:0;background:none;cursor:pointer;white-space:nowrap;
  font-size:var(--font-size-body-sm);color:var(--color-text-secondary);
  text-decoration:underline;text-decoration-thickness:var(--line-hairline);text-underline-offset:4px;
  transition:color var(--motion-base)}
.lang:hover{color:var(--color-text-primary)}
@media (max-width:860px){.bar__links a:not(.bar__cta){display:none}}
@media (max-width:560px){
  .bar__inner{gap:var(--space-3);padding-inline:var(--space-4)}
  .brand,.bar__links a{font-size:var(--font-size-body-sm)}
}

/* ---------------------------------------------------------------- the canvas
   One background for the whole page: the one-pager's blue wash, painted in CSS and
   placed at four points down the page. No section has a surface of its own. */
main{position:relative;overflow:hidden}
.wash{position:absolute;z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle closest-side,rgb(var(--wash)/.38),rgb(var(--wash)/.12) 46%,rgb(var(--wash)/0) 72%)}
.wash--1{width:min(78vw,860px);aspect-ratio:1;top:-300px;left:-18%}
.wash--2{width:min(62vw,680px);aspect-ratio:1;top:40px;right:-15%;opacity:.8}
.wash--3{width:min(66vw,720px);aspect-ratio:1;top:44%;left:-22%;opacity:.5}
.wash--4{width:min(58vw,640px);aspect-ratio:1;bottom:140px;right:-16%;opacity:.55}
main > section{position:relative;z-index:1}

/* ---------------------------------------------------------------- hero */
.hero{display:grid;align-items:center;min-height:calc(100svh - 70px);
  padding-block:clamp(48px,7vw,88px) clamp(56px,8vw,104px)}
.hero__inner{display:grid;justify-items:center;gap:var(--space-5);text-align:center}
.hero h1{max-width:16ch}
.hero__sub{max-width:52ch;color:var(--color-text-secondary);font-size:var(--font-size-body);
  margin-top:var(--space-2)}
/* the range: what we do, so the first screen is not one product */
.hero__range{list-style:none;margin:var(--space-2) 0 0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:var(--space-2) var(--space-4);color:var(--color-text-secondary);
  font-size:var(--font-size-body-sm)}
.hero__range li{display:flex;align-items:center;gap:var(--space-4)}
.hero__range li::before{content:"";flex:none;width:4px;height:4px;border-radius:50%;
  background:var(--color-neutral-300)}
.hero__range li:first-child::before{display:none}
.hero .btn{margin-top:var(--space-4)}
@media (max-width:620px){.hero h1{max-width:none}}

/* ---------------------------------------------------------------- partners
   A strip, not a feature: one caption and one row of small marks. Each logo is capped
   on both axes, so a wide wordmark and a square mark read at the same optical size. */
.partners{padding-block:clamp(28px,4vw,48px)}
.partners__inner{display:grid;justify-items:center}
.partners__row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:clamp(24px,4vw,56px)}
.partners__item{display:flex;align-items:center;height:40px}
.partners__logo{display:block;max-height:100%;max-width:132px;width:auto;height:auto;object-fit:contain}
.partners__name{font-size:var(--font-size-body-sm);font-weight:var(--font-weight-medium);
  color:var(--color-text-secondary)}
@media (max-width:620px){
  .partners__row{gap:var(--space-5)}
  .partners__item{height:30px}
  .partners__logo{max-width:104px}
}

/* ---------------------------------------------------------------- the duty
   The seal is the one from the event variants, in the site's own tokens: a dashed
   ring, a hairline inside it, a coral dot sitting on the orbit, the figure. */
.problem__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,6vw,80px);align-items:center}
.problem__text{display:grid;gap:var(--space-4)}
.problem__text .section-title{margin-bottom:0}
.problem__bridge{font-size:var(--font-size-body-lg);font-weight:var(--font-weight-medium);
  margin-top:var(--space-2)}
.problem__fine{margin:0;display:grid;justify-items:center;gap:var(--space-5)}
.problem__caption{max-width:34ch;text-align:center;color:var(--color-text-secondary);
  font-size:var(--font-size-body-sm)}

.seal{position:relative;width:min(100%,300px);max-width:82vw;aspect-ratio:1;border-radius:50%;
  border:var(--line-hairline) dashed var(--color-neutral-300);
  display:grid;place-content:center;justify-items:center;gap:var(--space-3);text-align:center}
.seal::before{content:"";position:absolute;inset:18px;border-radius:50%;
  border:var(--line-hairline) solid var(--color-border-hairline)}
.seal__orbit{position:absolute;left:85.36%;top:14.64%;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;background:var(--color-highlight-coral);
  box-shadow:0 0 0 6px var(--color-surface-canvas)}
.seal__label{position:relative;font-size:var(--font-size-caption);font-weight:var(--font-weight-medium);
  letter-spacing:var(--font-tracking-caps);text-transform:uppercase;color:var(--color-text-secondary)}
.seal__fig{position:relative;font-weight:var(--font-weight-light);font-size:clamp(32px,9vw,58px);
  line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap}
.seal__law{position:relative;font-size:var(--font-size-caption);font-weight:var(--font-weight-medium);
  border:var(--line-hairline) solid var(--color-border-hairline);border-radius:var(--radius-pill);
  padding:4px 12px;background:var(--color-surface-card)}

/* ---------------------------------------------------------------- without us / we take over */
.section-title{margin-bottom:var(--space-6)}
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);align-items:start}
.vs__title{font-size:var(--font-size-h2);font-weight:var(--font-weight-light);letter-spacing:-.015em;margin-bottom:var(--space-5)}
.vs__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
.vs__list li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:var(--space-4);align-items:start}
/* the two marks of the one-pager: a filled disc with a bar across it, and a ring with a tick */
.vs__list li::before{content:"";width:18px;height:18px;margin-top:3px;background-repeat:no-repeat;background-position:center;background-size:18px}
.vs__list--minus li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%2315171B'/%3E%3Crect x='4.5' y='8.2' width='9' height='1.6' rx='.8' fill='%23fff'/%3E%3C/svg%3E")}
.vs__list--check li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8.1' fill='none' stroke='%232F9E44' stroke-width='1.6'/%3E%3Cpath d='m5.3 9.2 2.5 2.5 5-5' fill='none' stroke='%232F9E44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.vs__list li{color:var(--color-text-secondary);font-size:var(--font-size-body)}

/* ---------------------------------------------------------------- how it runs */
.flow__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.flow__step{display:grid;gap:var(--space-3);align-content:start;padding-top:var(--space-5);
  border-top:var(--line-hairline) solid var(--color-border-hairline)}
.flow__n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;justify-self:start;
  background:var(--color-neutral-900);color:var(--color-text-inverse);font-size:var(--font-size-body-sm)}
.flow__step h3{font-size:var(--font-size-h2);font-weight:var(--font-weight-light);letter-spacing:-.015em}
.flow__step p{color:var(--color-text-secondary);font-size:var(--font-size-body-sm)}

/* ---------------------------------------------------------------- demo */
.demo .section-title{margin-bottom:var(--space-3)}
.demo__lede{margin-bottom:var(--space-6)}
.demo__frame{border:var(--line-hairline) solid var(--color-border-hairline);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface-canvas)}
.demo__tabs{display:flex;gap:var(--space-1);padding:var(--space-3);background:var(--color-surface-card);border-bottom:var(--line-hairline) solid var(--color-border-hairline);overflow-x:auto}
.demo__tabs button{height:var(--size-control-sm);padding:0 var(--space-4);border:var(--line-hairline) solid transparent;border-radius:var(--radius-pill);background:transparent;cursor:pointer;font-size:var(--font-size-body-sm);color:var(--color-text-secondary);white-space:nowrap}
.demo__tabs button[aria-selected="true"]{background:var(--color-neutral-900);color:var(--color-text-inverse)}
.demo__screen{padding:clamp(16px,2.5vw,28px);min-height:460px}
.screen{display:grid;gap:var(--space-4)}
.screen__lede{color:var(--color-text-secondary);font-size:var(--font-size-body-sm);max-width:52em}
.screen__head{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.screen__head h3{font-size:var(--font-size-h2);font-weight:var(--font-weight-light)}
.shot{margin:0 auto;max-width:760px;height:560px;overflow:hidden;background:var(--color-surface-card);
  /* the page runs past the bottom of the view, so it fades instead of being cut off */
  -webkit-mask-image:linear-gradient(#000 76%,transparent);mask-image:linear-gradient(#000 76%,transparent)}
.shot img{display:block;width:100%;height:auto}

.tbl{width:100%;border-collapse:collapse;background:var(--color-surface-card);border:var(--line-hairline) solid var(--color-border-hairline);border-radius:var(--radius-md);overflow:hidden}
.tbl th{text-align:left;font-size:var(--font-size-body-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);padding:var(--space-3) var(--space-4)}
.tbl td{padding:var(--space-3) var(--space-4);font-size:var(--font-size-body-sm);border-top:var(--line-hairline) solid var(--color-border-hairline);vertical-align:middle}
.tbl td:first-child{display:flex;align-items:center;gap:var(--space-3)}
.tbl .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl--dims{table-layout:fixed}
.tbl--dims td:nth-child(1),.tbl--dims th:nth-child(1){width:26%}
.tbl--dims td:nth-child(2),.tbl--dims th:nth-child(2){width:24%}
.tbl--dims td:nth-child(3),.tbl--dims th:nth-child(3){width:38%}
.tbl--dims td:nth-child(4),.tbl--dims th:nth-child(4){width:12%}
.linkish{border:0;background:none;padding:0;cursor:pointer;font-size:var(--font-size-body-sm);font-weight:var(--font-weight-medium);text-decoration:underline;text-underline-offset:3px}
.scale{display:inline-flex;align-items:center;position:relative;width:86px;height:12px;margin-left:var(--space-3);vertical-align:middle}
.scale__track{position:absolute;inset:auto 0;height:var(--size-track);border-radius:var(--radius-pill);background:var(--color-surface-muted)}
.scale__track i{position:absolute;top:-3px;width:1px;height:10px;background:var(--color-neutral-300)}
.scale__dot{position:absolute;width:10px;height:10px;border-radius:50%;transform:translateX(-50%);box-shadow:0 0 0 2px var(--color-surface-card)}
.group{display:grid;gap:var(--space-3)}
.group h4{margin:0;font-size:var(--font-size-h3);font-weight:var(--font-weight-medium);display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.group--add{border-top:var(--line-hairline) dashed var(--color-neutral-300);padding-top:var(--space-4)}
.picker{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;font-size:var(--font-size-body-sm)}

/* ---------------------------------------------------------------- employees */
.employees__inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:start}
.employees__intro .section-title{margin-bottom:var(--space-4)}
.employees__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.employees__cols h3{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.ticks li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:var(--space-3);font-size:var(--font-size-body-sm);color:var(--color-text-secondary)}
.ticks li::before{content:"";width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--color-band-low)}
.ticks--never li::before{width:10px;height:2px;margin-top:11px;border-radius:0;background:var(--color-neutral-400)}

/* ---------------------------------------------------------------- faq */
.faq__list{display:grid;border-top:var(--line-hairline) solid var(--color-border-hairline)}
.faq__item{border-bottom:var(--line-hairline) solid var(--color-border-hairline)}
.faq__item summary{list-style:none;cursor:pointer;padding:var(--space-4) 0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);font-weight:var(--font-weight-medium)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-weight:var(--font-weight-light);font-size:20px;color:var(--color-text-secondary)}
.faq__item[open] summary::after{content:"–"}
.faq__item p{padding-bottom:var(--space-4);max-width:52em;color:var(--color-text-secondary);font-size:var(--font-size-body-sm)}

/* ---------------------------------------------------------------- founders
   Two identical tiles, then one quote between hairline arcs, after the one-pager. */
.founders__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,64px);
  max-width:720px;margin-inline:auto}
.founder{display:grid;justify-items:center;gap:var(--space-2);text-align:center}
.founder__photo{margin:0 0 var(--space-4);width:100%;height:clamp(190px,20vw,250px)}
.founder__photo img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% bottom;
  /* the cut-outs end at the edge of their source; fade it so no hard rectangle shows */
  -webkit-mask-image:linear-gradient(#000 86%,transparent);mask-image:linear-gradient(#000 86%,transparent)}
.founder__role{color:var(--color-text-secondary);font-size:var(--font-size-body-sm)}
.founder__bio{color:var(--color-text-secondary);font-size:var(--font-size-body-sm);max-width:32ch}
.founder__link{font-size:var(--font-size-body-sm);font-weight:var(--font-weight-medium);margin-top:var(--space-2)}

.quote{margin:clamp(48px,7vw,88px) auto 0;max-width:860px;
  display:grid;grid-template-columns:clamp(32px,5vw,58px) minmax(0,1fr) clamp(32px,5vw,58px);
  align-items:center;column-gap:clamp(12px,2.5vw,32px);row-gap:var(--space-6);text-align:center}
.quote__arc{height:100%;max-height:300px;width:100%;fill:none;stroke:var(--color-neutral-300);stroke-width:1;
  vector-effect:non-scaling-stroke}
.quote__arc--r{transform:scaleX(-1)}
.quote blockquote{margin:0;font-family:var(--font-family-accent);font-style:italic;font-weight:400;
  font-size:clamp(21px,2.5vw,32px);line-height:1.35;letter-spacing:0;text-wrap:balance}
.quote figcaption{grid-column:1/-1;color:var(--color-text-secondary);font-size:var(--font-size-body-sm)}
@media (max-width:620px){
  .quote{grid-template-columns:18px minmax(0,1fr) 18px;column-gap:var(--space-3)}
  .quote__arc{max-height:200px}
}

/* ---------------------------------------------------------------- contact
   One column on one axis: the form, then the call, then the plain address. The hero
   opens the page centred and this closes it the same way. */
.contact__inner{display:grid;justify-items:center;text-align:center;gap:var(--space-6);
  max-width:620px;margin-inline:auto}
.contact__lede{margin-top:calc(var(--space-3) * -1)}

.form{display:grid;gap:var(--space-5);width:100%;text-align:left}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.field{display:grid;gap:var(--space-2);min-width:0;font-size:var(--font-size-body-sm);font-weight:var(--font-weight-medium)}
/* an input keeps its intrinsic width unless told otherwise, and then overflows its column */
.field input{width:100%;min-width:0;height:var(--size-control);padding:0 var(--space-4);
  border:var(--line-hairline) solid var(--color-border-hairline);border-radius:var(--radius-sm);
  background:var(--color-surface-card);font-weight:var(--font-weight-regular)}
.field input:hover{border-color:var(--color-neutral-300)}
.check{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--space-3);align-items:start;font-size:var(--font-size-body-sm);color:var(--color-text-secondary)}
.check input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--color-neutral-900)}
.check a{color:var(--color-text-primary)}
.form__submit{justify-self:center}
.form__err{font-size:var(--font-size-body-sm);color:var(--color-state-error-text)}
.form__ok{background:var(--color-state-success-surface);color:var(--color-state-success-text);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--font-size-body-sm)}

/* the two routes are separated by one word on a rule, not by a block of its own */
.contact__or{display:flex;align-items:center;gap:var(--space-5);width:100%;
  color:var(--color-text-placeholder);font-size:var(--font-size-body-sm)}
.contact__or::before,.contact__or::after{content:"";flex:1;border-top:var(--line-hairline) solid var(--color-border-hairline)}

.contact__call{display:grid;justify-items:center;gap:var(--space-4)}
.contact__call h3{font-size:var(--font-size-h2);font-weight:var(--font-weight-light);letter-spacing:-.015em}
.contact__call p{color:var(--color-text-secondary);font-size:var(--font-size-body-sm)}
/* the two actions are a pair, so they are the same size */
.form__submit .btn,.contact__call .btn{min-width:228px}

/* ---------------------------------------------------------------- footer */
.foot{border-top:var(--line-hairline) solid var(--color-border-hairline);padding-block:var(--space-6)}
.foot__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3) var(--space-5);font-size:var(--font-size-body-sm);color:var(--color-text-secondary)}
.foot__who{display:grid;gap:2px}
.foot__positioning{color:var(--color-text-primary)}
.foot nav{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}
.foot a{color:var(--color-text-secondary)}

/* ---------------------------------------------------------------- legal pages */
.legal{max-width:760px;margin:0 auto;padding-block:var(--section-gap)}
.legal h1{font-size:clamp(28px,3.4vw,40px);margin-bottom:var(--space-5)}
.legal h2{font-size:var(--font-size-h2);margin-top:var(--space-7);margin-bottom:var(--space-3)}
.legal p,.legal li{font-size:var(--font-size-body-sm);color:var(--color-text-secondary);max-width:62ch}
.legal p+p{margin-top:var(--space-3)}
.legal ul{margin:var(--space-3) 0 0;padding-left:var(--space-5);display:grid;gap:var(--space-2)}
.legal a{color:var(--color-text-primary)}
.legal__back{display:inline-block;margin-bottom:var(--space-5);font-size:var(--font-size-body-sm)}

/* ---------------------------------------------------------------- narrow screens */
@media (max-width:980px){
  .problem__grid{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .problem__text{justify-items:center}
  .employees__inner{grid-template-columns:minmax(0,1fr)}
  .flow__steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .vs,.form__row,.employees__cols{grid-template-columns:minmax(0,1fr)}
  .founders__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
}