/* Katrin Karu – tokens mirror the Figma file (Foundations page).
   Fluid values interpolate between the Mobile 390 and Desktop 1440 frames. */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/montserrat-latin-400-normal.woff2") format("woff2");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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/montserrat-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/montserrat-latin-500-normal.woff2") format("woff2");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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/montserrat-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Albert Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/albert-sans-latin-400-normal.woff2") format("woff2");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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Albert Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/albert-sans-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Albert Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/albert-sans-latin-700-normal.woff2") format("woff2");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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Albert Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/albert-sans-latin-ext-700-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Albert Sans";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/albert-sans-latin-400-italic.woff2") format("woff2");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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:light;
  --black:#000;--white:#fff;--grey-200:#d9d9d9;--grey-500:#797979;
  --display-font:"Montserrat",Helvetica,Arial,sans-serif;
  --text-font:"Albert Sans",Helvetica,Arial,sans-serif;
  --gutter:clamp(24px,4.03vw,58px);
  --header-h:84px;
  --fs-display:clamp(32.2px,27.41px + 1.229vw,45.1px);
  --fs-heading:clamp(20.1px,18.5px + .4095vw,24.4px);
  --fs-body:clamp(18.1px,17.06px + .2667vw,20.9px);
  --fs-button:clamp(16px,15.44px + .1429vw,17.5px);
  --btn-h:59px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--black);font-family:var(--text-font);font-size:16px;line-height:1.5;letter-spacing:.28px;overflow-x:hidden}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,blockquote{margin:0;padding:0}
ul{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;padding:0;cursor:pointer}
svg{display:block;fill:currentColor}
[hidden]{display:none!important}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:12px;top:-80px;z-index:60;background:var(--grey-200);color:var(--black);padding:14px 18px;text-decoration:none;font-size:14px}
.skip:focus{top:12px}

/* Text styles */
.t-display{font:400 var(--fs-display)/1.113 var(--display-font);letter-spacing:.17em;text-transform:uppercase}
.t-heading{font:400 var(--fs-heading)/1.17 var(--display-font);letter-spacing:.17em;text-transform:uppercase}
.t-body{font-size:var(--fs-body);line-height:1.4}
.t-small{font-size:16px;line-height:1.5}
.grey-500{color:var(--grey-500)}
.grey-200{color:var(--grey-200)}

/* Button */
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--btn-h);padding:10px 18px;text-align:center;text-decoration:none;font:500 var(--fs-button)/1.2 var(--display-font);letter-spacing:.14em;text-transform:uppercase;border:1px solid transparent;transition:background-color .18s,color .18s,border-color .18s}
.btn-black{background:var(--black);color:var(--white)}
.btn-black:hover{background:var(--white);color:var(--black)}
.btn-grey{background:var(--grey-200);color:var(--black)}
.btn-grey:hover{background:var(--white)}
.btn-outline{border-color:var(--black);color:var(--black)}
.btn-outline:hover{background:var(--black);color:var(--white)}

/* Header */
.site-header{position:absolute;top:0;left:0;right:0;z-index:20;height:var(--header-h);padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px));display:flex;align-items:center;justify-content:space-between}
.tone-light{color:var(--white)}
.tone-dark{color:var(--black)}
.logo{display:block;flex:none;width:50px;height:50px;color:inherit}
.logo svg{width:100%;height:100%}
.logo:hover{opacity:.72}
.nav-desktop,.lang{display:none}
.nav-desktop ul{display:flex;gap:22px}
.nav-link{font-size:24.4px;line-height:34.1px;letter-spacing:.02em;text-decoration:none;text-underline-offset:5px;text-decoration-thickness:1px}
.nav-link:hover{text-decoration:underline}
.icon-btn{width:44px;height:44px;margin-right:-5px;display:grid;place-items:center}
.icon-btn svg{width:35px;height:35px;fill:none;stroke:currentColor;stroke-width:1}
.lang{position:relative;margin-left:44px}
.lang-btn{display:flex;align-items:center;gap:8px;font-size:24.4px;line-height:34.1px;letter-spacing:.02em}
.lang-btn:hover .lang-name{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.i-globe{width:19px;height:19px}
.i-chev{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1;transition:transform .18s}
.lang-btn[aria-expanded="true"] .i-chev{transform:rotate(180deg)}
.lang-list{position:absolute;right:0;top:calc(100% + 10px);min-width:170px;padding:10px 0;background:var(--white);color:var(--black);box-shadow:0 8px 28px rgba(0,0,0,.18)}
.lang-list a{display:block;padding:8px 20px;font-size:20.9px;line-height:1.4;text-decoration:none}
.lang-list a:hover{background:var(--grey-200)}
.lang-list a[aria-current="true"]{font-weight:700}

/* Mobile menu */
.menu{position:fixed;inset:0;z-index:50;background:var(--white);color:var(--black);display:flex;flex-direction:column;overflow-y:auto;animation:menu-in .2s ease-out}
@keyframes menu-in{from{opacity:0}to{opacity:1}}
.menu .menu-top{position:static;flex:none}
.menu-panel{flex:1;display:flex;flex-direction:column;min-height:0}
.menu-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}
.menu-link,.menu-row{font-size:33.2px;line-height:40px;letter-spacing:.34px;text-decoration:none;text-align:center;text-underline-offset:6px;text-decoration-thickness:1px}
.menu-link:hover{text-decoration:underline}
.menu-link[aria-current="true"]{font-weight:700}
.menu-row{display:flex;align-items:center;gap:10px}
.menu-row .i-globe{width:26.6px;height:26.6px}
.menu-row .i-chev{width:33px;height:33px}
.menu-lang{flex:none;display:flex;justify-content:center;padding:0 24px 32px}
.menu-back{color:var(--grey-500);padding-bottom:16px;gap:8px}
.menu-langs{gap:8px}

/* Sections */
.section{position:relative;isolation:isolate;padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px))}
.bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.has-overlay::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--overlay)}
.title{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.on-image{color:var(--white)}

.hero{--overlay:rgba(0,0,0,.2);min-height:clamp(360px,41.4vw,596px);padding-top:var(--header-h);display:flex;align-items:center}
.hero .bg{object-position:59.5% 36.8%}
.hero .title{gap:16px}
/* Mobile hero: title sits low, contact icons below it (Homepage – Mobile 390) */
@media (max-width:699.98px){
  .hero{flex-direction:column;justify-content:flex-end;gap:50px;padding-bottom:50px}
}
.social.social-hero{gap:8px}
.social.social-hero a{width:32px;height:32px}
.social.social-hero svg{width:32px;height:32px}

.services{padding-block:56px;padding-inline:0}
.card-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:56px}
.card{display:flex;flex-direction:column;gap:24px;min-width:0}
.card img{width:100%;aspect-ratio:var(--ar-m);object-fit:cover}
.card-text{display:flex;flex-direction:column;gap:16px;padding-inline:24px}

.gallery{--overlay:rgba(255,255,255,.17);min-height:460px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;padding-block:48px}

.about{padding-block:56px;display:grid;grid-template-columns:minmax(0,1fr);gap:32px;grid-template-areas:"quote" "portrait" "bio"}
.about-quote{grid-area:quote}
.about-portrait{grid-area:portrait;width:100%;aspect-ratio:342/440;object-fit:cover}
.about-lower{grid-area:bio;display:flex;flex-direction:column;gap:40px;min-width:0}
.bio{display:flex;flex-direction:column;gap:14px}

.fashion{--overlay:rgba(0,0,0,.45);padding-block:64px;display:flex;flex-direction:column;align-items:center;gap:32px}
.fashion .bg{object-position:10.2% 64.8%}
.fashion .title{gap:16px}
.fashion-lower{display:flex;flex-direction:column;align-items:center;gap:40px;width:100%}

.shop{padding-block:120px}
.shop .title{gap:23px}

.footer{--overlay:rgba(0,0,0,.15);padding-block:40px;display:flex;flex-direction:column;align-items:center;gap:32px;color:var(--white);text-align:center;overflow:hidden}
.contact{display:flex;flex-direction:column;align-items:center}
.contact a{color:var(--grey-200);text-underline-offset:3px}
.contact a:hover{color:var(--white)}
.social{display:flex;gap:12px}
.social a{width:48px;height:48px;border-radius:50%;background:var(--white);color:var(--black);display:grid;place-items:center;transition:background-color .18s,color .18s}
.social a:hover{background:var(--black);color:var(--white)}
.social svg{width:48px;height:48px}
.footer :focus-visible,.on-image :focus-visible{outline-color:var(--white)}

/* CV page */
.cv{padding-top:108px;padding-bottom:56px;display:grid;grid-template-columns:minmax(0,1fr);gap:32px;grid-template-areas:"portrait" "col"}
.cv-portrait{grid-area:portrait;width:100%;aspect-ratio:2/3;object-fit:cover;object-position:52.4% 27.2%}
.cv-col{grid-area:col;display:flex;flex-direction:column;gap:56px;min-width:0}
.cv-top{display:flex;flex-direction:column;gap:40px}
.intro{display:flex;flex-direction:column;gap:14px}
.intro h1{font:inherit;font-weight:700;letter-spacing:inherit}
.cv-sections{display:flex;flex-direction:column;gap:48px}
.cv-section{display:flex;flex-direction:column;gap:20px}
.cv-entries{display:flex;flex-direction:column;gap:12px}
.cv-entries a,.intro a{text-underline-offset:3px;overflow-wrap:anywhere}
.cv-entries a:hover,.intro a:hover{color:var(--grey-500)}

/* Simple pages */
.notfound{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;padding-top:var(--header-h)}

/* Tablet: two-column cards, fixed-width buttons */
@media (min-width:700px){
  :root{--btn-h:68px}
  .social.social-hero{display:none}
  .services{padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px));padding-block:95px 105px}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:60px 11px}
  .card{gap:31px}
  .card img{aspect-ratio:434/265}
  .card-text{gap:20px;padding-inline:0}
  .card-text p{max-width:323px}
  .gallery{min-height:clamp(460px,41.25vw,594px);gap:clamp(34px,6.46vw,93px)}
  .gallery .btn{width:min(434px,100%)}
  .about-lower .btn{width:212px}
  .about-portrait{max-width:601px;aspect-ratio:601/899}
  .fashion{padding-block:149px 95px;gap:91px}
  .fashion .title{gap:13px}
  .fashion-lower{gap:80px;width:min(434px,100%)}
  .fashion-lower .btn{width:323px}
  .shop{padding-block:278px 184px}
  .shop .title{gap:53px}
  .footer{padding-block:56px 82px;gap:59px}
  .footer-lower{display:flex;flex-direction:column;align-items:center;gap:42px}
  .social{gap:8px}
  .social a{width:32px;height:32px}
  .social svg{width:32px;height:32px}
  .cv{padding-top:125px}
  .cv-portrait{max-width:546px}
  .cv-top .btn{width:323px}
  .cv-top{gap:65px}
  .cv-col{gap:118px}
  .cv-sections{gap:61px}
  .cv-section{gap:27px}
  .cv-entries{gap:14px}
}
@media (max-width:699.98px){
  .footer-lower{display:flex;flex-direction:column;align-items:center;gap:32px}
}

/* Desktop */
@media (min-width:1024px){
  :root{--header-h:125px}
  .logo{width:63px;height:63px}
  .nav-desktop{display:block;margin-left:auto}
  .lang{display:block}
  .menu-btn{display:none}
  .menu{display:none!important}
  .hero{padding-top:var(--header-h)}
  .hero .title{gap:29px}
  .card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gallery{justify-content:flex-start;padding-block:238px 0;min-height:594px;gap:93px}
  .about{padding-block:47px 86px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,8.47vw,122px);row-gap:66px;grid-template-rows:auto 1fr;grid-template-areas:"quote portrait" "bio portrait"}
  .about-quote{padding-top:39px}
  .about-portrait{max-width:none}
  .about-lower{gap:50px}
  .cv{padding-top:173px;padding-bottom:61px;grid-template-columns:minmax(0,657fr) minmax(0,546fr);column-gap:11px;padding-right:clamp(58px,11.67vw,168px);grid-template-areas:"col portrait";align-items:start}
  .cv-portrait{max-width:none}
}
@media (max-width:345px){
  .social{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}