@charset "utf-8";
/* Property24 — kogu saidi kujundus. Ilma build-sammuta, ilma raamistikuta. */

/* ---------- fondid ---------- */
@font-face{font-family:Cormorant;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-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:Cormorant;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-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:Cormorant;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-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:Cormorant;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-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:Jost;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jost-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:Jost;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jost-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:Jost;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jost-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:Jost;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jost-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}

/* ---------- tokens ---------- */
:root{
  --bg:#f8f4ef;
  --bg-warm:#e8e0d8;
  --bg-soft:#f1ece5;
  --ink:#23211e;
  --ink-soft:#57514a;
  --muted:#8a8177;
  --line:rgba(35,33,30,.16);
  --line-soft:rgba(35,33,30,.09);
  --dark:#1e1c19;

  --serif:Cormorant,'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:Jost,'Helvetica Neue',Arial,system-ui,sans-serif;

  --wrap:1360px;
  --gut:clamp(20px,5vw,72px);
  --sec:clamp(72px,10vw,150px);

  --fs-label:clamp(12px,.82vw,13px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:clamp(15px,1.05vw,17px);
  line-height:1.72;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--bg);padding:12px 20px}
.skip:focus{left:8px;top:8px}
.ic{width:1.55em;height:1.55em;flex:none}

/* ---------- tüpograafia ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.h1,.h2{
  font-family:var(--serif);font-weight:400;text-transform:uppercase;
  line-height:1.08;letter-spacing:.012em;color:var(--ink);
}
.h1{font-size:clamp(2.3rem,5.2vw,4.1rem)}
.h2{font-size:clamp(1.9rem,3.9vw,3.25rem)}
.eyebrow{
  display:block;font-family:var(--sans);font-weight:400;
  font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;
  line-height:1.65;color:var(--ink-soft);
}
.prose p{margin:0 0 1.15em;max-width:56ch;color:var(--ink-soft)}
.prose p:last-child{margin-bottom:0}
.rule{display:block;width:70px;height:1px;background:var(--ink);opacity:.55;margin:34px 0 28px}

.btn{
  display:inline-flex;align-items:center;gap:1.4em;
  background:var(--dark);color:#f4efe8;
  padding:1.15em 1.9em;font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;font-weight:400;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease);
}
.btn span{position:relative}
.btn .ic{width:1.1em;height:1.1em;transition:transform .5s var(--ease)}
.btn::before{
  content:'';position:absolute;inset:0;background:#3a352e;z-index:-1;
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.btn:hover::before{transform:scaleX(1)}
.btn:hover .ic{transform:translateX(5px)}

.link{
  display:inline-flex;align-items:center;gap:1em;
  font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;color:var(--ink);
}
.link .ic{width:1.6em;height:1.6em;transition:transform .5s var(--ease)}
.link:hover .ic{transform:translateX(6px)}
.link--back{color:var(--muted);margin-bottom:2.2em}
.link--back .ic{transform:scaleX(-1)}
.link--back:hover .ic{transform:scaleX(-1) translateX(6px)}
.link--back:hover{color:var(--ink)}

/* ---------- päis ---------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .5s var(--ease-soft),box-shadow .5s var(--ease-soft)}
.hd__in{
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut);
  height:var(--hd-h,76px);display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.hd__logo{font-family:var(--serif);font-size:1.1rem;letter-spacing:.34em;text-transform:uppercase;white-space:nowrap}
.hd__nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px)}
.hd__nav > a{
  font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;
  position:relative;padding:4px 0;
}
.hd__nav > a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.hd__nav > a:hover::after{transform:scaleX(1);transform-origin:left}
.hd__lang{display:flex;align-items:center;gap:.5em;font-size:var(--fs-label);letter-spacing:.18em}
.hd__lang i{opacity:.35;font-style:normal}
.hd__lang a{opacity:.5;transition:opacity .3s}
.hd__lang a.is-on,.hd__lang a:hover{opacity:1}
.hd.is-stuck{background:rgba(244,239,232,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line-soft)}
.hd__burger{display:none;width:34px;height:34px;position:relative;z-index:2}
.hd__burger span{display:block;height:1px;background:currentColor;margin:6px auto;width:25px;transition:transform .45s var(--ease),opacity .3s}

/* ---------- kerimiskiht ---------- */
#sc-in{will-change:transform}
section[id]{scroll-margin-top:var(--hd-h,76px)}   /* ankur ei jää fikseeritud päise alla */
html.has-vs #sc{position:fixed;top:0;left:0;width:100%}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(560px,92svh,1000px);display:flex;overflow:hidden}
.hero__media{position:absolute;inset:0;background:var(--bg-warm)}
.hero__slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.8s var(--ease-soft)}
.hero__slide.is-on{opacity:1}
/* Suum käib peatatuna kõigil slaididel ja jookseb ainult aktiivsel. Kui suum oleks
   seotud .is-on'iga, kaoks animatsioon lahkuvalt slaidilt hetkel, mil see alles
   hakkab välja sulanduma — pilt hüppaks nähtavalt algmõõtu tagasi. Pausiga jääb
   see sinna, kus oli. */
.hero__slide img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(1.07) saturate(.9) contrast(.95);
  transform:scale(1.02);
  animation:heroZoom 22s var(--ease-soft) forwards paused;
}
.hero__slide.is-on img{animation-play-state:running}
@keyframes heroZoom{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.hero__wash{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(248,244,239,.94) 0%,rgba(248,244,239,.86) 20%,rgba(248,244,239,.46) 44%,rgba(248,244,239,.04) 68%),
    linear-gradient(to bottom,rgba(248,244,239,.85) 0,rgba(248,244,239,0) 22%),
    linear-gradient(to top,rgba(248,244,239,.82) 0,rgba(248,244,239,.34) 11%,rgba(248,244,239,0) 26%);
}
.hero__in{
  position:relative;width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:calc(var(--hd-h,76px) + 4.5vh) var(--gut) clamp(28px,5vh,56px);
  display:flex;flex-direction:column;
}
.hero__text{display:flex;flex-direction:column;justify-content:center;flex:1;min-height:0}
.hero__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:clamp(20px,3vh,36px)}
.hero__title{
  font-family:var(--serif);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.6rem,6.1vw,4.9rem);line-height:1.04;letter-spacing:.008em;
}
.hero__lead{max-width:34ch;color:var(--ink-soft);font-size:1.02em;line-height:1.75}
.hero__eyebrow{
  position:absolute;right:var(--gut);top:calc(var(--hd-h,76px) + 24px);
  text-align:right;line-height:2.4;letter-spacing:.3em;color:var(--ink);opacity:.72;font-weight:400;
}
.hero__count{
  display:flex;align-items:center;gap:1em;padding-bottom:1.1em;
  font-size:var(--fs-label);letter-spacing:.24em;color:var(--ink-soft)
}
.hero__count i{display:block;width:34px;height:1px;background:currentColor;opacity:.5}

/* ---------- teenuste riba ---------- */
.strip{background:var(--bg-warm);padding:clamp(30px,3.5vw,52px) var(--gut)}
.strip__in{
  max-width:var(--wrap);margin-inline:auto;height:clamp(48px,3vw,92px);
  display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,24px);
}
.strip__it{display:flex;align-items:center;justify-content:flex-start;gap:.85em}
.strip__it .ic{width:1.8em;height:1.8em;color:var(--ink);opacity:.9}
.strip__it .eyebrow{letter-spacing:.18em}

/* ---------- tööd ---------- */
.work{padding-block:clamp(52px,5.6vw,90px) var(--sec);background:var(--bg)}
.work--all{padding-top:clamp(20px,4vw,48px)}
.work__hd{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(36px,5vw,68px);
}
.work__hd .eyebrow{margin-bottom:1.6em}
.work__intro{display:flex;flex-direction:column;align-items:flex-start;gap:2.2em}
.work__intro p{margin:0;max-width:48ch;color:var(--ink-soft)}
.work__intro .link{align-self:flex-end}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px) clamp(14px,1.8vw,26px)}
.card a{display:block}
.card__media{display:block;overflow:hidden;background:var(--bg-soft);aspect-ratio:1/.96}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .8s var(--ease)}
.card a:hover .card__media img{transform:scale(1.045)}
.card__foot{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-top:1.35em}
.card__txt{display:block;min-width:0}
.card__title{color:var(--ink);letter-spacing:.2em;font-size:var(--fs-label)}
.card__sub{display:block;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.55em}
.card__go{display:flex;align-items:center;gap:.7em;flex:none;padding-top:.15em;color:var(--ink-soft)}
.card__go i{display:block;width:clamp(26px,3vw,52px);height:1px;background:currentColor;opacity:.45;transition:width .55s var(--ease)}
.card__go .ic{width:1.35em;height:1.35em;transition:transform .55s var(--ease)}
.card a:hover .card__go i{width:16px}
.card a:hover .card__go .ic{transform:translateX(8px)}
.empty{color:var(--muted);padding:4em 0}

/* ---------- filosoofia ---------- */
.phil{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:var(--bg-soft)}
/* Pilt on absoluutses asetuses: ta täidab kasti, kuid ei määra selle kõrgust.
   Sektsiooni kõrguse annab tekstiveerg (min-height on ainult alumine piir),
   seega püstpilt ei veni sektsiooni pikaks. */
.phil__media{position:relative;overflow:hidden;background:var(--bg-warm);min-height:clamp(320px,46vw,660px)}
.phil__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phil__body{display:flex;align-items:center;padding:clamp(48px,7vw,110px) var(--gut)}
.phil__in{max-width:640px}
.phil__in .eyebrow{margin-bottom:1.6em}
.phil__in .h2{margin-bottom:1.1em}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(36px,4.4vw,58px)}
.values li{display:flex;flex-direction:column;gap:1.05em;align-items:flex-start}
.values .ic{width:1.9em;height:1.9em;opacity:.85}
.values .eyebrow{letter-spacing:.19em}

/* ---------- kontakt ---------- */
.contact{background:var(--bg-soft);border-top:1px solid var(--line-soft)}
.contact__in{
  max-width:var(--wrap);margin-inline:auto;padding:clamp(56px,8vw,120px) var(--gut);
  display:grid;grid-template-columns:1fr auto;gap:clamp(28px,4vw,60px);align-items:center;
}
.contact__name{
  font-family:var(--serif);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.2rem,5.4vw,4.3rem);line-height:1.05;letter-spacing:.06em;margin:.25em 0 .35em;
}
.contact__act{display:flex;flex-direction:column;align-items:flex-end;gap:1.8em;text-align:right}

/* ---------- jalus ---------- */
.ft{background:var(--bg);border-top:1px solid var(--line-soft)}
.ft__in{
  max-width:var(--wrap);margin-inline:auto;padding:clamp(22px,2.6vw,34px) var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,40px);flex-wrap:wrap;
}
.ft__logo{font-family:var(--serif);font-size:1rem;letter-spacing:.3em;text-transform:uppercase}
.ft__tag,.ft__meta{font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.ft__meta{display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap}
.ft__meta a{transition:color .3s}
.ft__meta a:hover{color:var(--ink)}
.ft__meta .ic{width:1.15em;height:1.15em}

/* ---------- alamlehed ---------- */
.page-hd{padding:calc(var(--hd-h,76px) + clamp(56px,9vw,130px)) 0 clamp(28px,4vw,56px)}
.page-hd .eyebrow{margin-bottom:1.8em}
.page-hd .h1{margin-bottom:.55em}
.page-hd__lead{max-width:52ch;color:var(--ink-soft)}
.page-hd--404 .btn{margin-top:2.4em}

.proj__hd{padding:calc(var(--hd-h,76px) + clamp(48px,7vw,110px)) var(--gut) clamp(34px,5vw,64px)}
.proj__sub{
  margin-top:1em;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.proj__meta{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);margin-top:clamp(28px,4vw,52px)}
.proj__meta span{display:block;font-size:.85rem;letter-spacing:.06em;color:var(--ink-soft)}
.proj__meta i{display:block;color:var(--muted);margin-bottom:.5em;font-style:normal}
.proj__meta a{border-bottom:1px solid var(--line);padding-bottom:1px}
.proj__body{margin-top:clamp(28px,4vw,52px)}

.shots{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vw,46px);padding-bottom:clamp(60px,8vw,120px)}
.shot{width:100%;background:var(--bg-soft)}
.shot.is-tall{max-width:min(100%,780px)}
.shot.is-lead{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-bottom:clamp(6px,1.5vw,22px)}
.shot.is-lead img{width:100%;max-height:84svh;object-fit:cover}
.shot img{width:100%}
.shot figcaption{padding-top:1em;color:var(--muted)}

.nextp{border-top:1px solid var(--line-soft);background:var(--bg-soft)}
.nextp a{
  max-width:var(--wrap);margin-inline:auto;padding:clamp(40px,6vw,88px) var(--gut);
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap;
}
.nextp__t{
  flex:1;font-family:var(--serif);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.6rem,3.6vw,2.9rem);line-height:1.1;
}
.nextp .ic{width:2.2em;height:2.2em;transition:transform .6s var(--ease)}
.nextp a:hover .ic{transform:translateX(12px)}

/* ---------- ilmumine kerimisel ---------- */
.reveal{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1s var(--ease) var(--d,0ms),transform 1.1s var(--ease) var(--d,0ms)}
.reveal.is-in{opacity:1;transform:none}
.card.reveal .card__media img{transform:scale(1.07)}
.card.reveal.is-in .card__media img{transform:scale(1)}

/* lehevahetus */
@view-transition{navigation:auto}
body{animation:pageIn .7s var(--ease) both}
body.is-leaving{opacity:0;transition:opacity .28s var(--ease-soft)}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .work__hd{grid-template-columns:1fr;align-items:start}
  .work__intro .link{align-self:flex-start}
  .strip__in{grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,30px);height:auto;row-gap:clamp(18px,3vw,28px)}
  .phil{grid-template-columns:1fr}
  .phil__media{min-height:min(75vw,520px)}
}
@media (max-width:900px){
  :root{--hd-h:64px}
  .hd__burger{display:block}
  .hd__nav{
    position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;
    gap:1.6em;transform:translateY(-100%);transition:transform .6s var(--ease);
  }
  .hd__nav > a{font-size:.85rem;letter-spacing:.26em}
  body.nav-open .hd__nav{transform:none}
  body.nav-open{overflow:hidden}
  body.nav-open .hd__burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
  body.nav-open .hd__burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .hd.is-stuck{background:rgba(244,239,232,.95)}

  .hero{min-height:88svh}
  .hero__wash{background:
    linear-gradient(to bottom,rgba(248,244,239,.97) 0%,rgba(248,244,239,.94) 38%,rgba(248,244,239,.55) 66%,rgba(248,244,239,.14) 100%)}
  .hero__eyebrow{display:none}
  .hero__lead{max-width:34ch}

  .grid{grid-template-columns:1fr;gap:clamp(26px,7vw,40px)}
  .card__media{aspect-ratio:4/3}
  .strip__in{grid-template-columns:repeat(2,1fr);height:auto}
  .strip__it{flex-direction:column;text-align:center;gap:.7em}
  .values{grid-template-columns:repeat(2,1fr);gap:clamp(22px,5vw,32px)}
  .contact__in{grid-template-columns:1fr;text-align:left}
  .contact__act{align-items:flex-start;text-align:left}
  .ft__in{flex-direction:column;align-items:flex-start;gap:14px}
  .proj__meta{gap:22px 36px}
}

/* ---------- vähem liikumist ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .hero__slide img{animation:none;transform:scale(1)}
  html.has-vs #sc{position:static}
}