/* sandsiv+ kit for the web: tokens and components. Version 3.4, 9 October 2026.
   Rules: CI.md and web.md; every class with its markup: kit/components.md. Fonts: sandsiv-fonts.css (or both in one file: sandsiv-kit.css). Class prefix sv-.
   Warm page (paper), white cards (ground), ink text, dim secondary text; four card colours by meaning. */
:root{
  /* colours: eleven and four hover shades */
  --paper:#FAF9F7;
  --ground:#FFFFFF;
  --stone:#E3E2DF;
  --line:#CDC8C2;
  --dim:#6E6963;
  --ink:#110E0A;
  --green:#427E6C;
  --green-hover:#3A6F5F;
  --blue:#3F627E;
  --blue-hover:#355874;
  --brick:#7F3125;
  --brick-hover:#74271B;
  --yellow:#C38612;
  --yellow-hover:#B77E10;
  --on-colour:#FFFFFF;
  /* one state colour: form errors only */
  --error:#9B1C14;
  /* fluid type (display, title, card title, item title, lead, body) */
  --t-xl:clamp(2.5rem, 2.0408rem + 1.9592vw, 4rem);
  --t-title:clamp(2rem, 1.4rem + 1.6vw, 2.8125rem);
  --t-s:clamp(1.25rem, 1.1735rem + 0.3265vw, 1.5rem);
  --p-m:clamp(1.125rem, 1.0867rem + 0.1633vw, 1.25rem);
  --p-l:clamp(1.375rem, 1.3367rem + 0.1633vw, 1.5rem);
  --p-s:clamp(1rem, 0.9617rem + 0.1633vw, 1.125rem);
  /* fluid space: S, M (2M is calc(var(--s4) * 2)), L, gutter, margin */
  --s2:clamp(1.75rem, 1.6735rem + 0.3265vw, 2rem);
  --s4:clamp(2.5rem, 2.0408rem + 1.9592vw, 4rem);
  --s10:clamp(5.5rem, 4.1224rem + 5.8776vw, 10rem);
  --g:clamp(1.75rem, 1.6735rem + 0.3265vw, 2rem);
  --m:clamp(2rem, 1.0816rem + 3.9184vw, 5rem);
  /* shadows: float on floating things, lift on a hovered clickable card */
  --float:0 24px 48px -24px rgba(17,14,10,.28);
  --lift:0 0 0 1px #E3E2DF, 0 10px 24px -14px rgba(17,14,10,.2);
  /* motion: state 0.2s ease, fade 0.45s ease, move 0.5s on this curve */
  --move:cubic-bezier(.32,.72,0,1);
  --font-sans:'Geist', system-ui, sans-serif;
  --font-mono:'Sometype Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- base ---------- */
.sv{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-weight:400;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.sv *{box-sizing:border-box}
.sv :where(h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd){margin:0;padding:0}
.sv :where(ul,ol){list-style:none}
.sv :where(a){color:inherit}
.sv :where(h1,h2,h3,h4){text-wrap:balance}
.sv :where(button,input,select,textarea){font:inherit;color:inherit}

/* ---------- raster ---------- */
.sv-wrap{max-width:1432px;margin:0 auto;padding-inline:var(--m)}
.sv-g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
.sv-g6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--g)}
.sv-span-2{grid-column:span 2}.sv-span-3{grid-column:span 3}.sv-span-4{grid-column:span 4}.sv-span-6{grid-column:span 6}
.sv-sec{padding-top:var(--s10)}                        /* L between sections */
.sv-sec--after-head{padding-top:calc(var(--s4) * 2)}   /* 2M after the page head */
.sv-sec--strip{padding-top:var(--s4)}                  /* M above a thin strip */
.sv-group{margin-top:var(--s4)}                        /* a second group inside one section: M above it */

/* ---------- type: the eight styles ---------- */
.sv-display{font-weight:900;font-size:var(--t-xl);line-height:1.1;letter-spacing:-.03em}
.sv-title{font-weight:900;font-size:var(--t-title);line-height:1.1;letter-spacing:-.03em}
.sv-card-title{font-weight:900;font-size:var(--t-s);line-height:1.2;letter-spacing:-.025em}
.sv-item-title{font-weight:900;font-size:var(--p-m);line-height:1.3;letter-spacing:-.01em}
.sv-lead{font-weight:400;font-size:var(--p-l);line-height:1.4;letter-spacing:-.015em}
.sv-body{font-weight:400;font-size:var(--p-s);line-height:1.45}
.sv-small{font-weight:400;font-size:14px;line-height:18px}
.sv-label{font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase}
.sv-brand,.sv-legal-name{text-transform:none}          /* sandsiv+ and the registered name SandSIV Schweiz AG keep their case inside a label */
.sv-dim{color:var(--dim)}
.sv-measure{max-width:65ch}

/* ---------- icons (inline SVG, stroke currentColor) ---------- */
.sv-ar{width:12px;height:12px;flex:none}               /* arrow  M1 6h9M6.5 2.5 10 6l-3.5 3.5, stroke 1.2 */
.sv-cv{width:10px;height:10px;flex:none}               /* chevron M2 3.8 5 6.8 8 3.8, stroke 1.3, round */

/* ---------- button ---------- */
.sv-btns{display:flex;flex-wrap:wrap;gap:8px}
* + .sv-btns{margin-top:24px}                          /* buttons 8 apart, 24 under the text before them */
.sv-btn{display:inline-flex;align-items:center;gap:10px;height:32px;padding:0 18px;border:0;border-radius:4px;
        font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase;
        text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .2s ease,transform .2s ease;
        -webkit-tap-highlight-color:transparent}
.sv-btn--primary{background:var(--green);color:var(--on-colour)}
.sv-btn--secondary{background:var(--stone);color:var(--ink)}
.sv-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sv-btn:active{transform:scale(.97)}

/* ---------- bar (for pages outside sandsiv.com; the site's own bar and menus live in the site) ---------- */
.sv-bar{position:sticky;top:0;z-index:40;height:89px;background:rgba(250,249,247,.72);
        -webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);
        border-bottom:1px solid transparent;transition:border-color .2s ease}
.sv-bar.is-scrolled{border-bottom-color:var(--stone)}
.sv-bar__in{display:flex;align-items:center;gap:8px;height:88px}
.sv-bar__brand{display:block;margin-right:auto}
.sv-bar__brand svg,.sv-bar__brand img{display:block;height:36px;width:auto}
.sv-bar__item{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:4px;background:none;color:var(--ink);
              font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase;
              text-decoration:none;cursor:pointer;transition:background-color .2s ease}
.sv-bar__item[aria-current="page"]{background:var(--stone)}
/* Get started (sv-bar__gs) opens Book a demo and Free trial in a small floating menu, as on sandsiv.com */
.sv-bar__gs{position:relative}
.sv-bar__gs > .sv-btn .sv-cv{transition:transform .2s ease}
.sv-bar__gs > .sv-btn[aria-expanded="true"] .sv-cv{transform:rotate(180deg)}
.sv-bar__pop{position:absolute;top:calc(100% + 8px);right:0;z-index:41;display:flex;flex-direction:column;gap:8px;min-width:220px;padding:8px;
             background:var(--ground);border:1px solid var(--stone);border-radius:4px;box-shadow:var(--float)}
.sv-bar__pop[hidden]{display:none}
.sv-bar__pop .sv-btn{justify-content:space-between}
.sv-bar__pop .sv-btn--secondary{background:transparent}
/* the burger (980 and below): it opens the menu over the page, paper at 80 % over a 20 px blur, 180 ms fade; it becomes its own cross */
.sv-bar__burger{display:none;position:relative;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:4px;
                background:none;color:var(--ink);cursor:pointer;transition:background-color .2s ease}
.sv-bar__burger svg{display:block;width:14px;height:14px}
.sv-bar__burger .sv-x,.sv-bar__burger[aria-expanded="true"] .sv-lines{display:none}
.sv-bar__burger[aria-expanded="true"] .sv-x{display:block}
.sv-bar__burger:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sv-bar.is-open{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
.sv-bar__menu{position:fixed;left:0;right:0;top:89px;bottom:0;z-index:39;overflow-y:auto;padding:var(--s2) var(--m) var(--s4);
              background:rgba(250,249,247,.8);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
              opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s linear .18s}
.sv-bar__menu.is-open{opacity:1;visibility:visible;transition:opacity .18s ease}
.sv-bar__links a{display:block;padding:14px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;
                 font-family:var(--font-sans);font-weight:900;font-size:var(--t-s);line-height:1.2;letter-spacing:-.025em}
.sv-bar__links a:last-child{border-bottom:1px solid var(--line)}
.sv-bar__links a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sv-bar__menu > .sv-btns{margin-top:var(--s4)}
@media (max-width:980px){
  .sv-bar__item,.sv-bar__in > .sv-btn,.sv-bar__gs{display:none}  /* the bar holds the wordmark and the burger; Book a demo and Free trial move into the menu */
  .sv-bar__burger{display:inline-flex}
}
@media (min-width:981px){ .sv-bar__menu{display:none} }
@media (max-width:900px){
  .sv-bar{height:69px}.sv-bar__in{height:68px}
  .sv-bar__brand svg,.sv-bar__brand img{height:23px}
  .sv-bar__menu{top:69px}
}
/* the fold (above 900): past 80 px of scroll the wordmark folds into the s+ mark (27.6 px tall) and unfolds under 40 px;
   the script of example.html moves the s and the + and fades the letters between them; on phones it stays whole */
@media (min-width:901px){
  .sv-bar__brand svg{transition:height .5s cubic-bezier(.32,.72,0,1)}
  .sv-bar.is-folded .sv-bar__brand svg{height:27.6px}
}
@media (prefers-reduced-motion:reduce){ .sv-bar__menu,.sv-bar__menu.is-open,.sv-bar__brand svg{transition:none} }

/* ---------- page head ---------- */
.sv-head{padding-top:var(--s10)}                       /* L under the bar */
.sv-head.sv-g12,.sv-head .sv-g12{align-items:last baseline}
.sv-head h1{grid-column:1 / 8}
.sv-head .sv-lead{grid-column:8 / 13}
@media (max-width:900px){
  .sv-head.sv-g12,.sv-head .sv-g12{grid-template-columns:minmax(0,1fr)}
  .sv-head h1,.sv-head .sv-lead{grid-column:1 / -1}
  .sv-head .sv-lead{margin-top:24px}
}

/* ---------- section title ---------- */
.sv-sectitle{max-width:calc((100% - 11 * var(--g)) * 7 / 12 + 6 * var(--g));margin-bottom:var(--s4)}   /* columns 1 to 7, M to the content */
.sv-sectitle:has(+ .sv-intro){margin-bottom:var(--s2)}                                                /* S to an intro */
.sv-intro{max-width:65ch;color:var(--dim);margin-bottom:var(--s4)}

/* ---------- card ---------- */
.sv-card{position:relative;display:flex;flex-direction:column;background:var(--ground);color:var(--ink);border-radius:8px;
         padding:var(--s2);text-decoration:none;transition:background-color .2s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent}
.sv-card__title{font-weight:900;font-size:var(--t-s);line-height:1.2;letter-spacing:-.025em;padding-right:36px}
.sv-card__body{font-size:var(--p-s);line-height:1.45;color:var(--dim);margin-top:8px}
.sv-card--visual{min-height:440px;padding-bottom:0}
.sv-card--tall{min-height:520px}
.sv-card__visual{margin-top:auto;padding-top:var(--s2);color:var(--ink)}   /* a visual keeps its own colours, also on a colour card */
.sv-card--green{background:var(--green)}.sv-card--blue{background:var(--blue)}.sv-card--brick{background:var(--brick)}
.sv-card--green,.sv-card--blue,.sv-card--brick,.sv-on-colour{color:var(--on-colour)}
/* everything on a colour card is white at full strength; a visual keeps its own colours */
:is(.sv-card--green,.sv-card--blue,.sv-card--brick) > :not(.sv-card__visual),
:is(.sv-card--green,.sv-card--blue,.sv-card--brick) > :not(.sv-card__visual) *,.sv-on-colour *{color:inherit!important;opacity:1}
.sv-card:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* a white element set into a white card is a paper well with a line frame */
.sv-well{background:var(--paper);border:1px solid var(--line);border-radius:4px}
/* the corner arrow: always shown, line at rest; ink and the ramp move on hover; white on colour */
.sv-card__arrow{position:absolute;top:12px;right:12px;width:24px;height:24px;color:var(--line);transition:color .2s ease;pointer-events:none}
:is(.sv-card--green,.sv-card--blue,.sv-card--brick) .sv-card__arrow{color:var(--on-colour)!important}
@keyframes sv-ramp{0%{opacity:1;transform:none}20%{opacity:0;transform:translate(12px,-12px)}
  40%,60%{opacity:0;transform:translate(-12px,12px)}100%{opacity:1;transform:none}}
a.sv-card:focus-visible .sv-card__arrow{color:var(--ink);animation:sv-ramp .5s ease-in-out forwards}
/* the explainer plus: line at rest, a quarter turn on hover */
.sv-card__plus{position:absolute;top:12px;right:12px;width:24px;height:24px;color:var(--line);transition:color .2s ease,transform .5s var(--move);pointer-events:none}

/* ---------- quote card ---------- */
.sv-quote{position:relative;display:grid;grid-template-columns:minmax(0,1fr);background:var(--ground);border-radius:8px;overflow:hidden}
.sv-quote:has(.sv-quote__portrait){grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s2);min-height:440px}  /* with its portrait 440; without, as tall as what it holds */
.sv-quote__text{padding:var(--s2);display:flex;flex-direction:column}
.sv-quote__q{font-weight:900;font-size:var(--t-s);line-height:1.2;letter-spacing:-.025em;max-width:30em}
.sv-quote__who{margin-top:20px}
.sv-quote__role{color:var(--dim);margin-top:2px}
.sv-quote__logo{display:block;margin-top:auto;padding-top:24px;height:auto;max-height:45px;width:auto}
.sv-quote__portrait{align-self:end;display:block;max-height:452px;width:auto;filter:grayscale(1)}
@media (max-width:900px){
  .sv-quote,.sv-quote:has(.sv-quote__portrait){grid-template-columns:minmax(0,1fr);min-height:0}
  .sv-quote__portrait{justify-self:start;margin-left:var(--s2);height:120px}
}

/* ---------- item row ---------- */
.sv-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.sv-items--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv-item{border-top:1px solid var(--line);padding-top:24px}
.sv-item__title{font-weight:900;font-size:var(--t-s);line-height:1.2;letter-spacing:-.025em}
.sv-item__body{font-size:var(--p-s);line-height:1.45;color:var(--dim);margin-top:10px}

/* ---------- split ---------- */
.sv-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:start}
.sv-split__head{grid-column:1 / 6}
.sv-split__intro{font-size:var(--p-s);line-height:1.45;color:var(--dim);margin-top:var(--s2)}
.sv-split__main{grid-column:6 / 13}
.sv-split--visual .sv-split__head{grid-column:1 / 5;align-self:center}
.sv-split--visual .sv-split__main{grid-column:6 / 13}
.sv-split--flip .sv-split__head{grid-column:9 / 13;grid-row:1}
.sv-split--flip .sv-split__main{grid-column:1 / 8;grid-row:1}
.sv-panel{background:var(--ground);border-radius:8px;min-height:420px}

/* ---------- lined list (label beside value) ---------- */
.sv-list{border-top:1px solid var(--line)}
.sv-list > li,.sv-list > div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5fr);column-gap:var(--g);padding:14px 0;border-bottom:1px solid var(--line)}
.sv-list .sv-label{color:var(--dim);padding-top:3px}

/* ---------- steps ---------- */
.sv-steps{border-top:1px solid var(--line)}
.sv-steps > li{padding:22px 0;border-bottom:1px solid var(--line)}
.sv-steps__title{font-weight:900;font-size:var(--p-m);line-height:1.3;letter-spacing:-.01em}
.sv-steps__body{font-size:var(--p-s);line-height:1.45;color:var(--dim);margin-top:6px;max-width:65ch}

/* ---------- link rows ---------- */
.sv-rows{border-top:1px solid var(--line)}
.sv-rows > li{border-bottom:1px solid var(--line)}
.sv-row{position:relative;display:block;padding:22px 48px 22px 0;text-decoration:none;color:var(--ink);-webkit-tap-highlight-color:transparent}
.sv-row__t{font-weight:900;font-size:var(--t-s);line-height:1.2;letter-spacing:-.025em;text-decoration-thickness:1px;text-underline-offset:3px}
.sv-row__d{display:block;font-size:var(--p-s);line-height:1.45;color:var(--dim);margin-top:6px;max-width:65ch}
.sv-row__ar{position:absolute;top:22px;right:0;width:24px;height:24px;color:var(--line);transition:color .2s ease}
.sv-row:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- FAQ ---------- */
.sv-faq{border-top:1px solid var(--line)}
.sv-faq details{border-bottom:1px solid var(--line)}
.sv-faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s2);padding:22px 0;cursor:pointer;list-style:none;
                font-weight:900;font-size:var(--t-s);line-height:1.2;letter-spacing:-.025em}
.sv-faq summary::-webkit-details-marker{display:none}
/* the toggle is the CI's plus (24 px, stroke 1.8, CI.md 8), dim, on the question's first line; open, its upright stroke goes and it is a minus */
.sv-faq summary::after{content:'';flex:none;align-self:flex-start;width:24px;height:24px;margin-top:calc((1.2em - 24px) / 2);color:var(--dim);background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E") center / 24px 24px no-repeat}
.sv-faq details[open] summary::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E")}
.sv-faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sv-faq details p{font-size:var(--p-s);line-height:1.45;color:var(--dim);max-width:calc((100% - 11 * var(--g)) * 7 / 12 + 6 * var(--g));margin-bottom:24px}

/* ---------- figures row and review cards ---------- */
.sv-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.sv-fig b{display:block;font-weight:900;font-size:var(--t-xl);line-height:1.1;letter-spacing:-.03em}
.sv-fig > span{display:block;margin-top:12px;max-width:288px;color:var(--dim)}
.sv-figs__src{margin-top:18px;color:var(--dim)}

/* ---------- table of figures and lookup (3.4) ---------- */
.sv-table{width:100%;border-collapse:collapse;font-size:var(--p-s);line-height:1.45}
.sv-table th,.sv-table td{padding:14px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-weight:400}
.sv-table thead th,.sv-table thead td{padding:0 0 10px;font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:15px;
                                      letter-spacing:.08em;text-transform:uppercase;color:var(--dim);vertical-align:bottom}
.sv-table tbody th{color:var(--ink);padding-right:var(--g)}
.sv-table tbody td,.sv-table thead th{width:9em;padding-left:var(--g);text-align:right;white-space:nowrap}
.sv-table .sv-table__ref{color:var(--dim)}
.sv-table .is-new{animation:sv-fade .45s ease}
.sv-lookup .sv-table{margin-top:24px}

/* ---------- source line and method note (3.4) ---------- */
.sv-src{margin-top:18px;color:var(--dim)}                  /* with sv-label: 18 under what it sources */
.sv-note{margin-top:8px;font-size:14px;line-height:18px;color:var(--dim);max-width:65ch}
.sv-reviews{margin-top:var(--s2)}               /* a row of review cards (sv-g6 sv-reviews) S under the figures row's source line */
.sv-review{background:var(--ground);border-radius:8px;padding:var(--s2);display:flex;flex-direction:column}
.sv-review__quote{font-size:var(--p-s);line-height:1.45}
.sv-review__who{display:flex;justify-content:space-between;gap:12px;font-style:normal;color:var(--dim);padding-top:16px;margin-top:auto}
.sv-review__score{flex:none;color:var(--dim)}   /* the score sits under the quote, never above it */

/* ---------- CTA block ---------- */
.sv-cta{align-items:end}
.sv-cta__line{grid-column:1 / 8}
.sv-cta .sv-btns{grid-column:9 / 13;justify-content:flex-end;margin-top:24px}

/* ---------- chat ---------- */
.sv-chat{padding-top:var(--s10)}
.sv-chat__hello{font-weight:900;font-size:var(--t-xl);line-height:1.1;letter-spacing:-.03em;margin-bottom:40px}
.sv-chat__box{display:flex;flex-direction:column;gap:6px;min-height:133px;background:var(--ground);border:1px solid var(--line);border-radius:8px;
              padding:18px 14px 12px 24px;box-shadow:var(--float);transition:border-color .2s ease}
.sv-chat__box:focus-within{border-color:var(--ink)}
.sv-chat__ai{font-family:var(--font-mono);font-weight:500;font-size:11px;line-height:15px;letter-spacing:.02em;text-transform:uppercase;color:var(--dim);text-align:right}
.sv-chat__field{min-height:40px;display:flex;align-items:center;font-size:var(--p-m);color:var(--dim)}
.sv-chat__bar{display:flex;justify-content:flex-end;align-items:center;gap:6px;height:32px}
.sv-chat__faq{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;background:none;font:400 14px/18px var(--font-sans);color:var(--ink);border-radius:4px;cursor:pointer}
.sv-chat__send{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:4px;background:var(--ink);color:var(--on-colour);cursor:pointer}

/* ---------- connector tile ---------- */
.sv-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sv-tile{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:4px;background:var(--ground);color:var(--ink)}
.sv-card .sv-tile,.sv-panel .sv-tile{background:var(--paper);border:1px solid var(--line)}
.sv-tile b{font-weight:900;font-size:12px;line-height:14px;letter-spacing:-.02em}
.sv-tile svg{flex:none;width:18px;height:18px;fill:currentColor;color:var(--fam,var(--ink))}
.sv-tile:not(:has(svg))::before{content:'';flex:none;width:8px;height:8px;margin:0 5px;border-radius:2px;background:var(--fam,var(--ink))}

/* ---------- product window ---------- */
.sv-tabs{display:flex;justify-content:flex-end;gap:8px;margin-bottom:16px}
.sv-tab{height:38px;padding:0 16px;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--ink);cursor:pointer;
        font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase;transition:background-color .2s ease}
.sv-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-colour)}
.sv-win{border:1px solid var(--line);border-radius:8px;background:var(--ground);overflow:hidden}
/* a stage fragment: a white window with a stone frame; the front one floats */
.sv-frag{background:var(--ground);border:1px solid var(--stone);border-radius:8px}
.sv-frag--front{box-shadow:var(--float);padding:24px}

/* ---------- forms ---------- */
/* the form's grid, as on Contact: two fields a row on the gutter, rows 12 apart; a full-width field; the foot with the note and the one button */
.sv-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px var(--g)}
.sv-form__full{grid-column:1 / -1}
.sv-form__foot{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-top:12px}
.sv-form__foot .sv-hint a{color:inherit;text-underline-offset:3px}
.sv-form__ok{font-size:var(--p-s);line-height:1.45}
.sv-form__hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}   /* the field a person never sees; a bot fills it */
.sv-field{display:flex;flex-direction:column;gap:8px}
.sv-field > label,.sv-field > .sv-field__l{font-size:14px;line-height:18px}
.sv-input{height:44px;width:100%;padding:0 12px;border:1px solid var(--line);border-radius:4px;background:var(--ground);color:var(--ink);
          font-family:var(--font-sans);font-size:16px;line-height:20px;transition:border-color .2s ease}
textarea.sv-input{height:auto;min-height:120px;padding:11px 12px;resize:vertical}
.sv-input::placeholder{color:var(--dim)}
.sv-input:focus{outline:none;border-color:var(--ink)}
.sv-input[aria-invalid="true"]{border-color:var(--error)}
.sv-hint{font-size:14px;line-height:18px;color:var(--dim)}
.sv-err{font-size:14px;line-height:18px;color:var(--error)}
.sv-chips{display:flex;flex-wrap:wrap;gap:8px}
.sv-chip{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:4px;background:var(--ground);
         color:var(--ink);font-size:14px;line-height:18px;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.sv-chip[aria-pressed="true"],.sv-chip:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--on-colour)}
.sv-chip input{position:absolute;opacity:0;pointer-events:none}

/* a select (six to fifteen options, 3.4): the CI's chevron 16 from the right, the placeholder option dim until a choice */
select.sv-input{-webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;text-overflow:ellipsis;
                background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.8 5 6.8 8 3.8' fill='none' stroke='%23110E0A' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:10px 10px}
select.sv-input:has(> option[value=""]:checked){color:var(--dim)}
select.sv-input option{color:var(--ink)}
/* where a form stands (3.4): white fields on the paper page, paper wells inside a white card, panel or fragment */
.sv-card .sv-input,.sv-panel .sv-input,.sv-frag .sv-input{background-color:var(--paper)}

/* ---------- search list: one of sixteen or more (3.4); the script is in kit/example.html ---------- */
.sv-combo__box{position:relative}
.sv-combo__input{padding-right:40px;text-overflow:ellipsis;
                 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.8 5 6.8 8 3.8' fill='none' stroke='%23110E0A' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:10px 10px}
.sv-combo__input[aria-expanded="true"]{border-color:var(--ink)}
.sv-combo__list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);max-height:248px;overflow-y:auto;overscroll-behavior:contain;
                padding:4px 0;background:var(--ground);border:1px solid var(--stone);border-radius:8px;box-shadow:var(--float)}
.sv-combo__list[hidden],.sv-combo__opt[hidden],.sv-combo__none[hidden]{display:none}
.sv-combo__opt{display:block;padding:10px 12px;font-size:16px;line-height:20px;color:var(--ink);cursor:pointer;transition:background-color .2s ease}
.sv-combo__opt[aria-selected="true"]{background:var(--stone)}
.sv-combo__none{display:block;padding:10px 12px;font-size:16px;line-height:20px;color:var(--dim)}

/* ---------- footer: the page ends as a paper sheet over the ink footer ---------- */
.sv-foot{background:var(--ink);color:#FFFFFF}
.sv-foot__sheet{height:var(--s10);background:var(--paper);border-radius:0 0 8px 8px}
.sv-foot__in{padding-top:calc(var(--s4) * 2);padding-bottom:calc(var(--s2) + env(safe-area-inset-bottom,0px))}
.sv-foot__cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:var(--s2)}
.sv-foot__col{grid-column:span 2}
.sv-foot__h,.sv-foot a,.sv-foot__legal,.sv-foot__adr{font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase}
.sv-foot__h{color:#FFFFFF;padding:4.5px 0;margin-bottom:12px}
.sv-foot .sv-foot__h a{padding:0;color:inherit;text-underline-offset:3px}   /* the first three headings link to their overview pages */
.sv-foot a{display:inline-block;padding:4.5px 0;color:var(--line);text-decoration:none;transition:color .2s ease}
.sv-foot a:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.sv-foot__rule{height:1px;background:var(--dim);margin:calc(var(--s4) * 2) 0 var(--s2)}
.sv-foot__b{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:var(--s2);align-items:start}
.sv-foot__legal{grid-column:1 / span 9;display:flex;flex-wrap:wrap;column-gap:24px;color:var(--line)}
.sv-foot__legal > *{padding:4.5px 0}
.sv-foot__brand{grid-column:10 / span 3;justify-self:end;padding-top:3.5px}
.sv-foot__brand svg,.sv-foot__brand img{display:block;height:17px;width:auto}
.sv-foot__adr{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g);color:var(--line);font-style:normal;line-height:24px;
              visibility:hidden;opacity:0;transition:opacity .45s ease,visibility 0s linear .45s}
/* the legal name opens the three addresses, in the space kept for them (folded away at 560 and below) */
.sv-foot__who{all:unset;display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--line);transition:color .2s ease}
.sv-foot__who:hover,.sv-foot__who[aria-expanded="true"]{color:#FFFFFF}
.sv-foot__who:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.sv-foot__who svg{width:10px;height:10px;flex:none;transition:transform .2s ease}
.sv-foot__who[aria-expanded="true"] svg{transform:rotate(180deg)}
.sv-foot.is-where .sv-foot__adr{visibility:visible;opacity:1;transition:opacity .45s ease}
@media (max-width:1360px){.sv-foot__col{grid-column:span 4}}
@media (max-width:560px){
  .sv-foot__cols,.sv-foot__b,.sv-foot__adr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-foot__col{grid-column:span 1}
  .sv-foot__legal,.sv-foot__adr{grid-column:1 / -1}
  .sv-foot__brand{grid-column:1 / -1;justify-self:start;order:-1}
  .sv-foot__brand svg,.sv-foot__brand img{height:23px}
  .sv-foot a,.sv-foot__legal,.sv-foot__adr{font-family:var(--font-sans);font-weight:400;font-size:14px;line-height:18px;letter-spacing:0;text-transform:none}
  .sv-foot .sv-foot__h a{font:inherit;letter-spacing:inherit;text-transform:inherit}   /* a heading that links stays a heading */
  .sv-foot__adr{grid-template-columns:minmax(0,1fr);row-gap:12px;display:none}
  .sv-foot.is-where .sv-foot__adr{display:grid}
  .sv-foot__legal > .sv-foot__who{flex-basis:100%}    /* the legal name on its line, the legal links as one line of words under it */
}
@media (max-width:359px){.sv-foot__cols{grid-template-columns:minmax(0,1fr)}}

/* ---------- cookie card ---------- */
/* bottom left over the page, as on sandsiv.com: 16 from the edges, 32 above 900. Decline is a link in the sentence,
   16 px after the cookie policy link (its right margin, so where the line breaks between them Decline starts flush);
   Accept is the one button, across the row (9 October 2026) */
.sv-cookie{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;width:min(420px,calc(100vw - 32px));
           background:var(--ground);border:1px solid var(--stone);border-radius:8px;padding:20px;box-shadow:var(--float);animation:sv-fade .45s ease both}
@media (min-width:901px){.sv-cookie{left:32px;bottom:calc(32px + env(safe-area-inset-bottom,0px))}}
.sv-cookie p{font-size:15px;line-height:22px}
.sv-cookie p a{text-underline-offset:3px}
.sv-cookie__policy{margin-right:16px;white-space:nowrap}
.sv-cookie__decline{display:inline;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline 1px;text-underline-offset:3px;white-space:nowrap;cursor:pointer}
.sv-cookie__decline:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sv-cookie__b{display:grid;grid-template-columns:1fr;gap:8px;margin-top:16px}
.sv-cookie__b .sv-btn{justify-content:center}
@keyframes sv-fade{from{opacity:0}to{opacity:1}}

/* ---------- hover: only where a pointer hovers ---------- */
@media (any-hover:hover){
  .sv-btn--primary:hover{background:var(--green-hover)}
  .sv-btn--secondary:hover{background:var(--line)}
  .sv-cookie__decline:hover{text-decoration-thickness:2px}
  .sv-bar__item:hover,.sv-bar__burger:hover{background:var(--stone)}
  a.sv-card:hover{box-shadow:var(--lift)}
  a.sv-card--green:hover{background:var(--green-hover)}
  a.sv-card--blue:hover{background:var(--blue-hover)}
  a.sv-card--brick:hover{background:var(--brick-hover)}
  a.sv-card:hover .sv-card__arrow{color:var(--ink);animation:sv-ramp .5s ease-in-out forwards}
  .sv-card:hover .sv-card__plus{color:var(--ink);transform:rotate(90deg)}
  .sv-row:hover .sv-row__t{text-decoration-line:underline;text-decoration-thickness:3px}
  .sv-row:hover .sv-row__ar{color:var(--ink);animation:sv-ramp .5s ease-in-out forwards}
  .sv-tab:not([aria-selected="true"]):hover{background:var(--stone)}
  .sv-input:not(:focus):hover{border-color:var(--dim)}
  .sv-chip:not([aria-pressed="true"]):not(:has(input:checked)):hover{border-color:var(--ink)}
  .sv-combo__opt:hover{background:var(--stone)}
  .sv-chat__box:not(:focus-within):hover{border-color:var(--dim)}
  .sv-foot a:hover{color:#FFFFFF}
  .sv-foot .sv-foot__h a:hover{text-decoration:underline}
  .sv-bar__pop .sv-btn--secondary:hover{background:var(--stone)}
}

/* ---------- phones: 900 and below ---------- */
@media (max-width:1180px){.sv-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .sv-g6{grid-template-columns:minmax(0,1fr)}
  .sv-form{grid-template-columns:minmax(0,1fr)}
  .sv-span-2,.sv-span-3,.sv-span-4,.sv-span-6{grid-column:1 / -1}
  .sv-card--visual,.sv-card--tall{min-height:0}
  /* one desktop row of cards becomes one sideways row: snap, cards 75 % wide, the next showing at the edge */
  .sv-g6.sv-swipe{display:flex;gap:var(--g);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--m) * -1);padding-inline:var(--m);
                  scroll-padding-inline:var(--m);scrollbar-width:none}
  .sv-g6.sv-swipe::-webkit-scrollbar{display:none}
  .sv-g6.sv-swipe > *{flex:0 0 75%;scroll-snap-align:start}
  .sv-items,.sv-items--2{grid-template-columns:minmax(0,1fr)}
  .sv-fig b{font-size:var(--t-title)}                  /* the figures keep one row of three and step down to title size */
  .sv-split{grid-template-columns:minmax(0,1fr);row-gap:var(--s4)}   /* M from the title to its content, as on the desktop */
  .sv-split .sv-split__head,.sv-split .sv-split__main{grid-column:1 / -1;grid-row:auto}
  .sv-cta{grid-template-columns:minmax(0,1fr)}
  .sv-cta__line,.sv-cta .sv-btns{grid-column:1 / -1}
  .sv-cta .sv-btns{justify-content:flex-start;margin-top:var(--s2)}
  .sv-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-list > li,.sv-list > div{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
}
@media (max-width:640px){.sv-chat__box{min-height:116px}}
@media (max-width:560px){.sv-table tbody td,.sv-table thead th{width:6.5em;padding-left:16px}.sv-table tbody th{padding-right:16px}}

/* ---------- reduced motion: every state at once ---------- */
@media (prefers-reduced-motion:reduce){
  .sv *,.sv *::before,.sv *::after{animation:none!important;transition:none!important}
}