@font-face{
font-family:Manrope;
src:url('./assets/manrope-cyrillic.woff2') format('woff2');
font-style:normal;
font-weight:200 800;
font-display:swap;
unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

@font-face{
font-family:Manrope;
src:url('./assets/manrope-latin.woff2') format('woff2');
font-style:normal;
font-weight:200 800;
font-display:swap;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
--ref-paper:#f5f4ed; /* taste-skill-ignore: exact paper colour from the generated design specification, paired with forest green. */
--ref-forest:#243f32;
--ref-deep:#1c3328;
--ref-sage:#e8ebdf;
--ref-gold:#d8ae68;
--ref-muted:#58645c;
--bg:var(--ref-paper);
--ink:var(--ref-forest);
--surface:var(--ref-sage);
--accent:var(--ref-forest);
--accent-ink:var(--ref-paper);
--muted:var(--ref-muted);
--sun:var(--ref-gold);
--gutter:48px;
--max-width:1440px;
--curve:cubic-bezier(.22,1,.36,1);
--body:18px;
--small:14px;
--headline:72px;
--section:48px;
--subhead:30px}

*{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:32px}
body{
margin:0;
background:var(--bg);
color:var(--ink);
font-family:Manrope,system-ui,sans-serif;
font-size:var(--body);
line-height:1.55;
-webkit-font-smoothing:antialiased}
body.menu-open{
overflow:hidden}
button,a{
-webkit-tap-highlight-color:transparent}
button,input{
font:inherit}
button{
color:inherit}
a{
color:inherit;
text-decoration:none}
img{
display:block;
width:100%;
height:100%;
object-fit:cover}
h1,h2,h3,p,figure{
margin:0}
h1,h2,h3{
font-weight:600;
letter-spacing:-.045em;
text-wrap:balance;
line-height:1.05}
h1{
font-size:var(--headline)}
h2{
font-size:var(--section)}
h3{
font-size:var(--subhead)}
p{
text-wrap:pretty}
address{
font-style:normal}
a,button{
touch-action:manipulation}
button{
cursor:pointer}
a:focus-visible,button:focus-visible,[tabindex="0"]:focus-visible{
outline:3px solid var(--sun);
outline-offset:6px}
::selection{
background:var(--sun);
color:var(--ink)}
.page-width{
width:min(100% - var(--gutter)*2,var(--max-width));
margin-inline:auto}
.section-space{
padding-block:96px}
.skip-link{
position:fixed;
left:16px;
top:16px;
padding:12px 24px;
background:var(--ink);
color:var(--bg);
transform:translateY(-160%);
z-index:100}
.skip-link:focus{
transform:translateY(0)}
.header{
height:96px;
display:flex;
align-items:center;
justify-content:space-between;
gap:32px}
.brand{
display:inline-flex;
align-items:center;
gap:16px;
font-size:30px;
font-weight:600;
letter-spacing:-.045em;
white-space:nowrap}
.sun{
display:inline-block;
width:48px;
height:24px;
border-radius:9999px 9999px 0 0;
background:var(--sun);
flex-shrink:0;
align-self:center}
.navigation{
display:flex;
align-items:center;
gap:32px;
font-size:16px}
.navigation a{
padding-block:8px;
transition:color 300ms var(--curve),transform 300ms var(--curve)}
.navigation a:hover{
transform:translateY(-2px)}
.navigation a[aria-current="location"]{
text-decoration:underline;
text-decoration-color:var(--sun);
text-decoration-thickness:3px;
text-underline-offset:8px}
.menu-toggle{
display:none}
.hero{
display:grid;
grid-template-columns:1fr 1.12fr;
gap:32px;
align-items:stretch;
min-height:600px;
max-height:800px}
.hero-copy{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
padding-block:64px 32px}
.hero h1{
max-width:680px;
position:relative;
z-index:1}
.hero-description{
margin-top:32px;
font-size:var(--body);
max-width:480px}
.button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:32px;
min-height:56px;
padding:12px 32px;
border:0;
border-radius:9999px;
background:var(--accent);
color:var(--accent-ink);
font-size:16px;
font-weight:600;
line-height:24px;
transition:background-color 300ms var(--curve),transform 500ms var(--curve)}
.button:hover{
background:var(--ref-deep);
transform:translateY(-3px)}
.button:active{
transform:scale(.98)}
.hero .button{
margin-top:32px}
.arrow{
width:24px;
height:24px;
stroke:currentColor;
stroke-width:1.5;
stroke-linecap:round;
stroke-linejoin:round;
transition:transform 500ms var(--curve)}
.button:hover .arrow{
transform:translateX(4px)}
.hero-company{
margin-top:64px;
font-size:var(--small);
color:var(--muted)}
.arch{
border-radius:50% 50% 0 0 / 40% 40% 0 0;
overflow:hidden}
.hero-media{
aspect-ratio:4/4.4;
max-height:740px}
.hero-media img{
object-position:50% 60%;
animation:hero-photo 1200ms var(--curve) both}
.hero h1,.hero-description,.hero .button,.hero-company{
animation:rise-in 900ms var(--curve) both}
.hero-description{
animation-delay:90ms}
.hero .button{
animation-delay:160ms}
.hero-company{
animation-delay:220ms}
.assortment{
background:var(--surface);
margin-top:0}
.section-heading{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:40px;
margin-bottom:48px}
.section-heading>p{
font-size:var(--body);
max-width:400px}
.product-showcase{
display:grid;
grid-template-columns:1fr 1fr;
gap:64px;
align-items:stretch}
.product-photo{
aspect-ratio:1/1;
overflow:hidden;
background:var(--bg)}
.product-photo img{
transition:opacity 300ms var(--curve),transform 700ms var(--curve)}
.product-photo.is-changing img{
opacity:.35;
transform:scale(1.025)}
.product-content{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:32px}
.product-tabs{
display:flex;
flex-direction:column;
gap:4px}
.product-tab{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
min-height:64px;
padding:12px 24px;
border:0;
border-radius:8px;
background:transparent;
text-align:left;
font-size:24px;
line-height:32px;
transition:background-color 300ms var(--curve),color 300ms var(--curve),transform 500ms var(--curve)}
.product-tab span{
font-size:24px;
line-height:1;
transition:transform 500ms var(--curve)}
.product-tab:hover{
background:color-mix(in oklab,var(--ink) 8%,var(--surface));
transform:translateX(4px)}
.product-tab:active{
transform:scale(.98)}
.product-tab[aria-selected="true"]{
background:var(--ink);
color:var(--bg)}
.product-tab[aria-selected="true"] span{
color:var(--sun);
transform:rotate(45deg)}
.product-panel h3{
margin-bottom:16px}
.product-panel p{
max-width:480px;
min-height:56px}
.text-link{
display:inline-block;
padding-block:8px;
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:6px;
font-size:16px;
font-weight:500;
transition:color 300ms var(--curve),transform 500ms var(--curve)}
.text-link:hover{
transform:translateY(-2px);
text-decoration-thickness:2px}
.product-panel .text-link{
margin-top:16px}
.product-note{
color:var(--muted);
font-size:var(--small);
max-width:450px}
.about{
background:var(--ink);
color:var(--bg);
padding-bottom:0;
overflow:hidden}
.about-grid{
display:grid;
grid-template-columns:1.08fr 1fr;
gap:80px}
.about-statement{
font-size:30px;
line-height:36px;
letter-spacing:-.03em;
margin-top:24px}
.about-photo{
margin-top:32px;
aspect-ratio:1.45;
max-height:430px}
.about-copy{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
gap:32px;
padding-block:0 64px;
max-width:480px}
.about-copy>.button{
margin-top:8px}
.company-year .year{
font-size:96px;
font-weight:500;
line-height:1;
letter-spacing:-.06em;
color:var(--sun)}
.company-year>p:last-child{
margin-top:12px}
.button-light{
--accent:var(--bg);
--accent-ink:var(--ink)}
.button-light:hover{
background:var(--surface)}
.details{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px}
.company-name{
font-size:24px;
font-weight:600;
margin-top:24px;
letter-spacing:-.025em}
.details address{
margin-top:24px}
.details-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:24px;
margin-top:32px}
.details-data dl{
margin:8px 0 0;
display:flex;
flex-direction:column;
gap:24px;
font-size:16px;
line-height:24px}
.details-data dl>div{
display:grid;
grid-template-columns:minmax(140px,.85fr) 1.15fr;
gap:24px}
.details-data dt{
color:var(--muted)}
.details-data dd{
margin:0;
font-variant-numeric:tabular-nums}
.details-note{
font-size:var(--small);
color:var(--muted);
margin-top:40px}
.source-link{
font-size:var(--small);
margin-top:8px}
.copy-status{
min-height:24px;
font-size:var(--small);
margin-top:12px;
max-width:450px}
.footer{
background:var(--surface);
padding-block:48px 32px}
.footer-brand{
display:flex;
align-items:baseline;
gap:24px;
width:fit-content;
max-width:100%;
font-size:96px;
line-height:1.1;
letter-spacing:-.065em;
font-weight:600;
white-space:nowrap}
.footer-brand .sun{
width:128px;
height:64px;
align-self:center}
.footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
margin-top:48px;
font-size:var(--small)}
.footer-bottom>div{
display:flex;
gap:32px}
.footer-bottom a{
padding-block:8px}
.footer-bottom a:hover{
text-decoration:underline;
text-underline-offset:4px}
.information{
max-width:900px;
padding-block:64px 96px;
min-height:65vh}
.information h1{
font-size:48px}
.information h2{
font-size:30px;
margin-block:48px 24px}
.information p,.information ul{
margin-block:16px}
.information li{
margin-block:12px}
.information a{
text-decoration:underline;
text-underline-offset:4px}
.information .button{
text-decoration:none;
margin-top:32px}
.information a:where(:not(.button)){
overflow-wrap:anywhere}
.not-found{
min-height:64vh;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
gap:24px}
.not-found h1{
font-size:60px}
.not-found p{
max-width:480px}
.noscript-products{
padding-top:32px;
display:grid;
gap:16px}

@keyframes rise-in{
from{
opacity:0;
transform:translateY(24px)}
to{
opacity:1;
transform:translateY(0)}
}
@keyframes hero-photo{
from{
opacity:.7;
transform:scale(1.045)}
to{
opacity:1;
transform:scale(1)}
}

@media (prefers-reduced-motion:no-preference){
[data-reveal].will-reveal{
transition:opacity 800ms var(--curve),transform 800ms var(--curve)}
[data-reveal].will-reveal:not(.is-visible){
opacity:0;
transform:translateY(24px)}
}

@media(min-width:1536px){
:root{
--gutter:64px;
--headline:96px}
.hero{
gap:48px}
.hero-description{
max-width:560px}
.hero-media{
aspect-ratio:4/4.2}
}

@media(max-width:1100px){
:root{
--gutter:32px;
--headline:60px;
--section:48px}
.hero{
min-height:530px;
gap:24px}
.hero-media{
aspect-ratio:auto;
min-height:530px}
.hero-company{
margin-top:48px}
.product-showcase{
gap:40px}
.product-tab{
min-height:56px;
font-size:20px;
line-height:28px}
.about-grid{
gap:48px}
.details{
gap:48px}
.footer-brand{
font-size:72px}
.footer-brand .sun{
width:96px;
height:48px}
}

@media(max-width:800px){
:root{
--gutter:24px;
--headline:48px;
--section:36px;
--body:16px;
--subhead:30px}
.header{
height:80px}
.brand{
font-size:24px}
.brand .sun{
width:40px;
height:20px}
.navigation{
gap:24px;
font-size:14px}
.hero{
min-height:470px;
gap:24px}
.hero-copy{
padding-block:40px 24px}
.hero-company{
margin-top:40px;
max-width:280px}
.hero-company>span:last-child{
display:block}
.hero-company>span[aria-hidden]{
display:none}
.hero-media{
min-height:470px}
.hero-description br{
display:none}
.hero-description{
margin-top:24px}
.hero .button{
margin-top:24px;
gap:16px;
padding-inline:24px}
.section-space{
padding-block:64px}
.section-heading{
margin-bottom:32px}
.product-showcase{
gap:32px}
.product-content{
gap:24px}
.product-tab{
padding-inline:16px}
.about{
padding-bottom:0}
.about-grid{
gap:32px}
.about-statement{
font-size:24px;
line-height:32px}
.about-copy{
gap:24px;
padding-bottom:48px}
.company-year .year{
font-size:72px}
.about-photo{
aspect-ratio:1.05}
.details{
gap:40px}
.details-data dl>div{
grid-template-columns:1fr;
gap:4px}
.details-data dl{
gap:16px}
.footer-brand{
font-size:72px}
.footer-bottom{
align-items:flex-start}
.footer-bottom>div{
gap:24px}
.details-actions{
align-items:flex-start;
gap:16px}
.details-note{
margin-top:24px}
}

@media(max-width:620px){
:root{
--gutter:24px}
.header{
height:80px;
position:relative;
z-index:30}
.brand{
gap:12px}
.menu-toggle{
width:48px;
height:48px;
border:0;
border-radius:50%;
background:var(--surface);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:8px;
z-index:32}
.menu-toggle>span{
width:20px;
height:2px;
background:var(--ink);
transition:transform 500ms var(--curve)}
.menu-toggle[aria-expanded="true"]>span:first-child{
transform:translateY(5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"]>span:last-child{
transform:translateY(-5px) rotate(-45deg)}
.navigation{
position:fixed;
inset:80px 0 0;
background:var(--bg);
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
padding:48px 24px 96px;
gap:32px;
font-size:30px;
visibility:hidden;
opacity:0;
transform:translateY(-16px);
transition:opacity 500ms var(--curve),transform 500ms var(--curve),visibility 500ms}
.navigation.is-open{
visibility:visible;
opacity:1;
transform:translateY(0)}
.navigation a{
transform:translateY(24px);
opacity:0;
transition:transform 500ms var(--curve),opacity 500ms var(--curve)}
.navigation.is-open a{
transform:translateY(0);
opacity:1}
.navigation.is-open a:nth-child(2){
transition-delay:60ms}
.navigation.is-open a:nth-child(3){
transition-delay:120ms}
.hero{
display:flex;
flex-direction:column;
max-height:none;
gap:32px;
min-height:0}
.hero-copy{
padding-block:32px 0}
.hero h1{
font-size:48px;
line-height:1.05;
letter-spacing:-.045em}
.hero-description{
max-width:340px;
margin-top:24px}
.hero .button{
margin-top:24px;
min-height:56px;
gap:24px}
.hero-company{
margin-top:32px;
max-width:none;
line-height:20px}
.hero-company>span:last-child{
display:inline}
.hero-company>span[aria-hidden]{
display:inline}
.hero-media{
min-height:0;
aspect-ratio:1.05;
width:100%;
max-height:530px}
.hero-media img{
object-position:center 65%}
.section-space{
padding-block:64px}
.section-heading{
display:block;
gap:0;
margin-bottom:32px}
.section-heading>p{
margin-top:24px}
.section-heading>p>br{
display:none}
.assortment{
margin-top:0}
.product-showcase{
display:flex;
flex-direction:column;
gap:24px}
.product-photo{
order:1}
.product-content{
display:contents}
.product-tabs{
display:flex;
flex-direction:row;
gap:8px;
order:0;
flex-wrap:wrap}
.product-tab{
font-size:16px;
line-height:24px;
min-height:48px;
padding:12px 16px;
border-radius:9999px;
background:var(--bg);
flex-grow:1;
justify-content:center}
.product-tab span{
display:none}
.product-tab:hover{
transform:translateY(-2px)}
.product-panel{
order:2}
.product-panel p{
min-height:0;
margin-top:16px}
.product-panel .text-link{
margin-top:16px}
.product-note{
order:3}
.about{
padding-bottom:0}
.about-grid{
display:flex;
flex-direction:column;
gap:32px}
.about-story{
display:contents}
.about h2{
order:0}
.about-statement{
order:1;
margin-top:-8px}
.about-copy{
order:2;
max-width:none;
padding:0;
gap:24px}
.about-photo{
order:3;
margin-top:8px;
aspect-ratio:1.25;
width:100%;
max-height:400px}
.company-year .year{
font-size:72px}
.company-year>p:last-child{
margin-top:8px}
.about-copy>.button{
margin-top:0}
.details{
display:flex;
flex-direction:column;
gap:32px}
.company-name{
font-size:20px;
line-height:28px}
.details address{
margin-top:24px}
.details-actions{
gap:16px 24px}
.details-data dl{
gap:24px;
margin:0}
.details-data dl>div{
grid-template-columns:minmax(96px,.8fr) 1.2fr;
gap:16px}
.details-data dd{
overflow-wrap:anywhere}
.details-data dl>div:last-child{
grid-template-columns:1fr;
gap:8px}
.details-data dl>div:last-child dd br{
display:none}
.details-note{
margin-top:32px}
.footer{
padding-block:40px 24px}
.footer-brand{
font-size:48px;
gap:16px;
letter-spacing:-.065em}
.footer-brand .sun{
width:64px;
height:32px}
.footer-bottom{
margin-top:32px;
display:flex;
flex-direction:column;
gap:16px;
font-size:14px}
.footer-bottom>div{
justify-content:space-between;
width:100%}
.information{
padding-block:32px 64px}
.information h1{
font-size:36px}
.information h2{
font-size:24px}
.not-found h1{
font-size:48px}
}

@media(max-width:360px){
:root{
--gutter:16px}
.brand{
font-size:24px}
.hero h1{
font-size:36px}
.hero .button{
padding-inline:24px;
gap:16px}
.footer-brand{
font-size:36px;
gap:12px}
.footer-brand .sun{
width:48px;
height:24px}
}

@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*,*::before,*::after{
animation:none!important;
transition:none!important;
scroll-behavior:auto!important}
[data-reveal]{
opacity:1!important;
transform:none!important}
}

@media(min-width:1300px){
:root{
--headline:96px;
--section:60px}
.hero{
grid-template-columns:1fr 1.05fr}
.hero h1{
font-weight:700}
.hero-description{
font-size:20px;
line-height:28px}
.details-data dl{
font-size:18px;
line-height:28px}
}

@media(max-width:620px){.product-tabs{display:grid;grid-template-columns:1fr 1fr}}