/* ---- 1. tokens ---------------------------------------------------------------------------------- */
.shlau-site{container-type:inline-size;
--sp-1:.5rem;--sp-2:1rem;--sp-3:1.5rem;--sp-4:2.5rem;--sp-5:4rem;--sp-6:6rem;
--gap:clamp(1rem,.7rem + 1.2cqi,1.75rem);--gap-l:clamp(1.5rem,1rem + 4cqi,4.5rem);
--surface:color-mix(in srgb,var(--c-text) 5%,var(--c-bg));--muted:color-mix(in srgb,var(--c-text) 64%,var(--c-bg));
--line:color-mix(in srgb,var(--c-text) 14%,var(--c-bg));
--wrap:1180px;--pk:1;--rm:1;
--r:calc(var(--radius,10px) * var(--rm));--r-card:calc(var(--r) * 1.5);--btn-r:var(--r);
--fs-h1:clamp(2.4rem,1.4rem + 4.4cqi,4.4rem);--fs-h2:clamp(1.8rem,1.1rem + 2.6cqi,3rem);--fs-h3:1.2rem;
--lead-fs:clamp(1.05rem,.95rem + .6cqi,1.3rem);
--hw:700;--ht:-.02em;--htt:none;--hlh:1.1;
--eb-tt:uppercase;--eb-ls:.14em;--eb-bar:none;--h2-bar:none;
--card-tint:4%;--card-bw:1px;--card-bc:14%;--card-sh:0 1px 2px rgb(0 0 0 / .05),0 18px 40px -22px rgb(0 0 0 / .3);
--btn-bw:2px;--btn-tt:none;--btn-ls:0;--btn-off:0px;--btn-sh:0 0 0 transparent;--btn-sh-h:0 12px 26px -12px color-mix(in srgb,var(--c-primary) 75%,transparent);
--hero-deco:radial-gradient(60% 55% at 88% 8%,color-mix(in srgb,var(--c-primary) 20%,transparent),transparent 70%),radial-gradient(50% 50% at 4% 92%,color-mix(in srgb,var(--c-accent) 16%,transparent),transparent 70%);
--media-deco:block;
font-family:var(--font-body);color:var(--c-text);background:var(--c-bg);line-height:1.6;font-size:17px;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* editorial: magazine, big light type, hairlines, no shadows, square corners */
.shlau-site[data-style="editorial"]{--pk:1.25;--rm:.15;--wrap:1240px;
--fs-h1:clamp(2.7rem,1.3rem + 7.4cqi,7.2rem);--fs-h2:clamp(2rem,1.2rem + 3.8cqi,4.2rem);--fs-h3:1.35rem;
--hw:500;--ht:-.035em;--hlh:1.02;--eb-ls:.2em;--eb-bar:inline-block;--h2-bar:block;
--card-tint:0%;--card-bw:1px;--card-bc:22%;--card-sh:none;
--btn-r:0px;--btn-bw:1px;--btn-tt:uppercase;--btn-ls:.1em;--btn-sh-h:none;
--hero-deco:linear-gradient(90deg,color-mix(in srgb,var(--c-text) 7%,transparent) 1px,transparent 1px) 0 0/calc(100% / 12) 100%;
--media-deco:none}

/* bold: loud and blocky, uppercase headings, heavy lines, hard offset shadows */
.shlau-site[data-style="bold"]{--pk:.95;--rm:.35;
--fs-h1:clamp(2.6rem,1.2rem + 7.6cqi,7.6rem);--fs-h2:clamp(2rem,1rem + 4.6cqi,4.6rem);--fs-h3:1.3rem;
--hw:700;--ht:-.03em;--htt:uppercase;--hlh:.98;--eb-ls:.18em;--eb-bar:inline-block;--h2-bar:block;
--card-tint:0%;--card-bw:2px;--card-bc:100%;--card-sh:none;
--btn-r:0px;--btn-bw:2px;--btn-tt:uppercase;--btn-ls:.06em;--btn-off:5px;--btn-sh-h:none;
--hero-deco:linear-gradient(color-mix(in srgb,var(--c-on-primary) 10%,transparent) 2px,transparent 2px) 0 0/56px 56px,linear-gradient(90deg,color-mix(in srgb,var(--c-on-primary) 10%,transparent) 2px,transparent 2px) 0 0/56px 56px,radial-gradient(45% 65% at 100% 100%,color-mix(in srgb,var(--c-accent) 55%,transparent),transparent 70%);
--media-deco:none}

/* soft: round and friendly, pill buttons, big shadows, colour blobs */
.shlau-site[data-style="soft"]{--pk:1.1;--rm:2.2;
--fs-h1:clamp(2.4rem,1.3rem + 5cqi,4.8rem);--fs-h2:clamp(1.8rem,1.1rem + 3cqi,3.2rem);
--hw:700;--ht:-.015em;--hlh:1.12;--eb-tt:none;--eb-ls:.02em;
--card-tint:6%;--card-bw:0px;--card-bc:0%;--card-sh:0 2px 6px rgb(0 0 0 / .04),0 26px 50px -24px rgb(0 0 0 / .28);
--btn-r:999px;--btn-bw:2px;--btn-sh-h:0 16px 30px -14px color-mix(in srgb,var(--c-primary) 80%,transparent);
--hero-deco:radial-gradient(40% 45% at 12% 18%,color-mix(in srgb,var(--c-accent) 26%,transparent),transparent 70%),radial-gradient(45% 50% at 90% 30%,color-mix(in srgb,var(--c-primary) 20%,transparent),transparent 70%),radial-gradient(40% 40% at 55% 100%,color-mix(in srgb,var(--c-secondary) 14%,transparent),transparent 70%)}

/* minimal: air and restraint, thin lines, quiet type, no decoration */
.shlau-site[data-style="minimal"]{--pk:1.3;--rm:.5;--wrap:1080px;
--fs-h1:clamp(2.2rem,1.2rem + 4cqi,4rem);--fs-h2:clamp(1.7rem,1.1rem + 2.2cqi,2.6rem);
--hw:500;--ht:-.03em;--hlh:1.12;--eb-ls:.16em;
--card-tint:0%;--card-bw:1px;--card-bc:12%;--card-sh:none;
--btn-bw:1px;--btn-sh-h:none;--hero-deco:none;--media-deco:none}

/* ---- resets ------------------------------------------------------------------------------------- */
.shlau-site *,.shlau-site *::before,.shlau-site *::after{box-sizing:border-box}
/* Element resets sit in :where() so they have no specificity and every .ss-* class below can override them
   (a plain ".shlau-site img" would beat ".ss-logo" and ".shlau-site a" would beat the button colours). */
:where(.shlau-site) :where(img,video){display:block;max-width:100%;height:auto}
:where(.shlau-site) :where(a){color:inherit}
:where(.shlau-site) :where(h1,h2,h3){font-family:var(--font-heading);line-height:var(--hlh);margin:0;letter-spacing:var(--ht);font-weight:var(--hw)}
:where(.shlau-site) :where(p){margin:0}
:where(.shlau-site) :where(ul){list-style:none;margin:0;padding:0}
.ss-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.1rem,.6rem + 3cqi,2.5rem)}
.ss-skip{position:absolute;left:-999px;top:0;background:var(--c-primary);color:var(--c-on-primary);padding:.6rem 1rem;z-index:100}
.ss-skip:focus{left:var(--sp-2);top:var(--sp-2)}

/* ---- header ------------------------------------------------------------------------------------- */
.ss-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--c-bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.ss-header-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:68px}
.ss-brand{display:inline-flex;align-items:center;text-decoration:none}
.ss-brand-name{font-family:var(--font-heading);font-weight:var(--hw);font-size:1.25rem;letter-spacing:var(--ht);text-transform:var(--htt)}
.ss-logo{height:36px;width:auto;max-width:200px;object-fit:contain}
.ss-nav{display:flex;gap:clamp(1rem,.4rem + 2cqi,2.25rem);align-items:center}
.ss-nav a{position:relative;text-decoration:none;font-weight:500;font-size:.95rem;color:var(--muted);white-space:nowrap;transition:color .2s}
.ss-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-.35rem;height:2px;background:var(--c-accent);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.ss-nav a:hover{color:var(--c-text)}
.ss-nav a:hover::after{transform:scaleX(1)}
.ss-menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);padding:.4rem .8rem;font:inherit;color:inherit;cursor:pointer}

/* ---- sections: rhythm, type, buttons ------------------------------------------------------------ */
.ss-section{position:relative;scroll-margin-top:72px;padding:var(--py) 0;--py:calc(clamp(3.25rem,1.6rem + 7cqi,7rem) * var(--pk));
--sec-bg:var(--c-bg);--sec-fg:var(--c-text);--sec-muted:var(--muted);--sec-line:color-mix(in srgb,var(--c-text) 16%,transparent);
--btn-bg:var(--c-primary);--btn-fg:var(--c-on-primary);--btn-line:var(--c-primary);
background:var(--sec-bg);color:var(--sec-fg)}
.ss-space-compact{--py:calc(clamp(2rem,1.2rem + 3.5cqi,3.75rem) * var(--pk))}
.ss-space-spacious{--py:calc(clamp(4.5rem,2rem + 10cqi,10rem) * var(--pk))}
.ss-bg-surface{--sec-bg:var(--surface)}
.ss-bg-primary{--sec-bg:var(--c-primary);--sec-fg:var(--c-on-primary);--sec-muted:color-mix(in srgb,var(--c-on-primary) 78%,var(--c-primary));--sec-line:color-mix(in srgb,var(--c-on-primary) 26%,transparent);--btn-bg:var(--c-on-primary);--btn-fg:var(--c-primary);--btn-line:var(--c-on-primary)}
.ss-bg-dark{--sec-bg:var(--c-secondary);--sec-fg:var(--c-on-secondary);--sec-muted:color-mix(in srgb,var(--c-on-secondary) 72%,var(--c-secondary));--sec-line:color-mix(in srgb,var(--c-on-secondary) 22%,transparent);--btn-bg:var(--c-primary);--btn-fg:var(--c-on-primary);--btn-line:var(--c-primary)}
.ss-align-center{text-align:center}
.ss-align-center .ss-actions,.ss-align-center .ss-socials{justify-content:center}
.ss-section .ss-lead,.ss-section .ss-p{color:var(--sec-muted)}
.ss-h1{font-size:var(--fs-h1);text-transform:var(--htt);text-wrap:balance}
.ss-h2{font-size:var(--fs-h2);text-transform:var(--htt);text-wrap:balance}
.ss-h2::before{content:"";display:var(--h2-bar);width:2.75rem;height:4px;background:var(--c-accent);margin-bottom:1.1rem}
.ss-align-center .ss-h2::before{margin-inline:auto}
.ss-h3{font-size:var(--fs-h3);font-weight:600;text-transform:none;letter-spacing:-.01em}
.ss-eyebrow{display:inline-flex;align-items:center;gap:.6rem;text-transform:var(--eb-tt);letter-spacing:var(--eb-ls);font-size:.78rem;font-weight:600;margin-bottom:var(--sp-3);color:var(--sec-fg)}
.ss-eyebrow::before{content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--c-accent)}
.ss-lead{font-size:var(--lead-fs);margin-top:var(--sp-3);max-width:58ch;text-wrap:pretty}
.ss-align-center .ss-lead{margin-left:auto;margin-right:auto}
.ss-p{margin-top:var(--sp-2);max-width:66ch;text-wrap:pretty}
.ss-align-center .ss-p{margin-left:auto;margin-right:auto}
.ss-head{margin-bottom:clamp(2rem,1.2rem + 3cqi,3.75rem);max-width:46rem}
.ss-align-center .ss-head{margin-left:auto;margin-right:auto}
.ss-head .ss-lead{margin-top:var(--sp-2)}
.ss-empty{color:var(--sec-muted);border:1px dashed var(--sec-line);border-radius:var(--r);padding:var(--sp-4);text-align:center}

.ss-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(1.5rem,1rem + 1.6cqi,2.5rem)}
.ss-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.75rem 1.6rem;border-radius:var(--btn-r);font:inherit;font-weight:600;letter-spacing:var(--btn-ls);text-transform:var(--btn-tt);text-decoration:none;cursor:pointer;border:var(--btn-bw) solid var(--btn-line);box-shadow:var(--btn-sh);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,background-color .2s,border-color .2s}
.ss-btn:hover{transform:translateY(-2px);box-shadow:var(--btn-sh-h)}
.ss-btn:active{transform:translateY(0)}
.ss-btn:focus-visible,.shlau-site a:focus-visible,.shlau-site input:focus-visible,.shlau-site textarea:focus-visible,.ss-menu-btn:focus-visible,.ss-gallery-grid:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px}
.ss-btn-primary{background:var(--btn-bg);color:var(--btn-fg)}
.ss-btn-secondary{background:transparent;color:var(--sec-fg);border-color:color-mix(in srgb,var(--sec-fg) 38%,transparent)}
.ss-btn-secondary:hover{border-color:var(--sec-fg)}
.ss-btn-small{min-height:40px;padding:.45rem 1.1rem;font-size:.92rem}

/* ---- hero --------------------------------------------------------------------------------------- */
.ss-hero{--py:calc(clamp(3.5rem,1.4rem + 9.5cqi,9.5rem) * var(--pk));isolation:isolate;overflow:hidden}
.ss-hero.ss-space-compact{--py:calc(clamp(2.5rem,1.2rem + 5cqi,5rem) * var(--pk))}
.ss-hero.ss-space-spacious{--py:calc(clamp(5rem,2rem + 12cqi,12rem) * var(--pk))}
.ss-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--hero-deco)}
.ss-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-l);align-items:center}
.ss-hero-copy{min-width:0}
.ss-hero-media{position:relative;min-width:0}
.ss-hero-media img,.ss-hero-media video{width:100%;border-radius:var(--r-card);aspect-ratio:5/4;object-fit:cover;box-shadow:var(--card-sh)}
.ss-hero-media::before{content:"";display:var(--media-deco);position:absolute;inset:7% -5% -7% 6%;z-index:-1;border-radius:var(--r-card);background:linear-gradient(135deg,var(--c-primary),var(--c-accent));opacity:.2}
:where(.ss-hero.ss-v-split:not(.ss-no-media)) .ss-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
:where(.ss-hero.ss-no-media) .ss-hero-copy{max-width:56rem}
:where(.ss-hero.ss-no-media.ss-align-center) .ss-hero-copy{margin-inline:auto}
:where(.ss-hero.ss-v-centered) .ss-hero-media{max-width:960px;margin:0 auto;width:100%}
:where(.ss-hero.ss-v-centered) .ss-hero-media img{aspect-ratio:16/9}
:where(.ss-hero.ss-v-centered) .ss-hero-copy{margin-inline:auto;max-width:56rem;text-align:center}
:where(.ss-hero.ss-v-centered) .ss-actions{justify-content:center}
:where(.ss-hero.ss-v-centered) .ss-lead{margin-left:auto;margin-right:auto}
.ss-has-backdrop{--sec-fg:#fff;--sec-muted:rgba(255,255,255,.86);--sec-line:rgba(255,255,255,.3);--btn-bg:var(--c-primary);--btn-fg:var(--c-on-primary);--btn-line:var(--c-primary);min-height:min(82vh,760px);display:flex;align-items:center;background:#111;color:#fff}
.ss-has-backdrop::before{display:none}
.ss-has-backdrop>.ss-wrap{position:relative}
.ss-has-backdrop .ss-btn-secondary{border-color:rgba(255,255,255,.7)}
.ss-backdrop{position:absolute;inset:0;z-index:-1}
.ss-backdrop img,.ss-backdrop video{width:100%;height:100%;object-fit:cover}
.ss-overlay{position:absolute;inset:0;background:#000}
:where(.ss-hero.ss-v-fullbleed) .ss-hero-copy{max-width:46rem}
:where(.ss-hero.ss-v-fullbleed.ss-align-center) .ss-hero-copy{margin:0 auto}

/* spotlight: centred headline over a glow, the picture tilted back like a screen */
:where(.ss-hero.ss-v-spotlight){text-align:center}
:where(.ss-hero.ss-v-spotlight) .ss-hero-grid{justify-items:center;gap:clamp(2rem,1rem + 5cqi,4.5rem)}
:where(.ss-hero.ss-v-spotlight) .ss-hero-copy{max-width:58rem}
:where(.ss-hero.ss-v-spotlight) .ss-lead{margin-left:auto;margin-right:auto}
:where(.ss-hero.ss-v-spotlight) .ss-actions{justify-content:center}
.ss-v-spotlight.ss-hero::before{background:radial-gradient(55% 60% at 50% 0%,color-mix(in srgb,var(--c-accent) 38%,transparent),transparent 72%),radial-gradient(40% 40% at 15% 100%,color-mix(in srgb,var(--c-primary) 22%,transparent),transparent 70%),var(--hero-deco)}
.ss-v-spotlight .ss-h1{background:linear-gradient(180deg,var(--sec-fg) 30%,color-mix(in srgb,var(--sec-fg) 62%,var(--sec-bg)));-webkit-background-clip:text;background-clip:text;color:transparent}
.ss-v-spotlight .ss-hero-media{width:min(100%,64rem);padding:.6rem;border-radius:calc(var(--r-card) + .5rem);background:color-mix(in srgb,var(--sec-fg) 8%,transparent);border:1px solid var(--sec-line);box-shadow:0 50px 90px -40px rgb(0 0 0 / .5);transform:perspective(1500px) rotateX(7deg);transform-origin:50% 0}
.ss-v-spotlight .ss-hero-media::before{display:none}
.ss-v-spotlight .ss-hero-media img,.ss-v-spotlight .ss-hero-media video{aspect-ratio:16/9;box-shadow:none;border-radius:var(--r-card)}

/* editorial: asymmetric, a rule above the headline, a tall picture set lower than the copy */
:where(.ss-hero.ss-v-editorial) .ss-hero-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end}
:where(.ss-hero.ss-v-editorial) .ss-hero-copy{grid-column:1 / span 8;padding-top:var(--sp-3);border-top:2px solid var(--sec-fg);max-width:none}
:where(.ss-hero.ss-v-editorial) .ss-hero-media{grid-column:9 / -1;margin-bottom:calc(var(--sp-4) * -1)}
:where(.ss-hero.ss-v-editorial.ss-no-media) .ss-hero-copy{grid-column:1 / span 10}
:where(.ss-hero.ss-v-editorial) .ss-hero-media img{aspect-ratio:3/4;border-radius:var(--r)}
:where(.ss-hero.ss-v-editorial) .ss-lead{max-width:40ch}

/* marquee: a huge headline over an endless ticker of what the business is about */
:where(.ss-hero.ss-v-marquee) .ss-hero-copy{max-width:none}
:where(.ss-hero.ss-v-marquee) .ss-h1{font-size:clamp(2.8rem,.9rem + 8.2cqi,8rem);line-height:.92;letter-spacing:-.04em;max-width:15ch}
:where(.ss-hero.ss-v-marquee.ss-align-center) .ss-h1{margin-inline:auto}
:where(.ss-hero.ss-v-marquee) .ss-hero-media img{aspect-ratio:21/9}
.ss-hero.ss-v-marquee{padding-bottom:0}
.ss-hero.ss-v-marquee .ss-stats{margin-bottom:clamp(2rem,1rem + 4cqi,4rem)}
.ss-ticker{margin-top:clamp(2rem,1rem + 5cqi,4.5rem);overflow:hidden;padding:clamp(.9rem,.6rem + 1cqi,1.4rem) 0;background:var(--sec-fg);color:var(--sec-bg)}
.ss-ticker .ss-marq-list li{display:flex;align-items:center;gap:clamp(1.5rem,1rem + 2cqi,3rem);padding-right:clamp(1.5rem,1rem + 2cqi,3rem);white-space:nowrap;font-family:var(--font-heading);font-weight:var(--hw);font-size:clamp(1.1rem,.8rem + 1.6cqi,2rem);letter-spacing:var(--ht);text-transform:var(--htt)}
.ss-ticker .ss-marq-list li::after{content:"";flex:none;width:.45em;height:.45em;background:currentColor;opacity:.55;transform:rotate(45deg)}

/* collage: overlapping, slightly turned picture cards */
:where(.ss-hero.ss-v-collage:not(.ss-no-media)) .ss-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ss-collage{position:relative;min-width:0;aspect-ratio:1/1;animation:ss-up 1.1s .2s cubic-bezier(.22,1,.36,1) both}
.ss-collage-card{position:absolute;padding:.55rem;border-radius:var(--r-card);background:var(--sec-bg);border:1px solid var(--sec-line);box-shadow:var(--card-sh),0 34px 60px -32px rgb(0 0 0 / .5);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.ss-collage-card img{width:100%;height:auto;object-fit:cover;border-radius:calc(var(--r-card) * .7)}
.ss-collage-card:nth-child(1){z-index:2;width:62%;left:0;top:3%;transform:rotate(-4deg)}
.ss-collage-card:nth-child(1) img{aspect-ratio:4/5}
.ss-collage-card:nth-child(2){z-index:3;width:54%;right:0;bottom:0;transform:rotate(3.5deg)}
.ss-collage-card:nth-child(2) img{aspect-ratio:1/1}
.ss-collage-card:nth-child(3){z-index:1;width:38%;right:7%;top:0;transform:rotate(8deg)}
.ss-collage-card:nth-child(3) img{aspect-ratio:3/4}
.ss-collage:where([data-count="1"]) .ss-collage-card:nth-child(1){width:80%;left:10%;top:4%;transform:rotate(-2.5deg)}
.ss-collage:where([data-count="2"]) .ss-collage-card:nth-child(1){width:64%}
.ss-collage:hover .ss-collage-card:nth-child(1){transform:rotate(-6deg) translate(-2%,-2%)}
.ss-collage:hover .ss-collage-card:nth-child(2){transform:rotate(5deg) translate(2%,2%)}
.ss-collage:hover .ss-collage-card:nth-child(3){transform:rotate(11deg) translate(2%,-3%)}
/* figures from the brief */
.ss-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:clamp(2.25rem,1rem + 5cqi,4.75rem);padding-top:var(--sp-3);border-top:1px solid var(--sec-line);text-align:left}
.ss-stats:where([data-count="3"]){grid-template-columns:repeat(3,minmax(0,1fr))}
.ss-stats:where([data-count="2"]){grid-template-columns:repeat(2,minmax(0,1fr))}
.ss-stats:where([data-count="1"]){grid-template-columns:minmax(0,1fr)}
.ss-align-center .ss-stats,.ss-v-spotlight .ss-stats{text-align:center}
.ss-stats li{display:flex;flex-direction:column;gap:.25rem}
.ss-stat-value{font-family:var(--font-heading);font-weight:var(--hw);font-size:clamp(2rem,1.1rem + 3.6cqi,3.8rem);line-height:1;letter-spacing:var(--ht);font-variant-numeric:tabular-nums}
.ss-stat-label{color:var(--sec-muted);font-size:.92rem}

/* ---- endless rows (hero ticker, gallery marquee) ------------------------------------------------ */
@keyframes ss-marquee{to{transform:translateX(-33.3333%)}}
@keyframes ss-marquee-back{from{transform:translateX(-33.3333%)}to{transform:translateX(0)}}
.ss-marq-track{display:flex;width:max-content;animation:ss-marquee var(--dur,30s) linear infinite;will-change:transform}
.ss-marq-row[data-dir="back"] .ss-marq-track{animation-name:ss-marquee-back}
.ss-marq-list{display:flex;flex:none;align-items:center}
.ss-ticker:hover .ss-marq-track,.ss-marquee:hover .ss-marq-track{animation-play-state:paused}
/* ---- count-aware grids: three across, and the last row is centred rather than left with a stray card - */
.ss-fit{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap)}
.ss-fit>*{grid-column:span 2;min-width:0}
.ss-fit:where([data-count="1"])>*{grid-column:2 / span 4}
.ss-fit:where([data-count="2"],[data-count="4"])>*{grid-column:span 3}
.ss-fit:where(:not([data-count="1"],[data-count="2"],[data-count="4"]))>:where(:last-child:nth-child(3n+1)){grid-column:3 / span 2}
.ss-fit:where(:not([data-count="1"],[data-count="2"],[data-count="4"]))>:where(:nth-last-child(2):nth-child(3n+1)){grid-column:2 / span 2}

/* ---- about -------------------------------------------------------------------------------------- */
.ss-about-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-l);align-items:center}
.ss-about-copy{min-width:0}
.ss-about-copy .ss-p:first-of-type{margin-top:var(--sp-3)}
.ss-about-media{position:relative;min-width:0}
.ss-about-media img,.ss-about-media video{width:100%;border-radius:var(--r-card);aspect-ratio:4/5;object-fit:cover;box-shadow:var(--card-sh)}
.ss-about-media::before{content:"";display:var(--media-deco);position:absolute;inset:6% 6% -6% -5%;z-index:-1;border-radius:var(--r-card);background:linear-gradient(135deg,var(--c-accent),var(--c-primary));opacity:.18}
.ss-about-grid .ss-highlights{grid-column:1 / -1}
:where(.ss-about.ss-v-split:not(.ss-no-media),.ss-about.ss-v-numbered:not(.ss-no-media)) .ss-about-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
:where(.ss-about.ss-v-split.ss-no-media.ss-has-hl,.ss-about.ss-v-numbered.ss-no-media.ss-has-hl) .ss-about-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
:where(.ss-about.ss-v-split.ss-no-media.ss-has-hl) .ss-highlights{grid-column:2;grid-row:1;display:flex;flex-direction:column}
:where(.ss-about.ss-v-stacked) .ss-about-copy{max-width:50rem}
:where(.ss-about.ss-v-stacked.ss-align-center) .ss-about-copy{margin-inline:auto}
:where(.ss-about.ss-v-stacked) .ss-about-media img,:where(.ss-about.ss-v-stacked) .ss-about-media video{aspect-ratio:21/9}
:where(.ss-about.ss-v-stacked) .ss-about-media::before{display:none}

.ss-highlights li{display:flex;flex-direction:column;gap:.35rem;padding:clamp(1.1rem,.8rem + 1cqi,1.6rem);border:var(--card-bw) solid color-mix(in srgb,var(--sec-fg) var(--card-bc),transparent);border-radius:var(--r-card);background:color-mix(in srgb,var(--sec-fg) var(--card-tint),var(--sec-bg));box-shadow:var(--card-sh)}
.ss-highlights strong{font-family:var(--font-heading);font-weight:600;font-size:1.1rem}
.ss-highlights span{color:var(--sec-muted);font-size:.95rem}

/* numbered: the highlights become a ruled list with large numerals */
:where(.ss-about.ss-v-numbered) .ss-highlights{display:flex;flex-direction:column;counter-reset:hl;gap:0}
:where(.ss-about.ss-v-numbered.ss-has-hl:not(.ss-no-media)) .ss-about-grid{align-items:start}
:where(.ss-about.ss-v-numbered.ss-has-hl) .ss-highlights{grid-column:2;grid-row:1}
:where(.ss-about.ss-v-numbered.ss-has-hl:not(.ss-no-media)) .ss-about-media{grid-column:1 / -1;grid-row:2}
:where(.ss-about.ss-v-numbered.ss-has-hl:not(.ss-no-media)) .ss-about-media img{aspect-ratio:21/9}
:where(.ss-about.ss-v-numbered) .ss-highlights li{counter-increment:hl;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(1rem,.6rem + 1.6cqi,2rem);align-items:start;padding:clamp(1rem,.7rem + 1cqi,1.5rem) 0;border:0;border-top:1px solid var(--sec-line);border-radius:0;background:none;box-shadow:none}
:where(.ss-about.ss-v-numbered) .ss-highlights li:last-child{border-bottom:1px solid var(--sec-line)}
:where(.ss-about.ss-v-numbered) .ss-highlights li::before{content:counter(hl,decimal-leading-zero);grid-row:1 / span 2;font-family:var(--font-heading);font-weight:var(--hw);font-size:clamp(1.8rem,1rem + 2.6cqi,3rem);line-height:1;color:var(--c-accent);min-width:2.6ch}
:where(.ss-about.ss-v-numbered) .ss-highlights li>*{grid-column:2}

/* bento: copy and picture as two tiles, the highlights as tiles beneath, the first one in colour */
:where(.ss-about.ss-v-bento) .ss-about-grid{grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch;gap:var(--gap)}
:where(.ss-about.ss-v-bento) .ss-about-copy{grid-column:span 3;padding:clamp(1.5rem,1rem + 2.4cqi,3rem);border:var(--card-bw) solid color-mix(in srgb,var(--sec-fg) var(--card-bc),transparent);border-radius:var(--r-card);background:color-mix(in srgb,var(--sec-fg) 5%,var(--sec-bg));box-shadow:var(--card-sh)}
:where(.ss-about.ss-v-bento.ss-no-media) .ss-about-copy{grid-column:1 / -1}
:where(.ss-about.ss-v-bento) .ss-about-media{grid-column:span 3}
:where(.ss-about.ss-v-bento) .ss-about-media::before{display:none}
:where(.ss-about.ss-v-bento) .ss-about-media img,:where(.ss-about.ss-v-bento) .ss-about-media video{height:100%;min-height:18rem;aspect-ratio:auto}
:where(.ss-about.ss-v-bento) .ss-highlights li:first-child{background:var(--c-primary);color:var(--c-on-primary);border-color:transparent}
:where(.ss-about.ss-v-bento) .ss-highlights li:first-child span{color:color-mix(in srgb,var(--c-on-primary) 82%,var(--c-primary))}
:where(.ss-about.ss-v-bento.ss-bg-primary) .ss-highlights li:first-child{background:var(--c-bg);color:var(--c-text)}
:where(.ss-about.ss-v-bento.ss-bg-primary) .ss-highlights li:first-child span{color:var(--muted)}

/* sticky: the title and text stay in view while the highlights scroll past on the right */
.ss-about.ss-v-sticky .ss-about-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;column-gap:var(--gap-l)}
.ss-about.ss-v-sticky .ss-about-copy{grid-column:1;grid-row:1 / span 2;position:sticky;top:calc(72px + var(--sp-4))}
.ss-about.ss-v-sticky .ss-about-media{grid-column:2;grid-row:1}
.ss-about.ss-v-sticky .ss-about-media img,.ss-about.ss-v-sticky .ss-about-media video{aspect-ratio:16/10}
.ss-about.ss-v-sticky .ss-about-media::before{display:none}
.ss-about.ss-v-sticky .ss-highlights{grid-column:2;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap)}
.ss-about.ss-v-sticky.ss-no-media .ss-highlights{grid-row:1 / span 2}
.ss-about.ss-v-sticky .ss-highlights li{justify-content:center;min-height:clamp(8rem,5rem + 10cqi,15rem);padding:clamp(1.4rem,1rem + 2cqi,2.6rem)}
.ss-about.ss-v-sticky .ss-highlights strong{font-size:clamp(1.25rem,1rem + 1cqi,1.9rem)}
.ss-about.ss-v-sticky .ss-highlights span{font-size:1.02rem}

/* statement: one oversized paragraph; the title becomes a small label above it */
.ss-about.ss-v-statement .ss-about-grid{grid-template-columns:minmax(0,1fr);align-items:start;gap:clamp(1.5rem,1rem + 3cqi,3.5rem)}
.ss-about.ss-v-statement .ss-about-copy{max-width:none}
.ss-about.ss-v-statement .ss-about-copy .ss-h2{display:flex;align-items:center;gap:.7rem;font-family:var(--font-body);font-size:.82rem;font-weight:600;letter-spacing:var(--eb-ls);text-transform:uppercase;color:var(--sec-muted)}
.ss-about.ss-v-statement .ss-about-copy .ss-h2::before{display:block;width:2.4rem;height:2px;margin:0;background:currentColor}
.ss-statement-wrap{display:grid;gap:clamp(1.5rem,1rem + 2cqi,3rem);min-width:0}
.ss-statement{font-family:var(--font-heading);font-weight:var(--hw);font-size:clamp(1.7rem,.8rem + 3.8cqi,4rem);line-height:1.12;letter-spacing:var(--ht);text-wrap:balance;max-width:26em;color:var(--sec-fg)}
.ss-align-center .ss-statement{margin-inline:auto}
.ss-mark{color:inherit;background:linear-gradient(transparent 58%,color-mix(in srgb,var(--c-accent) 55%,transparent) 58%);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ss-statement-more{columns:2 20rem;column-gap:var(--gap-l);max-width:62rem}
.ss-statement-more .ss-p{margin-top:0;margin-bottom:var(--sp-2);break-inside:avoid-column}
.ss-about.ss-v-statement .ss-about-media img,.ss-about.ss-v-statement .ss-about-media video{aspect-ratio:21/9}
.ss-about.ss-v-statement .ss-about-media::before{display:none}
.shlau-site .ss-about.ss-v-statement .ss-highlights li{border:0;border-top:1px solid var(--sec-line);border-radius:0;background:none;box-shadow:none;padding-inline:0}
/* ---- gallery ------------------------------------------------------------------------------------ */
.ss-gallery-grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--gap)}
.ss-tile{margin:0;overflow:hidden;border-radius:var(--r);background:var(--surface);position:relative}
.ss-tile img,.ss-tile video{width:100%;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.ss-tile:hover img{transform:scale(1.05)}
:where(.ss-gallery.ss-v-grid) .ss-tile img,:where(.ss-gallery.ss-v-grid) .ss-tile video{aspect-ratio:1/1;object-fit:cover}
:where(.ss-gallery.ss-v-grid) .ss-gallery-grid:where([data-count="1"]){max-width:56rem;margin-inline:auto}
:where(.ss-gallery.ss-v-grid) .ss-gallery-grid:where([data-count="1"]) .ss-tile img{aspect-ratio:16/9}
:where(.ss-gallery.ss-v-masonry) .ss-gallery-grid{display:block;column-count:var(--cols,3);column-gap:var(--gap)}
:where(.ss-gallery.ss-v-masonry) .ss-tile{break-inside:avoid;margin-bottom:var(--gap)}
/* every tile carries its own proportions in --ar, so files of any size keep their shape where the layout allows */
:where(.ss-gallery.ss-v-masonry) .ss-tile img,:where(.ss-gallery.ss-v-masonry) .ss-tile video{height:auto;aspect-ratio:var(--ar,4/3);object-fit:cover}
:where(.ss-gallery.ss-v-grid) .ss-tile[data-media="video"] video{aspect-ratio:var(--ar,16/9)}
/* bento: rows of two or three tiles of different widths that always add up to the full row */
:where(.ss-gallery.ss-v-bento) .ss-gallery-grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(11rem,7rem + 17cqi,23rem)}
:where(.ss-gallery.ss-v-bento) .ss-tile img,:where(.ss-gallery.ss-v-bento) .ss-tile video{height:100%;object-fit:cover}
.ss-w-3{grid-column:span 3}.ss-w-4{grid-column:span 4}.ss-w-6{grid-column:span 6}.ss-w-8{grid-column:span 8}.ss-w-12{grid-column:span 12}
/* carousel: a row you swipe, snapping to each picture; it needs no script */
:where(.ss-gallery.ss-v-carousel) .ss-gallery-grid{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:var(--sp-2);overscroll-behavior-x:contain}
:where(.ss-gallery.ss-v-carousel) .ss-tile{flex:0 0 auto;width:calc(var(--ar,.8) * clamp(14rem,30cqi,24rem));max-width:88cqi;scroll-snap-align:start}
:where(.ss-gallery.ss-v-carousel) .ss-tile img,:where(.ss-gallery.ss-v-carousel) .ss-tile video{aspect-ratio:var(--ar,4/5);object-fit:cover}

/* marquee: two rows drifting in opposite directions, edge to edge, pausing under the pointer */
.ss-marquee{display:grid;gap:var(--gap);margin-inline:calc((100% - 100cqi) / 2);overflow:hidden}
.ss-marq-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ss-marquee .ss-marq-list .ss-tile{flex:none;width:calc(var(--ar,1.333) * clamp(9rem,16cqi,15rem));margin:0 var(--gap) 0 0}
.ss-marquee .ss-tile img,.ss-marquee .ss-tile video{aspect-ratio:var(--ar,4/3);object-fit:cover}
/* spotlight: one large picture, the others as a film strip beneath */
.ss-spotlight{display:grid;gap:var(--gap)}
.ss-spot-main img,.ss-spot-main video{aspect-ratio:21/10;object-fit:cover}
.ss-spot-strip{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--gap)}
.ss-spot-strip .ss-tile img,.ss-spot-strip .ss-tile video{aspect-ratio:4/3;object-fit:cover}
.ss-tile video{background:#000}
/* ---- products ----------------------------------------------------------------------------------- */
.ss-card{display:flex;flex-direction:column;border:var(--card-bw) solid color-mix(in srgb,var(--sec-fg) var(--card-bc),transparent);border-radius:var(--r-card);overflow:hidden;background:color-mix(in srgb,var(--sec-fg) var(--card-tint),var(--sec-bg));box-shadow:var(--card-sh);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.ss-card:hover{transform:translateY(-5px)}
.ss-card-media{position:relative;overflow:hidden}
.ss-card-media img,.ss-card-media video{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.ss-card:hover .ss-card-media img{transform:scale(1.05)}
.ss-card-body{display:flex;flex-direction:column;gap:.45rem;padding:clamp(1.1rem,.8rem + 1cqi,1.7rem);flex:1;text-align:left}
.ss-card-body .ss-p{margin-top:0;font-size:.97rem}
.ss-card-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-top:auto;padding-top:var(--sp-2)}
.ss-price{font-weight:var(--hw);font-family:var(--font-heading);font-size:1.2rem;letter-spacing:var(--ht)}

/* list: picture beside the text; the picture is pinned to its box so it can never collapse */
:where(.ss-products.ss-v-list) .ss-product-grid{display:flex;flex-direction:column}
:where(.ss-products.ss-v-list) .ss-card{flex-direction:row}
:where(.ss-products.ss-v-list) .ss-card-media{flex:0 0 clamp(11rem,28cqi,19rem);min-height:11rem}
:where(.ss-products.ss-v-list) .ss-card-media img,:where(.ss-products.ss-v-list) .ss-card-media video{position:absolute;inset:0;height:100%;aspect-ratio:auto}
/* rows: no cards, a ruled list with numerals, price and button at the end */
:where(.ss-products.ss-v-rows) .ss-product-grid{display:flex;flex-direction:column;gap:0;counter-reset:row;border-bottom:1px solid var(--sec-line)}
:where(.ss-products.ss-v-rows) .ss-card{counter-increment:row;flex-direction:row;align-items:center;gap:clamp(1rem,.6rem + 2cqi,2.5rem);padding:clamp(1.1rem,.8rem + 1.2cqi,1.8rem) 0;border:0;border-top:1px solid var(--sec-line);border-radius:0;background:none;box-shadow:none;overflow:visible}
:where(.ss-products.ss-v-rows) .ss-card:hover{transform:none}
:where(.ss-products.ss-v-rows) .ss-card::before{content:counter(row,decimal-leading-zero);flex:0 0 auto;min-width:2.6ch;font-family:var(--font-heading);font-weight:var(--hw);font-size:clamp(1.2rem,.9rem + 1.2cqi,1.8rem);color:var(--c-accent)}
:where(.ss-products.ss-v-rows) .ss-card-media{flex:0 0 clamp(5rem,12cqi,8rem);border-radius:var(--r)}
:where(.ss-products.ss-v-rows) .ss-card-media img{aspect-ratio:1/1}
:where(.ss-products.ss-v-rows) .ss-card-body{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-3);align-items:center;padding:0}
:where(.ss-products.ss-v-rows) .ss-card-body>.ss-h3,:where(.ss-products.ss-v-rows) .ss-card-body>.ss-p{grid-column:1}
:where(.ss-products.ss-v-rows) .ss-card-foot{grid-column:2;grid-row:1 / span 2;flex-direction:column;align-items:flex-end;gap:.6rem;padding-top:0;margin-top:0}
/* bento: one featured product, large; the rest fill the grid around it (3 to 6 products, otherwise plain cards) */
:where(.ss-products.ss-v-bento) .ss-fit:where([data-count="2"])>:where(:first-child){grid-column:span 4}
:where(.ss-products.ss-v-bento) .ss-fit:where([data-count="2"])>:where(:last-child){grid-column:span 2}
:where(.ss-products.ss-v-bento) .ss-fit:where([data-count="3"],[data-count="5"],[data-count="6"])>:where(:first-child){grid-column:span 4;grid-row:span 2}
:where(.ss-products.ss-v-bento) .ss-fit:where([data-count="3"],[data-count="5"],[data-count="6"])>:where(:nth-child(2),:nth-child(3)){grid-column:span 2}
:where(.ss-products.ss-v-bento) .ss-fit:where([data-count="5"])>:where(:nth-child(4),:nth-child(5)){grid-column:span 3}
:where(.ss-products.ss-v-bento) .ss-fit:where([data-count="6"])>:where(:nth-child(4),:nth-child(5),:nth-child(6)){grid-column:span 2}
:where(.ss-products.ss-v-bento) .ss-fit:where([data-count="4"])>:where(:first-child){grid-column:1 / -1;flex-direction:row}
:where(.ss-products.ss-v-bento) .ss-fit:where([data-count="4"])>:where(:not(:first-child)){grid-column:span 2}
:where(.ss-products.ss-v-bento) .ss-fit>:where(:first-child) .ss-card-media{flex:1;min-height:14rem}
:where(.ss-products.ss-v-bento) .ss-fit>:where(:first-child) .ss-card-media img,:where(.ss-products.ss-v-bento) .ss-fit>:where(:first-child) .ss-card-media video{position:absolute;inset:0;height:100%;aspect-ratio:auto}
:where(.ss-products.ss-v-bento) .ss-fit:where([data-count="4"])>:where(:first-child) .ss-card-media{flex:1 1 50%}
:where(.ss-products.ss-v-bento) .ss-fit:where([data-count="4"])>:where(:first-child) .ss-card-body{flex:1 1 50%;justify-content:center}
:where(.ss-products.ss-v-bento) .ss-fit>:where(:first-child) .ss-h3{font-size:clamp(1.4rem,1rem + 1.6cqi,2.1rem)}
:where(.ss-products.ss-v-bento) .ss-fit>:where(:first-child):not(.ss-no-media){--card-tint:0%}

/* stack: wide cards that pile on top of each other as the page scrolls, each pinned a little lower than the last */
:where(.ss-products.ss-v-stack) .ss-product-grid{display:flex;flex-direction:column;gap:clamp(1.25rem,1rem + 2cqi,2.5rem)}
:where(.ss-products.ss-v-stack) .ss-card{position:sticky;top:calc(76px + var(--i,0) * clamp(.7rem,.5rem + .8cqi,1.4rem));flex-direction:row;min-height:clamp(15rem,9rem + 16cqi,26rem)}
:where(.ss-products.ss-v-stack) .ss-card:hover{transform:none}
:where(.ss-products.ss-v-stack) .ss-card-media{flex:0 0 46%;min-height:12rem}
:where(.ss-products.ss-v-stack) .ss-card-media img,:where(.ss-products.ss-v-stack) .ss-card-media video{position:absolute;inset:0;height:100%;aspect-ratio:auto}
:where(.ss-products.ss-v-stack) .ss-card-body{justify-content:center;gap:.6rem;padding:clamp(1.4rem,1rem + 2.4cqi,3.25rem)}
:where(.ss-products.ss-v-stack) .ss-card-body .ss-h3{font-size:clamp(1.5rem,1.1rem + 1.8cqi,2.6rem)}
:where(.ss-products.ss-v-stack) .ss-card-body .ss-p{font-size:1.05rem}
/* zigzag: big picture and text side by side, swapping sides row after row */
:where(.ss-products.ss-v-zigzag) .ss-product-grid{display:flex;flex-direction:column;gap:clamp(2.5rem,1.5rem + 5cqi,6rem)}
:where(.ss-products.ss-v-zigzag) .ss-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(1.5rem,1rem + 4cqi,5rem)}
:where(.ss-products.ss-v-zigzag) .ss-card:nth-child(even) .ss-card-media{order:2}
.shlau-site .ss-products.ss-v-zigzag .ss-card,.shlau-site .ss-products.ss-v-zigzag .ss-card:hover{border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;transform:none}
:where(.ss-products.ss-v-zigzag) .ss-card-media{border-radius:var(--r-card);box-shadow:var(--card-sh)}
:where(.ss-products.ss-v-zigzag) .ss-card-media img,:where(.ss-products.ss-v-zigzag) .ss-card-media video{aspect-ratio:5/4}
:where(.ss-products.ss-v-zigzag) .ss-card-body{gap:.7rem;padding:0}
:where(.ss-products.ss-v-zigzag) .ss-card-body .ss-h3{font-size:clamp(1.5rem,1.1rem + 2cqi,2.8rem)}
:where(.ss-products.ss-v-zigzag) .ss-card-body .ss-p{font-size:1.05rem}
:where(.ss-products.ss-v-zigzag) .ss-card.ss-no-media{grid-template-columns:minmax(0,40rem)}
:where(.ss-products.ss-v-zigzag) .ss-card.ss-no-media:nth-child(even){justify-self:end}
/* ---- contact ------------------------------------------------------------------------------------ */
.ss-contact-grid{display:grid;gap:var(--gap-l);grid-template-columns:minmax(0,44rem);align-items:start}
.ss-contact-info{min-width:0}
.ss-contact .ss-head{margin-bottom:var(--sp-3)}
:where(.ss-contact.ss-align-center) .ss-contact-grid{justify-content:center}
.ss-contact-mail{display:inline-block;max-width:100%;overflow-wrap:anywhere;font-family:var(--font-heading);font-weight:var(--hw);font-size:clamp(1.4rem,.9rem + 2.6cqi,2.6rem);line-height:1.15;letter-spacing:var(--ht);color:var(--sec-fg);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.28em;text-decoration-color:var(--c-accent)}
.ss-contact-mail:hover{text-decoration-color:var(--sec-fg)}
:where(.ss-contact.ss-v-centered) .ss-contact-grid{grid-template-columns:minmax(0,42rem);justify-content:center;text-align:center}
:where(.ss-contact.ss-v-centered) .ss-contact-list li{justify-content:center}
.ss-contact-list{display:grid;margin-top:var(--sp-3)}
.ss-contact-list li{display:flex;padding:.85rem 0;border-top:1px solid var(--sec-line);font-size:1.08rem}
.ss-contact-list li:last-child{border-bottom:1px solid var(--sec-line)}
.ss-contact-list a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ss-contact-list a:hover{text-decoration-thickness:2px}
.ss-socials{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);margin-top:var(--sp-3)}
.ss-socials a{text-decoration:underline;text-underline-offset:3px;font-size:.95rem}
/* panel: the whole block as one large coloured card */
:where(.ss-contact.ss-v-panel) .ss-contact-grid{padding:clamp(1.75rem,1rem + 4.5cqi,5rem);border-radius:calc(var(--r-card) * 1.6);align-items:center;--sec-bg:var(--c-primary);--sec-fg:var(--c-on-primary);--sec-muted:color-mix(in srgb,var(--c-on-primary) 80%,var(--c-primary));--sec-line:color-mix(in srgb,var(--c-on-primary) 28%,transparent);--btn-bg:var(--c-on-primary);--btn-fg:var(--c-primary);--btn-line:var(--c-on-primary);background:var(--sec-bg);color:var(--sec-fg);box-shadow:var(--card-sh);overflow:hidden;position:relative}
:where(.ss-contact.ss-v-panel.ss-bg-primary) .ss-contact-grid{--sec-bg:var(--c-text);--sec-fg:var(--c-bg);--sec-muted:color-mix(in srgb,var(--c-bg) 78%,var(--c-text));--sec-line:color-mix(in srgb,var(--c-bg) 26%,transparent);--btn-bg:var(--c-bg);--btn-fg:var(--c-text);--btn-line:var(--c-bg)}
:where(.ss-contact.ss-v-panel) .ss-contact-grid::before{content:"";position:absolute;width:60%;aspect-ratio:1;right:-18%;top:-45%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c-accent) 55%,transparent),transparent);pointer-events:none}
:where(.ss-contact.ss-v-panel) .ss-contact-grid>*{position:relative}
:where(.ss-contact.ss-v-panel) .ss-contact-grid{grid-template-columns:minmax(0,1fr)}

/* band: a giant headline across the full width, the details beneath */
:where(.ss-contact.ss-v-band) .ss-contact-grid{row-gap:clamp(2rem,1rem + 5cqi,5rem)}
:where(.ss-contact.ss-v-band) .ss-band-head{grid-column:1 / -1;min-width:0}
.ss-band-title{font-size:clamp(2.6rem,.8rem + 9cqi,9rem);line-height:.92;letter-spacing:-.04em}
.ss-band-head .ss-lead{max-width:44ch}
.ss-band-head .ss-btn{min-height:60px;padding-inline:2rem;font-size:clamp(1rem,.9rem + .6cqi,1.35rem)}
:where(.ss-contact.ss-v-band) .ss-contact-grid{grid-template-columns:minmax(0,1fr)}
:where(.ss-contact.ss-v-band) .ss-contact-list{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));column-gap:var(--gap)}
:where(.ss-contact.ss-v-band) .ss-contact-list li:last-child{border-bottom:0}
/* ---- footer ------------------------------------------------------------------------------------- */
.ss-footer{--py:calc(clamp(2.5rem,1.5rem + 4cqi,4.5rem) * var(--pk))}
.ss-footer-top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(var(--fc,0),minmax(0,1fr));gap:var(--sp-4)}
.ss-footer-top:where([data-cols="0"]){grid-template-columns:minmax(0,1fr)}
.ss-footer-brand .ss-p{margin-top:.5rem;max-width:34ch}
.ss-footer-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.9rem;color:var(--sec-muted);font-family:var(--font-body);font-weight:600}
.ss-footer-col ul{display:grid;gap:.5rem}
.ss-footer-col a,.ss-legal a{text-decoration:none;transition:opacity .2s}
.ss-footer-col a:hover,.ss-legal a:hover{text-decoration:underline;text-underline-offset:3px}
.ss-footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--sec-line);font-size:.88rem;color:var(--sec-muted)}
.ss-legal{display:flex;gap:var(--sp-3);flex-wrap:wrap}
:where(.ss-footer.ss-v-simple) .ss-footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
:where(.ss-footer.ss-v-simple) .ss-footer-col ul{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem}
:where(.ss-footer.ss-v-simple) .ss-footer-title{display:none}
/* wordmark: the brand name set huge across the foot of the page */
.ss-wordmark{font-family:var(--font-heading);font-weight:var(--hw);font-size:var(--wm,12cqi);line-height:.85;letter-spacing:-.045em;text-transform:var(--htt);white-space:nowrap;text-align:center;margin:clamp(2rem,1rem + 5cqi,4.5rem) 0 var(--sp-2);color:color-mix(in srgb,var(--sec-fg) 17%,transparent);user-select:none;overflow:hidden}

/* mega: a large closing line and the call to action above the link columns */
.ss-footer.ss-v-mega{--py:calc(clamp(3.5rem,2rem + 8cqi,8rem) * var(--pk))}
.ss-mega{padding-bottom:clamp(2.5rem,1.5rem + 5cqi,5rem);margin-bottom:clamp(2rem,1rem + 4cqi,4rem);border-bottom:1px solid var(--sec-line)}
.ss-mega-title{font-family:var(--font-heading);font-weight:var(--hw);font-size:clamp(2.2rem,.8rem + 7.2cqi,7rem);line-height:.95;letter-spacing:-.035em;text-transform:var(--htt);max-width:16em;text-wrap:balance}
.ss-align-center .ss-mega-title{margin-inline:auto}
/* ---- per-style touches that need the section's own colours -------------------------------------- */
.shlau-site[data-style="modern"] .ss-eyebrow{padding:.35rem .9rem;border-radius:999px;border:1px solid var(--sec-line);background:color-mix(in srgb,var(--sec-fg) 6%,transparent)}
.shlau-site[data-style="soft"] .ss-eyebrow{padding:.4rem 1rem;border-radius:999px;background:color-mix(in srgb,var(--c-accent) 18%,var(--sec-bg));font-weight:600}
.shlau-site[data-style="editorial"] .ss-eyebrow::before,.shlau-site[data-style="bold"] .ss-eyebrow::before{width:2.4rem;height:2px;border-radius:0;background:currentColor}
.shlau-site[data-style="minimal"] .ss-eyebrow::before{display:none}
.shlau-site[data-style="editorial"] .ss-header{border-bottom-color:var(--c-text)}
.shlau-site[data-style="editorial"] .ss-card{border-width:1px 0 0;border-radius:0;background:none}
.shlau-site[data-style="editorial"] .ss-h1{font-style:normal}
.shlau-site[data-style="editorial"] .ss-section+.ss-section{border-top:1px solid color-mix(in srgb,var(--c-text) 14%,transparent)}
.shlau-site[data-style="bold"] .ss-header{border-bottom:2px solid var(--c-text)}
.shlau-site[data-style="bold"] .ss-section+.ss-section{border-top:2px solid var(--c-text)}
.shlau-site[data-style="bold"] .ss-card,.shlau-site[data-style="bold"] .ss-highlights li{border-color:var(--sec-fg);box-shadow:6px 6px 0 var(--sec-fg)}
.shlau-site[data-style="bold"] .ss-btn{box-shadow:var(--btn-off) var(--btn-off) 0 var(--sec-fg)}
.shlau-site[data-style="bold"] .ss-btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--sec-fg)}
.shlau-site[data-style="bold"] .ss-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--sec-fg)}
.shlau-site[data-style="bold"] .ss-tile,.shlau-site[data-style="bold"] .ss-hero-media img,.shlau-site[data-style="bold"] .ss-about-media img{border:2px solid var(--sec-fg)}
.shlau-site[data-style="bold"] .ss-stats{border-top-width:2px;border-top-color:var(--sec-fg)}
.shlau-site[data-style="soft"] .ss-btn-primary{box-shadow:0 10px 22px -12px color-mix(in srgb,var(--btn-bg) 70%,transparent)}
.shlau-site[data-style="soft"] .ss-section{border-radius:0}
.shlau-site[data-style="soft"] .ss-header{border-bottom:0;box-shadow:0 8px 24px -18px rgb(0 0 0 / .35)}
.shlau-site[data-style="minimal"] .ss-header{background:var(--c-bg);backdrop-filter:none}
.shlau-site[data-style="minimal"] .ss-btn-primary{box-shadow:none}
.shlau-site[data-style="minimal"] .ss-h3{font-weight:500}

/* ---- 3. motion ---------------------------------------------------------------------------------- */
@keyframes ss-up{from{opacity:0;translate:0 1.5rem}to{opacity:1;translate:0 0}}
@keyframes ss-scroll-in{from{opacity:0;translate:0 2.5rem}to{opacity:1;translate:0 0}}
.ss-hero-copy>*{animation:ss-up .9s cubic-bezier(.22,1,.36,1) both}
.ss-hero-copy>:nth-child(2){animation-delay:.08s}
.ss-hero-copy>:nth-child(3){animation-delay:.16s}
.ss-hero-copy>:nth-child(4){animation-delay:.24s}
.ss-hero-media{animation:ss-up 1.1s .2s cubic-bezier(.22,1,.36,1) both}
/* A browser with scroll timelines reveals each block as it enters the view; nothing here needs a script. */
@supports (animation-timeline:view()){
  .ss-rv{animation:ss-scroll-in linear both;animation-timeline:view();animation-range:entry 2% entry 42%}
  .ss-rv:nth-child(2n){animation-range:entry 6% entry 46%}
  .ss-rv:nth-child(3n){animation-range:entry 10% entry 50%}
}
/* Without them the script marks the page ss-io and reveals blocks with an observer; the same look. */
.ss-io .ss-rv{opacity:0;translate:0 2rem;transition:opacity .8s cubic-bezier(.22,1,.36,1),translate .8s cubic-bezier(.22,1,.36,1)}
.ss-io .ss-rv.ss-in{opacity:1;translate:0 0}
.ss-io .ss-card.ss-rv{transition:opacity .8s cubic-bezier(.22,1,.36,1),translate .8s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
@media (prefers-reduced-motion:reduce){
  .shlau-site *,.shlau-site *::before,.shlau-site *::after{transition:none!important;animation:none!important}
  .ss-rv{opacity:1!important;translate:none!important}
  .ss-v-spotlight .ss-hero-media{transform:none}
  .ss-marq-dup{display:none!important}
  .ss-marq-track,.ss-marq-list{width:auto;flex-wrap:wrap}
  .ss-marq-row{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .ss-marquee{overflow:visible}
  .ss-v-stack .ss-card{position:static}
  .ss-card:hover,.ss-btn:hover,.ss-tile:hover img,.ss-card:hover .ss-card-media img{transform:none!important}
}

/* ---- 4. tablet and phone ------------------------------------------------------------------------ */
@media (max-width:900px){
  .ss-hero-grid,.ss-about-grid,.ss-contact-grid{grid-template-columns:minmax(0,1fr)}
  .ss-hero-copy{grid-column:auto;max-width:none}
  .ss-hero-media{grid-column:auto;margin-bottom:0}
  .ss-v-editorial .ss-hero-copy,.ss-v-editorial.ss-no-media .ss-hero-copy{grid-column:auto}
  .ss-v-spotlight .ss-hero-media{transform:perspective(1500px) rotateX(3deg)}
  .ss-hero-media img,.ss-hero-media video,.ss-v-editorial .ss-hero-media img{aspect-ratio:16/10}
  .ss-about-media img,.ss-about-media video{aspect-ratio:16/10}
  .ss-about-grid .ss-about-copy,.ss-about-grid .ss-about-media,.ss-about-grid .ss-highlights{grid-column:auto;grid-row:auto}
  .ss-v-bento .ss-about-grid{grid-template-columns:minmax(0,1fr)}
  .ss-v-bento .ss-about-copy,.ss-v-bento .ss-about-media{grid-column:auto}
  .ss-collage{max-width:32rem;width:100%;margin-inline:auto;aspect-ratio:6/5}
  .ss-about.ss-v-sticky .ss-about-grid{grid-template-columns:minmax(0,1fr)}
  .ss-about.ss-v-sticky .ss-about-copy{position:static;grid-column:auto;grid-row:auto}
  .ss-about.ss-v-sticky .ss-about-media,.ss-about.ss-v-sticky .ss-highlights,.ss-about.ss-v-sticky.ss-no-media .ss-highlights{grid-column:auto;grid-row:auto}
  .ss-v-zigzag .ss-card{grid-template-columns:minmax(0,1fr)}
  .ss-v-zigzag .ss-card:nth-child(even) .ss-card-media{order:0}
  .ss-v-zigzag .ss-card.ss-no-media:nth-child(even){justify-self:start}
  .ss-v-band .ss-contact-grid{grid-template-columns:minmax(0,1fr)}
  .ss-about-grid .ss-highlights{grid-column:1 / -1}
  .ss-stats,.ss-stats:where([data-count="3"]),.ss-stats:where([data-count="4"]){grid-template-columns:repeat(2,minmax(0,1fr))}
  .ss-stats:where([data-count="3"])>:last-child{grid-column:1 / -1}
  .ss-fit>*{grid-column:span 3;grid-row:auto}
  .ss-fit>:where(:last-child:nth-child(odd)){grid-column:2 / span 4}
  .ss-v-bento .ss-fit:where([data-count="4"])>:where(:first-child){flex-direction:column}
  .ss-v-bento .ss-fit>:where(:first-child) .ss-card-media img{position:static;aspect-ratio:4/3}
  .ss-gallery-grid{--cols:2}
  .ss-v-masonry .ss-gallery-grid{column-count:2}
  .ss-v-grid .ss-gallery-grid:where([data-count="1"]){--cols:1}
  .ss-v-grid .ss-gallery-grid:where([data-count="3"],[data-count="5"],[data-count="7"],[data-count="9"],[data-count="11"])>:last-child{grid-column:1 / -1}
  .ss-v-grid .ss-gallery-grid:where([data-count="3"],[data-count="5"],[data-count="7"],[data-count="9"],[data-count="11"])>:last-child img{aspect-ratio:16/10}
  .ss-footer-top,.ss-footer-top:where([data-cols="1"],[data-cols="2"],[data-cols="3"],[data-cols="4"]){grid-template-columns:repeat(2,minmax(0,1fr))}
  .ss-footer-brand{grid-column:1 / -1}
  .ss-hero,.ss-section{--py:calc(clamp(2.75rem,1.6rem + 6cqi,5rem) * var(--pk))}
  .ss-space-spacious{--py:calc(clamp(3.5rem,2rem + 8cqi,6.5rem) * var(--pk))}
  .ss-space-compact{--py:calc(clamp(1.75rem,1.2rem + 3cqi,3rem) * var(--pk))}
}
@media (max-width:760px){
  .ss-menu-btn{display:inline-flex}
  .ss-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:0;background:var(--c-bg);border-bottom:1px solid var(--line);padding:var(--sp-1) clamp(1.1rem,.6rem + 3cqi,2.5rem) var(--sp-2)}
  .ss-nav[data-open="true"]{display:flex}
  .ss-nav a{padding:.75rem 0;width:100%;font-size:1rem}
  .ss-nav a::after{display:none}
}
@media (max-width:640px){
  .ss-fit>*,.ss-fit>:where(:last-child:nth-child(odd)){grid-column:1 / -1}
  .ss-fit{grid-template-columns:minmax(0,1fr)}
  .ss-v-list .ss-card{flex-direction:column}
  .ss-v-list .ss-card-media{flex:none;width:100%;min-height:0}
  .ss-v-list .ss-card-media img,.ss-v-list .ss-card-media video{position:static;aspect-ratio:4/3}
  .ss-v-stack .ss-card{flex-direction:column;min-height:0}
  .ss-v-stack .ss-card-media{flex:none;width:100%;min-height:0}
  .ss-v-stack .ss-card-media img,.ss-v-stack .ss-card-media video{position:static;aspect-ratio:16/10}
  .ss-spot-main img,.ss-spot-main video{aspect-ratio:4/3}
  .ss-spot-strip,.ss-spot-strip:where([data-count]){grid-template-columns:repeat(2,minmax(0,1fr))}
  .ss-spot-strip>:where(:last-child:nth-child(odd)){grid-column:1 / -1}
  .ss-v-rows .ss-card{flex-wrap:wrap;align-items:flex-start}
  .ss-v-rows .ss-card-body{grid-template-columns:minmax(0,1fr);flex:1 1 100%}
  .ss-v-rows .ss-card-foot{grid-column:1;grid-row:auto;flex-direction:row;align-items:center;margin-top:.6rem}
  .ss-v-rows .ss-card::before{flex-basis:100%}
  .ss-v-carousel .ss-tile{flex-basis:78%}
  .ss-v-bento .ss-gallery-grid{grid-auto-rows:clamp(9rem,40cqi,14rem)}
  .ss-w-3{grid-column:span 6}
  .ss-w-4,.ss-w-6,.ss-w-8,.ss-w-12{grid-column:span 12}
  .ss-footer-top,.ss-footer-top:where([data-cols="1"],[data-cols="2"],[data-cols="3"],[data-cols="4"]){grid-template-columns:minmax(0,1fr)}
  .ss-v-simple .ss-footer-top{flex-direction:column}
}

/* ---- editor preview only ------------------------------------------------------------------------ */
.shlau-site .ss-selected{outline:3px solid #6d5dfc;outline-offset:-3px}

body{margin:0}
.shlau-site{font-family:var(--font-body);color:var(--c-text);background:var(--c-bg);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
.shlau-site *,.shlau-site *::before,.shlau-site *::after{box-sizing:border-box}
.shlau-site img,.shlau-site video{max-width:100%;height:auto;display:block}
.shlau-site h1,.shlau-site h2,.shlau-site h3,.shlau-site h4{font-family:var(--font-heading);margin:0;line-height:1.1;text-wrap:balance}
.shlau-site p{margin:0}
.shlau-site ul,.shlau-site ol{margin:0;padding:0;list-style:none}
.shlau-site a{color:inherit}
.shlau-site [id]{scroll-margin-top:5rem}
.ss-skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--c-text);color:var(--c-bg);padding:.6rem 1rem}
.ss-skip:focus{left:.5rem;top:.5rem}
@supports (animation-timeline:view()){
  .ss-rv{animation:ss-scroll-in linear both;animation-timeline:view();animation-range:entry 2% entry 42%}
}
@keyframes ss-scroll-in{from{opacity:0;translate:0 2rem}to{opacity:1;translate:0 0}}
.ss-io .ss-rv{opacity:0;translate:0 2rem;transition:opacity .8s cubic-bezier(.22,1,.36,1),translate .8s cubic-bezier(.22,1,.36,1)}
.ss-io .ss-rv.ss-in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){
  .shlau-site *,.shlau-site *::before,.shlau-site *::after{transition:none!important;animation:none!important}
  .ss-rv{opacity:1!important;translate:none!important}
}
.shlau-site{--c-primary:#153ed9;--c-secondary:#ffffff;--c-accent:#153ed9;--c-bg:#ffffff;--c-text:#14161c;--c-on-primary:#ffffff;--c-on-secondary:#14161c;--font-heading:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--radius:10px;--c-ink:#111111;--c-line:#1b1b1b;--c-surface:#f3f2ee;--c-ink-soft:#4a4a4a;--c-highlight:#e9f06a;--radius:4px;--space-1:0.5rem;--space-2:1rem;--space-3:clamp(1.25rem, 3vw, 2rem);--space-4:clamp(2rem, 5vw, 3.5rem);--space-5:clamp(3.5rem, 9vw, 7rem);--font-heading-name:"Inter";--font-body-name:"Inter"}
.shlau-site .container{width:min(100% - 2*var(--space-2),74rem);margin-inline:auto}
.shlau-site .sec{padding-block:var(--space-5)}
.shlau-site .eyebrow{display:inline-block;font-family:var(--font-body);font-size:.875rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--c-primary);border-bottom:3px solid var(--c-accent);padding-bottom:.25rem;margin-bottom:var(--space-2)}
.shlau-site h1,.shlau-site h2,.shlau-site h3{font-family:var(--font-heading);line-height:1.02;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
.shlau-site h1{font-size:clamp(2.6rem,8vw,6rem);text-transform:uppercase}
.shlau-site h2{font-size:clamp(2rem,5vw,3.6rem)}
.shlau-site h3{font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.15}
.shlau-site p{line-height:1.6;max-width:68ch}
.shlau-site .lead{font-size:clamp(1.05rem,1.5vw,1.3rem);max-width:58ch;line-height:1.55}
.shlau-site .btn{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.8rem 1.6rem;border-radius:var(--radius);font-family:var(--font-body);font-weight:700;text-decoration:none;border:3px solid var(--c-text);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.shlau-site .btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--c-text)}
.shlau-site .btn:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px}
.shlau-site .btn-primary{background:var(--c-primary);color:var(--c-on-primary);border-color:var(--c-primary)}
.shlau-site .btn-primary:hover{box-shadow:4px 4px 0 var(--c-accent)}
.shlau-site .btn-ghost{background:transparent;color:var(--c-text);border-color:currentColor}
.shlau-site .card{background:var(--c-surface);color:var(--c-ink);border:3px solid var(--c-line);border-radius:var(--radius);padding:var(--space-3);transition:transform .2s ease,box-shadow .2s ease}
.shlau-site .card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--c-line)}
.shlau-site .card p{color:var(--c-ink-soft)}
.shlau-site .rule{border:0;border-top:4px solid var(--c-text);margin:0}
.shlau-site .num{font-family:var(--font-heading);font-weight:800;font-size:clamp(2.5rem,6vw,4.5rem);line-height:1;color:var(--c-primary)}
[data-s="header"] .hd{position:sticky;top:0;z-index:20;background:var(--c-bg);color:var(--c-text);border-bottom:4px solid var(--c-text)}
[data-s="header"] .hd-in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:min(100% - 2rem,74rem);margin-inline:auto;min-height:4.25rem;position:relative}
[data-s="header"] .hd-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-heading);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;text-transform:uppercase}
[data-s="header"] .hd-logo{height:2.25rem;width:auto;max-width:8rem;object-fit:contain}
[data-s="header"] .hd-btn{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:2.75rem;height:2.75rem;padding:0 .65rem;background:none;border:3px solid var(--c-text);border-radius:var(--radius);cursor:pointer;color:var(--c-text)}
[data-s="header"] .hd-btn span{display:block;height:3px;background:currentColor}
[data-s="header"] .hd-btn:focus-visible,[data-s="header"] .hd-link:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px}
[data-s="header"] .hd-nav{display:none;position:absolute;top:100%;left:-1rem;right:-1rem;flex-direction:column;background:var(--c-bg);padding:var(--space-2) 1rem;border-bottom:4px solid var(--c-text)}
[data-s="header"] .hd-nav[data-open="true"]{display:flex}
[data-s="header"] .hd-link{padding:.7rem .2rem;text-decoration:none;font-weight:700;color:var(--c-text);border-bottom:3px solid transparent;transition:border-color .2s ease,color .2s ease}
[data-s="header"] .hd-link:hover{color:var(--c-primary);border-bottom-color:var(--c-accent)}
@media (min-width:800px){[data-s="header"] .hd-btn{display:none}
[data-s="header"] .hd-nav,[data-s="header"] .hd-nav[data-open]{display:flex;position:static;flex-direction:row;gap:var(--space-3);padding:0;border:0;background:none}
[data-s="header"] .hd-link{padding:.3rem 0}}
[data-s="hero"] .sb{display:grid;gap:var(--space-4);padding-block:clamp(2.5rem,7vw,6rem)}
[data-s="hero"] .sb-top{display:grid;gap:var(--space-1);border-bottom:6px solid var(--c-text);padding-bottom:var(--space-3)}
[data-s="hero"] .sb h1{font-size:clamp(2.6rem,9vw,7.5rem);line-height:.96;letter-spacing:-.035em;font-weight:900;overflow-wrap:anywhere}
[data-s="hero"] .sb-mid{display:grid;gap:var(--space-3);align-items:stretch}
[data-s="hero"] .sb-copy{display:grid;gap:var(--space-3);align-content:center}
[data-s="hero"] .sb-cta{display:flex;flex-wrap:wrap;gap:var(--space-2)}
[data-s="hero"] .sb-art{margin:0;border:4px solid var(--c-text);border-radius:var(--radius);overflow:hidden;box-shadow:8px 8px 0 var(--c-accent)}
[data-s="hero"] .sb-art:empty{display:none}
[data-s="hero"] .sb-art img{display:block;width:100%;height:100%;max-height:26rem;aspect-ratio:var(--ar);object-fit:cover}
[data-s="hero"] .sb-board{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:4px;background:var(--c-text);border:4px solid var(--c-text);border-radius:var(--radius);overflow:hidden}
[data-s="hero"] .sb-cell{display:grid;gap:.35rem;align-content:end;min-height:9rem;padding:var(--space-3);background:var(--c-text);color:var(--c-bg);border-top:8px solid var(--c-accent);transition:background .2s ease,color .2s ease}
[data-s="hero"] .sb-cell:nth-child(odd){background:var(--c-primary);color:var(--c-on-primary)}
[data-s="hero"] .sb-cell:hover{transform:none;background:var(--c-bg);color:var(--c-text)}
[data-s="hero"] .sb-cell strong{font-family:var(--font-heading);font-weight:900;font-size:clamp(1.7rem,4.2vw,3.2rem);line-height:1;text-transform:uppercase;letter-spacing:-.02em;overflow-wrap:anywhere}
[data-s="hero"] .sb-cell span{font-size:.95rem;line-height:1.35}
@media (min-width:860px){[data-s="hero"] .sb-mid:has(.sb-art:not(:empty)){grid-template-columns:1.1fr .9fr}
[data-s="hero"] .sb-board{grid-template-columns:repeat(4,1fr)}
[data-s="hero"] .sb-cell{min-height:11rem}}
[data-s="about"] .ab3{display:grid;gap:var(--space-4);padding-block:var(--space-5)}
[data-s="about"] .ab3-top{display:grid;border:4px solid var(--c-text);background:var(--c-primary)}
[data-s="about"] .ab3-copy{background:var(--c-primary);color:var(--c-on-primary);padding:clamp(1.5rem,4vw,3rem);display:grid;gap:var(--space-2);align-content:center}
[data-s="about"] .ab3-tag{justify-self:start;font-size:.875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;border-bottom:3px solid var(--c-accent);padding-bottom:.25rem}
[data-s="about"] .ab3 h2{font-size:clamp(2rem,5vw,3.6rem);text-transform:uppercase}
[data-s="about"] .ab3-body{display:grid;gap:var(--space-2);font-size:1.0625rem;max-width:60ch}
[data-s="about"] .ab3-body p{max-width:60ch}
[data-s="about"] .ab3-art{min-width:0;border-top:4px solid var(--c-text)}
[data-s="about"] .ab3-art img{display:block;width:100%;aspect-ratio:var(--ar);max-height:32rem;object-fit:cover}
[data-s="about"] .ab3-list{counter-reset:n;display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--space-2)}
[data-s="about"] .ab3-item{counter-increment:n;background:var(--c-surface);color:var(--c-ink);border:3px solid var(--c-line);border-top:10px solid var(--c-accent);border-radius:var(--radius);padding:var(--space-2) var(--space-3) var(--space-3);transition:transform .2s ease,box-shadow .2s ease}
[data-s="about"] .ab3-item:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--c-line)}
[data-s="about"] .ab3-item::before{content:counter(n,decimal-leading-zero);display:block;font-family:var(--font-heading);font-weight:800;font-size:clamp(2.2rem,5vw,3.2rem);line-height:1;color:var(--c-primary);margin-bottom:var(--space-1)}
[data-s="about"] .ab3-item h3{text-transform:uppercase;margin-bottom:.4rem}
[data-s="about"] .ab3-item p{color:var(--c-ink-soft);font-size:1rem}
@media (min-width:860px){[data-s="about"] .ab3-top:has(img){grid-template-columns:1.1fr .9fr}
[data-s="about"] .ab3-art{border-top:0;border-left:4px solid var(--c-text);display:flex}
[data-s="about"] .ab3-art img{aspect-ratio:auto;height:100%;max-height:none;min-height:26rem}}
[data-s="gallery"] .gl{display:grid;gap:clamp(1.5rem,4vw,2.5rem);padding-block:clamp(3rem,8vw,6rem)}
[data-s="gallery"] .gl-head{display:grid;gap:var(--space-2);justify-items:start}
[data-s="gallery"] .gl-head .eyebrow{margin-bottom:0}
[data-s="gallery"] .gl-head h2{max-width:20ch;color:var(--c-text)}
[data-s="gallery"] .gl-head .lead{color:var(--c-ink-soft, var(--c-text))}
[data-s="gallery"] .gl-grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
[data-s="gallery"] .gl-grid::after{content:"";flex:999 1 0}
[data-s="gallery"] .gl-item{flex:var(--ar, 1.33)1 calc(var(--ar, 1.33)*13rem);min-width:0;overflow:hidden;border:3px solid var(--c-line);border-radius:var(--radius);background:var(--c-surface);transition:transform .2s ease,box-shadow .2s ease}
[data-s="gallery"] .gl-item:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--c-accent)}
[data-s="gallery"] .gl-item img,[data-s="gallery"] .gl-item video{display:block;width:100%;height:auto;aspect-ratio:var(--ar, 4/3);object-fit:cover}
[data-s="products"] .prs{display:grid;gap:clamp(2rem,4vw,3.5rem);padding-block:clamp(3.5rem,9vw,7rem)}
[data-s="products"] .prs-head{display:grid;gap:var(--space-2);border-top:4px solid var(--c-text);padding-top:var(--space-3)}
[data-s="products"] .prs-head h2{font-size:clamp(2rem,5.5vw,4rem);max-width:20ch;text-transform:uppercase}
[data-s="products"] .prs-grid{counter-reset:p;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--space-3)}
[data-s="products"] .prs-card{counter-increment:p;display:flex;flex-direction:column;gap:var(--space-2);padding:0;overflow:hidden}
[data-s="products"] .prs-no{display:block;background:var(--c-primary);color:var(--c-on-primary);font-family:var(--font-heading);font-weight:800;font-size:clamp(2.5rem,6vw,4.5rem);line-height:1;padding:var(--space-2) var(--space-3);border-bottom:3px solid var(--c-line)}
[data-s="products"] .prs-no::before{content:counter(p,decimal-leading-zero)}
[data-s="products"] .prs-body{display:grid;gap:.5rem;padding-inline:var(--space-3)}
[data-s="products"] .prs-body h3{text-transform:uppercase;color:var(--c-ink)}
[data-s="products"] .prs-price{padding-inline:var(--space-3);font-weight:700;color:var(--c-ink)}
[data-s="products"] .prs-link{margin-top:auto;margin-inline:var(--space-3);margin-bottom:var(--space-3);align-self:flex-start;font-weight:700;color:var(--c-ink);text-decoration:none;border-bottom:3px solid var(--c-accent);padding-bottom:.15rem;transition:background .2s ease,padding .2s ease}
[data-s="products"] .prs-link:hover{background:var(--c-accent);color:var(--c-ink);padding-inline:.4rem}
[data-s="products"] .prs-link:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px}
@media (min-width:640px){[data-s="products"] .prs-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){[data-s="products"] .prs-grid{grid-template-columns:repeat(4,1fr)}}
[data-s="contact"] .sb{display:grid;gap:var(--space-3);margin-block:clamp(3rem,8vw,6rem);padding:clamp(1.5rem,5vw,4rem);background:var(--c-ink);color:var(--c-surface);border:4px solid var(--c-line);border-radius:var(--radius)}
[data-s="contact"] .sb-top{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-1)}
[data-s="contact"] .sb-top span{height:.6rem;background:var(--c-highlight)}
[data-s="contact"] .sb-top span:nth-child(even){background:var(--c-surface);opacity:.35}
[data-s="contact"] .sb-head{display:grid;gap:var(--space-2);align-content:start}
[data-s="contact"] .sb h2{font-size:clamp(2.2rem,6.5vw,5rem);text-transform:uppercase;color:var(--c-surface)}
[data-s="contact"] .sb .lead{color:var(--c-surface)}
[data-s="contact"] .sb-mail{display:block;padding:clamp(1rem,3vw,1.75rem);background:var(--c-highlight);color:var(--c-ink);border:4px solid var(--c-surface);border-radius:var(--radius);font-family:var(--font-heading);font-weight:800;font-size:clamp(1.15rem,4.6vw,3.25rem);line-height:1.1;text-decoration:none;overflow-wrap:anywhere;transition:transform .2s ease,box-shadow .2s ease}
[data-s="contact"] .sb-mail:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--c-surface)}
[data-s="contact"] .sb-mail:focus-visible,[data-s="contact"] .sb-details a:focus-visible,[data-s="contact"] .sb-social a:focus-visible{outline:3px solid var(--c-highlight);outline-offset:3px}
[data-s="contact"] .sb-details{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3)}
[data-s="contact"] .sb-details a,[data-s="contact"] .sb-social a{color:var(--c-surface);font-weight:700;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:2px}
[data-s="contact"] .sb-details a:hover,[data-s="contact"] .sb-social a:hover{color:var(--c-highlight)}
[data-s="contact"] .sb-social{display:flex;flex-wrap:wrap;gap:var(--space-2)}
@media (min-width:860px){[data-s="contact"] .sb{grid-template-columns:1fr 1.1fr;align-items:center;column-gap:clamp(2rem,5vw,4rem)}
[data-s="contact"] .sb-top{grid-column:1/-1}
[data-s="contact"] .sb-details,[data-s="contact"] .sb-social{grid-column:2}}
[data-s="footer"] .ft{display:grid;gap:var(--space-3);padding-block:var(--space-4) var(--space-3)}
[data-s="footer"] .ft-top{display:grid;gap:var(--space-3);align-items:stretch}
[data-s="footer"] .ft-brand{display:grid;gap:var(--space-2);align-content:space-between}
[data-s="footer"] .ft-name{font-family:var(--font-heading);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;font-size:clamp(2.6rem,10vw,5.5rem);color:var(--c-primary);overflow-wrap:anywhere}
[data-s="footer"] .ft-tag{font-size:clamp(1rem,1.5vw,1.2rem);max-width:30ch;line-height:1.45;border-left:6px solid var(--c-accent);padding-left:var(--space-2)}
[data-s="footer"] .ft-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:var(--space-2)}
[data-s="footer"] .ft-cell{background:var(--c-surface);color:var(--c-ink);border:3px solid var(--c-line);border-radius:var(--radius);padding:var(--space-3);display:grid;gap:var(--space-2);align-content:start}
[data-s="footer"] .ft-cell h3{font-size:.875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink-soft);border-bottom:3px solid var(--c-accent);padding-bottom:.4rem;justify-self:start}
[data-s="footer"] .ft ul{display:grid;gap:.5rem;list-style:none;padding:0;margin:0}
[data-s="footer"] .ft-cell a{display:inline-block;font-weight:700;font-size:1.05rem;color:var(--c-ink);text-decoration:none;padding-block:.15rem;border-bottom:2px solid transparent;transition:transform .2s ease,border-color .2s ease}
[data-s="footer"] .ft-cell a:hover{transform:translateX(4px);border-color:var(--c-accent)}
[data-s="footer"] .ft-cell a:focus-visible,[data-s="footer"] .ft-bottom a:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px}
[data-s="footer"] .ft-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-2);padding-top:var(--space-2);border-top:4px solid var(--c-text);font-size:.875rem}
[data-s="footer"] .ft-bottom p{max-width:none}
[data-s="footer"] .ft-bottom ul{display:flex;flex-wrap:wrap;gap:var(--space-2)}
[data-s="footer"] .ft-bottom a{color:var(--c-text);text-decoration:underline;text-underline-offset:3px}
[data-s="footer"] .ft-bottom a:hover{color:var(--c-primary)}
@media (min-width:860px){[data-s="footer"] .ft-top{grid-template-columns:1fr 1.2fr}}