/* SN design system for semm.photography. Palette B. Loaded by one HTML widget per page. */

/* 1. Tokens: palette B, grid, families, easings. */
:root{
--sn-v:13;
--sn-paper:#F4F4F4;--sn-ink:#0A0A0A;--sn-second:#707070;--sn-second-inv:#B4B4B4;
--sn-accent:#2340FF;--sn-slot:#E3E3E3;--sn-slot-inv:#1A1A1A;
--sn-max:1320px;--sn-gut:24px;--sn-side:calc((100vw - min(100vw, 1320px)) / 2 + 24px);--sn-side-neg:calc((min(100vw, 1320px) - 100vw) / 2 - 24px);
--sn-display:"Fraunces",Georgia,"Times New Roman",serif;
--sn-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
--sn-enter:cubic-bezier(0.22,1,0.36,1);--sn-state:cubic-bezier(0.65,0,0.35,1);
}

/* 2. Base: zero radius, no shadows, no horizontal overflow, paper and ink. */
html,body{overflow-x:clip;max-width:100%}
body{margin:0;background:var(--sn-paper);color:var(--sn-ink);font-family:var(--sn-body);
font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*,*::before,*::after{box-sizing:border-box;border-radius:0 !important;box-shadow:none !important;text-shadow:none !important}
img,video,figure{max-width:100%;display:block}
.sn-main{position:relative;z-index:1;background:var(--sn-paper)}
html.sn-js .sn-nojs{display:none}

/* 3. Typography scale. Mobile first, desktop from 768px up. */
h1,h2,h3,h4{margin:0;font-family:var(--sn-display);font-weight:400;font-variation-settings:"SOFT" 0,"WONK" 0}
p{margin:0 0 1.2em}
.sn-h1,h1{font-size:clamp(36px,9vw,44px);line-height:1.06;letter-spacing:-0.03em}
.sn-h2,h2{font-size:clamp(28px,6.5vw,32px);line-height:1.1;letter-spacing:-0.02em}
.sn-h3,h3{font-size:clamp(21px,4.6vw,24px);line-height:1.2;letter-spacing:-0.01em}
.sn-body,p,li{font-size:16px;line-height:1.6}
.sn-lead{font-size:17px;line-height:1.55}
.sn-small{font-size:14px;line-height:1.5}
.sn-label{font-family:var(--sn-body);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:0.16em;color:var(--sn-second);margin:0 0 24px}
.sn-measure{max-width:68ch}
.sn-sec{color:var(--sn-second)}
@media (min-width:768px){
.sn-h1,h1{font-size:clamp(56px,6.1vw,88px);line-height:1.02}
.sn-h2,h2{font-size:clamp(40px,3.6vw,52px);line-height:1.1}
.sn-h3,h3{font-size:clamp(24px,2vw,28px)}
.sn-body,p,li{font-size:clamp(17px,1.15vw,18px)}
.sn-lead{font-size:clamp(19px,1.5vw,22px);line-height:1.5}
}

/* 4. Layout: 1320px measure, 12 columns, 24px gutters, 8px spacing multiples. */
.sn-wrap{width:100%;max-width:var(--sn-max);margin:0 auto;padding-left:var(--sn-gut);padding-right:var(--sn-gut)}
.sn-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sn-gut)}
.sn-sect{position:relative}
.sn-pad-xl{padding-top:96px;padding-bottom:96px}
.sn-pad-l{padding-top:72px;padding-bottom:72px}
.sn-pad-m{padding-top:56px;padding-bottom:56px}
.sn-pad-s{padding-top:40px;padding-bottom:40px}
@media (min-width:1024px){
.sn-pad-xl{padding-top:160px;padding-bottom:160px}
.sn-pad-l{padding-top:120px;padding-bottom:120px}
.sn-pad-m{padding-top:80px;padding-bottom:80px}
.sn-pad-s{padding-top:48px;padding-bottom:48px}
}
.sn-inverse{background:var(--sn-ink);color:var(--sn-paper)}
.sn-inverse .sn-label,.sn-inverse .sn-sec{color:var(--sn-second-inv)}
.sn-rule{height:4px;background:var(--sn-ink);border:0;margin:0}
.sn-inverse .sn-rule{background:var(--sn-paper)}
.sn-rule-accent{height:4px;background:var(--sn-accent);border:0;margin:0}

/* 5. Links and buttons: square, solid, no gradient, accent underline on hover. */
a{color:inherit;text-decoration:none}
.sn-link{color:var(--sn-accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.sn-inverse .sn-link{color:var(--sn-paper)}
.sn-ul{position:relative;display:inline-block}
.sn-ul::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--sn-accent);
transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--sn-state)}
.sn-ul:hover::after,.sn-ul:focus-visible::after{transform:scaleX(1)}
.sn-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:16px 32px;
background:var(--sn-ink);color:var(--sn-paper);font-family:var(--sn-body);font-size:16px;font-weight:500;
letter-spacing:0.02em;border:0;cursor:pointer;transition:background 300ms var(--sn-state),transform 300ms var(--sn-state)}
.sn-btn:hover{background:var(--sn-accent)}
.sn-inverse .sn-btn{background:var(--sn-paper);color:var(--sn-ink)}
.sn-inverse .sn-btn:hover{background:var(--sn-accent);color:var(--sn-paper)}
.sn-btn-ghost{background:transparent;color:var(--sn-ink);padding-left:0;padding-right:0;min-height:44px}
.sn-btn-ghost:hover{background:transparent;color:var(--sn-accent)}
:focus-visible{outline:2px solid var(--sn-accent);outline-offset:2px}

/* 6. Header: solid, sticky, reduces height on scroll, no blur. */
.sn-head{position:fixed;top:0;left:0;right:0;z-index:9990;background:var(--sn-paper)}
.sn-head__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;
max-width:var(--sn-max);margin:0 auto;padding:20px var(--sn-gut);transition:padding 300ms var(--sn-state)}
.sn-head.is-small .sn-head__bar{padding-top:10px;padding-bottom:10px}
.sn-head__mark{font-family:var(--sn-body);font-weight:500;font-size:15px;letter-spacing:0.02em;min-height:44px;display:flex;align-items:center}
.sn-head__fallback a{margin-left:24px;font-size:15px}
.sn-head__btn{background:none;border:0;padding:8px 0;min-height:44px;min-width:44px;cursor:pointer;
font-family:var(--sn-body);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:0.16em;color:var(--sn-ink)}
.sn-head__btn:hover{color:var(--sn-accent)}
.sn-head-space{height:76px}

/* 7. Off canvas menu: inverse panel, slides from the right, transform only. */
.sn-menu{position:fixed;inset:0 0 0 auto;width:min(100%,520px);z-index:9996;background:var(--sn-ink);color:var(--sn-paper);
padding:96px var(--sn-gut) 48px;display:flex;flex-direction:column;justify-content:space-between;
transform:translateX(100%);transition:transform 500ms var(--sn-enter);visibility:hidden}
.sn-menu.is-open{transform:translateX(0);visibility:visible}
.sn-menu__close{position:absolute;top:16px;right:var(--sn-gut);background:none;border:0;color:var(--sn-paper);
font-size:13px;text-transform:uppercase;letter-spacing:0.16em;min-height:44px;min-width:44px;cursor:pointer;font-family:var(--sn-body)}
.sn-menu__nav a{display:block;font-family:var(--sn-display);font-size:clamp(36px,8vw,56px);line-height:1.15;
letter-spacing:-0.02em;padding:8px 0;transition:transform 300ms var(--sn-state),color 300ms var(--sn-state)}
.sn-menu__nav a:hover{color:var(--sn-accent);transform:translateX(8px)}
.sn-menu__foot{font-size:14px;color:var(--sn-second-inv);display:grid;gap:8px}
.sn-scrim{position:fixed;inset:0;background:rgba(10,10,10,0.6);z-index:9994;opacity:0;visibility:hidden;transition:opacity 300ms var(--sn-state)}
.sn-scrim.is-open{opacity:1;visibility:visible}
body.sn-locked{overflow:hidden}

/* 8. Type as device: oversized words, outline fill, numerals, vertical labels. */
.sn-big{font-family:var(--sn-display);font-weight:600;line-height:0.82;letter-spacing:-0.04em;
margin:0;white-space:nowrap;pointer-events:none;user-select:none;font-size:22vw}
@media (min-width:1024px){.sn-big{font-size:14vw}}
.sn-big--sm{font-size:18vw}
@media (min-width:1024px){.sn-big--sm{font-size:10vw}}
.sn-big--bleed-l{margin-left:0}
@media (min-width:1024px){.sn-big--bleed-l{margin-left:-2vw}}
.sn-hero__word{font-size:14vw;margin-left:var(--sn-gut);margin-bottom:16px}
@media (min-width:1024px){.sn-hero__word{font-size:15vw;margin-left:0}}
.sn-big--bleed-r{margin-right:-3vw;text-align:right}
.sn-outline{color:transparent;-webkit-text-stroke:1.5px currentColor}
.sn-inverse .sn-outline{-webkit-text-stroke-color:var(--sn-paper)}
.sn-num{font-family:var(--sn-display);font-weight:600;color:var(--sn-accent);line-height:0.8;
letter-spacing:-0.04em;font-size:16vw;margin:0}
@media (min-width:1024px){.sn-num{font-size:10vw}}
.sn-vlabel{display:none}
@media (min-width:1024px){
.sn-vlabel{display:block;position:absolute;top:160px;writing-mode:vertical-rl;transform:rotate(180deg);
font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:0.16em;color:var(--sn-second)}
.sn-vlabel--l{left:16px}
.sn-vlabel--r{right:16px}
.sn-inverse .sn-vlabel{color:var(--sn-second-inv)}
}
.sn-clip{overflow:clip}

/* 9. Image slots: fixed ratio, object-fit cover, so swaps never move the layout. */
.sn-fig{position:relative;margin:0;background:var(--sn-slot);overflow:hidden}
.sn-inverse .sn-fig{background:var(--sn-slot-inv)}
.sn-fig>img{width:100%;height:100%;object-fit:cover;display:block}
.sn-fig::before{content:"";display:block}
.sn-r45::before{padding-top:125%}
.sn-r32::before{padding-top:66.6667%}
.sn-r916::before{padding-top:177.78%}
.sn-r11::before{padding-top:100%}
.sn-r34::before{padding-top:133.33%}
.sn-fig>img,.sn-fig>picture{position:absolute;inset:0}

/* 9b. Wireframe placeholder for empty image slots. One block, delete it when the photographs land. */
.sn-fig[data-sn-slot]{outline:4px solid var(--sn-ink);outline-offset:-4px}
.sn-inverse .sn-fig[data-sn-slot]{outline-color:var(--sn-paper)}
.sn-fig[data-sn-slot]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M0 0L40 40M40 0L0 40' stroke='%230A0A0A' stroke-opacity='0.13' stroke-width='0.5' fill='none'/></svg>");background-size:100% 100%;background-repeat:no-repeat}
.sn-inverse .sn-fig[data-sn-slot]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M0 0L40 40M40 0L0 40' stroke='%23F4F4F4' stroke-opacity='0.20' stroke-width='0.5' fill='none'/></svg>")}
.sn-fig[data-sn-slot]::after{content:attr(data-sn-slot);position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;text-align:center;padding:24px;white-space:pre-line;
font-family:var(--sn-body);font-size:12px;font-weight:500;line-height:2;letter-spacing:0.16em;
text-transform:uppercase;color:var(--sn-second)}
.sn-inverse .sn-fig[data-sn-slot]::after{color:var(--sn-second-inv)}
.sn-r45[data-sn-slot]::after{content:attr(data-sn-slot) "\A 4:5 portrait\A min 1400 x 1750"}
.sn-r32[data-sn-slot]::after{content:attr(data-sn-slot) "\A 3:2 landscape\A min 2000 x 1333"}
.sn-r916[data-sn-slot]::after{content:attr(data-sn-slot) "\A 9:16 vertical\A min 1200 x 2133"}
.sn-r11[data-sn-slot]::after{content:attr(data-sn-slot) "\A 1:1 square\A min 1600 x 1600"}
.sn-r34[data-sn-slot]::after{content:attr(data-sn-slot) "\A 3:4 portrait\A min 1500 x 2000"}
/* Exact section 7 ratio and minimum pixels when the figure carries them. */
.sn-fig[data-sn-slot][data-sn-min]::after{content:attr(data-sn-slot) "\A " attr(data-sn-ratio) "\A min " attr(data-sn-min)}
/* Swapping in a real photograph removes the wireframe with no other edit. */
.sn-fig[data-sn-slot]:has(> img),.sn-fig[data-sn-slot]:has(> picture){outline:0}
.sn-fig[data-sn-slot]:has(> img)::after,.sn-fig[data-sn-slot]:has(> picture)::after{content:none}
.sn-fig[data-sn-slot]:has(> img)::before,.sn-fig[data-sn-slot]:has(> picture)::before{background-image:none}
/* Small slots drop the second and third label lines. */
@media (max-width:767px){.sn-fig[data-sn-slot]::after{font-size:10px;letter-spacing:0.12em;padding:12px}}

/* 9c. Fixed elements must not be trapped by the theme animation wrappers. */
.hostinger-elementor-aos{transform:none !important;will-change:auto !important}
body > .sn-head,body > .sn-menu,body > .sn-scrim{position:fixed}

/* 10. Home hero: layered 7/5 grid, portrait overlapping the oversized word. */
.sn-hero{position:relative;padding-top:104px}
@media (min-width:1024px){.sn-hero{padding-top:160px}}
.sn-hero__word{position:relative;z-index:1;color:var(--sn-ink)}
.sn-hero__inner{position:relative;z-index:2}
@media (min-width:1024px){
.sn-hero__cols{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sn-gut);align-items:start}
.sn-hero__text{grid-column:1 / span 7}
.sn-hero__img{grid-column:8 / span 5;margin-top:-96px}
}
.sn-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:40px}

/* 11. Results: uneven grid, three figure sizes, no equal columns, no icons. */
.sn-res{display:grid;grid-template-columns:repeat(12,1fr);gap:40px var(--sn-gut)}
.sn-res__item{grid-column:1 / -1}
.sn-fig-xl{font-family:var(--sn-display);font-weight:600;line-height:0.9;letter-spacing:-0.03em;font-size:clamp(56px,16vw,168px);margin:0}
.sn-fig-l{font-family:var(--sn-display);font-weight:600;line-height:0.9;letter-spacing:-0.03em;font-size:clamp(44px,11vw,112px);margin:0}
.sn-fig-m{font-family:var(--sn-display);font-weight:600;line-height:0.95;letter-spacing:-0.02em;font-size:clamp(36px,8vw,72px);margin:0}
.sn-fig-s{font-family:var(--sn-display);font-weight:600;line-height:1;letter-spacing:-0.02em;font-size:clamp(32px,6vw,48px);margin:0}
.sn-res__note{margin-top:16px;max-width:34ch}
@media (min-width:1024px){
.sn-res__item--a{grid-column:1 / span 7}
.sn-res__item--b{grid-column:9 / span 4;align-self:end}
.sn-res__item--c{grid-column:2 / span 5;margin-top:64px}
.sn-res__item--d{grid-column:8 / span 4;margin-top:24px}
}

/* 12. Horizontal scroll: sticky pin and translated track on desktop, native snap below. */
.sn-hs{position:relative}
.sn-hs__viewport{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory;scrollbar-width:none}
.sn-hs__viewport::-webkit-scrollbar{display:none}
.sn-hs__track{display:flex;gap:var(--sn-gut);padding:0 var(--sn-gut) 32px}
.sn-hs__item{flex:0 0 78vw;scroll-snap-align:start}
.sn-hs__bar{height:4px;background:#D8D8D8;margin:0 var(--sn-gut)}
.sn-inverse .sn-hs__bar{background:#242424}
.sn-hs__fill{height:4px;width:0;background:var(--sn-accent);transform-origin:left}
@media (min-width:1024px){
.sn-hs.is-pinned{height:auto}
.sn-hs__pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.sn-hs__viewport{overflow:visible;scroll-snap-type:none}
.sn-hs__track{will-change:transform;padding:0 0 32px 6vw}
.sn-hs__item{flex:0 0 34vw}
.sn-hs__bar{margin:0 6vw}
.sn-hs.is-drag .sn-hs__track{cursor:grabbing}
}
.sn-hs__cursor{position:fixed;top:0;left:0;z-index:70;width:88px;height:88px;border-radius:50% !important;
background:var(--sn-accent);color:var(--sn-paper);display:none;align-items:center;justify-content:center;
font-size:12px;text-transform:uppercase;letter-spacing:0.16em;pointer-events:none;opacity:0;
transition:opacity 300ms var(--sn-state)}
@media (min-width:1024px) and (pointer:fine){.sn-hs__cursor{display:flex}}
.sn-hs__cursor.is-on{opacity:1}
.sn-card__title{margin-top:24px}
.sn-card__meta{color:var(--sn-second);margin-top:8px;max-width:40ch}
.sn-card:hover .sn-card__title{transform:translateX(4px)}
.sn-card__title{transition:transform 300ms var(--sn-state)}
.sn-card__imgs{position:relative}
.sn-card__imgs .sn-fig+.sn-fig{position:absolute;inset:0;opacity:0;transition:opacity 300ms var(--sn-state)}
.sn-card:hover .sn-card__imgs .sn-fig+.sn-fig{opacity:1}

/* 13. Marquee: one line, one per site, paused on hover, desktop only. */
.sn-marq{display:none}
@media (min-width:1024px){
.sn-marq{display:block;overflow:hidden;padding:32px 0;border:0}
.sn-marq__row{display:flex;gap:64px;width:max-content;animation:sn-marq 48s linear infinite}
.sn-marq:hover .sn-marq__row{animation-play-state:paused}
.sn-marq.is-rev .sn-marq__row{animation-direction:reverse}
.sn-marq span{font-family:var(--sn-display);font-weight:400;font-size:6vw;line-height:1;letter-spacing:-0.03em;white-space:nowrap}
}
@keyframes sn-marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* 14. Service rows: full width, oversized numeral leading each row, 3/9 split. */
.sn-row{display:grid;grid-template-columns:repeat(12,1fr);gap:16px var(--sn-gut);padding:40px 0}
.sn-row+.sn-row{border-top:0}
.sn-row__n{grid-column:1 / -1;font-family:var(--sn-display);font-weight:600;color:var(--sn-accent);
font-size:clamp(48px,12vw,64px);line-height:0.9;letter-spacing:-0.04em;margin:0}
.sn-row__b{grid-column:1 / -1}
@media (min-width:1024px){
.sn-row{padding:56px 0;align-items:start}
.sn-row__n{grid-column:1 / span 3;font-size:8vw}
.sn-row__b{grid-column:4 / span 8}
}

/* 15. Work page: sticky left index and full bleed case study blocks. */
.sn-case{position:relative}
.sn-case__head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sn-gut);align-items:end}
.sn-case__n{grid-column:1 / -1}
.sn-case__name{grid-column:1 / -1}
.sn-idx{display:none}
@media (min-width:1024px){
.sn-idx{display:block;position:sticky;top:96px;align-self:start;grid-column:1 / span 2}
.sn-idx li{list-style:none;margin:0 0 12px;font-size:14px;color:var(--sn-second);
transition:color 300ms var(--sn-state),transform 300ms var(--sn-state)}
.sn-idx li.is-active{color:var(--sn-ink);transform:translateX(8px)}
.sn-idx li.is-active a{color:var(--sn-accent)}
.sn-work__cols{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sn-gut)}
.sn-work__idx{grid-column:1 / span 2}
.sn-work__body{grid-column:3 / span 10}
}
.sn-idx ul{margin:0;padding:0}
.sn-bleed-r{margin-right:var(--sn-side-neg) !important;max-width:none !important}
.sn-bleed-l{margin-left:var(--sn-side-neg) !important;max-width:none !important}
.sn-bleed{margin-left:var(--sn-side-neg) !important;margin-right:var(--sn-side-neg) !important}
.sn-behind{position:relative}
@media (min-width:1024px){
.sn-behind__img{position:absolute;inset:0;z-index:0}
.sn-behind__img .sn-fig{height:100%}
.sn-behind__img .sn-fig::before{display:none}
.sn-behind__text{position:relative;z-index:2;background:var(--sn-paper);padding:56px;max-width:640px}
}
.sn-res-line{display:grid;gap:8px;margin-top:24px}
.sn-res-line strong{font-family:var(--sn-display);font-weight:600;font-size:clamp(28px,4vw,44px);letter-spacing:-0.02em;line-height:1}

/* 16. About: one narrow measure with notes and images in the right margin. */
@media (min-width:1024px){
.sn-about{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sn-gut)}
.sn-about__main{grid-column:1 / span 6}
.sn-about__side{grid-column:8 / span 4;display:grid;gap:48px;align-content:start}
}
.sn-note{font-size:14px;color:var(--sn-second);line-height:1.5;max-width:34ch}
.sn-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.sn-list li{font-size:16px}

/* 17. Contact: fixed 50/50 split, full height on desktop, stacked on mobile. */
@media (min-width:1024px){
.sn-split{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;align-items:stretch}
.sn-split__type{display:flex;flex-direction:column;justify-content:center;padding:96px 6vw}
.sn-split__img .sn-fig{height:100%}
.sn-split__img .sn-fig::before{padding-top:0;position:absolute;inset:0}
}
.sn-form{display:grid;gap:24px;max-width:560px;margin-top:40px}
.sn-field{display:grid;gap:8px}
.sn-field label{font-size:13px;text-transform:uppercase;letter-spacing:0.16em;color:var(--sn-second)}
.sn-field input,.sn-field textarea,.sn-field select{font-family:var(--sn-body);font-size:16px;padding:14px 16px;
background:transparent;color:var(--sn-ink);border:2px solid #D2D2D2;min-height:48px}
.sn-field input:focus,.sn-field textarea:focus,.sn-field select:focus{border-color:var(--sn-ink);outline:2px solid var(--sn-accent);outline-offset:2px}

/* 17b. Contact stacks with the photograph first below 1024px. */
@media (max-width:1023px){
.sn-split{display:flex;flex-direction:column}
.sn-split__img{order:1}
.sn-split__type{order:2;padding:56px var(--sn-gut) 80px}
}

/* 18. Footer: inverse block, three parts on desktop, revealed by the page scrolling off it. */
.sn-foot{background:var(--sn-ink);color:var(--sn-paper);padding:64px 0 32px}
@media (min-width:1024px){
.sn-foot{position:sticky;bottom:0;z-index:0;padding:96px 0 40px}
.sn-foot__row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sn-gut);align-items:start}
}
.sn-foot__row{display:grid;gap:40px}
.sn-foot a{transition:color 300ms var(--sn-state)}
.sn-foot__nav{display:grid;gap:8px}
.sn-foot__cred{font-size:14px;color:var(--sn-second-inv);display:grid;gap:4px}
.sn-foot__bar{margin-top:48px;font-size:14px;color:var(--sn-second-inv)}
.sn-foot .sn-ul::after{background:var(--sn-accent)}

/* 19. Motion: entrances by IntersectionObserver, transform and opacity only. */
.sn-rev{opacity:0;transform:translate3d(0,24px,0);transition:opacity 700ms var(--sn-enter),transform 700ms var(--sn-enter)}
.sn-rev.is-in{opacity:1;transform:translate3d(0,0,0)}
.sn-line{display:block;overflow:hidden}
.sn-line>span{display:block;transform:translate3d(0,110%,0);transition:transform 700ms var(--sn-enter)}
.sn-lines.is-in .sn-line>span{transform:translate3d(0,0,0)}
.sn-word{display:inline-block;opacity:0;transform:translate3d(0,12px,0);
transition:opacity 500ms var(--sn-enter),transform 500ms var(--sn-enter)}
.sn-words.is-in .sn-word{opacity:1;transform:translate3d(0,0,0)}
.sn-wipe{clip-path:inset(0 100% 0 0);transition:clip-path 800ms var(--sn-enter)}
.sn-wipe.is-in{clip-path:inset(0 0 0 0)}
.sn-wipe>img,.sn-wipe .sn-fig__inner{transform:scale(1.08);transition:transform 800ms var(--sn-enter)}
.sn-wipe.is-in>img,.sn-wipe.is-in .sn-fig__inner{transform:scale(1)}
.sn-par{will-change:transform}
.sn-mag{will-change:transform}

/* 20. Responsive: stack at 768 and below, image first except the hero. */
@media (max-width:767px){
.sn-stack{display:flex;flex-direction:column}
.sn-stack .sn-stack__img{order:1}
.sn-stack .sn-stack__text{order:2}
.sn-hero .sn-hero__img{margin-top:32px}
.sn-big{font-size:22vw}
.sn-hero__word{font-size:14vw;margin-left:var(--sn-gut)}
.sn-bleed-r,.sn-bleed-l{margin-left:0 !important;margin-right:0 !important}
.sn-behind__text{padding:0}
}
@media (max-width:1023px){
.sn-marq,.sn-vlabel,.sn-idx{display:none}
.sn-par{transform:none !important}
}

/* 21. Reduced motion: no transitions, no animation, layout untouched. */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;
transition-duration:0.001ms !important;scroll-behavior:auto !important}
.sn-rev,.sn-word{opacity:1 !important;transform:none !important}
.sn-line>span{transform:none !important}
.sn-wipe{clip-path:none !important}
.sn-wipe>img{transform:none !important}
.sn-marq__row{animation:none !important}
.sn-hs__pin{position:static;height:auto}
.sn-hs__viewport{overflow-x:auto;scroll-snap-type:x mandatory}
.sn-hs__track{transform:none !important;padding-left:var(--sn-gut)}
}

/* 22. Stacking: page sections sit above the footer, which is revealed as they scroll off. */
.sn-sect{position:relative;z-index:1;background:var(--sn-paper)}
.sn-sect.sn-inverse{background:var(--sn-ink)}
.sn-card{display:block}
.sn-hs__item:focus-visible,.sn-hs__track:focus-visible{outline:2px solid var(--sn-accent);outline-offset:2px}
.sn-mt-8{margin-top:8px}.sn-mt-16{margin-top:16px}.sn-mt-24{margin-top:24px}
.sn-mt-40{margin-top:40px}.sn-mt-56{margin-top:56px}.sn-mt-80{margin-top:80px}
.sn-mb-24{margin-bottom:24px}.sn-mb-40{margin-bottom:40px}.sn-mb-56{margin-bottom:56px}
.sn-flow>*+*{margin-top:24px}
.sn-hide{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sn-skip{position:absolute;left:-9999px;top:0;background:var(--sn-ink);color:var(--sn-paper);padding:12px 16px;z-index:9998}
.sn-skip:focus{left:0}

/* 23. Admin bar offset, so the fixed header is not hidden for logged in editors. */
body.admin-bar .sn-head{top:32px}
@media (max-width:782px){body.admin-bar .sn-head{top:46px}}

/* 24. Column split utilities, so each section can take a different shape. */
.sn-cols{display:grid;gap:var(--sn-gut)}
@media (min-width:1024px){
.sn-cols--57{grid-template-columns:5fr 7fr}
.sn-cols--75{grid-template-columns:7fr 5fr}
.sn-cols--48{grid-template-columns:4fr 8fr}
.sn-cols--84{grid-template-columns:8fr 4fr}
.sn-cols--66{grid-template-columns:1fr 1fr}
.sn-cols--39{grid-template-columns:3fr 9fr}
}
/* 25. Case study blocks on the Work page. */
.sn-name{font-family:var(--sn-display);font-weight:600;font-size:clamp(40px,7vw,104px);
line-height:0.94;letter-spacing:-0.03em;margin:0}
.sn-case{padding:72px 0}
@media (min-width:1024px){.sn-case{padding:120px 0}}
.sn-case h3{margin-top:40px}
.sn-case h3+p{margin-top:12px}
.sn-fact{margin-top:40px}
.sn-fact .sn-fig-l,.sn-fact .sn-fig-m{color:var(--sn-ink)}
.sn-pair{display:grid;gap:var(--sn-gut);margin-top:56px}
@media (min-width:1024px){.sn-pair{grid-template-columns:5fr 3fr;align-items:end}}
.sn-gal .sn-hs__item{flex:0 0 78vw}
@media (min-width:1024px){.sn-gal .sn-hs__item{flex:0 0 24vw}}